コピペで１分！はてなブログの公式テーマ『Airmail』をスマホ用にレスポンシブ対応させる方法
ゲーマー姉弟の64姉（＠64_ane）です。
はてなブログのデザイン、公式テンプレートの『Airmail』ってものすごく素敵ですね！
しかし使ってみたところ、スマートフォンに対応していないんですねコレ！！
今の時代、スマホからのアクセスのほうが多いのになんてこった……
なので自分でカスタマイズして、レスポンシブ対応させました。
レスポンシブとは簡単にいうと、PCで見てもスマホで見てもiPadで見ても、デザインが崩れずキレイに整って表示されるということです。
PCならウィンドウサイズを縮小・拡大させると、横幅にあわせて見栄えが柔軟に調整されますよ。
スマホでの縦向き・横向きの切り替えでも同じです！
つまりこの可愛い『Airmail』のデザインを、スマホ版にも反映させることができます。
（はてなブログ無料会員でもOK！）
さて、その『Airmail』テーマのレスポンシブ化のやり方をメモしましたので、お困りでしたらコピペでお使いください♪
実際のサンプルはこちら
サンプルとして作ったブログはこちらです。
実はこっそりこんな別ブログを運営していたんです（笑）
完全に自分たち用のメモブログですが……
（あまりに恥ずかしかった記事は非公開にしました笑 ちょっとずつ書き直し中です）
| PCでの見栄え |
|---|
 |
| iPhoneでの見栄え |
|---|
 |
| iPadでの見栄え |
|---|
 |
