TwentySixteen カスタマイズ 5-4 シングルポスト

wordpress

しつこく続くWordpress TwentySixteenの改造、その5 最低限のデザイン改変 の 4 シングルポストです。

シングルポストのちょっとしたデザイン改変

この項「デザイン改変」のコーナーなので、見た目の好みについての改変になります。言うまでもないことですが単に好みの問題ゆえ、あまり大事な話でもありません。

さてすでに「最小限の基本の改変」を済ましたデフォルトのシングルポストにあまり問題を感じません。でも少しあります。

コンテンツワイド

PC表示で最大までウインドウを広げたときのコンテンツワイドです。

何も改造していないデフォルトではこんな感じですね。

デフォルトのシングルポスト

アイキャッチが幅一杯に表示され、コンテンツは読みやすい幅でフロート、余計なメタが左側を陣取ります。文字は読みやすいのですがコンテンツ内にでっかい画像を載せようとしてもでっかくなりません。

で、すでに最小限の改変-メディアクエリで、フロートやメタを吹っ飛ばしていますから現状はこんな感じになっています。

最小限のカスタムを施したシングルポスト

悪くないのですが、テキストの横幅が広くてちょっと読みづらいですね。自分でそうやっといて読みにくいと文句言ってます。

そんなわけで、テキストの幅を狭くしようかと思います。そうですね、現状最大幅は840pxくらいになりますから、670px程度にコンパクトにしたいな、と。

cssでは「entry-content」ですね、margin-right: 0;
margin-left: 0; になっていますがこれを弄ってしまうと画像も全部、何もかもがそれに準じてしまうので、何とか字だけ幅を狭くしたいんですよね。

「.entry-content p」で指定しても駄目なんです。画像にも<p>がついたりしますから。簡単そうに見えて難しいなとしばし考えます。

twenty-sixteenの作者は「:not」が大好き、と以前暴露しました。cssは「:not」で溢れています。そうだ、では自分もnotで乗り切ろう。

そこでcssでは次のように指定してみました。

「.single .entry-content p:not(.gallery):not(img):not(figure)」です。何してるかというと、「.single」内の「.entry-content」の中の「p」に対して「galleryじゃない、imgじゃない、figureじゃない」と条件つけてるわけです。

twenty-sixteenの作者が大好きは「:not()」は、このように並列に書くことができるんですね。便利です。使いたくもなります。しかしcssがnotだらけになると後々わけがわからなくなりますよ。あれ〜、どうしてcss効かないんだろうってなったら、どこか遠くの忘れていたような場所でnotされていたりとか、そういうことが頻繁に起きてしまいます。気をつけて使いましょう。

ということで、notで条件つけたpだけ幅を少し狭くして、文字を読みやすく、でっかい画像も載せられるという案配に改変しました。

テキストだけ幅を狭くしたシングルポスト

シングルポストのentory-footer

メタ情報が載るentory-footerも、特に気にならなければ何も変更する必要ありませんが、筆者の場合、運用するサイトによってはここを大きく変えねばならない時があります。カスタムポストやタクソノミーを使っていたり、親子カテゴリーを何とかしたかったり、初稿日付をいれたかったりいろいろです。

entory-footerに現れるメタ情報は、twenty-sixteenの場合、「inc」フォルダに入っている「template-tags.php」の ternty-sixteen-entry-meta あたりに指定されています。

これを改変するには、子テーマにtemplate-tags.phpをコピーして弄っても無駄で、functions.php で上書きしてやらねばなりません。

template-tags.php の メタ指定

さてデフォルトでは最初に twentysixteen_entry_meta が登場、この中で twentysixteen_entry_date、twentysixteen_entry_taxonomies などを読み込んでます。

次にtwentysixteen_entry_dateやtwentysixteen_entry_taxonomiesなどの定義が続きますね。

ついでにtwentysixteen_post_thumbnail や twentysixteen_excerpt なんかも指定されています。

それぞれ、元々の関数からtwentysixteen専用のタグに作り上げています。便利なような、余計なことしやがってなような、微妙なところです。

このあたり、サイトに応じていじくり倒すことになりますが、「基本的で最低限」を掲げている現時点ではあまり弄りません。

要所要所見てみると、例えば

てなところでは、表示を「ポスト」に限定していたりしますね。カスタムポストや固定ページでも表示したいときはこんなところに注意を向けます。

メタ情報に筆者のアイコンがついたりしますが、そのサイズがでかくて気に入らないという人もいることでしょう。

avatar_size すか、こういうところに指定がありますね。この数字を弄る程度なら「最低限度のデザイン改変」と言えなくもないですね。筆者アイコンをでかく表示したいなんて事はありませんから。

あと、コメントに関する記述も私個人は不要なので消し去ります。基本、どのサイトもそうです。ですのでやっぱり「最低限度」の部分はありますね。ちょっと触ってみようかなと。

触りました。

digitalbooの例

多少の改変に加えて、authorだけを抜き出したりリンクなしの日付なんかをお茶目に作ったりしています。何かどこかで使うんですね。まああの、載せましたけど、ほどほどのご参考に。

全部ひっくるめてガチガチに定義されている twentysixteen_entry_meta なんですが、ばらして各項目を好きなように並べて使うのも一つの手です。<span>で項目を区切ってcssで上手く定義されているのは感心しますのでこういうのは生かすと便利です。

このあたりをベースに、各運用サイトではさらにカスタムしております。

 

コメントを残す