【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

見たい場所へジャンプ

1 カスタマイズの準備
2 カスタマイズコードの追加
- 2.1 みなさんのアレンジ集
3 まとめ

カスタマイズの準備

追加CSSの手順

外観

カスタマイズ

追加CSS

子テーマの手順

外観

テーマの編集

FTPソフトの手順

FTPソフト起動

自サイトに接続

style.cssを開く

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

}

確認の手順

保存ボタンを押す

ブラウザでキャッシュを削除して更新

横幅

このカスタマイズでは、横幅を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;
}