以前WordPressでh2・h3タグをカスタマイズする方法を「WordPressでh2・h3タグをカスタマイズする方法(テーマ:xeory)」の記事で紹介しました。ブログを書いていると「h4タグ」も結構使用することがありますが、WordPressのテーマ「xeory」の「h4タグ」は初期段階のままだと太字になるだけで少し分かりづらいです。ブログの見出しは「読み手」にとっても「書き手」にとっても「webサイト」にとっても、良いことがありますので、「h4」タグも分かりやすくカスタマイズしていきましょう。今回変更をするWordPressのテーマ「xeory」では、初期段階の「h4」タグの見出しは下図のようになっています。太字になっているだけです。シンプルなのですがこの見出しの後に文章が続くわけですから、「h4タグの見出し」が複数になると「h4タグの見出し」と「文章」の区別が、パッとみてすぐわからないですよね。これを下図のようにカスタマイズしていきます。「h4」タグの見出しの左側に、少し太めの線を表示させるデザインです。これならパッと見出しだと分かると思います。カスタマイズしてみましょう。テーマの編集」をクリックします。「テーマの編集」に移動したら、右の項目から「スタイルシート」を選択しましょう。「h4」を変更するのに「h3」・・?と思うかもしれませんが、通常使用される「.post-content」の「h4」部分のCSSは何も書かれていないので、「h3」のすぐ下に新しく入力していく必要があります。検索すると下図の箇所が表示されるはずです。table」の間に新しくh4タグをカスタマイズするcssコードを入力していきましょう。※上図CSSの「h2」「h3」部分のcssは「WordPressでh2・h3タグをカスタマイズする方法(テーマ:xeory)」の記事でカスタマイズしてありますので、初期段階のcssとは内容が異なります。3.CSSのカスタマイズ場所の検索が完了したら、早速「h4」の見出しのカスタマイズをしていきましょう。table」の間にCSSを追記していきます。下記のcssを追記します。7px;}実際に下図のようにスタイルシートに「h4」をカスタマイズするためのcssを追記してみましょう。上下左右のパディング(内側の余白)を指定する上記CSSです。今回のカスタマイズで各CSSの指定している箇所は下図のようなイメージです。引く線の太さを調整すれば、「h4」タグの見出しも「h2」「h3」程ではないですが、パッと見て、見出しだと分かる見栄えの良いデザインになります。線の色や背景色は、自分のサイトに合った色にカスタマイズしてください。カラーコードが分からない方は、カラーピッカー等で好きな色のカラーコードを探してみてください。無事に変更・追記が完了したら、左下にある「ファイルを更新」をクリックして、サイトを確認してみましょう。変更・追記した内容に間違いがなければ、「h4」を設定した見出しがカスタマイズされているはずです。4.まとめ以上で、「WordPressでh4タグをカスタマイズする方法(テーマ:xeory)」の説明は完了です。「h4」タグも一度実際に変更して、変更する場所さえ分かってしまえば、今後の見出しを変更したい場合にも、すぐにカスタマイズすることが可能です。今回はやっとこブログの「h4」タグと同じカスタマイズを紹介しましたが、自分のサイトに合わせて自由に変更してみてください。【その他】WordPressでトップに戻るボタンをカスタマイズする方法(テーマ:Xeory)WordPressでリストの表示位置を変更する方法WordPressでリストの背景に色を付ける方法WordPressで引用デザインをカスタマイズする方法(テーマ:Xeory)WordPressで行間と改行幅をカスタマイズする方法(テーマ:Xeory)WordPressでSNSアイコンの色をカスタマイズする方法(テーマ:Xeory)WordPressでSNSアイコンサイズをカスタマイズする方法(テーマ:Xeory)WordPressで表をカスタマイズする方法(テーマ:Xeory)上記の記事を参考にしてください。WordPress、Xeoryコメントするやっとこブログトップへ戻るモバイルバージョンを。