【SANGO】ショートコードで挿入する関連記事の表示をさらに分かりやすくカスタマイズ

みなさんこんにちは、NORI（@norilog4）です。

このWordPressではSANGOという有料テーマを利用し、デフォルトのままでは他のブログと同じデザインになってしまうので、ブログをさらに読みやすく分かりやすいように独自でカスタマイズして利用しています。

今回この記事ではショートコードで挿入する「関連記事」の表示デザインをカスタマイズする方法を紹介します。

SANGOデフォルトの関連記事デザイン

SANGOのテンプレートでは、以下のショートコードを利用すると

[kanren id="投稿ID"]

以下のようなデザインで記事に出力されます。

デフォルト関連記事デザイン

これでも分かりやすいといえば分かりやすいのですが、記事数が増えてきた場合サイト内の「回遊率」を上げることも重要となってくる場面がでてきます。

アンカーテキストでもいいのですが、投稿記事に関連した記事をより多く読んでもらうために「分かりやすいデザイン」、「クリックされやすいボタン」に変更する必要もでてきます。

カスタマイズ後の関連記事デザイン

この記事で紹介する関連記事ショートコードにCSSのデザインを反映させることで、いつも利用している関連記事のショートコードを利用すると、以下のようなデザインに変わります。

カスタマイズ関連記事デザイン

変更前・変更後のデザイン比較

比較すると変更された箇所がよくわかると思います。

レスポンシブに対応しているので、スマホでみてもパソコンでもみてもずれることなく表示されるようになっています。

カスタマイズ用CSSコード

このデザインを反映するには、以下のCSSコードをSANGOの小テーマCSSに追加します。

カスタマイズデザインの反映確認

コピペでコードを追加したあとはブラウザのキャッシュクリアをして確認しましょう。

Google Chromeなどでのキャッシュクリアコマンドは以下になります。

関連記事ショートコードのカスタマイズ方法まとめ

本記事は、有料WordPressテーマ「SANGO」の関連記事ショートコードデザインをカスタマイズする方法を紹介した記事です。

SANGOのテンプレートを利用していると同じ関連記事のデザインになってしまいますが、これで他とは別のデザインに変更することができます！

このカスタマイズに関するお問い合わせなどは、この記事の一番下にあるコメント欄でお知らせください。

以上、NORI（@norilog4）でした。

他のSANGOのカスタマイズ方法
【SANGO】WordPressのコメント欄を自由にカスタマイズする方法を解説 【SANGO】404ページの画像をオリジナル画像に変更表示するカスタマイズ方法 【SANGO】WordPressの縦に長いコメント欄をクリックで開閉式にするカスタマイズ方法 【WordPressテーマ】国産WordPressテーマで圧倒的なデザイン性・多機能の「SANGO」