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

SANGOの外部リンクをカスタマイズする方法

くるみ

外部リンクを可愛くオシャレにしたいんじゃ…
ということで今回は

  • SANGOの外部リンクをもっとオシャレにしたい
  • 他サイトへのリンク、デフォルトのデザインがあまり気に入らない

という方に向けて「SANGOの外部リンクを可愛くカスタマイズする方法」をまとめました。

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

外部リンクの完成イメージ

オレンジver

参考 SANGOの外部リンクをカスタマイズしてみたよぽてちる

 
ぽてちるで使っているものそのまんまです。個人的にはめっさ気に入ってます。

SANGOカラーver

SANGOの外部リンクの水色verの完成イメージ

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

好きな方を選んでね!

くるみ

両方のバージョンとも行ったこととしては以下の通り。

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

ということで早速カスタマイズに移りましょう。

カスタマイズ手順

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

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

「完成イメージに目当ての色のものが無かった…」という場合はstep2で色を変更してみてください。

すぐ終わりそうだね!

くるみ

バックアップを忘れずに

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

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

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

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

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

CSSコードをコピペする

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

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

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

くるみ

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

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

オレンジver

参考 SANGOの外部リンクをカスタマイズしてみたよぽてちる
.reference .refttl:before {
content: "\f4d8";
color: #ffb36b;/*左のアイコンの色*/
}
.reference{
border-radius:5px;
color: rgba(100, 83, 58,.7);/*文字色*/
background: #fff9e5;/*背景色*/
box-shadow: 0 2px 2px rgba(0,0,0,.15);
border: 3px solid rgba(255,179,107,.3);/*ボーダー色*/
opacity:.95;
padding: 10px 10px 9px 0;
}
.reference .refttl{
border-right: solid 2px rgba(100, 83, 58,.1);
}
.reference .refttl:before {
content: "\f4d8";
color: #ffb36b;
}
.reference{
border-radius:5px;
color: rgba(100, 83, 58,.7);
background: #fff9e5;
box-shadow: 0 2px 2px rgba(0,0,0,.15);
border: 3px solid rgba(255,179,107,.3);
opacity:.95;
padding: 10px 10px 9px 0;
}
.reference .refttl{
border-right: solid 2px rgba(100, 83, 58,.1);
}

 SANGOカラーver

SANGOの外部リンクの水色verの完成イメージ

.reference .refttl:before {
content: "\f4d8";
color: #6bb6ff;/*左のアイコンの色*/
}
.reference{
border-radius:5px;
color:  rgba(80,80,90,.7);/*文字色*/
background: rgba(214,237,255,.3);/*背景色*/
box-shadow: 0 2px 2px rgba(0,0,0,.15);
border: 3px solid rgba(107,182,255,.3);/*ボーダー色*/
opacity:.95;
padding: 10px 10px 9px 0;
}
.reference .refttl{
border-right: solid 2px rgba(100, 83, 58,.1);
}
.reference .refttl:before {
content: "\f4d8";
color: #6bb6ff;
}
.reference{
border-radius:5px;
color:  rgba(80,80,90,.7);
background: rgba(214,237,255,.3);
box-shadow: 0 2px 2px rgba(0,0,0,.15);
border: 3px solid rgba(107,182,255,.3);
opacity:.95;
padding: 10px 10px 9px 0;
}
.reference .refttl{
border-right: solid 2px rgba(100, 83, 58,.1);
}

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

ここは「目当ての色のものが無かったンゴ…」という方向け。

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

色の調整も終わればカスタマイズは終了。お疲れ様です!

お疲れ様!

くるみ

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

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

キャッシュ系プラグイン

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

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

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

Chromeをお使いの場合は

Windows[Shift]+[Ctrl]+[Delete]キー
Mac[shift]+[command]+[delete」キー

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

まとめ

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

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

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

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

2 COMMENTS

おはようポテトのアイコン おはようポテト

匿名さん

これは大変失礼致しました…!
ご指摘ありがとうございます🙇‍♂️

返信する

コメントを残す

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

22年4月から自社開発企業のWebエンジニアとして働く大学生。このサイトでは主にプログラミングやWordPressカスタマイズについて発信しています。他に運営しているのは宅配冷凍弁当の特化ブログなど。お問い合わせはこちらよりどうぞ。