WordPress+Simplicityの関連記事を2列化

Simplicity2のテーマを適用しているWordPressサイトにおいて、投稿ページ下部に表示される関連記事の一覧を2列化してみます。

例のごとく言い訳を書いておきますが、素人コーディングなので「とりあえずこれでできる」程度に考えて頂けると幸いです……。

スポンサーリンク

前準備

WordPress管理画面の、外観 > カスタマイズ > レイアウト(固定・投稿ページ)から、「関連記事表示タイプ」を「デフォルト」に設定しておいてください。

「関連記事の関連付け」および「関連記事表示数」は任意で問題ありません。

カスタマイズ

デフォルトだとこんな感じに表示されていると思います。こいつを2列化するため、style.cssに追記していきます。追記方法は以下の記事参照。

WordPressテーマのスタイルをカスタマイズする方法概要
WordPressテーマのスタイルをカスタマイズする方法概要
WordPressテーマのCSSをカスタマイズする方法は、2つに大別できます。 ひとつめは、WordPressの管理画面から行う方法。 もうひとつは、CSSファイルをFTPクライアントでアップ...

2列化する

便利なflexを使用して2列化し、投稿の本文抜粋を非表示にしています。

改行がうまくいかず2列にならない方は、330pxの部分を調整してください。48%とか割合の指定にしても大丈夫です。

微調整

見た目のバランスを微調整します。

おまけ

related-entry:hoverを追記すると、マウスオーバー時に変化をつけることができます。上の例では、関連記事項目の枠とサムネイルの枠の丸みの調整もしています。

要素が密集する部分なので、あまり派手にカスタマイズしすぎると、余程のセンスがないと見た目がうるさくなってしまうので、できる限りシンプルな見た目にすることをおすすめします。