こんな感じで変更
BEFORE
AFTER
カスタマイズは自己責任でやろう
自己責任の意味がわからない方、初めてカスタマイズする方は、必ずこちらの記事を読んでくださいね。
カスタマイズするための
準備
CSSコードの追加方法
おすすめは追加CSSからコードを追加する方法です。
はじまてカスタマイズする方は、こちらの記事を読んでくださいね。
| 追加方法 | 難しさ |
|---|---|
| 追加CSS | |
| テーマエディター | |
| FTPソフト |
複数のカスタマイズをしたい方は、テーマエディターだと編集しやすくておすすめです。普段からFTPソフトを使ってる方はそちらからアップロードしてもカスタマイズできます。
カスタマイズに必要な
CSSコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
/*-------------------------------------- 参考リンク --------------------------------------*/ .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); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
/*-------------------------------------- 参考リンク --------------------------------------*/ .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になります。
こんなパターンも
背景色がぴっしり入ったバージョンです。これにしたい場合は以下のコードを追加してください。
|
1 2 3 |
.reference .refttl { box-shadow: 0 0 0 6px rgba(66,66,66,0.2); } |
みなさんのアレンジ集
バビさんver
シュッとしてコンパクトにアレンジしています！
デフォルトの浮き上がるバージョンにしているので、関連記事カード型を使っている方のデザインとなじみますね。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
.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カスタマイズまとめ】～ようこそ、沼への入口へ～
まとめ
SANGOサポーターがあると参考リンクを簡単に貼れるよ！
いつも参考にさせていただいています。
内部リンクのデザインを本記事で使われているデザインにしたいのですが、どのようにすればよろしいのでしょうか。
よろしくお願いいたします。
akira様
内部リンクのデザインにつきましては、こちらの記事を参考にしてください( ˶ˆ꒳ˆ˵ )
https://for-men.jp/kanren-normal-custom/
よろしくお願いします。