くるみ
- SANGOの関連記事をカスタマイズしたい
- 記事下の関連記事が何かパッとしない
という方に向けて「SANGOの記事下の関連記事を可愛くカスタマイズする方法」をまとめました。
参考になれば幸いです⸝⸝- ̫ -⸝⸝
お品書き
関連記事のタイトルの完成イメージ
吹き出しver
モバイル版
カスタマイズ後の記事下の関連記事のタイトルのイメージは上の通り。
ウチのサイトではこの吹き出しの上にキャラクターを設置して吹き出しの上から見てるようにしており、そのようにもう一工夫してお好きなデザインにしていただくことも可能です。
アイコン付きver
モバイル版
アイコン付きverも作ってみました。人気テーマ「JIN」を少し意識しました。
自分のサイトに親和性の高そうな、お好きな方を選んでみてください。
くるみ
カスタマイズ手順
方法はいたってシンプルかつ簡単です。「上の完成イメージとは違う色合いにしたい…」という場合はstep2で色を変更してみてください。
くるみ
バックアップを忘れずに
早速カスタマイズしていきたいところですが万が一の事態を考え、事前にバックアップを取っておくことをオススメします。
「バックアップするの初めて…」という方は以下の記事を参考にしてみてください。

ファイルをいつでも元の状態に戻せるようにしたら、さっそく本題のカスタマイズに移っていきましょう。
SANGOの記事下の関連記事のタイトルのカスタマイズ方法
CSSコードをコピペする
- 「追加CSS」に追加
- 「テーマエディター」を使って追加
- FTPソフトを使って追加
以上のどれかの方法でカスタマイズコードをコピペします。
くるみ
「カスタマイズするの初めて…」という方は以下の記事を参考にしてみてください。

吹き出しver
/************************************
** 記事下の関連記事の見出しを吹き出し状に
************************************/
#main h3.h-undeline {
text-align: center;
display: inline-block;
position: relative;
color: #fff;
background-color:#f8c678; /*お好みの色に*/
font-weight: 900;
margin: 2.5em .5em 1.4em 0.5em!important;
border-radius: 50px;
padding: .23em 1em;
font-size:1.02em;
border:2px solid #f8c678; /*お好みの色に*/
box-shadow: 0 2px 3px rgba(0,0,0,.02), 0 2px 3px -2px rgba(0,0,0,.15);
}
@media only screen and (min-width: 769px){
#main h3.h-undeline{
margin-bottom:0em!important;
}
}
#main h3.h-undeline::before{
content: "";
position: absolute;
top: 100%;
left: 27%;
border: .8em solid transparent!important;
border-top: .8em solid #f8c678!important; /*お好みの色に*/
}
#main h3.h-undeline {
text-align: center;
display: inline-block;
position: relative;
color: #fff;
background-color:#f8c678;
font-weight: 900;
margin: 2.5em .5em 1.4em 0.5em!important;
border-radius: 50px;
padding: .23em 1em;
font-size:1.02em;
border:2px solid #f8c678;
box-shadow: 0 2px 3px rgba(0,0,0,.02), 0 2px 3px -2px rgba(0,0,0,.15);
}
@media only screen and (min-width: 769px){
#main h3.h-undeline{
margin-bottom:0em!important;
}
}
#main h3.h-undeline::before{
content: "";
position: absolute;
top: 100%;
left: 27%;
border: .8em solid transparent!important;
border-top: .8em solid #f8c678!important;
}
アイコン付きver
/************************************
** 記事下の関連記事の見出しにアイコンを
************************************/
#main h3.h-undeline {
color:#999;
background-color:initial;
}
@media only screen and (min-width: 769px){
#main h3.h-undeline{
margin-bottom:0em!important;
padding-bottom:0;
}
}
#main h3.h-undeline::before{
width: 40px;
height: 40px;
border-radius: 50%;
font-family: "Font Awesome 5 Free"!important;
content: "\f15c";
color:#fff;
background-color:#f8c678; /*お好みの色に*/
display:inline-block;
margin-right:4px;
font-size:1.05em;
}
#main h3.h-undeline {
color:#999;
background-color:initial;
}
@media only screen and (min-width: 769px){
#main h3.h-undeline{
margin-bottom:0em!important;
padding-bottom:0;
}
}
#main h3.h-undeline::before{
width: 40px;
height: 40px;
border-radius: 50%;
font-family: "Font Awesome 5 Free"!important;
content: "\f15c";
color:#fff;
background-color:#f8c678;
display:inline-block;
margin-right:4px;
font-size:1.05em;
}
お好みの色にカスタマイズする
ここは「上の完成イメージとは違う色合いにしたい」という方向け。
コピペしたCSSの「/*お好みの色に*/」とコメントがあるところのカラーコードを、それぞれお好きな色にしてください。
ここまで終わればカスタマイズは終了。お疲れ様です!
くるみ
CSSの変更が反映されない場合
「あれ…?CSSが反映されないぞ…」となった場合は、キャッシュが原因であることが多いので以下の2つの方法を試してみてください。キャッシュ系プラグイン
「WP Fastest Cache」や「WP Super Cache」をはじめとしたキャッシュ系プラグインをお使いの場合は、そちらの方でキャッシュを削除してください。
プラウザのキャッシュを削除
Chromeをお使いの場合は
Windows | [Shift]+[Ctrl]+[Delete]キー |
Mac | [shift]+[command]+[delete」キー |
上のショートカットキーで削除できます。
まとめ
「もっとド派手にカスタマイズしたい」という方は、以下の記事で今までのSANGOカスタマイズをまとめているので参考にしてみてください。

参考になれば幸いです!では⸝⸝- ̫ -⸝⸝
吹き出しが中央寄せにどうしてもならないのですがどうしたらいいでしょうか?
左寄せになってしまいます。
山田さん
失礼致しました。
以下のCSSを追記していただければ中央寄せになるかと思います。
—————–
.footer-contents {
text-align: center;
}
/*記事下のカテゴリと関連記事タイトルも中央寄せになってしまうため左寄せにする*/
.footer-meta.dfont {
text-align: left;
}
.rep {
text-align: left;
}
—————–