文字部分だけ

↑の見出しのように文字部分だけ下線の色を変えるやり方を紹介します。
jQuery が組み込まれている WordPress サイトであることが前提です。

JavaScript プログラムを追加

JavaScript プログラムに以下の１行を追加します。

$('.entry-body h2').wrapInner("<span></span>");

このプログラムは本文の h2 見出しの中味を span タグで囲んでくれます。

スタイルを追加

スタイルに以下の行を追加します。

/* 本文の h2 見出しの下線 */
.entry-body h2 {
border-bottom: 3px solid #eee;
}

/* 本文の h2 見出しの文字部分の下線 */
.entry-body h2 > span {
border-bottom: 3px solid #337ab7;
display: inline-block;
padding: 1rem 0;
margin-bottom: -3px;
}

更新情報を受取る

@pc_klik

あなたのお悩み・お困りごとの解決をお手伝いします

お客様のご要望に合わせてできる限りのサポートをさせていただきます。

パソコン業務でお困りのこと、ホームページの運用や更新のこと・・・どんなことでもお気軽にお問い合わせ・ご相談ください。

お問い合わせ・ご相談はこちら