こんにちは！朝日奈（@asahinablog）です。
WordPress Related Postsはそのままでも十分役割は果たしてくれるのですが、どうも僕のブログでは見た目が中途半端になってしまいます。
そこで、デザインをカスタマイズしてみました。完成形はこちらです。
OPENCAGEのハミングバード風の見た目にしてみました。
ちなみに本家ハミングバードの関連記事デザインはこちらです。
WordPress Related PostsはCSSをカスタマイズできる項目があるので、簡単にデザインを変更することができます。
その方法をご紹介します。
目次
サムネイルサイズのカスタマイズ
初期状態ではサムネイルが全て正方形になっているので、長方形に変えます。
ダッシュボードから【設定】⇒【WordPress Related Posts】へ進み、【Advanced settings】を開きます。【Layout】を「Vertical (Large)」または「Vertical (Medium)」に設定します。
続いて、その下の【Customize】の【Enable custom CSS】にチェックをいれます。これでCSSのカスタマイズできます。
サムネイルサイズを変更するには、【ul.related_post li】と【ul.related_post li img】をいじります。
[su_box title=”ul.related_post li（サムネイルとタイトルを囲う部分）”]ul.related_post li {
width: 169px !important;
}
ul.related_post li img {
width: 169px !important;
height: 94px !important;
}
サイズはお使いのテーマに合わせて微調整してください。!importantを付けないと反映されない点に注意です。
どう変化したか見てみましょう。
なんか画像が伸びてしまっています・・・
これを直すには【Use Custom Size Thumbnails】にチェックを入れます。
最初はここが150×150になっているので、正方形を無理やり長方形に伸ばした形になっていたんですね。ここをCSSで入力したサイズと同じにしておきましょう。または普段使用しているアイキャッチ画像の比率を入力してもいいです。（4×3、16×9など）
無事に綺麗に表示されました。
記事タイトルのデザインカスタマイズ
記事タイトルを太字にしたり、大きさを変えたり、フォントを変えたりする場合は、先ほどの【ul.related_post li】を書き換えます。
僕は太字にしたかったので下記のようにしました。
[su_box title=”ul.related_post li（サムネイルとタイトルを囲う部分）”]ul.related_post li {
width: 169px !important;
font-weight: bold;
}
文字の大きさを変える場合は、
font-size: 10px !important;
フォントを変える場合は、
font-family: “游ゴシック体”,”Yu Gothic”,YuGothic,”ヒラギノ角ゴ Pro W3″,”Hiragino Kaku Gothic Pro”,”メイリオ”,Meiryo,Arial,Sans-Serif;
などと追記しましょう。
僕はテーマ全体で上記のフォントを設定しているので、特に変更していません。文字の大きさもそのままにしています。
反映すると下図のようになります。
あとは関連記事の表示数を8にすればOKです。
見出しのカスタマイズ
「More from my site」のデザインを変更します。
ただ、こちらはやり方がちょっと特殊なので別記事にて解説いたします。
【関連記事】
⇒WordPress Related Postsの見出しをカスタマイズ。h3も変更しよう。
スマホ表示の最適化
PCでは綺麗に表示されていますが、スマホで見るとどうでしょう。
ひとつひとつの関連記事の幅が大きいので、下に回り込む形になり、結果的に1列で表示されてしまっています。
これでは右側の余白が無駄に感じますね。
できれば2列で表示させたいのですが、スマホによって幅が違うため、具体的に何pxと指定してもスマホによって微妙に余白ができてしまい、綺麗な2列になりません。
そこで、記事タイトルを右側に持ってくる方法で代替します。
下記コードをコピーして、そのまま貼り付けてください。
[su_box title=”スマホ用コード”]@media only screen and (max-width: 480px){
ul.related_post li {
width: auto !important;
}
ul.related_post li a:nth-child(1) {
float: left !important;
margin-right: 5px;
}
}
これで、下図のように綺麗に表示されます。
【@media only screen and (max-width: 480px)】は横幅480px以下の画面の時に適用されるという意味です。
【ul.related_post li】はサムネイル+タイトルのことですが、PC表示のままだと大きさを指定しているので（今回は169pxに設定しているので）、スマホ表示では横幅いっぱいに表示するようにautoにします。!importantを忘れずに。
【ul.related_post li a:nth-child(1)】は、サムネイル+タイトルで1セットになっているなかの、1つめの要素、つまりサムネイル部分のことを指し、それを左側に持ってくるようにfloatで指定しています。
すると、横幅いっぱいに設定された中でサムネイル部分だけ左側に寄るので、あまったタイトル部分が右側に回り込んできます。
その結果、綺麗に1列に表示されるようになります。
関連記事の見た目を整えてアクセスアップを狙おう
関連記事の見た目を綺麗にすれば、読者さんの目に入りやすいのでクリック率も上がります。
WordPress Related Postsはカスタマイズがしやすいので、自分の好みのデザインを作ってみてください。
また、僕のメール講座では、ブログを使った稼ぎ方や、ブログで生計を立てる方法などを配信していますので、こちらもあわせてご覧ください。
