\このブログが役に立ったら/
【SWELL】セクション見出しの下線を太くするカスタマイズ
![SWELLセクション見出しの下線の太さを変更するカスタマイズ](https://misaki-web.com/wp-content/uploads/2021/06/swell-section-ttl-line.png)
個人的にLPやコーポレートサイト作成でよく使うカスタマイズです。
ちょっとしたことだけど、オリジナリティが出ていい感じになりますbb
もくじ
セクション見出しの下線を太くするCSS
CSSを貼り付ける場所は「外観」→「カスタマイズ」→「追加CSS」です。
インデント付けてないので、自由に調節してください。
Before
![SWELLセクション見出しの下線の太さ変更](https://misaki-web.com/wp-content/uploads/2021/06/0ac56971cc746dd563729186dda2801d.jpg)
After
![SWELLセクション見出しの下線の太さ変更](https://misaki-web.com/wp-content/uploads/2021/06/f29f63eb4c762c64bd0d846cdca51d03.jpg)
.post_content h2.is-style-section_ttl::after {
height: 3px;
}
heightの3pxが太さ(正確には、線の高さ)なので、好きな数字に調節すればOKです。
セクション見出しに下線をつける方法
SWELLを有効化したデフォルトの状態では、セクション見出しの下線はついていません。
カスタマイズから、下線がつくように変更しましょう。
管理画面の「外観」→「カスタマイズ」→「投稿・固定ページ」→「コンテンツのデザイン」から「セクション用見出し2のデザイン」を「下に線」に設定します。
下線に色をつける場合は、セクション見出しのキーカラーを好きな色に変更してください。
![セクション見出しの下線の設定方法](https://misaki-web.com/wp-content/uploads/2021/06/dd0abcfd362e1c84cd12564d22af22b7.jpg)
![セクション見出しの下線の設定方法](https://misaki-web.com/wp-content/uploads/2021/06/d9f6e8a85ebd56639c1fe1eb2ba5e4b3.jpg)
![セクション見出しの下線の設定方法](https://misaki-web.com/wp-content/uploads/2021/06/82f129985a61b27a4a3a9afdd5ba6dbc.jpg)
お気軽にどうぞ!