WordPressの見出しデザインをカスタマイズする方法!便利なプラグインもご紹介

wordpress 見出し デザイン

WordPressのテーマのほとんどは、すでに綺麗にデザインされており、とても簡単に本格的なWEBサイトを構築することができます。さらに、プラグインやCSSを編集することで、テーマを自由にカスタマイズすることができるのもWordPressの強みです。

今回はそのテーマの見出しデザインをプラグインやCSS編集を用いてカスタマイズする方法をご紹介します。

見出しカスタマイズのプラグインをインストールをする

見出しのデザインはWordPressファイルを直接編集することで、カスタマイズすることも可能です。ただ、ファイルを直接編集することは意図しないバグの元になりますし、バックアップを取る必要があったりと、面倒なこともあります。

WordPressのプラグインには、見出しデザインを簡単にカスタマイズすることができるプラグインが用意されているので、それらを使用していきましょう。

AddQuicktagのインストール

AddQuicktagは自分でHTML、CSSで作成したタグを、WordPressエディターに登録しておける便利なプラグインです。

管理画面「プラグイン」→「新規追加」をクリックし、右上の検索窓に「AddQuicktag」と入力してください。

wordpress プラグイン 新規追加

検索結果が表示されたら、そのまま「今すぐインストール」をくクリックし、「有効化」してください。

AddQuicktag

これでAddQuicktagのインストールは完了です。

Simple Custom CSSのインストール

続いて、Simple Custom CSSをインストールしていきます。

同じように、管理画面「プラグイン」→「新規追加」より検索窓に「Simple Custom CSS」と入力してください。

Simple Custom CSS

「今すぐインストール」→「有効化」をクリックしてください。

これでSimple Custom CSSのインストールは完了です。

CSSコピペで実装できる見出しデザイン

ここまでで見出しデザインをカスタマイズする準備が整いました。ここから、実際にHTML、CSSを使ってデザインを決めていきます。

実装したいデザインはgoogleで「CSS 見出し デザイン」等で検索すると、コピペで実装できるサンプルコードを紹介してくれている記事がたくさんヒットします。

それらを参考にしながら実装していきましょう。

WordPressの見出しデザインをカスタマイズする

見出しデザインを選ぶ

先ほど紹介した記事などから気に入った見出しのデザインを選びます。シンプルなものから少しリッチなデザインにしたおしゃれなものまで豊富に紹介されているので、自分のWEBサイトに合わせた見出しデザインを選びましょう。

オリジナルの見出しボタンを作成する

管理画面の「設定」→「AddQuicktag」を開きます。

今回は見出しh2とh3を編集していきます。h4、h5…も同様の作業ですので、自由に追加してください。

設定画面を確認しましょう。

「クイックタグの追加と削除」のセクションに以下の項目を入力していきます。

・ボタンのラベル、ダッシュアイコンラベル名

・開始タグ*と終了タグ

・実装箇所

ボタンのラベル、ダッシュアイコンラベル

ボタンのラベルは、その見出しに与える名前、ラベル名はマウスオーバーした際に表示される説明文です。idのようなイメージですが、あまり深く考えずボタンのラベルとラベル名に「h2」(今回は見出しh2をデザインするため)と入力しましょう。

開始タグ*と終了タグ

開始タグと終了タグの項目には、HTMLのタグと属性、値を入力します。今回は見出しh2をデザインしていくので、HTMLタグは”h2”、属性はid、その値は覚えやすい値をつけてください。

アクセスキーと順番

この項目は必須項目ではありません。空欄でも特に問題ありませんので、未入力のままにしましょう。

実装箇所

右のチェックボックスはデザインしたタグを使用する箇所です。特に理由がなければ全てにチェックを入れておきましょう。一番右のボックスにチェックを入れると全てにチェックを入れることができます。

これでAddQuicktagの設定は完了です。

見出しデザインのCSSをコピペする

タグの設定が完了したので、CSSでデザインをしていきます。先ほどインストールしたSimple Custom CSSを「外観」→「カスタムCSS」をクリックしてください。

simple custom css

「/*カスタムCSSをここに入力してください*/」とコメントしてある部分に、先ほど選んだ見出しデザインをコピペしていきます。このとき、セレクタをAddQuicktagで設定したタグにしてください。

今回は”h2#original_heading_01″です。

そのままコピペした状態なので、背景色やフォントカラー、フォントサイズなどを少し修正する必要がある場合もあります。適宜、値を修正して自分の好みにカスタマイズしましょう。

記入が終わったら、「カスタムCSSの更新」をクリックします。

WordPressでオリジナルの見出しボタンを使ってみる

設定したオリジナルのタグを実際に使ってみましょう。

投稿ページもしくは固定ページの編集画面を開きます。「投稿」→「新規追加」をクリックしてください。

デザインしたオリジナルの見出しにしたい部分を選択状態にします。その状態のまま、編集画面右上にある「Quicktags」をクリックし、任意の見出しを選択してください。

これで実装完了です。

まとめ

見出しのデザインはCSSを少し理解するだけで、色々なカスタマイズが可能になります。サイトの世界観にマッチした見出しデザインにすることで、ユーザーの離脱率を下げることにもつながります。SEOの観点でも重要なことなので、色々と学んでみるのもいいかもしれません。

制作費用参考表

想定費用 想定納期
コーポレートサイト 10万円〜 1ヶ月〜
メディアサイト 10万円〜 1ヶ月〜
WordPressテンプレートプラン 5万円〜 3週間〜
ランディングページ 5万円〜 1ヶ月〜
保守運用 1万円〜 -
SEOコンサルティング 1万円〜 最低契約期間3ヶ月
その他サイト不具合等のご相談 応相談