今使っているテーマの「H タグ」を変更したい。
テーマのカスタマイズは難しいですが、タグは割と簡単にスタイルを追加できます。
[WordPress] H2 タグ にスタイル を追加する方法。
概要
![](https://zapping.beccou.com/wp-content/uploads/2021/05/image-15.png)
こんな感じのH2 見出しを、、、
![](https://zapping.beccou.com/wp-content/uploads/2021/05/image-17.png)
こういう感じのヤツにしたい。
※例えばの話です。
既存の記事への反映や、修正が煩雑の極みなので、
プラグインか何かで、「一括変更」したい。
変更方法その1: 追加CSS にタグのCSS を定義する。
「.class { … } 」 みたいにピリオドをつけると追加CSSの定義になるのですが、
「h2 { … } 」って書けばHタグのCSS を指定できます。
テーマによって違うかもしれません。
「追加CSS」を開いてタグのCSS を定義する。
管理者でログインした状態でWP サイトを開きます。
![](https://zapping.beccou.com/wp-content/uploads/2022/04/image-350.png)
カスタマイズをクリックします。
![](https://zapping.beccou.com/wp-content/uploads/2022/04/image-351.png)
またはダッシュボードにて、外観 >カスタマイズ
![](https://zapping.beccou.com/wp-content/uploads/2022/04/image-356.png)
追加CSS をクリックします。
![](https://zapping.beccou.com/wp-content/uploads/2022/04/image-352-1024x790.png)
追加CSS の欄にH2 のCSS 定義をすると反映される。
![](https://zapping.beccou.com/wp-content/uploads/2022/04/image-354.png)
こっちの方が楽。
使えればこちらの方法が良いのではないかと思います。
最後に追加CSS 欄上の「公開」ボタンをクリックして設定を反映します。
反映ができない場合は、サーバーのWAF 設定を一時的に無効化してから公開ボタンを押してください。
※SQL インジェクション 攻撃とみなされてブロックされてたりします。
変更方法その2:テーマエディタでstyle.css にCSS を定義する。
外観 >テーマエディタ でCSS を追加する。
(ダッシュボード)外観 >「テーマエディタ」を開く。
![](https://zapping.beccou.com/wp-content/uploads/2021/10/image-191.png)
シンプルに、、、
ここのCSS にHタグのスタイルを定義してやればいいんじゃないだろうか。
![](https://zapping.beccou.com/wp-content/uploads/2021/05/image-14-1024x549.png)
こんな感じに追加
![](https://zapping.beccou.com/wp-content/uploads/2021/05/image-18.png)
ファイルを更新をクリックして完了。
![](https://zapping.beccou.com/wp-content/uploads/2021/10/image-192.png)
反映されるか確認。
エディタ上ではこんな感じですが、、、
![](https://zapping.beccou.com/wp-content/uploads/2021/05/image-27.png)
![](https://zapping.beccou.com/wp-content/uploads/2022/04/image-295.png)
プレビューではちゃんと希望通りになってました。
![](https://zapping.beccou.com/wp-content/uploads/2021/05/image-20.png)
※ ブラウザのキャッシュを消さないと、プレビューに反映されない場合があるので注意。
CSS 的に問題があっても反映されません。
最初からスタイルが適用されていてCSS 被ってしまう場合。
![](https://zapping.beccou.com/wp-content/uploads/2022/04/image-361.png)
開発者ツールなどでCSS の設定場所を突き止める。
【F12】キーを押して開発者ツールを呼び出します。
![](https://zapping.beccou.com/wp-content/uploads/2022/04/image-364.png)
開発者ツール画面の左上にある、矢印のアイコンをクリックして、ページのタイトル部分にマウスカーソルをあてます。H2 のブロックがハイライトしたところでクリックします。
![](https://zapping.beccou.com/wp-content/uploads/2022/04/image-295.png)
![](https://zapping.beccou.com/wp-content/uploads/2022/04/image-365-1024x534.png)
ソース部分が左の画面で選択されている状態で、右の画面をstyles の項目に切り替えると、適用されているCSS が確認できます。その右側にあるのが、ソースへのリンクです。
ここで、CSS の設定されているファイル名が確認できます。
style.css の編集
案の定style.css だったので、外観 >テーマファイルエディタ を開く。
![](https://zapping.beccou.com/wp-content/uploads/2022/04/image-366.png)
スタイルシート(style.css)を指定して、「h2」を検索し、確認したCSS を確認出来たら無効化します。
![](https://zapping.beccou.com/wp-content/uploads/2022/04/image-368.png)
※ファイルを編集する前にバックアップをとっておきましょう。
「ファイルを更新」ボタンを押して設定を反映します。
![](https://zapping.beccou.com/wp-content/uploads/2022/04/image-367.png)
![](https://zapping.beccou.com/wp-content/uploads/2022/04/image-295.png)
テーマのCSS が解除できました。
![](https://zapping.beccou.com/wp-content/uploads/2022/04/image-369.png)
編集の仕方がわかっても肝心のCSS がイマイチというあなた。
下記の神サイトでは素敵なCSS のサンプルがたくさん紹介されています。
あなたの旅はここで完結するでしょう。
※見出しのCSS についてはいつもこちらのサイトを参考にさせていただいてます。
CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選 (saruwakakun.com)
さらにCSS を使ってあのブロックを作ってみました。
こんな感じの吹き出しのブロックとか、「この記事を書いた人」なんかもCSS とビジュアルエディターで作ってみました。
以上です。