【SANGOカスタマイズしてみた】参考リンクのデザインを変えてみる

この記事では参考リンクのデザインをカスタマイズした方法を説明。

みなさんのアレンジ

2018.10.10追加　バビさんverへジャンプ 2018.10.12追加　りんごさんverへジャンプ

追記

2018.10.9 参考リンクはデフォルトで最大幅450pxが指定されています。横幅を80%から100%にするとスッキリするかもです。お好みでお願いします。僕は100%にしました。

カスタマイズは自己責任でやろう！

「自己責任」の意味がわからない方、初めてカスタマイズする方はこちら

カスタマイズは自己責任。ぼくはこんな風に思っています。

CUSTOM　POINT

内部リンクに似たようなデザインにしてみました。「新しいタブで開く」の文字を追加しました。文字数が長くても被らないです。

こんな感じで変更

Before

After

ほんまもんのリンク

参考外部リンクとはferret

このサイトの環境

テーマ

子テーマ

プラグイン

使うソフトなどはこちら

必須

WordPress

Google Chrome

推奨

File zilla

sublime text

ジャンプマップ

カスタマイズの準備

追加方法	難しさ
追加CSS
テーマエディター
FTPソフト

はじめてカスタマイズをする方におすすめなのは追加CSSです。

ブログのカスタマイズを加速させる「追加CSS」の使い方

夏だし髪を斬りに行こう！

夏だしどっか行こう！

カスタマイズコードの追加

CSSコード（コメントあり）

/*--------------------------------------
  参考リンク
--------------------------------------*/
.reference {/*全体*/
    width: 80%;/*横幅*/
    background: #fff;/*背景色*/
    box-shadow: none;/*影なし*/
    border: 2px solid rgba(66,66,66,0.1);/*枠線*/
    padding: 6px;/*内側の余白*/
    position: relative;/*移動の基準*/
}
.reference:before {/*新しくタブで開く部分*/
    content: "新しいタブで開く";
    color: rgba(66,66,66,0.54);/*文字の色*/
    position: absolute;/*自由に移動*/
    right: 10px;/*右側からの距離*/
    font-size: 12px;/*文字のサイズ*/
    bottom: 6px;/*下からの距離*/
    display: inline-block;/*高さや幅が調整可能*/
    background: rgba(66,66,66,0.1);/*背景色*/
    padding: 2px 25px 2px 10px;/*内側の余白*/
    border-radius: 15px;/*角丸*/
}
.reference:after {/*リンクのアイコン部分*/
    content: "\f08e";/*アイコン*/
    font-family: FontAwesome;
    color: rgba(66,66,66,0.54);/*文字色*/
    position: absolute;/*自由に動けるように*/
    right: 17px;/*右からの距離*/
    font-size: 14px;/*アイコンの大きさ*/
    bottom: 6px;/*下からの距離*/
}
.reference .refttl {/*参考とアイコン部分*/
    width: 89px;/*横幅*/
    border-right: none;/*右線を削除*/
    background: rgba(66,66,66,0.2);/*バックのグランドやで*/
    padding: 13px;/*内側の余白（上下左右）*/
}
.reference .refcite {/*記事タイトル部分*/
    padding-left: 15px;/*内側左の余白*/
    line-height: 1.8;/*行の高さ*/
}
.reference .refcite span {/*サイト名部分*/
    color: rgba(66,66,66,0.38);/*文字色*/
    font-size: .95em;/*文字の大きさ*/
}
@media screen and (max-width: 500px){/*スマホ表示の設定*/
.reference {
    width: 100%;
}
.reference .refcite {
    padding-left: 10px;
    font-size: .8em;
    padding-bottom: 25px;
}}
.reference:hover {
    box-shadow: none;
    color: rgba(66,66,66,0.87);
    background: rgba(66,66,66,0.07);
}

/*--------------------------------------

参考リンク

--------------------------------------*/

.reference {/*全体*/

width: 80%;/*横幅*/

background: #fff;/*背景色*/

box-shadow: none;/*影なし*/

border: 2px solid rgba(66,66,66,0.1);/*枠線*/

padding: 6px;/*内側の余白*/

position: relative;/*移動の基準*/

}

.reference:before {/*新しくタブで開く部分*/

content: "新しいタブで開く";

color: rgba(66,66,66,0.54);/*文字の色*/

position: absolute;/*自由に移動*/

right: 10px;/*右側からの距離*/

font-size: 12px;/*文字のサイズ*/

bottom: 6px;/*下からの距離*/

display: inline-block;/*高さや幅が調整可能*/

background: rgba(66,66,66,0.1);/*背景色*/

padding: 2px 25px 2px 10px;/*内側の余白*/

border-radius: 15px;/*角丸*/

}

.reference:after {/*リンクのアイコン部分*/

content: "\f08e";/*アイコン*/

font-family: FontAwesome;

color: rgba(66,66,66,0.54);/*文字色*/

position: absolute;/*自由に動けるように*/

right: 17px;/*右からの距離*/

font-size: 14px;/*アイコンの大きさ*/

bottom: 6px;/*下からの距離*/

}

