2016年6月9日

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

Pocket

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

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

h1

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

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

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

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

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

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つ選んでいきましょう。

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

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

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

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

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

h14

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

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

h15

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

h16

これで準備は完了です!

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

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

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

h17

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

h18

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

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

数十時間の集客が学べる動画を無料プレゼント!

今まで僕が積み重ねてきたブランド構築とWeb集客のノウハウを数十時間収録した動画を無料でプレゼントしています。是非あなたのビジネスにお役立てください。

いつ削除するかわからないので、興味がある方は、今のうちにゲットしてくださいね


コミュニティ集客クラブの詳細を見る

hp-banner

SNSでもご購読できます

Pocket

The following two tabs change content below.
中江 翔吾
名前:中江翔吾。職業:デザイナー&Web集客コンサルタント。一流のデザイナーからグラフィックデザインを学び、フリーランスのデザイナーとして活動を開始。その後、インターネットマーケティングを学び、独自のネット集客の仕組みを構築。現在は、デザインとネットマーケティングの視点から「コミュニティ集客術」を提唱し、個人を始め中小規模のビジネスモデルを運営している人たちに集客の仕組み作りを提供している。
By 中江 翔吾 WordPressプラグイン Share:

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

プロフィール
wp-side-pf

中江 翔吾 / Shogo Nakae
グラフィックデザイナー / Webデザイナー / コンサルタント
1991年3月生まれ。大阪府出身。

はじめまして!ブランドクリエイターの中江翔吾と申します。

「CREATE A BRAND」をコンセプトに、ブランド構築や集客を起こしていくためのデザイン制作(Web、グラフィック)とコンサルティングを提供しています。

このブログでは、Webマーケティングのことを基軸に、ブランド論やマインドセット、雑多なビジネスコラムなんかを配信していきます。

僕に興味を持っていただけた方は、TwitterやFacebookページをぜひフォローしてくださいね。

>>詳しいプロフィールはこちら<<

Twitter でフォロー