【SANGO】外部リンクを可愛くカスタマイズする方法

1. WordPress
2021/10/11

完成イメージ

Before

完成イメージ（Before）

After

完成イメージ（After）

ライトブルーとオレンジの2色をサンプルとして作りました。

アイコンを若葉にして可愛く
背景色や文字色、影を調整して可愛く
全体的に余白を少し狭くしてスッキリと

カスタマイズ方法

0. バックアップを忘れずに

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

その方法について詳しくは下記記事にまとめているでぜひ参考にしてください。

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

1. CSSを追記

ライトブルー

.reference .refttl::before {
  color: #6bb6ff; /* 左のアイコンの色 */
  content: "\f4d8";
}

.reference {
  padding: 10px 10px 9px 0;
  color: rgb(80 80 90 / 70%); /* 文字色 */
  background: rgb(214 237 255 / 30%); /* 背景色 */
  border: 3px solid rgb(107 182 255 / 30%); /* ボーダー色 */
  border-radius: 5px;
  box-shadow: 0 2px 2px rgb(0 0 0 / 15%);
  opacity: 0.95;
}

.reference .refttl {
  border-right: solid 2px rgb(100 83 58 / 10%);
}

オレンジ

.reference .refttl::before {
  color: #ffb36b; /* 左のアイコンの色 */
  content: "\f4d8";
}

.reference {
  padding: 10px 10px 9px 0;
  color: rgb(100 83 58 / 70%); /* 文字色 */
  background: #fff9e5; /* 背景色 */
  border: 3px solid rgb(255 179 107 / 30%); /* ボーダー色 */
  border-radius: 5px;
  box-shadow: 0 2px 2px rgb(0 0 0 / 15%);
  opacity: 0.95;
}

.reference .refttl {
  border-right: solid 2px rgb(100 83 58 / 10%);
}

上記コードを、テーマで読み込んでいるCSSファイルにコピペします。

CSSを編集する方法について、詳しくは下記記事にまとめているでぜひ参考にしてください。

【初心者向け】WordPressでCSSを編集・追加する方法2020/10/24 【WordPress】CSSの変更が反映されない場合の原因・対処法2022/05/13

もし任意の色を適用したい場合は、コピペしたCSSの/* 〇〇色 */とコメントしている箇所をお好みの色にしてください。

以上でカスタマイズは完了です 🎉

他のSANGOカスタマイズも全て下記記事にまとめているので、ぜひ参考にしてください。

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