.reference .refttl {/*参考とアイコン部分*/

width: 89px;/*横幅*/

border-right: none;/*右線を削除*/

background: rgba(66,66,66,0.2);/*バックのグランドやで*/

padding: 13px;/*内側の余白（上下左右）*/

}

.reference .refcite {/*記事タイトル部分*/

padding-left: 15px;/*内側左の余白*/

line-height: 1.8;/*行の高さ*/

}

.reference .refcite span {/*サイト名部分*/

color: rgba(66,66,66,0.38);/*文字色*/

font-size: .95em;/*文字の大きさ*/

}

@media screen and (max-width: 500px){/*スマホ表示の設定*/

.reference {

width: 100%;

}

.reference .refcite {

padding-left: 10px;

font-size: .8em;

padding-bottom: 25px;

}}

.reference:hover {

box-shadow: none;

color: rgba(66,66,66,0.87);

background: rgba(66,66,66,0.07);

}

CSSコード（コメントなし）

/*--------------------------------------
  参考リンク
--------------------------------------*/
.reference {
    width: 80%;
    background: #fff;
    box-shadow: none;
    border: 2px solid rgba(66,66,66,0.1);
    padding: 6px;
    position: relative;
}
.reference:before {
    content: "新しいタブで開く";
    color: rgba(66,66,66,0.54);
    position: absolute;
    right: 10px;
    font-size: 12px;
    bottom: 6px;
    display: inline-block;
    background: rgba(66,66,66,0.1);
    padding: 2px 25px 2px 10px;
    border-radius: 15px;
}
.reference:after {
    content: "\f08e";
    font-family: FontAwesome;
    color: rgba(66,66,66,0.54);
    position: absolute;
    right: 17px;
    font-size: 14px;
    bottom: 6px;
}
.reference .refttl {
    width: 89px;
    border-right: none;
    background: rgba(66,66,66,0.2);
    padding: 13px;
}
.reference .refcite {
    padding-left: 15px;
    line-height: 1.8;
}
.reference .refcite span {
    color: rgba(66,66,66,0.38);
    font-size: .95em;
}
@media screen and (max-width: 500px){
.reference {
    width: 100%;
}
.reference .refcite {
    padding-left: 10px;
    font-size: .8em;
    padding-bottom: 25px;
}}
.reference:hover {
    box-shadow: none;
    color: rgba(66,66,66,0.87);
    background: rgba(66,66,66,0.07);
}

/*--------------------------------------

参考リンク

--------------------------------------*/

.reference {

width: 80%;

background: #fff;

box-shadow: none;

border: 2px solid rgba(66,66,66,0.1);

padding: 6px;

position: relative;

}

.reference:before {

content: "新しいタブで開く";

color: rgba(66,66,66,0.54);

position: absolute;

right: 10px;

font-size: 12px;

bottom: 6px;

display: inline-block;

background: rgba(66,66,66,0.1);

padding: 2px 25px 2px 10px;

border-radius: 15px;

}

.reference:after {

content: "\f08e";

font-family: FontAwesome;

color: rgba(66,66,66,0.54);

position: absolute;

right: 17px;

font-size: 14px;

bottom: 6px;

}

.reference .refttl {

width: 89px;

border-right: none;

background: rgba(66,66,66,0.2);

padding: 13px;

}

.reference .refcite {

padding-left: 15px;

line-height: 1.8;

}

.reference .refcite span {

color: rgba(66,66,66,0.38);

font-size: .95em;

}

@media screen and (max-width: 500px){

.reference {

width: 100%;

}

.reference .refcite {

padding-left: 10px;

font-size: .8em;

padding-bottom: 25px;

}}

.reference:hover {

box-shadow: none;

color: rgba(66,66,66,0.87);

background: rgba(66,66,66,0.07);

}

確認の手順

カスタマイズコードを保存
カスタマイズしたページを開く
cntrl+F5を押す

いわゆるキャッシュ削除ですね。詳しい手順はこちらの記事で書いています。

カスタマイズはキャッシュ削除をマスターしてからです

横幅

このカスタマイズでは、横幅を80%にしています。ただ、それだとタブレット表示のときに450pxまでしか幅が縮小されません。気になる方は100%にしておくといいかもです。それとmax-widthも700pxにしておくといつでも横幅MAXになります。 reference{width:100%; max-width:700px;}これを追記してください。

こんなパターンも

背景色がぴっしり入ったバージョンです。これにしたい場合は以下のコードを追加してください。

.reference .refttl {
    box-shadow: 0 0 0 6px rgba(66,66,66,0.2);
}

.reference .refttl {

box-shadow: 0 0 0 6px rgba(66,66,66,0.2);

}

みなさんのアレンジ集

バビさんver

シュッとしてコンパクトにアレンジしています！

デフォルトの浮き上がるバージョンにしているので、関連記事カード型を使っている方のデザインとなじみますね。

