...

【SANGO】外部リンクを可愛くカスタマイズしてみた

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

どうもおはようポテト(@ohayoupoteto22)です。

外部リンクを可愛くオシャレにしたいんじゃ…

ということで今回は

「SANGOの外部リンクをもっとオシャレにしたい」

「他サイトへのリンク、デフォルトのままは何か嫌だな」

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

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

ブログ主

早速いってみよう!

 

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

オレンジver

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

 

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

 

水色ver

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

好きな方を選んでね!

ソロモン

両方のバージョンとも行ったこととしては

アイコンを若葉にして可愛く

背景色や文字色、影を調整して可愛く

全体的に余白を少し狭くしてスッキリと

こんな感じ。

 

カスタマイズ手順

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

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

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

レッツゴー!

ソロモン

 

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

CSSコードをコピペする

「追加CSS」に追加

「テーマエディター」を使って追加

FTPソフトを使って追加

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

ブログ主

「追加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);
}

 

水色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の「/*〇〇色*/」とあるところのカラーコードを、それぞれお好みの色にしてください。

ブログ主

いい感じの色が思い浮かばない時は以下の記事をぜひ。
参考 配色パターン見本40選:ベストな色の組み合わせを探せるツールサルワカ

 

 

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

お疲れ様!

ソロモン

 

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

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

キャッシュ系プラグイン

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

 

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

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

Chromeをお使いの場合は

Windows :[Shift]+[Ctrl]+[Delete]キー

Mac:[shift]+[command]+[delete」キー

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

 

まとめ

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

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

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA