SANGOの外部参考リンクデザインをCSSで変える。コピペOKなコード13例

どうも、あず(@yuuki_azusa)です

SANGOを一通りいじってみたので、Twitterで需要の高かったものから順番に、カスタマイズ記事を書いていきたいと思います。

今回はSANGOのショートコードで表示できる、外部参考リンクのデザインの変更について。

参考

あずさんちトップページにとびます

↑ これですね(・∀・)

コピペで変更できるように、いろいろなパターンを合計13個用意してみました。

カラーコードやアイコンフォントを変更すれば、いろいろなパターンに自分で変えられます。

SANGOの外部参考リンクデザインを変更する

変更する前に
SANGOは子テーマのstyle.cssの記述内容がうまく反映されないことがあります。

原因はよくわかりませんが、公式配布されている子テーマのstyle.cssに記述をしても、反映されたりされなかったりと、不便です。

そこで、私は「追加CSS」の機能を使って変更しています。こちらに記述すれば、きちんとCSSの内容は反映されます。

追加CSSの使い方

WordPress 4.7以降は標準搭載で、追加CSS機能が追加されています。

管理画面から「外観」→「カスタマイズ」→「追加CSS」を選択すると、CSSエディタが表示されます。

あず

この追加CSSは親テーマのアップデートや親テーマを変更しても、変更されません。

ということで、私は追加CSSに追記しています。私と同じように子テーマのstyle.cssが反映されない方はお試しください。

外部参考リンクデザイン

↑ デフォルトでは、このようなデザインになっています。

外部参考リンクは、SANGOの便利なショートコードなので、是非自分のブログの雰囲気に合わせてカスタマイズしてみてください。

SANGOで使えるショートコードについては、公式のページがわかりやすいです。

参考

SANGOのショートコード一覧サルワカ

以下、style.cssもしくは追加CSSにコピペするだけで使える、外部参考リンクのデザイン例です。

とにかくシンプル

デフォルトデザインを元に、とにかくシンプルな表示にしてみました。

css
/*--------------------------------------
  外部リンクボックス-シンプル
--------------------------------------*/
.reference {
	background: #f5f5f5;
	color: #545960;
}
.reference div {
   border-right: solid 2px #C1D8F6;
}
.reference div:before {
   color: #C1D8F6;
	 content: "\f072 ";
}
.reference p span {
 	color: #C1D8F6;
}

シンプルなピンク

背景を薄いピンクにしてみました。

css
/* --------------------------------------
 外部リンクボックス-ピンク
--------------------------------------*/
.reference {
   background: #FFF0F5;
   color: #555;
}
.reference div {
   border-right: solid 2px #FFD5EC;
}
.reference div:before {
   color: #FFABCE;
	 content: "\f046";
}
.reference p span {
   color: #ababab;
}

ちょっと濃いピンク

先のピンクよりも、濃いピンクにしてみました。

css
/*--------------------------------------
  外部リンクボックス-濃いピンク
--------------------------------------*/
.reference {
   background: #FFD8E3;
	color: #FA8AC5;
}
.reference div {
   border-right: solid 2px #D6B3C6;
}
.reference div:before {
   color: #F44275;
	 content: "\f004";
}
.reference p span {
 	color: #D6B3C6;
}

シンプルな青

シンプルに青くしてみました。

css
/* --------------------------------------
  外部リンクボックス-青
--------------------------------------*/
.reference {
   background: #BDD6F9;
   color: #555;
}
.reference div {
   border-right: solid 2px #6396DD;
}
.reference div:before {
   color: #6396DD;
	 content: "\f0a4";
}
.reference p span {
   color: #ababab;
}

シンプルな緑

シンプルに緑でまとめてみました。

css
/*--------------------------------------
  外部リンクボックス-緑
--------------------------------------*/
.reference {
   background: #A8F4BE;
   color: #366644;
}
.reference div {
   border-right: solid 2px #91B89D;
}
.reference div:before {
   color: #366644;
	 content: "\f015";
}
.reference p span {
   color: #91B89D;
} 

シンプルなグレー

シックな雰囲気をかもしだすグレーにしてみました。

css
/*--------------------------------------
  外部リンクボックス-グレー
--------------------------------------*/
.reference {
	background: #C1BEBD;
	color: #545960;
}
.reference div {
   border-right: solid 2px #858484;
}
.reference div:before {
   color: #545960;
	 content: "\f1ae  ";
}
.reference p span {
 	color: #858484;
} 

シンプルな黄色

シンプルなイエローデザイン。

css
/*--------------------------------------
  外部リンクボックス-イエロー
--------------------------------------*/
.reference {
   background: #FBEECA;
	 color: #545960;
}
.reference div {
   border-right: solid 2px #FBCDAB;
}
.reference div:before {
   color: #FEA985;
	 content: "\f08e";
}
.reference p span {
 	color: #bbbbbb;
} 

シンプルな紫

紫。シンプルに、紫。

css
/*--------------------------------------
  外部リンクボックス-パープル
--------------------------------------*/
.reference {
   background: #F0D6FB;
	 color: #555555;
}
.reference div {
   border-right: solid 2px #CDB7D8;
}
.reference div:before {
   color: #8D45AB;
	 content: "\f024";
}
.reference p span {
 	color: #CDB7D8;
} 

こなれ感のあるピンク

薄くななめに線が入っていて、こなれ感が出ます(こなれ感って何や)。ベースカラーはピンク。

