【WordPress】関連記事プラグイン「WordPress Related Posts」のCSSカスタマイズ

ブログ運営

おはようございます、こんにちは、こんばんは。
ふらっふぃ(@fluffy_mybag)です。

当サイトの投稿ページ最下部に表示されている「関連記事」は「WordPress Related Posts」というプラグインを使って表示させています。

「Wordpress Related Posts」を使うと、その記事のカテゴリやタグで関連する記事を自動で表示したり、記事ごとに表示させる関連記事を設定することができます。
今回は、その表示をカスタマイズする方法をご紹介します。

完成イメージ

「WordPress Related Posts」の設定

WordPressの管理画面の「設定」から「WordPress Related Posts」を表示し、以下の設定を行います。

別途「style.css」の設定を行う必要はありません!

設定画面が開いたら、Advanced settings の「▼」をクリックしてください。

設定欄が開いたら、「Plain(your own css)」と「Enable custom css」をチェックします。

「Enable custom CSS」の下に、設定したいスタイルシートを記述してください。
わたしが行っている設定は以下の通りです。

一番上の「.related_post_title {}」に何も記述しないと、style.cssの「H3」見出しに設定しているスタイルが有効になります。
上記設定は、当サイトのトップページに使っているプラグイン「List Category Posts」用に設定したスタイルに合わています。
「List Category Posts」の設定に興味がある方は、こちらで紹介していますのでご覧ください。
【WordPress】List Category Postsのカスタマイズ。一覧表示がこんなに変えられる!
WordPressプラグイン「List Category Posts」を使えば、簡単なカスタマイズで見せ方を変更することができます。 List Category Posts のカスタマイズ例 まず、これからご説明させていただくカスタマイ...
【WordPress】List Category Postsのカスタマイズ。日付とタイトルだけのシンプル表示
List Category Postsで表示するリストを、日付とタイトルだけのシンプルな一覧表示にする方法をご紹介します。 List Category Posts で日付とタイトルだけのシンプル一覧表示 【手順】 ...

コメント