手順（パソコンでの操作になります）
まずは「Airmail」テーマを設定しよう
管理画面 ＞ デザイン
ここは説明いらないかな？
テーマ一覧の中から「Airmail」を選んでください。
そしてスマホ設定より「レスポンシブデザイン」をチェック
管理画面 ＞ デザイン ＞ スマートフォンアイコン ＞ 詳細設定
「レスポンシブデザイン」にチェックを入れてください。
チェックが入っていれば、上の方に「レスポンシブデザインモードです」の表示が出ます。
最後にCSSをカスタマイズしよう（コピペどうぞ！）
管理画面 ＞ デザイン ＞ スパナアイコン ＞ デザインCSS
ここに下記の長いコードを入れてあげます。
６行目の「/* <／system> */」までは最初から入っている記述です。
そのあとの「/* Responsive: yes */」からを追加してみてくださいね。
/* <system section="theme" selected="airmail"> */ @import "/css/theme/airmail/airmail.css"; /* </system> */ /* <system section="background" selected="default"> */ /* default */ /* </system> */ /* Responsive: yes */ @media (max-width: 900px) { #container {/*便箋全体*/ width: 100%; } #container::before {/*左端の赤青ライン*/ width: 10px; background-image: url(https://cdn.blog.st-hatena.com/css/theme/airmail/images/airmailback.png?version=2bc066b…&env=production); background-size: contain; } #container::after {/*右端の赤青ライン*/ width: 10px; background-image: url(https://cdn.blog.st-hatena.com/css/theme/airmail/images/airmailback.png?version=2bc066b…&env=production); background-size: contain; } #blog-title {/*ヘッダー*/ background: url(https://cdn.blog.st-hatena.com/css/theme/airmail/images/title.png?version=08f5a06…&env=production) no-repeat center; padding: 0; } #title {/*ブログタイトル*/ padding: 80px 1em 0; } #blog-description {/*タイトル下コピー*/ padding: 0 2em; } #top-box {/*パンくずリスト*/ margin: 0 2em 10px; width: auto; } #content {/*メインコンテンツ*/ width: auto; margin: 0; } #content-inner #wrapper {/*記事*/ padding: 0 2em; } .entry-footer {/*記事下のラインの羽を表示*/ background: url(https://cdn.blog.st-hatena.com/css/theme/airmail/images/content-line.png?version=e2a3b9c…&env=production) no-repeat right bottom; } .pager-prev, .pager-next {/*前へボタン、次へボタン*/ display: inline-block; margin-right: 0 !important; } .pager-prev + .pager-next {/*次へボタン隙間調整*/ margin-top: 2em; } #box2 {/*サイドバー周り*/ background: none; padding-bottom: 0; } #box2-inner {/*サイドバー*/ width: auto; margin: 80px 2em 40px; padding: 5em 2em 0 2em; box-shadow: 0px 15px 10px -10px #aaaaaa; -moz-box-shadow: 0px 15px 10px -10px #aaaaaa; -webkit-box-shadow: 0px 15px 10px -10px #aaaaaa; } #box2 .hatena-module {/*サイドバーのモジュール*/ padding-right: 0; width: auto; float: none; } #footer {/*フッター*/ width: 95%; } #footer address {/*フッターのブログタイトルサイズ縮小*/ font-size: 16px; } #footer-inner {/*フッターの文字サイズ縮小*/ font-size: 14px; } .comment-box ul {/*コメント欄*/ width: auto; } } @media (max-width: 400px) { .google-afc-image, .google-afc-text {/*広告のはみだしを調節*/ margin-left: -22px; } }
これで保存すれば完了です！
スマホから見たり、PCの画面を縮小したりして確認してみてくださいね。
※「/*便箋全体*/」や「/*広告のはみだしを調節*/」などの日本語テキストは、目印に書いただけのメモなので、消してもOKです。
消す場合は「/* */」まるごと消してください。
「/*」だけ残ったりすると崩れてしまうので注意！
※CSSに詳しい方は、「/* Responsive: yes */」って書く意味あるの？ とお思いかもしれません。
はてなブログではこの宣言を入れることでレスポンシブ対応が効くようになっています。
なので、この記述をお忘れなく！
※『Airmail』以外のテーマで上記CSSを反映すると、すごいことになると思うので使わないでください（笑）
でも、もしかしたら似てるテーマなら多少、レスポンシブ化の参考にはなるかも＞＜
さらに微調整したかったら
ちょっと上級者向けかもですが、意外とカンタンなので、これを機にCSSにプチ挑戦するのはいかがでしょう？！
ブログタイトルまわりの隙間をもっと広げたい・縮めたいとき
「ゲーマー姉弟のやりたいことメモ」というタイトルや、
「やりたいことや夢を～」というコピーの、横のスキマについて。
スマートフォンの画面サイズは機種によって様々なので、ちょうどいいを見つけるのは難しいかもしれませんが……
私は「iPhone4以降の機種の横幅なら、タイトルが２行で収まるように！」
とだけ決めて、上の画像の通りのスキマ加減にしました。
（もっと横幅の狭いAndroidなどの機種だと、ガタッと落ちて３行にされちゃうと思いますが妥協しました笑）
文字数によってはもっと隙間をとってもいいと思います。
調整したい場合、CSSコードの中からここの部分を確認してみてください。
#title {/*ブログタイトル*/ padding: 80px 1em 0; } #blog-description {/*タイトル下コピー*/ padding: 0 2em; }
#title（ブログタイトル）が「ゲーマー姉弟のやりたいことメモ」にあたり、
#blog-description（タイトル下コピー）が「やりたいことや夢を～」にあたります。
調節した例
こんな感じで、数値を書き換えると隙間を調節できます。
| 例：現状のタイトル |
|---|
| padding: 80px 1em 0; |
「ちょっと窮屈だから、もう少し両脇を空けたいな……」
↓
左右を 1em → 1.5em にしてみよう！
| 例：すこし隙間をあけました |
|---|
padding: 80px 1.5em 0; |
詳しく解説！
paddingというのは、そのまわりの隙間を空ける、という指定です。
padding: 上px 右px 下px 左px;このように時計回りの順番で、上下左右のスキマの数値が指定できるようになっています。
（数値と数値の間には半角スペースを忘れずに！）
こうして４方向それぞれの数値を記述するのが基本の形ですが、省略形が３パターンあります！
(A) 右と左のスキマが同じ数値のとき
padding: 上px 右＆左px 下px;ちょうど#title（ブログタイトル）がその記述になっています。
#title {/*ブログタイトル*/ padding: 80px 1em 0; }
(B) 上と下のスキマが同じかつ、右と左のスキマが同じ数値のとき
padding: 上＆下px 右＆左px;ちょうど#blog-description（タイトル下コピー）がその記述になっています。
#blog-description {/*タイトル下コピー*/ padding: 0 2em; }
(C) 上も下も右も左もスキマが同じ数値のとき
padding: 上＆下＆右＆左px;たとえば「padding: 10px;」と書けば、四方それぞれに10pxのスキマが生まれます。
※ちなみに……上と下のスキマが同じ数値で、左右は違う、というパターン専用の書き方はありません。
その場合は基本の形padding: 上px 右px 下px 左px;で書くしかないです！
「px」「em」の単位について
「80px（ピクセル）」はパソコンの液晶の１ドットが80個分ってわかる。
けど「1em」「2em」って単位は何よ？！
テキストの１文字分のサイズ＝1emです。
#title {/*ブログタイトル*/ padding: 80px 1em 0; }
この場合、ブログタイトル「ゲーマー姉弟のやりたいことメモ」の１文字分の大きさ（1em）のスキマが、左右についているという意味です。
2emなら２文字ぶん、0.5emなら１文字の半分のサイズ、の幅ということですね！
「px」と「em」は、どうやって使い分けるの？
「px」は絶対値（1ピクセルはどう見ても1ピクセル）、「em」は相対値（文字のサイズを基準としている）になります。
詳しく説明していくとややこしい話になってしまうのですが……
今回のスマホデザインだけに対する調節なら、どちらを使っても全然OKです！
「em」のほうが大きさのイメージが掴みやすいと思ったので（文字サイズを参考にすればいいので）、今回は「em」を使っています。
他にも「ここを変えたい！」点や、私が見落としている不具合がありましたら、コメントなどくだされば追記させていただきます。
最後まで読んでくださってありがとうございます！