css
/*--------------------------------------
  外部リンクボックス-こなれピンク
--------------------------------------*/
.reference {
	background: repeating-linear-gradient(-45deg,#ffe6f2,#ffe6f2 3px,#ffeae6 3px,#ffeae6 7px);
	color: #FEAAD7;
}
.reference div {
   border-right: solid 2px #FBC7E3;
}
.reference div:before {
   color: #F44275;
	 content: "\f004";
}
.reference p span {
 	color: #D6B3C6;
} 

こなれ感のある緑

こちらもななめの線を入れて、こなれ感を出してみました。ベースカラーはグリーン。

css
/*--------------------------------------
  外部リンクボックス-こなれグリーン
--------------------------------------*/
.reference {
	background: repeating-linear-gradient(-45deg,#D4FCCD,#D4FCCD 3px,#F3F7FD 3px,#F3F7FD 7px);
	color: #79A072;
}
.reference div {
   border-right: solid 2px #BFEAB8;
}
.reference div:before {
   color: #79A072;
	 content: "\f00c";
}
.reference p span {
 	color: #ADDBA5;
} 

こなれ感のある青

こちらもななめの(以下略)。ベースカラーはブルー。

css
/*--------------------------------------
  外部リンクボックス-こなれブルー
--------------------------------------*/
.reference {
	background: repeating-linear-gradient(-45deg,#D6E7FB,#D6E7FB 3px,#F3F7FD 3px,#F3F7FD 7px);
	color: #4C6077;
}
.reference div {
   border-right: solid 2px #A2CBFD;
}
.reference div:before {
   color: #78B3FB;
	 content: "\f002";
}
.reference p span {
 	color: #AECFF6;
} 

こなれ感のある黄色

同じく(以下略)。ベースカラーはイエロー。

css
/*--------------------------------------
  外部リンクボックス-こなれイエロー
--------------------------------------*/
.reference {
	background: repeating-linear-gradient(-45deg,#F9F1E0,#F9F1E0 3px,#FFECC5 3px,#FFECC5 7px);
	color: #757574;
}
.reference div {
   border-right: solid 2px #FDC694;
}
.reference div:before {
   color: #FD8E29;
	 content: "\f005";
}
.reference p span {
 	color: #FDC694;
}

あずさんちで使っているデザイン

参考

あずさんちトップページにとびます

こなれピンクをベースに、少しだけ変更しています。

css
/*--------------------------------------
  あずさんちの外部リンクボックス
--------------------------------------*/

.reference {
	background: repeating-linear-gradient(-45deg,#ffe6f2,#ffe6f2 3px,#ffeae6 3px,#ffeae6 7px);
	color: #555;
}
.reference div {
   border-right: dashed 2px #FBC7E3;
}
.reference div:before {
   color: #F44275;
	 content: "\f004";
}
.reference p span {
 	color: #bbb;
} 

自分でカスタマイズする場合

css
/*--------------------------------------
  外部リンクボックスのデザイン変更
--------------------------------------*/
.reference {
   background: #f5f5f5;/*ベースカラー*/
   color: #545960; /*参考・記事タイトルの色*/
}
.reference div {
   border-right: solid 2px #C1D8F6; /*間の線のデザイン*/
}
.reference div:before {
   color: #C1D8F6; /*アイコンの色*/
   content: "\f072"; /*アイコンの種類*/
}
.reference p span {
   color: #C1D8F6; /*サイト名の色*/
}

基本となるのは、このコードにしています。例で最初に挙げたシンプルなデザインのもの。

一箇所ずつ画像付きで説明していきます。赤くなっている部分が変更できるところです。

ベースカラーの変更

ここを編集すると、背景色が変わります。

css
.reference {
   background: #f5f5f5;/*←ここのカラーコードを変えます*/
}

記事タイトルなどの色を変更

ここを編集すると、「記事タイトル」と「参考」の色が変わります。

css
.reference {
   color: #545960; /*←ここのカラーコードを変えます*/
}

間の線のデザインを変える

ここを編集すると、間の線のデザインを変えられます。

css
.reference div {
   border-right: solid 2px #C1D8F6; /*←間の線のデザインを変える*/
}

solidの部分を変更すると、線のデザインを変えられます。

  • solid … 直線
  • double … 2本線
  • dashed … 破線
  • dotted … 点線
  • none … 線がなくなる

2pxの部分を変更すると、線の太さが変えられます。数字が大きくなるほど太くなります。

アイコンの変更

ここを編集するとアイコンの色が変わります。

css
.reference div:before {
   color: #C1D8F6; /*←ここのカラーコード を変えると色が変わります*/
}

アイコンの種類を変えるには、以下のf072の部分を変更します。

css
.reference div:before {
   content: "\f072"; /*アイコンの種類*/
}

アイコンはfontawesomeから探しましょう。

fontawesomeにアクセスして好きなアイコンを選び、Unicodeをコピペすれば変更できます。

参考

アイコンページfontawesome

サイト名の色を変更

ここを変更すると、サイト名の部分の色が変えられます。

css
.reference p span {
   color: #C1D8F6; /*←ここのカラーコードを変える*/
}

SANGOをカスタマイズして更にこだわろう

SANGOはデフォルトのままでもステキなデザインですが、今回の外部参考リンクのように、カスタマイザーから色が変更できない部分は、色が浮いてしまったりすることがあります。

そんなときは、CSSで簡単に色やデザインを変更できることも多いので、チャレンジしてみてください。

Twitterから、SANGOでカスタマイズしたい場所をご連絡していただければ、やり方を調べてみますので是非お気軽にご連絡ください(・∀・)

注意
ただし、独学ですので全部できるとは限りません。

SANGOのカスタマイズ記事はコチラにまとめました。良ければご覧ください。

WPテーマをSANGOに変えてからやったカスタマイズまとめ

2017.10.01

最後まで読んでくれてありがとうございました。あず(@yuuki_azusa)でした

コメントを残す