【SANGO】記事下の関連記事のタイトルをカスタマイズする方法

SANGOの記事下の関連記事のタイトルをカスタマイズする方法

くるみ

記事下の関連記事のデザインを可愛くしたいんだぞ

ということで今回は

  • SANGOの関連記事をカスタマイズしたい
  • 記事下の関連記事が何かパッとしない

という方に向けて「SANGOの記事下の関連記事を可愛くカスタマイズする方法」をまとめました。

参考になれば幸いです⸝⸝- ̫ -⸝⸝

ブログ主

早速いってみよう!

関連記事のタイトルの完成イメージ

吹き出しver

SANGOの記事下の関連記事のタイトルの完成イメージ(吹き出しver)(PC版)

モバイルはこんな感じ

SANGOの記事下の関連記事のタイトルの完成イメージ(吹き出しver)(スマホ版)

カスタマイズ後の記事下の関連記事のタイトルのイメージは上の通り。

ウチのサイトではこの吹き出しの上にキャラクターを設置して吹き出しの上から見てるようにしており、そのようにもう一工夫してお好きなデザインにしていただくことも可能です。

アイコン付きver

SANGOの記事下の関連記事のタイトルの完成イメージ(アイコンver)(PC版)

モバイルはこんな感じ

SANGOの記事下の関連記事のタイトルの完成イメージ(アイコンver)(スマホ版)

アイコン付きverも作ってみました。人気テーマ「JIN」を意識した感じです。

自分のサイトに親和性の高そうな、お好きな方を選んでみてください。

どっちにするか迷う…

くるみ

カスタマイズ手順

方法はいたってシンプルかつ簡単です。

手順
step1
CSSコードをコピペする
step2
お好みの色にカスタマイズする

「上の完成イメージとは違う色合いにしたい…」という場合はstep2で色を変更してみてください。

簡単!

くるみ

バックアップを忘れずに

早速カスタマイズしていきたいところですが万が一の事態を考え、事前にバックアップを取っておくことをオススメします。

「バックアップするの初めて…」という方は以下の記事を参考にしてみてください。

WordPressでのCSSのバックアップの取り方【WordPress】CSSをカスタマイズする際のバックアップの取り方

ブログ主

備えあれば何とやらだね

SANGOの記事下の関連記事のタイトルのカスタマイズ方法

CSSコードをコピペする

  • 「追加CSS」に追加
  • 「テーマエディター」を使って追加
  • FTPソフトを使って追加

以上のどれかの方法でカスタマイズコードをコピペします。

ブログ主

「追加CSS」が最もお手軽にできるよ

「カスタマイズするの初めて…」という方は以下の記事を参考にしてみてください。

WordPressでCSSコードを追加する方法【初心者向け】WordPressでCSSを編集する方法を徹底解説

吹き出しver

SANGOの記事下の関連記事のタイトルの完成イメージ(吹き出しver)(PC版)

/************************************
** 記事下の関連記事の見出しを吹き出し状に
************************************/
#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

SANGOの記事下の関連記事のタイトルの完成イメージ(アイコンver)(PC版)

/************************************
** 記事下の関連記事の見出しにアイコンを
************************************/
#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の記事下の関連記事のカスタマイズ方法でした。

「もっとド派手にカスタマイズしたい」という方は、以下の記事で今までのSANGOカスタマイズをまとめているので参考にしてみてください。

コピペでできるSANGOのカスタマイズまとめ【SANGOカスタマイズ総まとめ】サイトをもっと魅力的に!

参考になれば幸いです!では⸝⸝- ̫ -⸝⸝

コメントを残す

CAPTCHA