初心者で「れすぽんしぶってなに？」「それって美味しいの？」って方もいらっしゃると思います。
私も少し前までそうでした。
レスポンシブ化とは、色んな種類の機器（PCとかスマホとか古い携帯とか）の画面サイズ勝手に合わせてくれるように対応することです。
この対応をしたものを「レスポンシブデザイン」なんて言い方もします。
なぜ、同じデザインを使うかというと見る方にとって紛らわしくないからという事が挙げられます。
でも本当は、解像度によってイチイチ画面を作り分けるのが面倒だからです。
みんな同じページを観てくれれば、１つのページを作るだけで済みます。
同じURLを使う事で、SEO的にも良いらしいです。
さくらブログは、seesaaブログと同じで勝手にスマホ用のサイトが作られます。
スマホでアクセスするとスマホ用のページに飛ばされるようになっています。
さくらブログの管理画面に【PC】【ケータイ】【スマートフォン】というタブがあると思います。
このタブで切り替えて、１つのブログでそれぞれの機器に合わせた、別ページが作れるようになっています。
このタブを切り替えてそれぞれのページを作ってやれば、機器に特化した見やすいページが作れます。
ただ、面倒くさい！
ブログのデザイン変えたり、改造したりする度に、いちいち携帯用とスマホ用のページも更新するのは手間でしかありません。
ＰＣページを作っただけで何もしていなければ、勝手にケータイとかスマホ用のページが割り当てられて表示されています。
今どんな状態かスマホをお持ちの方は、見ておくと良いと思います。
イメージと違うスマホページが表示されていると思います。
レスポンシブ化は、良い事ばかりかと言うとそうでもありません。
PC用のページを見せる事になるので、自ずと重くなります。
ブログを見に行ったら微妙に読み込みに時間が掛かるとか、表示が重くなるとかいう事が起こります。
レスポンシブ化というのは、PC用ページを画面の解像度に合わせて表示しますよ！という表示の最適化に過ぎません。
そりゃ、重くなりますよね・・・。
このように細かなデメリットがあります。
３種類のレイアウトを管理する苦労を背負わない代わりにこまけぇ〜事には目を瞑りましょう！
レスポンシブ化する手間など屁みたいなものです。
１度設定してしまえば、後で弄る必要はありません。
メリットの方が遥かに大きいと思うので私はやる事にしました！
整理すると、現状の何もしていない状態が下記の形です。
パソコンで見る → パソコン用のページが表示
スマホで見る → スマホ用のページが表示
携帯で見る →ケータイ用のページが表示
レスポンシブ化で、こんな風にして行きます。
パソコンで見る ┐
スマホで見る ┼ →解像度自動可変のパソコン用ページ
携帯で見る ┘
まず、スマホサイトを無きものに！
スマホでさくらブログを観るとスマホ用のページに飛ばされます。
これでは、いくらパソコンページをカスタマイズして、スマホ解像度に対応しても意味がありません。
そこで、スマホページへの訪問者を、強制的にパソコンページに飛ばすよう設定します。
さくらブログ管理画面の【デザイン】→【スマートフォン】タブ→【コンテンツ】をクリックします。
中身の【記事】とか【過去ログ】なんかのコンテンツブロックを全て削除します。
この画像のように【自由形式】コンテンツを１個だけヘッダーの位置に配置します。
【自由形式】をクリックして、ウインドーを表示させ、本文に下記をコピペします。
/* ▼-----スマホページからPCページへ強制移動-----▼ */
<SCRIPT LANGUAGE="JavaScript">
<!--
document.cookie = 'force_pc=1; max-age=15768000; path=/';
document.cookie = 'force_sp=0; max-age=15768000; path=/';
location.href=location.pathname;
setTimeout("autoLink()",1000);
// -->
</SCRIPT>
/* ▲-----スマホページからPCページへ強制移動 ここまで-----▲ */変更が終わったら、下にある【保存】を押してウインドーを閉じます。
実際に実験されていらっしゃる、こちらのサイトを参考にさせていただきました。
この状態で、１度スマホからさくらブログのページを閲覧してみましょう。
何事も無かったように、パソコンページへ飛ばされれば成功です。
「スマートフォン専用ページを表示」案内を消す
スマホでパソコンページを見ると、画面上に「スマートフォン専用ページを表示」というお節介な案内が表示されます。
せっかく強制的にスマホページからパソコンページへ飛ばしてるのに、意味がありません。
これも消しちゃいましょう！
パソコンページでの表示なので、今度は【PC】タブのCSSに追記します。
さくらブログの管理ページで【PC】タブを選んだ状態にします。
【デザイン設定】→適用されているタイトルデザインをクリックします。
CSSが表示されますので、１番下までスクロールして、下記を追記してください。
/* ▼-----「スマートフォン専用ページを表示」消す-----▼ */
#iphone-link{display: none !important;}
/* ▲-----「スマートフォン専用ページを表示」消す ここまで-----▲ */追記したら【保存】を押してください。
スマホでさくらブログを確認してください。
画面上の「スマートフォン専用ページを表示」案内が消えていれば成功です。
さぁ、いよいよレスポンシブ化します
【PC】タグが選ばれている状態で【デザイン】→「HTML」→適用されているHTML名をクリック。
４行目くらいにある<head>から、下にある</head>までの間に、以下を追記します。
</head>のすぐ上で、良いと思います。
<!-- ▼レスポンシブ化▼-->
<!-- ↓Viewport の追加-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<!-- ↓IE8 対策-->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<!-- ▲レスポンシブ化 ここまで▲-->追記が終わったら【保存】を押してください。
次にCSSにメディアクエリを追加します。
これは、解像度によって表示を変えてね！という指示になります。
【デザイン】→【デザイン設定】→適用されているテーマタイトルをクリック。
CSSが表示されますので、一番下に行って、下記を追記してください。
/* ▼-----レスポンシブ化メディアクエリ-----▼ */
@media screen and (min-width : 0px) and (max-width : 767px){
#container{width: 100%}
#content{width: 100%}
.blog{width:100%; margin-left:auto; margin-right:auto;overflow:hidden}
#links{width: 100%}
}
/* ▲-----レスポンシブ化メディアクエリ ここまで-----▲ */
メディアクエリとは、使用する機器の画面解像度によって自動的に表示設定を切り替えてくれる機能です。
上記CSSでは、解像度が0〜767ピクセルは、その下の設定で表示設定を見るように設定しています。
その下の100%と書かれている設定は、横幅一杯に表示してね、と指示されています。
767px以下って結構画面が小さいひと昔の端末なので、できるだけ横幅一杯に表示して見やすくしてやります。
通常は、パソコン用のレイアウト表示をしますが、解像度の横幅が768ピクセル以下になると、サイドバーが記事の下に落ちて縦長になるようにしています。
この切り替え解像度をブレークポイントと呼ぶ事もあります。
こちらのサイトを参考にさせていただきました。
１行づつ丁寧に解説されており、非常に参考になりました。
このメディアクエリ設定をすると、画面の横幅によって文字も画面端で折り返すようになります。
ブラウザの横幅を変えると、パラパラと文字が画面端で自動折り返しします。
何気にスゲーってなります。
ＰＣでご覧の方は、ブラウザの横幅をゆっくり縮めてみてもらえれば確認できます。
（注意点！）
グローバルメニューなどメディアクエリ設定が他にもある場合、CSSの中でこちらを下に追記するようにしてください。
CSS内では、優先指定命令をしていない限り、上より下に配置されたものが、優先されます。
配置が逆になると、上に記載されたメディアクエリが上手く動かない可能性があります。
レスポンシブ化作業、お疲れさまでした！
そして、参考にさせていただいたサイト様に感謝です。
スマホ表示がどう見えるか確認する方は、ブックマークしておくと便利です。
びっくりして、この記事を参考にしましたら、戻ってきてくれました。良かった〜ありがとうございます。
役に立ったようでなによりです。
レスポンシブって少し難解ですよね・・・
私も同じように映らなかった経験がありました。
誰もが通る道なのかもですね〜。