【SANGO】内部リンクに「続きを読む」を入れるカスタマイズ

SANGOの内部リンクのカスタマイズ方法

SHARE

くるみ

SANGOの内部リンクのデザインをいい感じにしたい…
ということで今回は

  • SANGOの内部リンクを可愛くかつ見やすくカスタマイズしたい
  • 地味な関連記事のデザインを変えたい

という方に向けてSANGOの「内部リンク(関連記事)をオシャレにカスタマイズする方法」をまとめました。

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

内部リンク(関連記事)の完成イメージ

オレンジver

内部リンク(関連記事)のオレンジverの完成イメージ

カスタマイズ後の内部リンクのイメージは上の通り。ウチのデザインそのまんまです。

SANGOカラーver

内部リンク(関連記事)のSANGOカラーverの完成イメージ

SANGOユーザーのサイトのテーマカラーに使われがちな水色。その色合いverのものも作ってみました。

好きな方を選んでね！

くるみ

簡単にカスタマイズの内容を説明すると…

  • 「あわせて読みたい」という文言を加えることで関連記事と分かりやすいように
  • 全体的に少し透明にすることで記事内で浮かないように
  • 薄い影を加えてクリックされやすく

こんな感じです。

カスタマイズ手順

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

手順
step1
CSSコードをコピペする
step2
お好みの色にカスタマイズする
step3
お好みの文言にする
(※任意)

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

バックアップを忘れずに

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

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

WordPressでのCSSのバックアップの取り方【カスタマイズ時に必須】WordPressでCSSのバックアップをとる方法

ファイルをいつでも元の状態に戻せるようにしたら、さっそく本題のカスタマイズに移っていきましょう。

SANGOの内部リンクのカスタマイズ方法

CSSコードをコピペする

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

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

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

くるみ

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

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

オレンジver

内部リンク(関連記事)のオレンジverの完成イメージ

