2016.6.9 更新 | WordPressプラグイン

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

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

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

ブログ記事を書くにあたって、絶対に整えておいた方がいいデザインがあります。それが見出しデザインです。例えば、こういうやつですね。

h1

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

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

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

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

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

今ならメルマガ登録でWeb集客の動画講義を無料プレゼント中!

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

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

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

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

h1

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

h2

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

h3

そうすると、プラグインのインストールが完了です。「Simple Custom CSS」も同じ手順でインストールしていきます。

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

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

h4

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

h5

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

h6

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

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

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

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

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

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

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

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

[blogcard url=”http://saruwakakun.com/html-css/reference/h-design″]

二番目はここのサイト。

[blogcard url=”http://www.keni-customize.net/custom-midashi-design-555/″]

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

[blogcard url=”http://nelog.jp/wordpress-h1-h6″]

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

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

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

h7

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

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

h8

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

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

h9

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

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

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

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

h10

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

h11

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

h12

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

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

h13

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

[blogcard url=”http://html-color-codes.info/japanese/″]

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

h14

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

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

h15

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

h16

これで準備は完了です!

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

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

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

h17

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

h18

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

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

14日間無料メール&動画講座

ブランドを構築するためのWeb集客術

MAIL MAGAZINE

「集客を安定させたい…」
「価格競争に巻き込まれない強固なブランドを作りたい…」 と悩んでいませんか?

この無料講座では、実際に僕自身やクライアント様が取り組み

・ブログ1記事だけで毎月見込み客を7000人以上集め続けた方法
・相場より高い値段でも、全国から仕事の受注が入り、依頼を3ヶ月待ちにした方法
・理念や価値観に共感した良質なお客さんだけを集めた方法

など、インターネットを活用したブランディングや集客の方法を動画とメールを使ってお伝えしていきます。

登録は無料なので、ぜひ、興味がある方は、詳細ページをご覧ください。

無料メール講座の詳細を見る

カテゴリーからブログ記事を探す

SEARCH BY CATEGORY

最新の記事情報が取得できます
【無料メール講座】ブランドを構築するためのWeb集客術
今なら、約5万円相当の動画講義をプレゼント中!