WordPressの見出しデザインを自由にカスタマイズする方法

どうも！ブランドクリエイターの中江です。今回は「WordPressの見出しデザインを自由にカスタマイズする方法」というテーマでお話ししていきます。

ブログ記事を書くにあたって、絶対に整えておいた方がいいデザインがあります。

それが見出しデザインです。例えば、こういうものですね。

ブログというのは、基本的に文字と画像で構成されているので、適度にこの見出しデザインが入ることで、文章にリズムが出て、読み手に対して理解してもらえる可能性が高まります。

僕のように基本的にブログ記事の文字数が1記事1万字近くある人は、いかに文章にリズムを生むのかが、最後まで読んでもらう鍵になるので、ぜひ見出しデザインをカスタマイズして行ってもらいたいと思います。

でも、WordPressでブログを始めたばかりの人やHTMLやCSSに詳しくない人は、この見出しデザインってどうやるんだろうと疑問に思っているかと思います。

実は、この見出しデザインは「AddQuicktag」と「Simple Custom CSS」という二つのプラグインを使うと簡単に作ることができます。

今回は、このやり方について解説していきたいと思います。では、早速始めていきましょう！

1.AddQuicktagとSimple Custom CSSのインストール

WordPressで見出しデザインをカスタマイズするためには「AddQuicktag」と「Simple Custom CSS」というプラグインをまずインストールする必要があるので、まずは、この作業をしていきます。

1-1.AddQuicktagのインストール

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

そうすると、このような画面が出てくるので「今すぐインストール」をクリックしてください。

そうすると、このような画面が出てくるので、「プラグインを有効化」をクリックしてください。

そして、「プラグインを有効化しました」という表示がプラグインのインストールが完了です。

1-2.Simple Custom CSSのインストール

「Simple Custom CSS」も同じ手順でインストールしていきます。

まずは、WordPressの管理画面から「プラグイン」→「新規追加」をクリックして「Simple Custom CSS」を右上の検索画面に入力してください。

そうすると、このような画面が出てくるので「今すぐインストール」をクリックしてください。

そうすると、このような画面が出てくるので、「プラグインを有効化」をクリックしてください。

そうすると、プラグインのインストールが完了です。

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

では、次にこの二つのプラグインを使って、見出しを実際にカスタマイズしていきます。

2-1.見出しデザインを選ぶ

さて、まずは、見出しデザインをどんなものにするのか自分で決める必要があります。

ブログ記事でよく使う見出しはh2、h3、h4だと思うので、そのデザインを参考サイトから3つ選んでいきましょう。

カラーは後から自由に変更することができます。

一番おすすめはこのサイトです。

CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。

二番目はここのサイト。

見出しのデザインをCSSのみでカスタマイズする（一部CSS3対応） | 賢威カスタマイズ研究所

記事中に使用する見出しタグ「、」。 この見出しタグのデザインを変更するだけで、ブログ内のイメージはガラッと変わります。 賢威はシンプルな・・・

 
もし、ここに自分が使いたいと思う見出しデザインがないという方は、以下のサイトで、使いたいと思う見出しデザインを選んでください。

少しの労力でサイトをかっこよく！見出しのCSSデザインに役立つジェネレーター＆サンプル集30個まとめ

WordPressのsingle.phpページデザインなどの参考にもなるH1-H6用のデザインサンプル集をまとめてみました。

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

まずは、オリジナルの見出し(h2)ボタンを作成するために、管理画面の左のサイドバーから「設定」→「AddQuicktag」へと進み、この画面を開いてください。

そして、左の上下のブロックには「h2」、真ん中のブロックの上には「<h2 id=”danraku2″>」、真ん中の下のブロックには「</h2>」を入力し、一番右のチェックボックスにチェックを入れて、「変更を保存」をクリックします。

そして、次も同様の作業で、オリジナルの見出し(h3)ボタンを作成していきます。

「変更を保存」をクリックしたら、左の上下のブロックには「h3」、真ん中のブロックの上には「<h3 id=”danraku3″>」、真ん中の下のブロックには「</h3>」を入力し、一番右のチェックボックスにチェックを入れて、「変更を保存」をクリックします。

そして、次も同様の作業で、オリジナルの見出し(h4)ボタンを作成していきます。

「変更を保存」をクリックしたら、左の上下のブロックには「h4」、真ん中のブロックの上には「<h4 id=”danraku4″>」、真ん中の下のブロックには「</h4>」を入力し、一番右のチェックボックスにチェックを入れて、「変更を保存」をクリックします。

これでオリジナルの見出しボタンの作成は完了です。

2-3.見出しデザインのCSSをコピーする

次に、このオリジナルの見出しボタンに先ほど選んだ、デザインをつけていきます。

まずは管理画面の左のサイドバーから「外観」→「カスタムCSS」へと進んで、「h2#danraku2 {　　}　h3#danraku3 {　　}　　h4#danraku4 {　　}」と入力してください。

そして、次に自分が使いたいと思った見出しデザインの箇所へと進んで、赤枠で囲んでいる部分をコピーします。

コピーしたら、再び「カスタムCSS」の画面に戻って、そのデザインを適用したい見出しの「{   }」の中に貼り付けます。

そして、次はカラーを変更していきます。カラーが初期設定のままで良い人はこのステップは飛ばしても問題ないです。

カラーを変更するには、赤枠で囲んでいる「#◯◯◯◯◯」と書いている部分を変更していきます。簡単に言えば、この文字列で見出しのカラーを指定しているんですね。

この文字列を自分の好きな色に変えるためには以下のサイトにアクセスしてください。

 
そして、「HTMLカラーピッカー」というところから、自分が好きな色を選択して、赤枠で囲んでいる文字列をコピーします。

そして、コピーしたら再び「カスタムCSS」へと戻り、文字列を先ほどのものと入れ替えます。これでカラーを入れ替えることができます。

h3、h4という他の見出しタグも同様です。

以下のように全て貼り付けたら、「カスタムCSSの更新」をクリックします。

これで準備は完了です！

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

では、実際に次にオリジナルの見出しボタンを使う方法を見ていきたいと思います。

まずは投稿ページか固定ページで新規追加を押して、記事の作成画面に行ってください。そして、見出しにしたい文字を入力し、それを選択状態にした後は、右のほうにある「Quicktags」をクリックして、任意の見出しを選んでください。

そうすると、このようにオリジナルの見出しを使うことができます。

いかがでしたでしょうか？ぜひ、あなたもオリジナルの見出しボタンを作成して、ブログ記事に活かしてみてくださいね。

では、今回は以上になります！お疲れ様でした＾＾