.linkto{
  padding: .9rem 1rem 1.5rem;
  color: #707070;
  position: relative;
  border-color: #f8c678 !important;/*枠線の色*/
  font-size:.95em;
  box-shadow: 0 4px 4px rgba(0,0,0,.13), 0 2px 3px -2px rgba(0,0,0,.12);/*本体の影*/
  margin:0 auto;
  z-index:0;
}
.linkto span {
  opacity: .8;
}
.linkto:hover {
  background-color: initial;
  opacity: .9;
  transform: scale(1.04);
}
.linkto img{
  box-shadow:initial;
  max-width: 70%;
  margin-left: .7rem;
  z-index: 0;
  margin-top:10px;
}
@media only screen and (max-width: 480px) {
  .linkto img{
    max-width: 65%;
    margin-left: .7rem;
  }
}
.linkto:before {
  content: 'あわせて読みたい';
  position: absolute;
  top: -.8rem;
  left: auto;
  font-size: 50%;
  background-color: #F8C678;/*「あわせて読みたい」の背景色*/
  padding: .4em .8em;
  font-weight: bold;
  color: #fff;/*「あわせて読みたい」の文字色*/
  border-radius: 2px;
  font-size:.6rem;
  z-index: 1;
  margin-left:-.4em;
}
.linkto:after{
  content: '続きを読む 
.linkto{
  padding: .9rem 1rem 1.5rem;
  color: #707070;
  position: relative;
  border-color: #f8c678 !important;/*枠線の色*/
  font-size:.95em;
  box-shadow: 0 4px 4px rgba(0,0,0,.13), 0 2px 3px -2px rgba(0,0,0,.12);/*本体の影*/
  margin:0 auto;
  z-index:0;
}
.linkto span {
  opacity: .8;
}
.linkto:hover {
  background-color: initial;
  opacity: .9;
  transform: scale(1.04);
}
.linkto img{
  box-shadow:initial;
  max-width: 70%;
  margin-left: .7rem;
  z-index: 0;
  margin-top:10px;
}
@media only screen and (max-width: 480px) {
  .linkto img{
    max-width: 65%;
    margin-left: .7rem;
  }
}
.linkto:before {
  content: 'あわせて読みたい';
  position: absolute;
  top: -.8rem;
  left: auto;
  font-size: 50%;
  background-color: #F8C678;/*「あわせて読みたい」の背景色*/
  padding: .4em .8em;
  font-weight: bold;
  color: #fff;/*「あわせて読みたい」の文字色*/
  border-radius: 2px;
  font-size:.6rem;
  z-index: 1;
  margin-left:-.4em;
}
.linkto:after{
  content: '続きを読む \0bb';
  position: absolute;
  bottom: .5rem;
  right: 1rem;
  font-size: 70%;
  background-color: #ffd242;/*「続きを読む」の背景色*/
  padding: .3em 1.7em;
  font-weight: bold;
  color: #fff;/*「続きを読む」の文字色*/
  border-radius: 2px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  font-size:.7rem;
  z-index:1;
  opacity:.9;
  box-shadow: 0 2px 2px rgba(0,0,0,.1);
  transform: translateX(3px);
}
@media screen and (min-width: 480px){
  .linkto:before{
    font-size:.7em;
  }
}
bb';
  position: absolute;
  bottom: .5rem;
  right: 1rem;
  font-size: 70%;
  background-color: #ffd242;/*「続きを読む」の背景色*/
  padding: .3em 1.7em;
  font-weight: bold;
  color: #fff;/*「続きを読む」の文字色*/
  border-radius: 2px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  font-size:.7rem;
  z-index:1;
  opacity:.9;
  box-shadow: 0 2px 2px rgba(0,0,0,.1);
  transform: translateX(3px);
}
@media screen and (min-width: 480px){
  .linkto:before{
    font-size:.7em;
  }
}
.linkto{
  padding: .9rem 1rem 1.5rem;
  color: #707070;
  position: relative;
  border-color: #f8c678 !important;
  font-size:.95em;
  box-shadow: 0 4px 4px rgba(0,0,0,.13), 0 2px 3px -2px rgba(0,0,0,.12);
  margin:0 auto;
  z-index:0;
}
.linkto span {
  opacity: .8;
}
.linkto:hover {
  background-color: initial;
  opacity: .9;
  transform: scale(1.04);
}
.linkto img{
  box-shadow:initial;
  max-width: 70%;
  margin-left: .7rem;
  z-index: 0;
  margin-top:10px;
}
@media only screen and (max-width: 480px) {
  .linkto img{
    max-width: 65%;
    margin-left: .7rem;
  }
}
.linkto:before {
  content: 'あわせて読みたい';
  position: absolute;
  top: -.8rem;
  left: auto;
  font-size: 50%;
  background-color: #F8C678;
  padding: .4em .8em;
  font-weight: bold;
  color: #fff;
  border-radius: 2px;
  font-size:.6rem;
  z-index: 1;
  margin-left:-.4em;
}
.linkto:after{
  content: '続きを読む 
.linkto{
  padding: .9rem 1rem 1.5rem;
  color: #707070;
  position: relative;
  border-color: #f8c678 !important;
  font-size:.95em;
  box-shadow: 0 4px 4px rgba(0,0,0,.13), 0 2px 3px -2px rgba(0,0,0,.12);
  margin:0 auto;
  z-index:0;
}
.linkto span {
  opacity: .8;
}
.linkto:hover {
  background-color: initial;
  opacity: .9;
  transform: scale(1.04);
}
.linkto img{
  box-shadow:initial;
  max-width: 70%;
  margin-left: .7rem;
  z-index: 0;
  margin-top:10px;
}
@media only screen and (max-width: 480px) {
  .linkto img{
    max-width: 65%;
    margin-left: .7rem;
  }
}
.linkto:before {
  content: 'あわせて読みたい';
  position: absolute;
  top: -.8rem;
  left: auto;
  font-size: 50%;
  background-color: #F8C678;
  padding: .4em .8em;
  font-weight: bold;
  color: #fff;
  border-radius: 2px;
  font-size:.6rem;
  z-index: 1;
  margin-left:-.4em;
}
.linkto:after{
  content: '続きを読む \0bb';
  position: absolute;
  bottom: .5rem;
  right: 1rem;
  font-size: 70%;
  background-color: #ffd242;
  padding: .3em 1.7em;
  font-weight: bold;
  color: #fff;
  border-radius: 2px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  font-size:.7rem;
  z-index:1;
  opacity:.9;
  box-shadow: 0 2px 2px rgba(0,0,0,.1);
  transform: translateX(3px);
}
@media screen and (min-width: 480px){
  .linkto:before{
    font-size:.7em;
  }
}
bb';
  position: absolute;
  bottom: .5rem;
  right: 1rem;
  font-size: 70%;
  background-color: #ffd242;
  padding: .3em 1.7em;
  font-weight: bold;
  color: #fff;
  border-radius: 2px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  font-size:.7rem;
  z-index:1;
  opacity:.9;
  box-shadow: 0 2px 2px rgba(0,0,0,.1);
  transform: translateX(3px);
}
@media screen and (min-width: 480px){
  .linkto:before{
    font-size:.7em;
  }
}

