![見出し画像](https://assets.st-note.com/production/uploads/images/99494028/rectangle_large_type_2_3e693bacb318bcb4e021919eaf1f5412.jpeg?width=1200)
【SWELL】ステップブロックをH3見出しに変更するカスタマイズ
WordPressテーマSWELLのカスタマイズ作業メモです。
SWELL独自のカスタムブロック「ステップブロック」をカスタマイズして、本来div.swell-block-step__titleで出力される部分を、h3の見出しタグに変更しました↓
![【SWELL】ステップブロックをh3に変更](https://assets.st-note.com/production/uploads/images/99494491/picture_pc_a0c67843edaada6e298b9903eac60cdd.gif?width=1200)
サンプルサイト
今回のカスタマイズを実装したサンプルサイトです↓
![【SWELL】ステップを見出しに変更したサンプルサイト](https://assets.st-note.com/production/uploads/images/99495377/picture_pc_4d76cbf54e2a450e320920b13e7053ae.gif?width=1200)
H3の見出し部分に部分は、目次にも反映されます↓
![【SWELL】ステップブロックの見出しを目次に反映](https://assets.st-note.com/img/1677975763498-vxCfvXd9m4.jpg?width=1200)
ステップブロックはデフォルト、ビッグ、スモールの3つのスタイルがあります。どれを選択しても、h3になります↓
![【SWELL】ステップブロックのスタイル](https://assets.st-note.com/production/uploads/images/99495864/picture_pc_cada8b63986ba9efcb2b3a2f92144f85.gif?width=1200)
サンプルサイトの構成
【バージョン】
WordPress:6.1.1
SWELL:2.7.3.2
WordPress、テーマともに記事執筆時に利用可能な最新バージョンです。
カスタマイズの概要
コードを貼るだけなので、作業にかかる時間は3分。
カスタマイズはフックを使います。
フックを使わずテンプレートファイルを直接編集してしまうと、テーマのアップデートで設定が消えてしまいます。
サンプルサイトでは子テーマを使わずCode Snippetsプラグインでコードを追加しています。
もしかすると今後SWELLのアップデートで見出し機能が追加されるかもしれません。そういった場合でも、フックを解除するだけでSWELL標準の機能が使えることを想定したカスタマイズです。
更新履歴
2023年3月 記事公開
ここから先は
1,832字
/
2画像
¥ 9,890
この記事が気に入ったらサポートをしてみませんか?