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（エントリーコンテント）などの幅を拡大したのと、ついでにコンテンツサイドバーの幅やマージンを変更したために起きた不具合だ。
という訳で、下のコードウインドウにこの現象を回避するために書き直した子スタイルシートのサンプルを載せておく。
エントリーコンテントなどの最大幅は最初 615 px に設定してあったのを 605 px に縮小した。あと、Media Queries に配慮していなかったのが間違いの始まりのようなので、今度は「とりあえあえずこのくらいかな？」という表示幅のあたりに条件を付けてみた。
追記：2016 年 3 月 14 日
子スタイルシートのサンプルを現在使っているものに差し替えた。
コメントと本文の説明内容の間に食い違いがあるが、古い記事ということで大目に見て頂きたい。なお、現在 local でテストしている custom-style.css ではこの方法は使っていない。
/* 英数文字の UpperCase（大文字指定）を解除する。*/
.entry-title {
font-size: 28px;
font-weight: 300;
line-height: 1.0909090909;
margin-bottom: 12px;
margin: 0 0 12px 0;
text-transform: none;
}
.widget .widget-title {
font-size: 14px;
font-weight: 700;
line-height: 1.7142857142;
margin: 0 0 24px 0;
text-transform: none;
}
.list-view .site-content .entry-title {
clear: none;
font-size: 20px;
font-weight: 900;
line-height: 1.2;
margin-bottom: 6px;
text-transform: none;
}
.featured-content .entry-title {
font-size: 18px;
font-weight: 300;
line-height: 1.3333333333;
margin: 0;
text-transform: none;
}
/* コンテンツ表示幅を拡張する（デフォルト：474px）。 */
.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
margin: 0 auto;
max-width: 605px;
}
.site-main .mu_register,
.widecolumn > h2,
.widecolumn > form {
margin: 0 auto 48px;
max-width: 605px;
padding: 0 30px;
}
.comments-area {
margin: 48px auto;
max-width: 605px;
padding: 0 10px;
}
.contributor-info {
margin: 0 auto;
max-width: 605px;
}
.archive-header,
.page-header {
margin: 24px auto;
max-width: 605px;
}
.post-navigation,
.image-navigation {
margin: 24px auto 48px;
max-width: 605px;
padding: 0 10px;
}
/* ********************* Media Queries ******************* */
/* コンテンツサイドバー（右側のバー）の表示設定。 */
/* とりあえずモバイルフレンドリー風な表示になる（2015/04/27）。*/
/* ************************************************************ */
@media screen and (max-width: 783px){
/* コンテンツサイドバーを意図的に下側に回り込ませる。
どちらか一方の設定だけでもデフォルトの表示領域に戻るが、
サイトコンテント（テキスト表示領域）の右隣に配置しない
ということを明確にするため、あえて clear を入れてある。
この設定は下の site-content の設定とペアになっている。 */
.content-sidebar {
clear:left;
width: 100%;
}
/* テキスト表示領域の中心を画面中央に設定する。 */
.site-content {
margin-left:auto;
margin-right:auto;
}
}
@media screen and (min-width: 1080px){
/* コンテンツサイドバー表示用のスペースを確保する。*/
.site-content {
margin-right: 28%;
}
/* コンテンツサイドバーの幅を調節する。*/
.content-sidebar {
margin-left: -28%;
width: 28%;
}
}
screen の max-width が 783 px という条件でサイトコンテントとコンテンツサイドバーを 100% 表示に設定しているが（92 ～95 行まで）、これが適切な処理かどうかは自信がない。
なにしろ私はモバイルデバイスを持っていないので、信頼性の高いテストができないのだ。とりあえず PC のテストでは状況は改善したので、しばらくはこれで様子を見るつもりでいる。
追記：（2015/05/04）
Google Chrome のデベロッパーツールにモバイル・デバイスのエミュレータがあることが分かった。
ちょっと試してみたが、簡単な操作でデバイスの違いによる自サイトの表示状態が分かるので、とても参考になる（画面の再読み込みが必要）。
Chrome の画面右上の [Google Chrome の設定] ボタンを押してメニューを表示させ、[その他のツール] ⇒ [デベロッパーツール] と進んで画面を表示させることができる。
それと、サンプルの中に [28 %] という値が 3 箇所あるが、これはデフォルトの style.css の中でこの 3 箇所は値をそろえているので、単純にそれに従ってみたということだ。そのことの意味はまったく調べていない（28という数値自体は任意で設定）。
ではちょっとあとがき風に・・・。
先日 WordPress と Twenty Fourteen を更新したら、画面表示がデフォルトに戻ってしまった。
私がサイトコンテント、エントリーコンテントの表示幅を拡大したのは、Twenty Fourteen のモバイルデバイス重視のサイズ設定が不満だったからだが、右側にコンテンツサイドバーを配置すると、デフォルトの表示は配置バランスがきちんとしていて中々良いことが分かった。
それで左右のマージンのバランスに配慮しながら、サイトコンテントの拡大とコンテンツサイドバーのサイズ、マージン等を設定しなおしたのだが、その作業が一段落したあたりで今回の不具合に気が付いた。
それと AdSense の表示についても問題があることが分かった。
そちらの方はなんとか問題の半分は解決したが、まだちょっと難題が残っているので、全部解決してから報告したいと思う。
あと、参考として自作スタイルシートの配置と、それを使うために Twenty Fourteen の header.php に追加したコードを載せておく。
header.php を保存する時は必ずエンコードを UTF-8 にする。
そうしないとコメントに日本語を使うと文字化けして、サイトの表示がおかしくなることがある。
自作スタイルシートの配置：
- \wp-content\themes\twentyfourteen\css\[自作スタイルシートの単純ファイル名]
※下のコードウインドウで custom-style.css というのがこのサイトで使っている自作スタイルシートのファイル名だ。
- \wp-content\themes\twentyfourteen\header.php 追加箇所：
※ header.php は [ head ] 要素だけを抜粋。追加箇所は 11行目～13行目。
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
<!-- 2014/12/2 Added by Bonkure.
2015/04/24 カスタムスタイルシートを custom-style.css に変更。-->
<link rel="stylesheet" href="<?php bloginfo('template_url') ?>/css/custom-style.css">
</head>