WordPressの標準テーマの一つであるTwenty Sixteenでは、表示領域が大きくなったとき…具体的には、985pxを超えたとき、singleページにおいて、記事本文の左側にフッターが回り込み、日付などのメタ情報を表示します。Twenty Sixteenの大きな特徴といえるデザインですが、これをなくします。
1カラムではバランスが悪い
Twenty Sixteenの左側フッターは、大きなデザイン上の特徴といえるので、これを消すのは制作者の本意ではないのかもしれません。しかし、この独特のデザインは、特にサイドバーを排除した1カラムにおいて、記事本文と余白が左右非対称になってしまい、たいへんバランスが悪いという印象です（下図）。
左右非対称
これはやはり、サイドバーがない場合についてはあまり考慮されていないのではないかと考えざるを得ません。元々、この左側にフッターが回り込むこと自体、正直けったいな印象があったので、これは改めようと思いました。
親テーマで、985px以上のcssデザインを無視する
しかし、この修正はたいへん難儀しました。WordPressにおいて、テーマのカスタマイズには子テーマを用いるのが定石ですから、当サイトでもそうしているのですが、子テーマでそれらしいところをどういじっても、この回り込みが解除されません。
親テーマのstyle.cssで言えば、14.4節、すなわちだいたい3400行目以降の、@media screen and (min-width: 61.5625em) { } 内の記述が、この回り込みの実装にあたるはずであり、ここの該当箇所らしきところを上書きすればよいはずなのはわかるのですが、どうにもうまくいかない。
まぁ何か間違えていたのでしょうけれど、結局、面倒くさくなって、この61.5625em以降、すなわち985px以降の変更をすべてまるっと無視するというやり方を採用することにしました。「Twentysixteen カスタマイズ 4 〜 最小限度の改変を見極め実施する – Digital Boo」の記事を参考にさせていただき、親テーマのstyle.cssにおいて、以下のような変更を施しました。
/*14.4 ->= 985px*/
@media screen and (min-width: 99961.5625em) { }
/*14.5 - >= 1200px*/
@media screen and (min-width: 99975em) { }
参考記事の案をそのまま採用させていただきました。min-widthをありえない値に……つまり、985px以上でなされる変更を、すべて実質的に無視します。したがって、このサイトはPCだろうがタブレットだろうがスマートフォンだろうが、ほとんど変わらないデザインです。
しかし、特にこれで問題がありません。回り込みをただ解除するだけだと、メタ情報が改行されて表示されるなど、また対応すべきことがありますが（参考「WordPressのTwentySixteenを濃い目にカスタマイズした | 男が満足するときＢｌｏｇ」）、これならばそもそも回り込み仕様にならないので、そういった修正も必要ありません。
ただ、やはり親テーマのcssをいじるのは気になるところです。今後Twenty Sixteenのアップデートがあった場合、忘れずに再修正せねばなりません。うーむ。
それはさておき、修正結果は以下です。
等間隔
左右の余白が等しくなり、等間隔になりました。これで問題ありません。
記事冒頭に記事を投稿した日付の表示
さて、この変更によって、左側に回り込むフッターに表示されていたメタ情報が、記事冒頭で確認できなくなりました。その中でも特に日付は、記事の質を判断するためのもっとも重要な指標の一つです。まぁ、元よりスマートフォンなど表示領域の狭い媒体においては、記事下でしか確認できなかった情報ではあるし（それはそれで問題か）、記事下までスクロールすれば確認できるので、このままでも良いかもしれませんが、私としてはやはり記事冒頭で日付を確認したい。
ということで、template-parts/content-single.phpの、the_content();の前に、以下のような変更を加えました。
// 追記
echo '<p style="font-size: 0.85rem;">[投稿日] '.get_the_date();
if ( get_the_date() != get_the_modified_date() ) {
echo '<br />[最終更新] '.get_the_modified_date();
}
echo '</p>';
the_content();
ついでに更新した日付も表示されるようにしました。最終更新がいらない場合、if{ }の行を削除すればOKです。
コメント