Google から「ページがモバイルフレンドリーではありません」という警告を受けていて、かねてから課題であったレスポンシブ対応がほぼ完了しました。
「ほぼ」というのは、細かいところでまだ調整しなければならないことがあり、今後改善していく必要があるからです。ともかく、ここでレスポンシブ対応の過程をまとめておきます。
以前のサイトは、Wordpress の Twentytwelve というテーマをカスタマイズして作りました。Twentytwelve 自体レスポンシブ対応ができているのですが、このように大幅な改造をしていたためレスポンシブとならなくなっていました。
ヘッダーとトップページのこのイメージが気に入っていたので、これを残しながらレスポンシブ対応をすることを考えました。
最初実施したことが、Twentytwelve の子テーマに Bootstrap を導入することでした。しかし、大幅な改造をしているために Bootstrap を導入しても調整がうまくいかず、最終的に Bootstrap ベースの WordPress テーマに移行してから改造をすることにしました。
いろいろな Bootstrap ベースのテーマを試してみましたが調整が難しく、結果として「Lightning」を選択しました。それが現在のサイトです。改造の過程で様々なことを発見したので、それをまとめておきます。
Lightning には子テーマ用サンプルが用意されている
Litning 公式ページの「設定ガイド」を開くと、次の子テーマ用のサンプルが用意されてダウンロードできるようになっています。
次のファイルがダウンロードされるので、子テーマのフォルダに収めます。
特徴的なのは、style.css に @import url(); の指定がないことです。Lightning は元の style.css をインポートせずに使うようになっています。もっとも後に記すように、Lightning の style.css は特殊な場所にあります。
front-page.php が存在する場合は、フロントページに固定ページのテンプレートを適用できない
最初陥った落とし穴がこのことでした。
WordPress は、固定ページ用のテンプレートファイルを作成して、コメントとして 例えば
/* Template mame: Top */
というようにテンプレート名 (Top) を記述しますと、管理画面のフロントページにしようとている固定ページのテンプレート選択欄にこの「Top」が表示されて選択できるようになります。しかし、テーマに front-page.php が存在する場合は、ここで選択したテンプレートは適用されず、あくまでも front-page.php でフロントページが表示されるようです。詳細は下記にまとめました。
Twentytwelve の場合は、front-page.php がテーマに存在しないので、作成した独自のフロントページ用テンプレートを使うことができました。これにははまりました。他の Bootstrap ベースのテーマでも同じことがあり、このことに気が付くまでに1週間ほどかかりました。考えてみれば、Wordpress のテンプレート階層から当然のことですが気が付きませんでした。最終的に Lightning の front-page.php を子テーマにコピーして、これに改造を加えました。
Lightning のスタイルシートは特殊なところにある
通常テーマのスタイルシートはテーマフォルダの直下に style.css として存在します。ところが Lightning のこの style.css を開いてみると、このように何も書かれていません。
それではどこにあるかというと、特殊なところにあります。サイトのソースを表示してみると、
このように、テーマの下に design_skin/origin/css/style.css と記述されています。これを開いてみると細かな CSS が書かれています。Bootstrap の定義もこの中にあります。
ブラウザ幅を狭くしたときに、メニューの折り畳みができない
ブラウザ幅を狭くしたとき、メニューが折り畳まれてハンバーガーバーメニューが表示されないのです。幅を狭くしたときメニューが消えるようにはなったのですが、代わりに表示されるはずのハンバーガーバーメニューがどこにも見当たりません。Bootstrap の定義が特殊なのではないかと、Bootstrap の公式ページからダウンロードした bootstrap.css と先ほどの Lightning のスタイルシートの Bootstrap 定義部分を比較してみましたが、違いはなく、公式の bootstrap.css と同じに書かれているようです。
悩んだ末、Google Chrome のWebデベロッパーツールを使用してみました。Windows の場合は F12 キーを押すことで、テスト対象画面の右側に表示されます。（他のブラウザでは使えません）
そして、ハンバーガーメニュー表示の領域である navbar-header クラスを指定した部分をクリックすると、確かにその部分がマークされて、幅と高さも表示されています。
そして、ハンバーガーバーメニューを記述した navbar-toggle クラス指定の部分をクリックすると、うっすらとハンバーガーバーメニューが表示されています。この部分をマウスオーバーしてみると、リンクを示す手のひらが表示されます。これは、ハンバーガーバーメニューが表示されていないだけです。そこで、CSS を見てみることにしました。
HTML の右側に CSS が表示されています。これを見ると、button の background-color も border も trasparent となっています。これでは表示されません。ウインドウ の幅が広い時に transparent になるのならわかりますが、今 transparent になっているのはおかしです。
この部分にマウスを当ててみると、シフトキーを押してクリックすると色を指定できるようです。試しにやってみましょう。
カラーピッカーが現れて、色を指定すると表示されました。
とりあえず、スタイルシートのこの部分を変更してみることにします。
先ほどの Bootstrap の関連部分(.navbar-toggle と .navbar-toggle .icon-bar)をコピーして子テーマに移し、transparent となっているところに色を指定すると下記のようになります。
とりあえずこれでハンバーガーバーメニューは表示されるようになりましたが、疑問が残ります。
問題は、このハンバーガーバーメニューをクリックすると、縦にメニューが展開されず、元の横に広がるメニューになることで、これからの課題です。
こうして、不完全ながらもとりあえずレスポンシブ対応にはなりました。
トップページの画像の乱れを調整
横幅の狭いウインドウで、トップページの画像が乱れてしまいます。
いろいろと試行錯誤した結果、メイン画像部分を囲んでいる次のクラス wrapper を外すことで解決できました。
wrapper クラスをはずし、メイン画像の上に置いているオブジェクトのマージン、高さ、フォントサイズを、%による相対指定することで、トップページの画像を乱れを調整することができました。
Google の警告が消える
レスポンシブ対応に移行してから4日目、「ページがモバイルフレンドリーではありません」の警告が消えました。
