どうもおはようポテト(@ohayoupoteto22)です。
外部リンクを可愛くオシャレにしたいんじゃ…
ということで今回は
「SANGOの外部リンクをもっとオシャレにしたい」
「他サイトへのリンク、デフォルトのままは何か嫌だな」
という方に向けて「SANGOの外部リンクを可愛くカスタマイズする方法」をまとめました。
参考になれば幸いです⸝⸝- ̫ -⸝⸝
ブログ主
お品書き
外部リンクの完成イメージ
オレンジver
参考 SANGOの外部リンクをカスタマイズしてみたよぽてちる ぽてちるで使っているものそのまんまです。個人的にはめっさ気に入ってます。SANGOカラーver
SANGOユーザーのサイトのテーマカラーに使われがちな水色。その色合いverのものも作ってみました。
くるみ
両方のバージョンとも行ったこととしては
アイコンを若葉にして可愛く
背景色や文字色、影を調整して可愛く
全体的に余白を少し狭くしてスッキリと
こんな感じです。
外部リンクのカスタマイズ手順
方法はいたってシンプルかつ簡単です。
「完成イメージに目当ての色のものが無かった…」という場合はstep2で色を変更してみてください。
くるみ
バックアップを忘れずに
早速カスタマイズしていきたいところですが万が一の事態を考え、事前にバックアップを取っておくことをオススメします。
「バックアップするの初めて…」という方は以下の記事を参考にしてみてください。
【WordPress】CSSをカスタマイズする際のバックアップの取り方
ブログ主
SANGOの外部リンクのカスタマイズ方法
CSSコードをコピペする
「追加CSS」に追加
「テーマエディター」を使って追加
FTPソフトを使って追加
以上のどれかの方法でカスタマイズコードをコピペします。
ブログ主
「カスタマイズするの初めて…」という方は以下の記事を参考にしてみてください。
【初心者向け】WordPressでCSSコードを追加する3つの方法オレンジ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
.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カスタマイズ総まとめ参考になれば幸いです！では⸝⸝- ̫ -⸝⸝
