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>