こんにちわ！冒険者Ｌｖ．１です。
あなたが使っているブログのテーマはレスポンシブデザイン対応ですか？
私の使っているはてなブログ（インストール型）テーマ『ＤＵＤＥ』は初期状態では対応していませんでした。
ですが、ソースコードを追加してカスタムすることにより対応できたのでレスポンシブ化にする方法を紹介したいと思います。
レスポンシブデザインとは
私を含め初心者の方は何のこと？ってなりますよね。
簡単に説明すると
ユーザーの デバイス（パソコン、 タブレット、モバイル、非視覚的 ブラウザ）に関係なく、同じ URL で同じ HTML コードを配信しますが、画面サイズに応じて（つまり「レスポンシブ」に）表示を変えることができます。 ｂｙ Google
という説明で、もっと噛み砕いて説明すると、PC用・スマホ用などで別々にカスタムコードを挿入しなくてもPC用のカスタム内容だけで勝手にスマホも同じようにカスタム状態になるってこと。しかも自動でサイトサイズを調整してくれるから見た目もきれい。
レスポンシブデザインかチェック
＜はてなブログユーザー＞
今自分の使っているテーマ（テンプレート）がレスポンシブデザイン対応か・非対応か確認する簡単な方法はPCで、
[ダッシュボード（管理画面）]→[デザイン]→[スマートフォン]に進み
一番下の項目[詳細設定]の「レスポンシブデザイン」にチェックを入れてみてください。
上部にある『変更を保存する』をクリックしてください。
次にスマホで自分のブログサイトを開いてみてください。バランスよくサイズ調整がされていて問題なく観覧できれば対応です。
もし、PC画面を縮小して無理やり表示しているような画面なら文字も小さいので画面を拡大しないと見えない状態になります。このような場合は残念ながらレスポンシブ非対応です。
私も最初このような表示になったので諦めていたのですが、いろいろ検索していると希望の記事を見つけることができました。
カスタマイズ手順
上の参考記事を読んでいただいてもできますが、難しい説明文章で戸惑うかもしれないので、細かい説明を省いてやることだけこっちに書きますね。仕組みや意味もちゃんと理解したいのなら是非参考記事もご覧ください。
手順①
[管理画面]→[デザイン]→[カスタマイズ（スパナマーク）]に行き、一番下の『デザインCSS』を開いて一番上の列に以下のコードをコピペ（コピー＜複製＞ & ペースト＜貼り付け＞）してください。
/* Responsive: yes */
手順②
次に同じく『デザインCSS』を開いて、以下のコードを一番下にコピペしてください。
これまでカスタマイズしたことがある方は他のコードも入力していると思いますが、その続きにコピペでOKです。
@media (max-width: 767px) { /* グローバルヘッダとの隙間をなくす */ #container { padding-top: 0; } /* 左右のマージンを相対指定に */ #content { margin-left: 3.125% !important; margin-right: 3.125% !important; } /* 横幅の調整 */ #container #content { width: auto; } #blog-title-content { width: auto; text-align: center; /* ブログタイトルを中央揃えに */ } }
手順③
最後に[カスタマイズ（スパナマーク）]の右側にある[スマートフォン（スマホマーク）]を開き、一番下の項目『詳細設定』の「レスポンシブデザイン」にチェックを入れてください。
PC上の画面ではプレビュー画面がスマホ用からPCと同じ画面に切り替わったと思います。
上部の「変更を保存する」をクリックして完了です。
確認
スマホから自分のブログサイトにアクセスしてください。
画面の表示のされ方がPC画面を圧縮したような状態からサイズ調整された見やすい画面になっていたら成功です。
まとめ
今回私が使っている『DUDE』テーマをレスポンシブ化にしたよという記事ですが、レスポンシブ化に使ったソースコードをみてみると、「DUDE」指定はどこにも表記されていないので、他のテーマでもできるかも？と思い紹介しました。
ただ私はプログラミング初心者ですので、他のテーマで通用しなかったら本当に申し訳ありません。
レスポンシブ化にすることでGoogleの巡回がスムーズになるのでそれはメリットになります。
PC版とスマホ版でそれぞれ違うコード設定をしていると巡回も２度手間になるって感じですね。
ただこんな風にGoogleにやさしい作りにしてあげてるからって検索順位には影響でないと、Googleは断言していますが。
実際にやってみて私の中の一番のメリットだったのは、
カスタマイズをしていくうちに、ソースコードをいろんなところに貼っていくと無料版では限界が来るのは早かったんです。
有料版にならないと貼れない場所（スマホカスタマイズの記事上・下やHTML）があって、したいカスタマイズが出来ないことが多々ありました。
それがレスポンシブ化してPCの方のカスタマイズだけでスマホ側も同じ様に反応してくれるので、できるカスタマイズが一気に増えました。
まだまだカスタマイズしたい箇所はたくさんありますが、今の所無料版でも満足いくカスタマイズができています！！
