【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: '続きを読む 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;
  }
}
.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;
  }
}

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: '続きを読む 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;
  }
}
.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;
  }
}

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

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

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

お好みの文言にする

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

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

 

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

お疲れ様！

くるみ

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

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

キャッシュ系プラグイン

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

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

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

Chromeをお使いの場合は

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

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

まとめ

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

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

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

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

コメントを残す

前の記事

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

次の記事

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