【カスタム＆レスポンシブ】モバイル・ファーストについて【スマホ優先ＳＥＯ】
さあ、今日も戯れ言《
モバイル・ファースト
今日の話は、まったくもって大した話ではない。
タイトルにある通り『モバイル・ファースト』という考え方、それに従って、サイトデザインをマイナーチェンジさせた内容（概要）についてである。
カスタムについての詳細なコード等は各自でググって欲しい。
基本的に制作者の著作物なので、この記事内での記載は避けたいと思う。あくまで参考にして利用させて貰っている立場なのだ。
ブロガーはＰＣでの作業が多い
前置きはここまでにして。
そもそも『モバイル・ファースト』など、ほとんどのブロガーが承知の事実だ。
しかし、多くのブロガーはモバイルではなくＰＣでブログ作業をしている。
よほどシンプルな日記ブログ（それもテキストオンリー）でない限り、記事の作成にはＰＣが必須だ。いわゆるノウハウ系を記事にしているブログには、ハイスペックなＰＣで作業していると公開している方もいるが、ブログ記事程度ならば型落ちのミドルクラスで充分だ。
タブレット＋キーボードで作業しているブロガーも、今では多いかも。
ただ、ブログというメディア（媒体）は、書き手よりも読み手の方が圧倒的に多くなければならない。備忘録や個人的な日記としてブログサービスを利用しているユーザーは一先ず置いておいて、だ。
特に収益化を睨んだ場合となると、いかに読者を獲得していくのかが、＝ブログの成長、と定義しても語弊はないくらいだろう。
ここで『多くのブロガーはＰＣで作業している』という一文に戻る。
無意識下でＰＣファーストに
自分もそうなのだが、どうしても自分のブログにはＰＣで向き合う時間が多くなってしまう。Googleアナリティクスの設定で、自分のPCは除外する設定にしてはいても、スマホにまで除外設定をしていない事もある。
だから、つい『PC上での見栄え』に意識を持っていかれがちだ。
油断すると『PCファースト』になってしまう。
けれど今の時代、読者（閲覧者）の多くは、スマホやタブレットといったモバイル端末からブログをアクセスし、読んでいる。
現状だと、８割以上かもしれない。
それくらいスマホが人々の生活に浸透しているし、性能も向上しているのだ。
Googleの中の人も『モバイル端末でのデザインを重視する』という、いわゆる『モバイル・ファースト』を表明している。しかし、今までの僕はレスポンシブ・デザインのテーマを使用してはいたが、スマホでの見え方にそこまで拘っていなかった。
サブブログでの失敗
PC上での見栄えは気に入っていたのだが、スライダーを設置した為に、スマホでの見え方が『上５０パーセントがヘッダー画像、下５０パーセントがスライダー（１枚表示）』となっていた。大惨事だ。
一応、スライダーの１枚目にサイトマップがくる様にはしていたが、画面を下にスライドさせないと、グローバルナビゲーションや記事一覧が見えないのだ。
PC上ではスライダー５枚表示、スマホだと１枚表示、という設定だったのだが、どうしてもスマホで２枚表示か３枚表示にして、サイズを縮める事ができないでいた。
ググって１番上に検索されるコードを使わせて貰ったのだが。CSSの数字をいくら弄っても、変更できなかった。
というか、スマホ表示だとヘッダーの画像が大き過ぎだ。
某『や●おん！』のヘッダー画像（スマホ表示）くらいで問題ないだろう。
コンパクトにしようとすると、レスポンシブを解除しなければならないが、SEOというか、はてなブログの画一的なスマホデザインに抵抗があるので、それは嫌だ。
そんなワケで、試行錯誤した。
先ずはこのサブブログからどうにかしようと。
はてなブログだと、ヘッダー領域のサイズをCSSで縮小すると、スクリプトが干渉し合うのか、グロバールナビゲーションのトグル動作に不具合が起きてしまう。
よって、思い切ってヘッダー領域を非表示（CSSで可能）にして、ヘッダー下のHTML領域に、画像をリンクさせた。
そしてスライダーも別のCSSを利用する事で、スマホでの３枚表示を実現した。代償として、何故かPC上でも最大３枚で固定されてしまったが、ユーザビリティを考えると５枚以上にしても、使い勝手が悪化するだけだろうと、割り切った。
スポンサーリンク
――で、PC上ではこんな感じとなる。
ＰＣでのサブブログ
う～～ん、ヘッダー画像が大きい！
こんなに主張してくれなくとも良いのだが。
まあ、これはこれで慣れるだろう（※後に表示幅を制限してヘッダーが大きくなり過ぎないように設定できた）。
問題はスマホ表示になった際、どう見えるかだ。それが全てだ。レスポンシブなので、そのままPC上で解像度を変化させていく。これがそのままスマホでも適用される。
スマホでのサブブログ
いいじゃないか！
スマホを縦型で見た場合での『ヘッダー画像＋スライダー＋グローバルナビゲーション』が画面の５割以下、という自分の課題をクリアーできている。
実際のスマホでのスクリーンショットはというと。
流石、レスポンシブだ。
ここまでやったら、ついメインブログにも手を加えたくなる。
これもヘッダー画像が無駄に大きいのだ。ついでにスライダーも付けてみよう。
ただし、メインはサブとはやり方（使用するコード）を変えた。
ヘッダー画像を余白無しで表示させる方法を選択する。それを、CSSでスマホ画面に最適化させてみた。
上に戻るボタンもそうだが、基本的にメインとサブでは違う方法を試したいのだ。
メインブログでの表示
３カラム状態
やはりヘッダー画像がでかいな。その分、インパクトがあると思うとしよう。
スライダーの画像とリンクは現時点で未設定となっている。
そんでもって、タブレット等での見え方をテスト――２カラムへ変化させると。
２カラム状態
いいバランスかもしれない。
ヘッダー画像の大きさも、そんなに気にならなくなった。
そして本命のスマホ表示に移ろう。
スマホでのメインブログ
さて、スマホでは実際どうかな？
理想的になった。狙い通りといえよう。
やはりヘッダー画像は小さい方が、スマホでは映える印象だ。
これからの時代、スマホでの閲覧を前提とした『レスポンシブ』でのデザインが、『コンテンツ・ファースト（コンテンツ・イズ・キング）』と並んで、最も重要なSEOとなるだろう。
レスポンシブでないテーマを使っている方は、是非レスポンシブに変更して、スマホでのデザイン（見え方）に拘ってみて欲しい。