Before
After
この細かすぎる違い！まさにカスタマイズやなww
気になってしょうがないからカスタマイズしたんやな
「自己責任」の意味がわからない方、初めてカスタマイズする方はこちらの記事に目を通してもらえると嬉しいです( ˶ˆ꒳ˆ˵ )
カスタマイズは自己責任。ぼくはこんな風に思っています。ジャンプマップ
カスタマイズの準備
テキストリンクに「関連」をつけるために、もともとあるステッチ（赤）を使用します。
1 2 3 | [list class="stitch-red"] <ul><li>★テキストリンク★</li></ul> [/list] |
ステッチの中に箇条書きを入れた感じです。
あとはテキストリンクをぶち込んで、CSSで整えれば完成です。
3つのコード追加方法
| 追加方法 | 難しさ |
|---|---|
| 追加CSS | |
| テーマエディター | |
| FTPソフト |
テーマをカスタマイズする際には3つの方法があります。
はじめてカスタマイズする方におすすめなのが追加CSSです。
追加CSSを使ったカスタマイズ方法については、こちらの記事で詳しく解説しています。
ブログのカスタマイズを加速させる「追加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 | /*-------------------------------------- 関連テキストリンク ステッチ赤を変更 --------------------------------------*/ .stitch-red ul {/*ステッチ赤の中のul*/ display: flex;/*カラムを設定しやすく*/ position: relative;/*ポジションはこれを基準に*/ background: linear-gradient(90deg,#ff9a91 0%,#ff9a91 50px,#fff 50px,#fff 100%);/*背景色はグラデで2色*/ border: none;/*線削除*/ box-shadow: none;/*影削除*/ list-style: none;/*リストスタイル削除*/ border-radius: 0;/*角丸削除*/ margin: 1em 0;/*外側の余白*/ padding: 0;/*内側の余白*/ line-height: 1.6em;/*行の高さ*/ align-items: center;/*中身は中央揃え*/ } .stitch-red ul:before {/*ステッチの疑似要素*/ content: "関連";/*内容*/ color: #fff;/*文字色*/ min-width: 60px;/*最小の幅*/ padding-left: 7px;/*内側左の余白*/ letter-spacing: 3px;/*文字と文字の間*/ } .stitch-red ul:after {/*ステッチ内の中のulの疑似要素*/ content: "\f0da";/*内容*/ font-family: "Font Awesome 5 Free"; position: absolute;/*自由に動く*/ left: 56px;/*左からの位置*/ color: #ffc0c0;/*文字色*/ font-weight: 600; } .stitch-red a {/*ステッチ内のリンク*/ text-decoration: underline;/*下線追加*/ text-underline-position: under;/*下線の位置*/ } .stitch-red a:hover {/*ステッチ内のリンクをホバーしたとき*/ text-decoration: none;/*テキストの装飾はなし*/ } .entry-content .stitch-red ul li {/*ステッチ内のulのli*/ padding: 0;/*内側の余白*/ } |
コメントなし
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 | /*-------------------------------------- 関連テキストリンク ステッチ赤を変更 --------------------------------------*/ .stitch-red ul { display: flex; position: relative; background: linear-gradient(90deg,#ff9a91 0%,#ff9a91 50px,#fff 50px,#fff 100%); border: none; box-shadow: none; list-style: none; border-radius: 0; margin: 1em 0; padding: 0; line-height: 1.6em; align-items: center; } .stitch-red ul:before { content: "関連"; color: #fff; min-width: 60px; padding-left: 7px; letter-spacing: 3px; } .stitch-red ul:after { content: "\f0da"; font-family: "Font Awesome 5 Free"; position: absolute; left: 56px; color: #ffc0c0; font-weight: 600; } .stitch-red a { text-decoration: underline; text-underline-position: under; } .stitch-red a:hover { text-decoration: none; } .entry-content .stitch-red ul li { padding: 0; } |
ちゃんと反映されているか確認
カスタマイズコードを追加CSS（またはテーマエディタ）に追加して保存したら、カスタマイズがうまく反映されているか、確認しましょう。
確認する際は必ずキャッシュを削除してから見てください。
「コントロールキー（Ctrl）」と「F5」をキャッシュを削除したいページで同時に押します。スマホの場合はAndroidとiPhoneでやり方が違います。詳しくはこちらのページで見てください。
カスタマイズはキャッシュ削除をマスターしてからですカスタマイズをもっとやりたい方
こんなカスタマイズじゃ満足できない！！そんな方に是非見て欲しい記事がこちらです。
【圧倒的SANGOカスタマイズまとめ】～ようこそ、沼への入口へ～現在は50を超えるカスタマイズが紹介されており、病的なページになります。
このカスタマイズのこだわり
今回のカスタマイズのこだわりポイントは3つです！
- 行送りになってもデザインが崩れないこと
- アンダーラインがきれいな位置にあること
- もともとあるショートコードを使うこと
いや～ここまで細かいところをカスタマイズすると我ながら気持ち悪いですね。
そんなところ誰も見てねーよって声はガン無視して、こだわりについて語っていきますね。
行送りが気になるぅぅぅ！
他の人のブロクを見ていると、テキストリンクの前に「関連」のラベルを追加してるのをよく見ます。
PCで見る分には一行でおさまっているので、あまり気にならないのですが、問題はスマホ表示のときです。
これ。このダダンっとずれている感じがぼくは気になってしょうがないです。
おそらくこれが気になるのは1％以下の人でしょう。それ故にこれは気持ち悪いカスタマイズなんです。
しょうがないよね！気になっちゃうんだもん！
できればテキストのインデントは揃えて欲しい。そっちのほうがより美しいんやないの？そんな思いから今回のカスタマイズは生まれました。
ほら、テキストのインデントが揃っていい感じでしょ！（強めの言葉）
アンダーラインがくっついてるぅぅぅ
まぁテキストリンクといえばこのアンダーラインですよね。
ただ、ぼくは昔からこのアンダーラインのせいでテキストが見にくくなってる気がしてなりません。
だってくっついてるやん。
もちょっと離そうや。ってことでアンダーラインの位置をこだわりました。
1から作らない！
もともとある「スティッチ（赤）」のショートコードを使ってカスタマイズしています。
このやり方は単に「もともとあるやつのデザインを変えたりする事がカスタマイズかな」って思っているのでこうしています。
なので、1からHTMLで書いたりはしません。機能を追加するときなんかは仕方なくHTMLを追加することはありますが。
あくまでもカスタマイズは、テーマ作成に関わる方々をリスペクトした上でやるようにぼくは心がけています。
ぼくの変なこだわりです
くまさんからのお願い
ぼくのカスタマイズコードをそのまま（またはほとんど）コピーしてそれをブログで記事にされるのは、あまり嬉しくないです( ˙꒳˙ᐢ )No!
あれ！？この記事、、、ぼくが書いたコードかなりコピペして紹介してる！
ちょっとこれは、、、複雑な気持ちやな
ぼくはカスタマイズコードを1から書いています。
一部、参考にしたカスタマイズ記事があれば必ずリンクを貼るようにしています。
そこんところをちょっと考慮してもらえると嬉しいです( ˶ˆ꒳ˆ˵ )
コメント( ˶ˆ꒳ˆ˵ )