TwentySixteen カスタマイズ 5 〜最低限度のデザイン改変を実施する： 5-3 アーカイブ 編です。ブログと言えばシングルページとアーカイブ。アーカイブページに何を求めるのか、それは人それぞれ。
前の記事 5-2 サイト全体のデザイン設定、ヘッダー のつづきです。
前の記事: 5-2 サイト全体のデザイン設定、ヘッダー
5-3 アーカイブ
さて親styleでは単に content 扱いの、肝心のエントリーに関するベーシックなデザインです。twentysixteenを眺めていると理解しがたいデザインが施されていることが判ります。
まずアーカイブなのにサムネイルが巨大です。シングルページと同じような扱いです。その上、本文が全部現れています。シングルページと同じです。もちろんmoreを入れていれば分割されますが。シングルページとはこれにコメントが出現するだけの違いですね。
アーカイブと言ってもイメージするところが人や文化によって異なります。アーカイブだけどコンテンツがフルに現れるのも、考えようによっては間違っていないかもしれません。つまりだらだらーっと繋がったブログの体ですね。
昔ブログという形式がなかった頃、だらだらーっと連なった駄文をhtmlで書いていました。抜粋とかリスト表示とかカテゴリー絞り込みとか、そんなのまったくなく、ただ開いてだらだら読むという、あれはあれで気軽で良いものでしたし、日記形式では特にふさわしい形でした。ブログの形式は今では普通ですが何というか面倒臭いというか、だらだら読み書きしたい人にとってはわりとウザいシステムでした。
荻窪圭さんもブログのシステマチックな形式がうざかったのか、混沌の屋形船をだらだらーっと繋がった形で書いておられましたね、わりと長い間。あれは読みやすくて軽くていいものでした。
で、そのウザいシステムの筆頭でもあるwordpressが提案するブログが、かつてだらだらしていたその形を踏襲しているという、つまり、アーカイブの考え方としてフルサイズのブログ内容がただずらずら繋がった形であるというのは、不思議かつ興味深い事柄です。
とはいえ、しかし今や私はアーカイブと言えばだらだら繋がった日記ではなく、リスト形式の表示を思い浮かべます。
サムネイルは小さく、本文は全文掲載ではなくせいぜいヘッドラインのみ、一覧性に優れたデザインをアーカイブに求めます。ですのでそういう方向でアーカイブテンプレートを作り直しています。
アーカイブはリストではないというwordpressの思想と反するアーカイブリストを作りたい我々の思惑のずれが、アーカイブに関する様々な軋轢を生んできました。wordpressのややこしさの最も大きな部分とも言えます。
大袈裟な振りはいいとして、テンプレート content.php を眺めてみます。そうそう、以前も書きましたが、twentysixteenの「content.php」とはアーカイブのコンテンツとなっています。以前のバージョンまでは「コンテント」はどっちも行ける設定で、内部のifでシングルやアーカイブに振り分けていました。twentysixteenではcontentはアーカイブの中身、シングルの中身はcontent-singleとかそんな風に明確にわかれます。これはいいことです。でもこれまでと同じつもりでいたらうっかりさんの罠に嵌まりますのでちょっぴり注意。
- アーティクル
- .entry-header
- entry-title
- twentysixteen_excerpt() …抜粋
- twentysixteen_post_thumbnail() …アイキャッチ画像
- .entry-content … the_content(), ページ内リンクがあればそのページナビ
- .entry-footer
- .entry-header
で、content.php ですが、このように並んでいます。
この並び自体を固まりごとに変更していいと思います。例えばアイキャッチ画像や抜粋の場所など、リスト表示でどう並べたいかによって変わると思います。
抜粋 excerpt, content
twentysixteen_excerpt() は抜粋です。twentrysixteenでは投稿エディタ画面の「抜粋」に書いたことが独立して表示されます。the_excerpt() のカスタム版です。面倒臭いときは普通にthe_excerptに変えたほうがいいかもしれないですね。
抜粋と本文冒頭が同じであるという人もいるかもしれません。これまでのWordpressでは抜粋だからどうだとか、あまり関係なかったですよね。抜粋とmore以前の部分を同じにしている場合が私の場合よくあるんです。その場合、抜粋と冒頭の同じ文章がダブって表示されてしまいますので、テンプレートを地道に改造していきます。
<?php twentysixteen_excerpt(); ?>
<?php twentysixteen_post_thumbnail(); ?>
<?php // すでにexcerpt を表示済みなら二度表示しない
if(has_excerpt()):?>
<?php // aside, status, news_log, biography では以下の the_contentを表示する
elseif ( has_post_format( 'aside' )||has_post_format('status')):?>
<div class="entry-content">
<?php
/* translators: %s: Name of current post */
the_content( sprintf(
__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentysixteen' ),
get_the_title()
) );?>
</div><!-- .entry-content -->
<?php // その他アーカイブでは content を表示しない(summaryのみ)
else:?>
<?php endif;?>
「もし投稿フォーマットがasideやstatusならコンテンツを表示し、その他普通の時には抜粋を表示したのならthe_content()を表示させない」という、そういう指定をしているつもりです。asideやstatusといった投稿フォーマットは一部サイトで多用していまして。そしてこういった投稿フォーマットでは100％抜粋に何も入力していないという、個人的な大前提が含まれていますのでご注意願います。
そもそもアーカイブページで抜粋（またはコンテントのmore以前）を表示するのか、という問いかけもあります。抜粋もコンテントも表示せず、単にサムネイルとタイトルだけのすっきりした一覧表示を目指す場合もあります。
サムネイル post-thumbnail
一覧表示のサムネイルは小さくそして左側にあってほしい。これはどんな場合もほぼ当てはまります。
サムネイルを左によせる方法ですが、floatを使うも良し、fixでもよし、display:table または inline-block を駆使するのも良し、いっそ inline で小さくまとめるもよし、いろいろです。何でもいいかと思います。私もあれこれ試しました。どういう並べ方をしても他の部品との絡みがありますから面倒くささにおいて一長一短。特にレスポンシブとの絡みがややこしいことになります。
で、結局、このようにしています。
/* archive post-thumbnail */
body:not(.single):not(.page) .post-thumbnail {
width: 18%;
margin: 3px 5px 5px 3px;
padding:0;
float: left;
}
シンプルにfloatを使いました。
サムネイルをワイド18%と相対的に指定しています。場合によってはこれをwidth:55pxとか、具体的にやります。
タイトル entry-title
タイトル.entry-titleはたいてい.entry-headerの中に入っています。これまでのテンプレートでは.entry-headerの中にサムネイルやメタ情報なんかも含まれていましたね。twentysixteenではエントリーヘッダーの中にはタイトルだけが入っています。マージン、それとdisplay:blockなんかの関係が、ヘッダーとタイトルと両方あるいはどちらかに設定してあって、リスト表示を目指すとき何かとややこしいです。
displayの扱いがサムネイルとの絡みで変わってきます。
Digitalbooの例では、大きなentry-headerが上部を占め、その下にサムネイルや抜粋が並んでいます。entry-headerはdisplay:block、サムネイルを左フロートにして、下部のentry-footerがまたblock表示になってます。
こっちのmoviebooというサイトではリスト表示を強調した形式、この場合はサムネイルの横に他の要素が並んでいて、entry-title a を clear:none したりpositionで並べたりしています。
このようにアーカイブページをどう見せたいかによって、ほんとそれぞれ好き勝手にやっていいと思います。
並べる意図によって変わってくるところなので、このあたりはサイトそれぞれ、サイト内のリスト表示によりそれぞれ変わるものです。ですので「最低限度のデザイン改変」なのかどうか、ちょっと自分でも疑わしい部分です。ベーシックデザインを決定してしまうことに無理が生じます。
このあたりは煎じ詰めれば「最低限度」でないので、そこそこで放っておきます。
entry-footer
entry-footer をどうするかってのもアーカイブ表示の悩みどころです。気持ち的には最小限の表示でいいと思うんです。これもアーカイブ表示の目的によって変わりますね。まったくいらない場合もあれば事細かに表示したいこともあります。
共通する事と言えば下部に小さく表示するという点です。そしてサムネイルをフロートさせているので、footerで〆るためdisplayをblockにしています。個人的には、entry-footerの表示デザインに関してはアーカイブもシングルも同じで問題ないです。
cssの装飾より重要なのは、どの項目を表示するかということでして、公式テンプレートのように一絡げにtwentysixteen_entry_metaでは済まされない事案となります。
カテゴリー、タグ、タクソノミー、ポストタイプといった分類次項、初稿、更新など日付データ、著者情報と、複数の項目を表示したり非表示したりします。
構造化データを考慮に入れるなら、著者や日付は外せないのですが外したいときもあります。そんなときは非表示だけど構造化データを表示するというテクニカルな技も必要になります。twentysixteen_entry_metaでも表示しない更新日付のデータを含めていますよね。
サイトによるのですが、これらentry-footerで表示すべきパーツをパーツとして分離させて必要に応じて並べるということをやっております。それぞれにspanでclassをつけて、場合によっては表示非表示をユーザーがコントロールできるようにしています。例えばMovieBooのリスト表示はそのようにしてみました（項目の表示・非表示の仕組みに関しては別項で書くかもしれませんがまだわかりません）
てなわけで、これまた最低限度ということでもなく、最低限度のカスタムを施した自分テンプレートを元に、さらにカスタマイズしていくということになっていきます。
共通のベーシックデザインということでいうと、footerは小さな文字で下部に表示する、という程度のことになりますね。
アーカイブのベーシックなcss
そんなわけで悩ましいのですがベーシックアーカイブのcssを作るにあたって、まず初心に返りますとですね、Twentysixteenの cssの書き方がちょっと気になったりします。
親style.cssを眺めているとやたら目に付くのが
body:not(.search-results)
という記述です。「:not」ですね。「検索結果ページを除く」という指定です。これが目立ちます。こんなのどうでもいいのに。リスト表示を考えると検索結果ページもリストページも私にとっては同じです。
twentysixteenの違和感の元はすべてここにあります。せっかくテンプレートをcontentとcontent-singleに分けたくせに、cssではシングルもアーカイブも一緒くたにして「検索結果以外」で括っているという変なことをしています。
こんなのよりもっと重要な分け方があります。それはアーカイブかシングルかですよ。それで私はこれに対抗して、やたらこういう記述をすることになってしまいました。
body:not(.single):not(.page):
単なる一例として、このブログのアーカイブに関する基本cssは次のようになりました。
/*
3. アーカイブ - archive, search, aside、status
----------------------------------------------------------------------------------
*/
.site-content {
margin-left:4%;
margin-right: 4%;
}
.entry-header, .entry-summary, .entry-content, .entry-footer, .page-content {
margin-left:4%;
margin-right: 4%;
}
body:not(.single):not(.page):not(.full-width):not(.home) article {
margin-bottom: 0;
}
.home article {
margin-bottom:24px;
margin-left:10px;
margin-right: 10px
}
/* .entry-header */
body:not(.single):not(.page) .entry-header {
margin-left: 0;
margin-right: 0;
padding-right:0;
display: block;
width: auto
}
body:not(.single);not(.page) h1.entry-title {
font-size:18px;
}
h2.entry-title {
margin-bottom: 24px;
padding: 0 0 0 10px;
font-weight: 400;
}
h2.entry-title a {
margin-bottom: 0;
display: block;
}
h2.entry-title a:hover {
}
body:not(.single):not(.page) .page-header {
border-top:0;
padding-top:0.9em
}
body:not(.single):not(.page) .page-header h1.page-title {
border-bottom: 4px solid #1a1a1a;
}
.entry-meta.cat-meta {
background: rgba(0, 0, 0, 0.15);
color: #6c737b;
display: block;
font-size: 12px;
font-weight: 600;
line-height: 18px;
margin:0 0 24px;
text-indent: 0.5em;
text-transform: none;
vertical-align: baseline;
}
.entry-meta.cat-meta a {
color: #6c737b;
}
.entry-meta.cat-meta a:hover {
color: #007acc;
}
/* archive post-thumbnail */
body:not(.single):not(.page) .post-thumbnail {
width: 18%;
margin: 3px 5px 5px 3px;
padding:0;
float: left;
}
.search-results .post-thumbnail {
max-width: 100px;
max-height: 100px;
overflow: hidden;
}
/* entry-summary */
body:not(.search-results):not(.single) .entry-summary,
body.home .entry-content,
body.archive .entry-content {
/* margin-left: calc(20% + 18px); */
margin-bottom: 24px;
margin-top:18px;
font-size: 15px;
line-height: 1.4;
}
/* entry-footer */
.entry-footer,
.page-template-page-user footer.entry-footer,
.search-results footer.entry-footer,
.home footer.entry-footer,
.archive footer.entry-footer {
clear: both;
display: block;
float: right;
font-size: 12px;
margin: 6px 10px 32px auto;
text-align: right;
}
.entry-footer > span {
display: inline-block;
}
こんな感じで、あとはメディアクエリの部分でちょっと修正したり、ベーシックじゃない込み入った設定を別の箇所に書き足したりしています。
cssを書くとき、このように基礎的なことか装飾の上塗りかという観点で分けて書いていくのが今回初のチャレンジでして、いいか悪いかわかりませんがカスタマイズしていく際にコードがぐちゃぐちゃになっていくことが防げるような気がしています。
ということでアーカイブについてでした。次回、えーと次回は何について書くんでしたっけ。次は5-4シングルポストの最低限デザイン改変です。
