無料のテーマを使ってると見栄えが人のブログと一緒になってしまったりしてカスタマイズをしたくなります。今回はWordPressテーマでよく使うh2、h3、h4タグの見出しカスタマイズ方法です。
見出しカスタマイズ方法
CSS(スタイルシート)の編集
見出しのカスタマイズを行う為にWordPressのダッシュボードからスタイルシート(style.css)編集ページを開きます。
WordPressのダッシュボードから外観 → テーマの編集を選択してスタイルシート(style.css)の編集画面へ。
右カラムのテンプレートのリストからスタイルシート(style.css)をクリックする。
ちなみにこちらは人気無料WordPressテーマのSTINGER8のスタイルシート(style.css)です。
スタイルシート編集ページ
Ctrl + Fでh2など変更をしたい見出しタグを検索して変更したい見出しタグを探します。レスポンシブデザインだと表示サイズによってh2タグがあるのでそれぞれの表示サイズのh2タグを編集します。
SITINGER8のh2タグだとこんな感じです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* 中見出し */ h2 { background: #f3f3f3; color: #1a1a1a; font-size: 19px; line-height: 27px; margin: 20px 0; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; border-top:2px solid #ccc; border-bottom:1px solid #ccc; } |
h2 { の部分から
このh2のCSSを編集して見出しをカスタマイズしていきます。WordPress初心者のかたはCSSを自分でカスタマイズすることが難しいので簡単にコピペで見出しをカスタマイズできるサイトを紹介します。
CSSをコピペで簡単編集
おしゃれな見出しCSSの見出しを紹介してるサイト
CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選
見出し作成ジェネレーター
見出し作成ジェネレーターはCSS(スタイルシート)を編集する必要なく、ツールを使って見出しをカスタマイズして貼り付けることでカスタマイズができます。
見出しジェネレータを簡単に作成できるジェネレーターは便利ですが、慣れてきたら自分でHTMLをカスタマイズしてみてもいいと思います。
変更する前に保存することを忘れずにカスタマイズしてみてください。