ゆるいstand.fmはじめました

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

WordPress SANGO(サンゴ)のカスタマイズ方法

みなさんこんにちは、NORI(@norilog4)です。

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

WordPress初心者

どうやってデザインを変更したらいいの?
この記事で紹介しているCSSコードを小テーマのCSSにコピペすればOKだよ!

NORI

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

関連記事をより読ませやすいデザインに変更してみよう!

NORI

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

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

関連記事ショートコード
[kanren id="投稿ID"]

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

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

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

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

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

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

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

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

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

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

関連記事 ビフォーアフター 比較

カスタマイズ用CSSコード

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

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

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

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

キャッシュクリア方法

  • Mac shift++R
  • Windows Ctrl+F5

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

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

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

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

以上、NORI(@norilog4)でした。

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

コメントの通知/購読設定
受け取る通知
guest
0 件のコメント
Inline Feedbacks
全てのコメントを見る