WordPressで各ブロックに、追加cssクラスを設定する事が出来ます。[設定]-[ブロック]-[高度な設定]-[追加cssクラス]
css自体の設置方法はいくつかあります。
- cssファイルを読み込む
<link rel=”stylesheet” href=”style.css”>
header.php (又は function.php) に登録する - 外観-テーマエディター-style.css に記述
- 外観-カスタマイズ-追加css に記述
- ブロック[カスタム HTML]に記述
ブロック[カスタム HTML]に記述した追加cssの例
ブロック[見出し]に装飾を付ける
クラス未設定
見出し2
見出し3
見出し4
見出し5
クラス設定
見出し2
見出し3
見出し4
見出し5
ブロック[カスタム HTML]のコード
<style>
/Heading装飾/
.hbottom, .htop, .hleft2{position:relative;}
.hbottom:after {
bottom:-3px;
content: “”;
height:4px;
left:0;
position:absolute;
width:65px;
background:#00A0B0 none repeat scroll 0 0;
}
.hleft {padding-left:5px; border-left:7px solid #00A0B0;}
.hleft2 {padding-left:5px; border-left: 7px solid #00A0B0;}
.hleft2::before {
position: absolute;
left:-7px;
bottom: 0;
content: ”;
width: 7px;
height: 50%;
background-color:#F5DF4D;
}
.htop:before {
content: “”;
height:2px;
left:0;
position: absolute;
top:-3px;
width:30px;
background: #00A0B0 none repeat scroll 0 0;
}
</style>