2016年6月9日

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

どうも!ブランドクリエイターの中江です。今回は「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集客動画講座
毎月10万人の見込み客が集まる自動集客システムの作り方


「安定した集客の仕組みを作りたい」「インターネット集客の方法を体系的に学びたい」「価格競争に巻き込まれないブランドを構築したい」と悩んでいませんか?

この無料のWeb集客講座は、僕自身が実際にWeb集客に取り組み
  • ブログ1記事だけで毎月見込み客を7000人以上集めた方法
  • メルマガを活用して価格競争に巻き込まれなくなり、良質なお客さんだけを集めた方法
  • 全国から仕事の受注が入り、仕事の依頼を3ヶ月待ちにした方法
など、本当に効果のあった、Web集客とブランド構築のノウハウを動画コンテンツにして解説しています。

通信講座の登録はとても簡単。以下のボタンをクリックして、メールマガジンの登録を進めてください。

そうすると、すぐに1つ目の動画があなたのメールアドレスに届けられます。

ぜひ、この通信講座をあなたのビジネスにお役立てください。

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

hp-banner

SNSでもご購読できます

The following two tabs change content below.
中江 翔吾
名前:中江翔吾。職業:ブランドクリエイター(デザイナー&コンサルタント)一流のデザイナーからグラフィックデザインを学び、フリーランスのデザイナーとして活動を開始。その後、インターネットマーケティングの力を活用し、安定した集客の仕組みと、ブランドを構築。営業は全くせずに仕事の依頼が常に2~3ヶ月待ち。現在は「CREATE A BRAND」をコンセプトに、デザインとマーケティングの力を使って、個人・企業の規模を問わずに、ブランド構築のサポートを提供している。
By 中江 翔吾 WordPressプラグイン Share:

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

コメントを残す

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

プロフィール
wp-side-pf

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

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

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

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

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

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

Twitter でフォロー
最近の投稿
WordPressのフッターの編集方法の基本を覚えよう
WordPressのフッターの編集方法の基本を覚えよう
WebコンテンツとはWebコンテンツ作成の3ステップ
WebコンテンツとはWebコンテンツ作成の3ステップ
自分のやりたいことが見つからない時の対処法を日本神話から解説
自分のやりたいことが見つからない時の対処法を日本神話から解説
WordPressのグローバルメニューを設定する方法
WordPressのグローバルメニューを設定する方法
起業するには?起業で失敗しないための3つの方法
起業するには?起業で失敗しないための3つの方法
オウンドメディアのデザイン戦略|オウンドメディアの参考サイトも総まとめ
オウンドメディアのデザイン戦略|オウンドメディアの参考サイトも総まとめ
ブルーオーシャン戦略とは|ブルーオーシャン戦略の事例と実践法を解説
ブルーオーシャン戦略とは|ブルーオーシャン戦略の事例と実践法を解説
モチベーションをアップさせる方法|高いレベルの行動を継続するには?
モチベーションをアップさせる方法|高いレベルの行動を継続するには?
ステップメールとは?売上に繋がるステップメールの書き方
ステップメールとは?売上に繋がるステップメールの書き方
マーケットインとプロダクトアウトとは?両者の違いを分かりやすく解説
マーケットインとプロダクトアウトとは?両者の違いを分かりやすく解説
人気記事ランキング
一瞬で人を惹き付けるブランドコンセプトの作り方と例
一瞬で人を惹き付けるブランドコンセプトの作り方と例
差別化の意味とは|差別化戦略の方法と具体例を一挙紹介
差別化の意味とは|差別化戦略の方法と具体例を一挙紹介
ダイレクトレスポンスマーケティング|DRMの方法と事例
ダイレクトレスポンスマーケティング|DRMの方法と事例
SEO対策とは-SEO対策の基本を理解しよう
SEO対策とは-SEO対策の基本を理解しよう
WordPressの見出しデザインを自由にカスタマイズする方法
WordPressの見出しデザインを自由にカスタマイズする方法
ブランディングの本当の意味とは|ブランディングの手法と成功事例
ブランディングの本当の意味とは|ブランディングの手法と成功事例
SEO対策に効果的なサイト・ブログタイトルの付け方
SEO対策に効果的なサイト・ブログタイトルの付け方
ビジネスに繋がる面白いブログ記事の書き方のコツとは
ビジネスに繋がる面白いブログ記事の書き方のコツとは
ステップメールとは?売上に繋がるステップメールの書き方
ステップメールとは?売上に繋がるステップメールの書き方
ストーリーテリング実践法|ストーリーをビジネスで活かす方法
ストーリーテリング実践法|ストーリーをビジネスで活かす方法