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

5分

参考リンクのデザインをカスタマイズ

SHARE

こんな感じで変更

BEFORE

AFTER

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

自己責任の意味がわからない方、初めてカスタマイズする方は、必ずこちらの記事を読んでくださいね。

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

カスタマイズするための
準備

目次へ戻る

CSSコードの追加方法

おすすめは追加CSSからコードを追加する方法です。

はじめてカスタマイズする方は、こちらの記事を読んでくださいね。

カスタマイズを加速させる追加CSSブログのカスタマイズを加速させる「追加CSS」の使い方
追加方法 難しさ
追加CSS
テーマエディター
FTPソフト

複数のカスタマイズをしたい方は、テーマエディターだと編集しやすくておすすめです。普段からFTPソフトを使ってる方はそちらからアップロードしてもカスタマイズできます。

カスタマイズに必要な
CSSコード

目次へ戻る

この画像には alt 属性が指定されておらず、ファイル名は kopinosikata.png です
/*--------------------------------------
  参考リンク
--------------------------------------*/
.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 .refttl {
    box-shadow: 0 0 0 6px rgba(66,66,66,0.2);
}

みなさんのアレンジ集

バビさんver

バビさんver
MENくん
シュッとしてコンパクトにアレンジしています！

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

.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）

うまくできたか
確認

目次へ戻る

確認する際は必ずキャッシュを削除してから見てください。

確認方法
「Ctrl」+「F5」（キャッシュ削除）

カスタマイズコードを追加CSS（またはテーマエディタ）に追加して保存したら、カスタマイズがうまく反映されているか、確認しましょう。

Mac bookやスマホではキャッシュ削除の仕方が違うので、詳しくはこちらの記事で確認してください。

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

くまからのお礼

目次へ戻る

本ブログ（for men）では、ひとりでも多くの方にブログを楽しんで欲しくてカスタマイズ記事を書いています。（決して自己満足ではありません）

もっとカスタマイズしたい人はこちらの記事を見てください。

【圧倒的SANGOカスタマイズまとめ】～ようこそ、沼への入口へ～

まとめ

追加CSSのまとめ
MENくん
SANGOサポーターがあると参考リンクを簡単に貼れるよ！

前の記事

ナビゲーションドロワーのSNSボタンをカスタマイズ
【SANGOカスタマイズしてみた】ナビドロワーのSNSボタンを…

次の記事

【プラグイン：Visual Editor Custom But…
Visual-Editor-Custom-Buttonsの使い方