このサイトで使用している「WordPress」に限らず、ブログ系（だと思うんですが）で、記事の最後によく「関連記事」とか「この記事を読んだ人はこんな記事も読んでるよ」的な表示、見かけますよね？
丸で囲ってある部分が関連記事
結構見に来てくれる人には優しくて便利！、WordPressでは簡単にできてしまうのでは！？、と思って、いつものようにプラグインを調べてみると、．．．あるじゃないですかぁ。^-^)
- Related Posts
まぁ、そのまんまの名前ですが、とってもお手軽。
このプラグインをインストールすると、自動的に関連する記事を表示してくれます。
- プラグインの「新規追加」 を選択し、 「検索画面」から「Related Posts」で検索
- 見つかったら「 いますぐインストール」で、インストール。
これだけで記事単体を表示すると、その下に「Related Post」と表示されるようになります。 また設定でサムネイルとかを表示するようにもできます。
（同一カテゴリーとかで検索して表示しているように見えますが、アルゴリズムは良く分かってません。 まだ記事も少ないので余計に分からないのですが．．．）
ここで、タイトル部分の「Related Posts」と表示されている文字列は、設定で変更できます。 が、ここでちょっと困りました。
- CSSの設定
このタイトル部分、文字列を「＜＜ 関連記事 ＞＞」に変更するとともに、文字サイズを大きくしたり、上部分にもう少しすき間を設けたい、とカスタマイズしたくなりました。
サイトにログインして左メニューの下の方を見ると、「Related Posts」のメニューが表示されています。 そこを選択すると設定画面が表示されます。
- Custom CSS
設定の中に「Custom CSS」の欄があり、タイトル部分の「.related_post_title」を設定すれば表示もおのずと変わるはず．．．ですが、これが変わらない。 （困った）
font-sizeを指定したり、marginを設定しても、変化なし。 でも border: 1px solid red；とか指定すると、境界線がしっかり引けたりするんですね。 なんでだろう．．． - クラスの追加
調べるのも段々と面倒になってきてしまったので、正しくないやり方とは思いつつ、新しいクラスを追加する、といった小手先対策しました。
以下のように、Custom CSS内に「.related_post_title2」を追加して、そこにマージンやフォントサイズの指定を行います。
- Related Posts Titleに追加
次に設定画面の上段に「Related Posts Title」の部分があるんですが、ここで直接クラスの指定をします。
<div class=”related_post_title2″>＜＜ 関連記事 ＞＞</div>
（タイトルは「＜＜ 関連記事 ＞＞」に変えてます）
と、こうすることで、実際フォントサイズやマージンが反映されるわけですが、本当はどうしたら良かったんでしょうか．．．
（と思いつつ、多分これ以上追及しないであろう自分を良く分かってます）
【WordPress】に関する本を見てみよう （amazon）
