【WordPress】記事一覧の表示レイアウトを変更しよう①

ブログのトップページやアーカイブを開くと、各記事の情報が画面を占有しすぎだと思います。

もう少し各記事をシンプルに表示して表示数を増やしたいですよね！？

私自身、インスタグラムみたいに写真中心のギャラリー表示に憧れていたので、今回取り組ませてもらいました！

長くなるので2回に分けて書きます。

【目次】

完成形のイメージ

PC表示でブログのトップページやアーカイブを開くと、このように記事全体が表示された状態だと思います。

それを、、、

このようにアイキャッチ画像・記事タイトル・日付だけコンパクトに表示したり、

タイル状にならべて表示したり、

アイキャッチ画像と記事タイトルだけ表示して気持ちinstagramに近づけたりなど、
記事一覧の見せ方を変えたいと思ったことはありませんか？

（※楽なのでファイルエクスプローラでイメージ画像を用意させていただきました）

というのも記事が全部表示されている状態はユーザビリティ的に良くないですし、せっかくランディングしてくれたユーザーが他の記事を見てくれる機会を損失していると思うからです。

というわけで今回は例によってWordPressデフォルトテーマ「twentysixteen」で表示レイアウトを変えてみましょう！

記事一覧レイアウトを変えるのに必要なこと

結論を言うとテーマのスタイルシート（style.css）を変更するだけです！

phpはあくまで情報の受け渡しを行っているだけで、表示されるレイアウト自体はCSSで制御されているからですね。

変更箇所の特定

例によってブラウザ（ここではChrome）のデベロッパーツールを発動します。

すると記事一覧で表示される各記事の一覧はarticle要素で制御されていることが分かりますね。

この場合、articleとその周辺要素は以下のような階層構造になってます。

<div id="primary" class="content-area">
　<main id="main" class="site-main" role="main">
	<article id="post-23" class="post-23 post type-post status-publish format-standard hentry category-uncategorized">
	　　　　  <div class="entry-content">
			 </div><!-- .entry-content -->

	</article><!-- #post-23 -->
    </main><!-- .site-main -->
</div>

もう少し説明するとmainタグはフッター・ヘッダー・サイドバーなど全てのページに共通して表示される要素を除いた、
ページ固有のコンテンツ表示箇所になります。

イメージとしてmainは机のようなものでメインコンテンツを置く場所、
articleは机の上に置いてあるもので今回だと記事という感じです。

CSSの変更箇所

WordPressデフォルトテーマのスタイルシートを開くと、
内容ごとに見出し付きでまとめてくれています。

twentysixteenでは11.contentに変更箇所があります。

前項で確認したように「site-mainの中にあるarticleを制御する記述はこれだ」と特定できると思います。

まず250ピクセル指定でwidthを追加してみましょう。

するとこんな感じで各記事の横幅は制御できたものの、横に並んで表示させることができませんでした。

display: flexを記述

記事一覧が並列しない理由としてはarticleタグの上位に来るsite-mainの記述を変更する必要がありました。

コンテンツを並列して表示するには自分で記述を加える必要がありそうです。

今回は親要素（フレックスコンテナ）に設定する「display: flex;」「flex-wrap: wrap;」を、site-mainタグ内に以下のように記述します。

.site-main {
	margin-bottom: 3.5em;
        display: flex;
	flex-wrap: wrap;
}

「flex-wrap」とはフレックスアイテムを単一行に詰め込むか、コンテナの幅が足りない場合に改行するかを指定します。

もちろん今回は改行しますのでwrapに設定しておきます。

するとこんな感じで1行に可能なだけ並べる表示に変更できました！

＝＝＝＝＝

いかがでしょうか。

とりあえず表示位置は変更できたました。

しかし「表示がガタガタで汚い」「トップページだけ、など個別に設定したい」といった課題もありますね。

その点次回に解説できればと思います。

最後まで読んでくださりありがとうございました！