SANGOカラーver

内部リンク(関連記事)のSANGOカラーverの完成イメージ

.linkto{
  padding: .9rem 1rem 1.5rem;
  color: #707070;
  position: relative;
  border-color: #92ccfb !important;/*枠線の色*/
  font-size:.95em;
  box-shadow: 0 4px 4px rgba(0,0,0,.13), 0 2px 3px -2px rgba(0,0,0,.12);/*本体の影*/
  margin:0 auto;
  z-index:0;
}
.linkto span {
  opacity: .8;
}
.linkto:hover {
  background-color: initial;
  opacity: .9;
  transform: scale(1.04);
}
.linkto img{
  box-shadow:initial;
  max-width: 70%;
  margin-left: .7rem;
  z-index: 0;
  margin-top:10px;
}
@media only screen and (max-width: 480px) {
  .linkto img{
    max-width: 65%;
    margin-left: .7rem;
  }
}
.linkto:before {
  content: 'あわせて読みたい';
  position: absolute;
  top: -.8rem;
  left: auto;
  font-size: 50%;
  background-color: #92ccfb;/*「あわせて読みたい」の背景色*/
  padding: .4em .8em;
  font-weight: bold;
  color: #fff;/*「あわせて読みたい」の文字色*/
  border-radius: 2px;
  font-size:.6rem;
  z-index: 1;
  margin-left:-.4em;
}
.linkto:after{
  content: '続きを読む 
.linkto{
  padding: .9rem 1rem 1.5rem;
  color: #707070;
  position: relative;
  border-color: #92ccfb !important;/*枠線の色*/
  font-size:.95em;
  box-shadow: 0 4px 4px rgba(0,0,0,.13), 0 2px 3px -2px rgba(0,0,0,.12);/*本体の影*/
  margin:0 auto;
  z-index:0;
}
.linkto span {
  opacity: .8;
}
.linkto:hover {
  background-color: initial;
  opacity: .9;
  transform: scale(1.04);
}
.linkto img{
  box-shadow:initial;
  max-width: 70%;
  margin-left: .7rem;
  z-index: 0;
  margin-top:10px;
}
@media only screen and (max-width: 480px) {
  .linkto img{
    max-width: 65%;
    margin-left: .7rem;
  }
}
.linkto:before {
  content: 'あわせて読みたい';
  position: absolute;
  top: -.8rem;
  left: auto;
  font-size: 50%;
  background-color: #92ccfb;/*「あわせて読みたい」の背景色*/
  padding: .4em .8em;
  font-weight: bold;
  color: #fff;/*「あわせて読みたい」の文字色*/
  border-radius: 2px;
  font-size:.6rem;
  z-index: 1;
  margin-left:-.4em;
}
.linkto:after{
  content: '続きを読む \0bb';
  position: absolute;
  bottom: .5rem;
  right: 1rem;
  font-size: 70%;
  background-color: #73dafb;/*「続きを読む」の背景色*/
  padding: .3em 1.7em;
  font-weight: bold;
  color: #fff;/*「続きを読む」の文字色*/
  border-radius: 2px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  font-size:.7rem;
  z-index:1;
  opacity:.9;
  box-shadow: 0 2px 2px rgba(0,0,0,.1);
  transform: translateX(3px);
}
@media screen and (min-width: 480px){
  .linkto:before{
    font-size:.7em;
  }
}
bb';
  position: absolute;
  bottom: .5rem;
  right: 1rem;
  font-size: 70%;
  background-color: #73dafb;/*「続きを読む」の背景色*/
  padding: .3em 1.7em;
  font-weight: bold;
  color: #fff;/*「続きを読む」の文字色*/
  border-radius: 2px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  font-size:.7rem;
  z-index:1;
  opacity:.9;
  box-shadow: 0 2px 2px rgba(0,0,0,.1);
  transform: translateX(3px);
}
@media screen and (min-width: 480px){
  .linkto:before{
    font-size:.7em;
  }
}
.linkto{
  padding: .9rem 1rem 1.5rem;
  color: #707070;
  position: relative;
  border-color: #92ccfb !important;
  font-size:.95em;
  box-shadow: 0 4px 4px rgba(0,0,0,.13), 0 2px 3px -2px rgba(0,0,0,.12);
  margin:0 auto;
  z-index:0;
}
.linkto span {
  opacity: .8;
}
.linkto:hover {
  background-color: initial;
  opacity: .9;
  transform: scale(1.04);
}
.linkto img{
  box-shadow:initial;
  max-width: 70%;
  margin-left: .7rem;
  z-index: 0;
  margin-top:10px;
}
@media only screen and (max-width: 480px) {
  .linkto img{
    max-width: 65%;
    margin-left: .7rem;
  }
}
.linkto:before {
  content: 'あわせて読みたい';
  position: absolute;
  top: -.8rem;
  left: auto;
  font-size: 50%;
  background-color: #92ccfb;
  padding: .4em .8em;
  font-weight: bold;
  color: #fff;
  border-radius: 2px;
  font-size:.6rem;
  z-index: 1;
  margin-left:-.4em;
}
.linkto:after{
  content: '続きを読む 
.linkto{
  padding: .9rem 1rem 1.5rem;
  color: #707070;
  position: relative;
  border-color: #92ccfb !important;
  font-size:.95em;
  box-shadow: 0 4px 4px rgba(0,0,0,.13), 0 2px 3px -2px rgba(0,0,0,.12);
  margin:0 auto;
  z-index:0;
}
.linkto span {
  opacity: .8;
}
.linkto:hover {
  background-color: initial;
  opacity: .9;
  transform: scale(1.04);
}
.linkto img{
  box-shadow:initial;
  max-width: 70%;
  margin-left: .7rem;
  z-index: 0;
  margin-top:10px;
}
@media only screen and (max-width: 480px) {
  .linkto img{
    max-width: 65%;
    margin-left: .7rem;
  }
}
.linkto:before {
  content: 'あわせて読みたい';
  position: absolute;
  top: -.8rem;
  left: auto;
  font-size: 50%;
  background-color: #92ccfb;
  padding: .4em .8em;
  font-weight: bold;
  color: #fff;
  border-radius: 2px;
  font-size:.6rem;
  z-index: 1;
  margin-left:-.4em;
}
.linkto:after{
  content: '続きを読む \0bb';
  position: absolute;
  bottom: .5rem;
  right: 1rem;
  font-size: 70%;
  background-color: #73dafb;
  padding: .3em 1.7em;
  font-weight: bold;
  color: #fff;
  border-radius: 2px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  font-size:.7rem;
  z-index:1;
  opacity:.9;
  box-shadow: 0 2px 2px rgba(0,0,0,.1);
  transform: translateX(3px);
}
@media screen and (min-width: 480px){
  .linkto:before{
    font-size:.7em;
  }
}
bb';
  position: absolute;
  bottom: .5rem;
  right: 1rem;
  font-size: 70%;
  background-color: #73dafb;
  padding: .3em 1.7em;
  font-weight: bold;
  color: #fff;
  border-radius: 2px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  font-size:.7rem;
  z-index:1;
  opacity:.9;
  box-shadow: 0 2px 2px rgba(0,0,0,.1);
  transform: translateX(3px);
}
@media screen and (min-width: 480px){
  .linkto:before{
    font-size:.7em;
  }
}

