本サイト内のコンテンツはNORILOGが独自に制作しています。メーカー等から商品提供を受けることもありますが、その場合は記事内に明記しております。コンテンツの内容や評価に関するランキングの決定には一切関与していません。メーカー等の指示による表示部分にはPRを表記します。記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。詳しくはサイト運営ポリシーをご覧ください。
みなさんこんにちは、NORI（@norilog4）です。
このWordPressではSANGOという有料テーマを利用し、デフォルトのままでは他のブログと同じデザインになってしまうので、ブログをさらに読みやすく分かりやすいように独自でカスタマイズして利用しています。
WordPress初心者
NORI
今回この記事ではショートコードで挿入する「関連記事」の表示デザインをカスタマイズする方法を紹介します。
NORI
2012年からWordPressを利用。ブログを書いて公開はトータルで約660記事。Apple製品の他、カメラやドローンが好きです。趣味で2021年から登山やキャンプもはじめました。国交省全国包括許可承認取得済 三陸特/アマ無線4級/DJI CAMPスペシャリストを取得。運営者の詳しい情報はこちら
SANGOデフォルトの関連記事デザイン
SANGOのテンプレートでは、以下のショートコードを利用すると
以下のようなデザインで記事に出力されます。
デフォルト関連記事デザイン
これでも分かりやすいといえば分かりやすいのですが、記事数が増えてきた場合サイト内の「回遊率」を上げることも重要となってくる場面がでてきます。
アンカーテキストでもいいのですが、投稿記事に関連した記事をより多く読んでもらうために「分かりやすいデザイン」、「クリックされやすいボタン」に変更する必要もでてきます。
カスタマイズ後の関連記事デザイン
この記事で紹介する関連記事ショートコードにCSSのデザインを反映させることで、いつも利用している関連記事のショートコードを利用すると、以下のようなデザインに変わります。
カスタマイズ関連記事デザイン
変更前・変更後のデザイン比較
比較すると変更された箇所がよくわかると思います。
レスポンシブに対応しているので、スマホでみてもパソコンでもみてもずれることなく表示されるようになっています。
カスタマイズ用CSSコード
このデザインを反映するには、以下のCSSコードをSANGOの小テーマCSSに追加します。
カスタマイズデザインの反映確認
コピペでコードを追加したあとはブラウザのキャッシュクリアをして確認しましょう。
Google Chromeなどでのキャッシュクリアコマンドは以下になります。
- Mac shift+⌘+R
- Windows Ctrl+F5
関連記事ショートコードのカスタマイズ方法まとめ
本記事は、有料WordPressテーマ「SANGO」の関連記事ショートコードデザインをカスタマイズする方法を紹介した記事です。
SANGOのテンプレートを利用していると同じ関連記事のデザインになってしまいますが、これで他とは別のデザインに変更することができます！
このカスタマイズに関するお問い合わせなどは、この記事の一番下にあるコメント欄でお知らせください。
以上、NORI（@norilog4）でした。
他のSANGOのカスタマイズ方法
【SANGO】WordPressのコメント欄を自由にカスタマイズする方法を解説
【SANGO】404ページの画像をオリジナル画像に変更表示するカスタマイズ方法
【SANGO】WordPressの縦に長いコメント欄をクリックで開閉式にするカスタマイズ方法
【WordPressテーマ】国産WordPressテーマで圧倒的なデザイン性・多機能の「SANGO」
