こんにちは！朝日奈（@asahinablog）です。
WordPress Related Postsは簡単に関連記事を表示できて便利なのですが、Related Posts Title部分のデザインが気になっています。
実はこの部分、見出し3（h3タグ）が設定されているため、WordPressテーマのh3のデザインが適用されます。
また、Table of Contents Plusなどの目次プラグインを導入していると、最後に追記されてしまいます。
これは気持ち悪い・・・
それに、SEOにも影響がありそうで気になります。
というわけで、h3からpに変更して、さらにデザインをカスタマイズしたいと思います。
目次
見出しをh3からpに変更
ダッシュボードから【プラグイン】⇒【プラグインエディター】に進みます。
下図のような警告が出てきますが、【理解しました】を押して大丈夫です。
右上から編集するプラグインを選択できるので【WordPress Related Posts】を選択します。
init.phpを選択します。
どこでもいいのでコード内をクリックして、Ctrlキーを押しながらFキーを押すとも文字検索ができるので、「h3」と入力してエンターを押すと、551行目に次のような記述を見つけることができます。
このh3をpに書き換えます。
[su_box title=”変更前”]‘<h3 class=”related_post_title”>’ . $title . ‘</h3>’
[/su_box] [su_box title=”変更後”]‘<p class=”related_post_title”>’ . $title . ‘</p>’
[/su_box]書き換えたら【ファイルを更新】をクリックします。
ひとまずこれで目次から消えました。
また、デザインもプレーンなテキストになりました。
続いてデザインを変更していきます。
見出しのデザイン変更
ダッシュボードから【設定】⇒【WordPress Related Posts】と進み、【Advanced settings】を開き、【Customize】の【Enable custom CSS】にチェックを入れます。
ここでCSSのカスタマイズができるようになり、【.related_post_title】をいじればデザインの変更が可能です。
僕は下記のように入力しました。
[su_box title=”見出しデザイン変更コード”].related_post_title {
font-size: 26px !important;/*文字サイズ*/
border-bottom: solid 2px;/*下線*/
}
完成図はこんな感じです。
他にも、フォントを変えたり太字にしたり、いろいろ変更できるのでお好みのデザインにカスタマイズしましょう。
カスタマイズが自由自在
WordPress Related Postsはカスタマイズがしやすいのが特徴です。
見出し以外にもサムネイルの表示方法などカスタマイズすることができます。
【関連記事】
⇒WordPress Related Postsのカスタマイズ。サムネイルサイズの変更やスマホ表示の最適化をご紹介。
デザインを整えてブログを綺麗にしていきましょう。
最後にご案内ですが、僕のメール講座ではブログを使った稼ぎ方やビジネスに関する情報を発信していますので、ぜひご覧ください。