お好みの色にカスタマイズする

ここは「上の完成イメージとは違う色合いにしたい」という方向け。

コピペしたCSSの「/*〇〇色*/」とあるところのカラーコードを、それぞれお好みの色にしてください。

お好みの文言にする

.linkto:before {
  content: 'あわせて読みたい';
(省略)
.linkto:after{
  content: '続きを読む 
.linkto:after{
  content: '続きを読む \0bb';
(省略)
bb';
(省略)

「あわせて読みたい」や「続きを読む>>」の文言を変えたい場合は、上の箇所をいじってあげてください。

ここまでくればカスタマイズは終了。お疲れ様です。

お疲れ様！

くるみ

CSSの変更が反映されない場合

「あれ…?CSSが反映されないぞ…」となった場合は、キャッシュが原因であることが多いので以下の2つの方法を試してみてください。

キャッシュ系プラグイン

「WP Fastest Cache」や「WP Super Cache」をはじめとしたキャッシュ系プラグインをお使いの場合は、そちらの方でキャッシュを削除してください。

プラウザのキャッシュを削除

お使いのブラウザのキャッシュを削除してみてください。

Chromeをお使いの場合は

Windows［Shift］＋［Ctrl］＋［Delete］キー
Mac［shift］＋［command］＋［delete」キー

上のショートカットキーで削除できます。

まとめ

記事を読んでくれてありがとう

以上、SANGOの内部リンクのカスタマイズ方法でした。

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

【SANGOカスタマイズ総まとめ】サイトをもっと魅力的に！【SANGOカスタマイズ総まとめ】サイトをもっと魅力的に！

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

9 COMMENTS

千秋

こんにちは。
いつもステキなカスタマイズをありがとうございます。

質問なのですが、CSSコードを追加しましたところPCでは問題なく表示できたのですが、スマホだと反映がされない状況です。

原因や解決策がわかりましたら、教えていただけますでしょうか。
お手数をお掛けしますが、よろしくお願いいたします。

返信する
おはようポテトのアイコン おはようポテト

千秋様

おそらくキャッシュの影響だと思われます🤔

記事内の「CSSの変更が反映されない場合」の方法は試されましたでしょうか？
もしお試しになっていないようであればそちらを確認していただけると幸いです！

返信する
千秋

おはようポテト様

お世話になっております。
早々にご返信いただきまして、ありがとうございました。

キャッシュ系のプラグインは利用していないのですが、念のためプラグインをすべて無効化にした状態でも試しましたが症状改善されませんでした。
ブラウザキャッシュもいくつかの方法で試しております。

お手隙の際で構いませんので、改善方法がございましたらご教示いただけますと大変助かります。何卒よろしくお願いいたします。

返信する
おはようポテトのアイコン おはようポテト

千秋さん

そうなりますと、おそらくCSSの記述の仕方が原因かもしれません🤔

以下のように、当サイトのカスタマイズ記事で紹介しているコードを「@media…」の中にコピペしてしまってはいないでしょうか…？

——————-
@media only screen and (max-width: 〇〇px) {
/* この中にコピペしてしまっているかも？ */
}
——————-

ご確認いただけますと幸いです。

返信する
千秋

おはようポテト様

お世話になっております。
ご連絡が遅くなりまして、申し訳ございませんでした。

「@media…」の中にコードをコピペしてしまっている件ですが、確認しましたが、そのようにはなっておりませんでした。
コードは色変更も含め手を加えていないため、表示はご提供いただいているコードと同じものになっておりました。

念のため既存のコードを消去後、改めてコードをコピペし直して表示を確認しましたが、やはりスマホだけ反映されない状況でした。

恐れ入りますが他に改善方法がございましたらご教示いただけますと助かります。何卒よろしくお願いいたします。

返信する
おはようポテトのアイコン おはようポテト

千秋さん

そうですね…
となりますとAMPなどの影響かもしれません🤔
（正直他に原因が思いつかないですね…)

AMPはご利用になっていますでしょうか？
もしご利用されているのであればOFFにしてみると改善するかもしれません。

（あまり無いとは思いますがブラウザの種類が原因の可能性もあるので、複数のブラウザで検証いただきたいです。）
よろしくお願いします。

返信する
千秋

おはようポテト様

お世話になっております。
色々とありがとうございます。

AMPは利用していないです。
SANGOとの相性も悪いと伺いましたので、導入しておりませんでした。

ブラウザに関してはSafari、Google Chrome、Edgeの3つで同じ症状です。
毎度何か変更を加える度にキャッシュクリアをしているので、その辺りの問題もないのではないかなぁと思っています。

やはり原因不明ですよね…。
ちょっとだけ引っ掛かっていることとしましては、グーテンベルクの存在です。

クラシックエディタで編集していた時はカスタマイズのCSSが反映されないということはなかったのですが、グーテンベルクに変更後、一時期他のカスタマイズでも反映されないことがありました。
こちらに関しては明確な根拠がないため、何ともいえない状況なのですが。

実はこの反映されない問題を解決したくて、利用していたPORIPUをやめて、再度はじめからSANGOを入れ直し、ブログ自体を作り直して現在に至っております。
もうどんだけぽてちるさん大好きなんだって感じですが（汗）

なので、おはようポテトさんの方で原因が不明でしたら、すっぱり諦めようと思います。
有難いことにPC上では表示されていますので、PC表示を見て今後もニヤニヤしていきたいと思います。
今後、何かの拍子に解決となり得そうな事柄が出て参りましたら、公開していただけますと大変助かります。

この度は色々とお手数をお掛けしまして、大変申し訳ございませんでした。
ご相談にのっていただきまして、本当にありがとうございました！

返信する
千秋

おはようポテト様

お世話になっております。
今回のSANGO Gutenbergのプラグインを更新したところ、何とスマホでも表示が反映されるようになりました！

今までアップデートの度に更新してきましたが、いつもは特に変化がなかったので、今回はとても驚きましたが、ようやく反映されて本当に嬉しく思っております。
今までたくさん質問してしまいまして、大変ご迷惑をお掛けいたしました。

今後もおはようポテトさんのカスタマイズを楽しみにしております。
この度は色々とご対応いただきまして、本当にありがとうございました！

返信する
シュン

ぽてちるさん

いつも参考にしております！
可能でしたら画像の大きさを変える方法をおしえていただけないでしょうか？

横長にできればうれしいです

返信する

コメントを残す

この記事を書いた人
おはようポテトのプロフィール画像
おはようポテト

新卒1年目のひよっこWEBエンジニア。業務ではPHPを触り、プライベートではNext.jsで宅配冷凍弁当の比較サイトとWeb制作に役立つツールの開発・運営をしています。お問い合わせはこちらよりどうぞ。

前の記事

SANGOの目次のカスタマイズ方法
【SANGO】目次のデザインをよりお洒落にするカスタマイズ方法

次の記事

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