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

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

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

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

↑ こんな感じに変更します(・∀・)

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

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

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

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

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

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

SANGOのショートコード一覧

以下、style.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;
}

シンプルなピンク

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

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

ちょっと濃いピンク

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

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

シンプルな青

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

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

シンプルな緑

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

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

シンプルなグレー

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

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

シンプルな黄色

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

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

シンプルな紫

紫。シンプルに、紫。

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

こなれ感のあるピンク

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

/*--------------------------------------
  外部リンクボックス-こなれピンク
--------------------------------------*/
.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;
} 

こなれ感のある緑

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

/*--------------------------------------
  外部リンクボックス-こなれグリーン
--------------------------------------*/
.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;
} 

こなれ感のある青

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

/*--------------------------------------
  外部リンクボックス-こなれブルー
--------------------------------------*/
.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;
} 

こなれ感のある黄色

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

/*--------------------------------------
  外部リンクボックス-こなれイエロー
--------------------------------------*/
.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;
}

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

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

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

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

ベースカラーの変更

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

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

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

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

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

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

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

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

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

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

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

アイコンの変更

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

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

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

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

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

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

アイコンページ

サイト名の色を変更

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

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

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

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

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

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

ただ、独学ですので全部できるとは限りませんが(´;ω;`)

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

[kanren2 postid=4078]

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です