「関連」を付けてテキストリンクをちょっと目立たせる

Before

After

わかりますか？この細かな違い。ぼくはこのバランスが気になってしょうがない人ですw

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

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

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

ジャンプマップ

カスタマイズの準備

テキストリンクに「関連」をつけるために、もともとあるステッチ（赤）を使用します。

[list class="stitch-red"]
<ul><li>★テキストリンク★</li></ul>
[/list]

[list class="stitch-red"]

<ul><li>★テキストリンク★</li></ul>

[/list]

ステッチの中に箇条書きを入れた感じです。

あとはテキストリンクをぶち込んで、CSSで整えれば完成です。

3つのコード追加方法

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

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

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

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

夏だしどっか行こう！

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

コメントあり

/*--------------------------------------
  関連テキストリンク　ステッチ赤を変更
--------------------------------------*/
.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;/*内側の余白*/
}

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

関連テキストリンク　ステッチ赤を変更

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

.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;/*内側の余白*/

}

コメントなし

/*--------------------------------------
  関連テキストリンク　ステッチ赤を変更
--------------------------------------*/
.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;
}

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

関連テキストリンク　ステッチ赤を変更

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

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

}

うまくいったか確認

確認の手順

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

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

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