「yStandard」カスタマイズ・見出し装飾を行う(h2・h3)下線ストライプ柄

yStandard h2 見出し

yStandardカスタマイズ見出し(h2)編

▲このような見出し(h2)の装飾カスタマイズ方法をご紹介します。

▼コードはこちら


/*見出し装飾*/
h2 {
position: relative;
padding: .2em;
margin: 3em 0 1em;
}
h2:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 7px;
background: repeating-linear-gradient(-45deg, #d0ceff, #d0ceff 2px, #fff 2px, #fff 4px);
}

yStandard設定方法

外観のカスタマイズから入る

yStandard WordPress

WordPressダッシュボード左メニュー
外観 > カスタマイズ

追加CSSに入る

yStandard WordPress カスタマイズ

追加CSSをクリック

コードをコピペして公開

yStandard WordPress カスタマイズ

追加CSS内に、コードをコピペします。
「公開」で完了!

ストライプ柄の色変更をする

ストライプ柄の色を変更したい場合


background: repeating-linear-gradient(-45deg, #d0ceff, #d0ceff 2px, #fff 2px, #fff 4px);

▲のコード内の「#d0ceff」もしくは「#fff」を変更します。

水色

yStandard カスタマイズ h2 見出し


background: repeating-linear-gradient(-45deg, #a9dbf3, #d0ceff 2px, #fff 2px, #fff 4px);

青色:立体っぽく

yStandard カスタマイズ h2 見出し


background: repeating-linear-gradient(-45deg, #a9dbf3, #15134a 2px, #fff 2px, #fff 4px);

黄緑色:ポップ

yStandard カスタマイズ h2 見出し


background: repeating-linear-gradient(-45deg, #c9ef8c, #fff 2px, #51e8e2 2px, #51e8e2 4px);

ピンク:ビビッド

yStandard カスタマイズ h2 見出し


background: repeating-linear-gradient(-45deg, #ff0000, #f00 2px, #ffffff 2px, #fd5fe9 4px);

yStandard記事まとめ

▼yStandard記事まとめはこちら

https://indigi.work/tag/yStandard