Twenty Fourteen の site-content ―― サイトコンテントの幅を広げると少しやることが増える、という話。

 

数日前 Google の「モバイル フレンドリーテスト」というサービスを初めて利用してみた。結果は「フレンドリーです」ということだったが、サーバーとまったく同じテーマと自作スタイルシートを使っている localhost の wordpress でテストしてみたら、これがあまりモバイルフレンドリーじゃないことが分かった。下の図がその証拠。

 

左図は、ブラウザ（Google Chrome と Internet Explorer 11）の横幅を縮小していって、サイズが 1000 px くらいになった時の様子だ。このあたりで左側のサイドバー（Secondary Navigation）が下方に回りこむ。
サーバー側では黄色い四角形の部分 ―― ウィジェット テキストに AdSense の広告ユニットを載（の）せているが、こういう状態ではちょっと載せるのに気が引けてしまう。

 

右図は右側のコンテンツサイドバーが下方に回り込んだ時の様子だ。
この時のサイズは大体 670 px くらい。四角形と、その下に配置しているメニューのほとんどがまともに表示されていないのが分かる。本当は下の図のようになってほしかったのだ。

Twenty Fourteen のデフォルト設定ではこういうことは起きない。
なので、これは Twenty Fourteen に子スタイルシートを追加して、site-content（サイトコンテント）、記事表示領域の entry-content（エントリーコンテント）などの幅を拡大したのと、ついでにコンテンツサイドバーの幅やマージンを変更したために起きた不具合だ。

screen  の  max-width  が 783 px という条件でサイトコンテントとコンテンツサイドバーを 100% 表示に設定しているが（92 ～95 行まで）、これが適切な処理かどうかは自信がない。
なにしろ私はモバイルデバイスを持っていないので、信頼性の高いテストができないのだ。とりあえず  PC  のテストでは状況は改善したので、しばらくはこれで様子を見るつもりでいる。

それと、サンプルの中に [28 %] という値が 3 箇所あるが、これはデフォルトの style.css の中でこの 3 箇所は値をそろえているので、単純にそれに従ってみたということだ。そのことの意味はまったく調べていない（28という数値自体は任意で設定）。

ではちょっとあとがき風に・・・。

先日 WordPress と Twenty Fourteen を更新したら、画面表示がデフォルトに戻ってしまった。
私がサイトコンテント、エントリーコンテントの表示幅を拡大したのは、Twenty Fourteen のモバイルデバイス重視のサイズ設定が不満だったからだが、右側にコンテンツサイドバーを配置すると、デフォルトの表示は配置バランスがきちんとしていて中々良いことが分かった。

それで左右のマージンのバランスに配慮しながら、サイトコンテントの拡大とコンテンツサイドバーのサイズ、マージン等を設定しなおしたのだが、その作業が一段落したあたりで今回の不具合に気が付いた。

それと AdSense の表示についても問題があることが分かった。
そちらの方はなんとか問題の半分は解決したが、まだちょっと難題が残っているので、全部解決してから報告したいと思う。

あと、参考として自作スタイルシートの配置と、それを使うために Twenty Fourteen の  header.php に追加したコードを載せておく。
header.php を保存する時は必ずエンコードを UTF-8 にする。
そうしないとコメントに日本語を使うと文字化けして、サイトの表示がおかしくなることがある。