CSSコード

.reference {/*全体*/
    max-width: 550px;
    width: 100%;
    background: #fff;/*背景色*/
    border: 1px solid rgba(66,66,66,0.1);/*枠線*/
    padding: 6px;/*内側の余白*/
    position: relative;/*移動の基準*/
}
.reference:before {/*新しくタブで開く部分*/
    content: "新しいタブで開く";
    color: rgba(66,66,66,0.54);/*文字の色*/
    position: absolute;/*自由に移動*/
    right: 10px;/*右側からの距離*/
    font-size: 12px;/*文字のサイズ*/
    bottom: 6px;/*下からの距離*/
    display: inline-block;/*高さや幅が調整可能*/
    background: rgba(66,66,66,0.1);/*背景色*/
    padding: 2px 25px 2px 10px;/*内側の余白*/
    border-radius: 15px;/*角丸*/
}
.reference:after {/*リンクのアイコン部分*/
    content: "\f08e";/*アイコン*/
    font-family: FontAwesome;
    color: rgba(66,66,66,0.54);/*文字色*/
    position: absolute;/*自由に動けるように*/
    right: 17px;/*右からの距離*/
    font-size: 14px;/*アイコンの大きさ*/
    bottom: 6px;/*下からの距離*/
}
.reference .refttl {/*参考とアイコン部分*/
    border-right: none;/*右線を削除*/
border-radius: 3px;/*角丸*/
    background: rgba(66,66,66,0.2);/*バックのグランドやで*/
}
.reference .refttl:before {/*参考の上のアイコン*/
    display: block;
    color: #555;
    font-family: FontAwesome;
    font-size: 1.5em;
    content: "\f02e";
}
.reference .refcite {/*記事タイトル部分*/
    padding-left: 15px;/*内側左の余白*/
    line-height: 1.8;/*行の高さ*/
}
.reference .refcite span {/*サイト名部分*/
    color: rgba(66,66,66,0.38);/*文字色*/
    font-size: .95em;/*文字の大きさ*/
}
@media screen and (max-width: 500px){/*スマホ表示の設定*/
.reference {
    width: 100%;
}
.reference .refcite {
    padding-left: 10px;
    font-size: .8em;
    padding-bottom: 25px;
}}

.reference {/*全体*/

max-width: 550px;

width: 100%;

background: #fff;/*背景色*/

border: 1px solid rgba(66,66,66,0.1);/*枠線*/

padding: 6px;/*内側の余白*/

position: relative;/*移動の基準*/

}

.reference:before {/*新しくタブで開く部分*/

content: "新しいタブで開く";

color: rgba(66,66,66,0.54);/*文字の色*/

position: absolute;/*自由に移動*/

right: 10px;/*右側からの距離*/

font-size: 12px;/*文字のサイズ*/

bottom: 6px;/*下からの距離*/

display: inline-block;/*高さや幅が調整可能*/

background: rgba(66,66,66,0.1);/*背景色*/

padding: 2px 25px 2px 10px;/*内側の余白*/

border-radius: 15px;/*角丸*/

}

.reference:after {/*リンクのアイコン部分*/

content: "\f08e";/*アイコン*/

font-family: FontAwesome;

color: rgba(66,66,66,0.54);/*文字色*/

position: absolute;/*自由に動けるように*/

right: 17px;/*右からの距離*/

font-size: 14px;/*アイコンの大きさ*/

bottom: 6px;/*下からの距離*/

}

.reference .refttl {/*参考とアイコン部分*/

border-right: none;/*右線を削除*/

border-radius: 3px;/*角丸*/

background: rgba(66,66,66,0.2);/*バックのグランドやで*/

}

.reference .refttl:before {/*参考の上のアイコン*/

display: block;

color: #555;

font-family: FontAwesome;

font-size: 1.5em;

content: "\f02e";

}

.reference .refcite {/*記事タイトル部分*/

padding-left: 15px;/*内側左の余白*/

line-height: 1.8;/*行の高さ*/

}

.reference .refcite span {/*サイト名部分*/

color: rgba(66,66,66,0.38);/*文字色*/

font-size: .95em;/*文字の大きさ*/

}

@media screen and (max-width: 500px){/*スマホ表示の設定*/

.reference {

width: 100%;

}

.reference .refcite {

padding-left: 10px;

font-size: .8em;

padding-bottom: 25px;

}}

バビの雑記帳

バビさん（@shikamori_p）

りんごさんver

参考外部リンクとはferret

りんごさんのブログにマッチしたカラーです！！

ブログのカラーに合わせるとすごくなじみますね♪ CSSのカラーコードを変更すると自分のサイトに合ったものにアレンジできます。

CSSコード

/*--------------------------------------
 りんごさんver 　以下を変更
--------------------------------------*/
.reference:before {
    background: #FFE5E5;
}
.reference .refttl:before {
    color: #FC9D9D;
}
.reference .refttl {
    background: #FFE5E5;
}