2021/08/14 (更新日: 2021/12/02)

【コピペで簡単】WordPressの見出しデザインをプラグインなしでおしゃれに変更する方法【初心者】

※本ページにはプロモーションが含まれている場合があります。

こんな方におすすめです。

・HTMLもCSSもわからない初心者だけど見出しをおしゃれにしたい！
・プラグインなしで、サイト速度を保ったまま見出しをおしゃれにしたい！
・コピペで簡単におしゃれにしたい！
・SEOに強い見出しのポイントを知りたい！

本記事の内容

WordPressの見出しをおしゃれに変更する方法(デザインサンプル132種類)
読まれてSEOに強い見出しのデザインのポイント
見出しのデザインがうまくいかない時の対処法

以下の経歴と実績を持つなべたろ(@seonabe)が解説するよ♪

なべたろの実績

ライター100名以上の組織の法人を経営→株式譲渡
立ち上げから半年で月間1,000万PVを達成
1年で月間1200万PVを達成
年商約1億円を達成
法人向けコンサル1社あたり月額60~100万円
PVメディア・アフィリエイトサイト・オウンドメディア・企業ブログなどSEOサイトの立ち上げ・コンサル実績多数

本記事を読むと、HTMLやCSSの初心者でもコピペで簡単に見出しをプロのようにおしゃれにする方法だけでなく、読まれてSEOにも売上にも強いデザインのポイントが分かります。

＼　月間1300万PVのプロが解説　／
↓検索順位1位を取りまくったノウハウを4万文字で解説(無料)↓

>> 【検索1位量産】ブログを爆速で伸ばすSEOの『抑えどころ』をプロが徹底解説！

【検索1位量産】ブログを爆速で伸ばすSEOの『抑えどころ』をプロが徹底解説！ブログのSEO対策にも『抑えどころ』があります。検索順位1位を取りまくってブログを爆速で伸ばすためのSEOの基礎から『抑えどころ』まで約4万文字でプロが解説。読者にもGoogleにも評価されるSEO対策とブログ作りのノウハウがまる分かり。初心者から中級者まで学べるブログのSEO戦略の決定版。

WordPressの見出しのデザインをおしゃれにしよう！
WordPressの見出しデザインをおしゃれに変更する方法
読まれてSEOに強いWordPressの見出しデザイン
- ポイント①：h2・h3・h4で統一感を出す
- ポイント②：h2・h3・h4の違いと階層構造がわかる
WordPressの見出しデザインがうまくいかない時は
- CSSのデザインが反映されない場合
- 反映はされるけど見本のデザインにならない場合
WordPressの見出しのデザインは初心者でも簡単！

WordPressの見出しのデザインをおしゃれにしよう！

見出しのデザインは初心者でもコピペで簡単！

WordPressの見出しのデザインをプロのようにおしゃれにすることは、

WordPress初心者でも
HTML初心者でも
CSS初心者でも

今回の方法でコピペで簡単にできます。

例えば以下のようなデザインをはじめとして、全部で132種類のデザインを自由自在に使うことができるようになります。

初心者でも簡単にできるので、本記事で紹介する方法で見出しをおしゃれにしよう！

プラグインなしでOK(『AddQuicktag』も『Simple Custom CSS』も不要)

見出しのデザインを変更する方法を調べると、以下の2つのプラグインを使う方法がよく見られますが、

今回ご紹介する方法ではプラグインは一切不要です。

『AddQuicktag』
『Simple Custom CSS』

ちなみにプラグインを使うとWordPressでは以下のようなデメリットがあります。

WordPressでプラグインを増やすデメリット

サイトに無駄なコードが増えてサイトの表示速度が遅くなる
よってSEOで検索順位が下がる
ユーザーも離脱しやすくなり売上が下がる
プラグインの相性でバグが発生する可能性がある

今回の方法はプラグインなしなので

サイトの表示速度もサクサクでSEOに強い！
無駄な不具合を避けることができる

というメリットがある上に初心者でもコピペで簡単な方法なので、安心してください。

見出しのデザインはSEOにも影響する

見出しのデザインがおしゃれになると以下のようなメリットがあります。

読者の滞在時間や回遊率が上がり、SEOで評価されて検索順位が上がる
読者に記事をしっかり読まれやすくなり、売上が上がる

つまり検索順位にも売上にもとっても大事！

直接的にSEOに影響する訳ではないですが、間接的にとっても大事なのでデザインはしっかり整えておきましょう。

⇡目次へ戻る

WordPressの見出しデザインをおしゃれに変更する方法

それではお待たせしましたがここからはWordPressの見出しデザインを132種類の中から自由に選んでおしゃれにする方法を解説します。

見出しのデザインをおしゃれに変更する手順

見出しのデザインを変更する手順は以下の4ステップになります。

WordPressでCSSの編集画面を開く
見出しのデザインを選んでCSSコードを取得
CSSコードを貼り付ける
見出しデザインが変わっているか確認しよう

全体の概要としては、おしゃれな見出しのデザインのコードを取得して、自分のWordPressにそのコードを反映させることで見出しのデザインを変更する、というような流れです。

CSSとは

Webサイトのデザイン(フォントのサイズや背景色・幅・配置など全て)を設定するためのコードのこと。

それでは、順番に解説していくよ♪

注意

デザインの変更を始める前に、WordPressのバックアップを取っておくのがおすすめです。以下の記事を参考に簡単にバックアップを取れます。
>> 【2021年最新】BackWPupの正しい設定方法と使い方：自動バックアッププラグイン【WordPress】

【Step1】WordPressでCSSの編集画面を開く

まずはCSSを入力するための編集画面を開きましょう。

Step1-1：「外観」→「カスタマイズ」画面を開く

WordPressの管理画面から「外観」→「カスタマイズ」をクリックします。

Step1-2：「追加CSS」を開く

「追加CSS」をクリックします。

上の画像のように、CSSを入力する画面になるので、これでStep1は完了です。

【Step2】見出しのデザインを選んでCSSコードを取得

次は、自分の好きな見出しのデザインを選んで、そのデザインのコードを取得するよ♪

Step2-1：コピペで使える見出しデザインのおすすめサイト

おしゃれな見出しのデザインを紹介してくれている参考サイトは以下の3つがおすすめです。

自分の好きなサイトから自分が使いたい見出しをデザインを決めましょう。

Step2-2：好きな見出しのデザインを選んでコードをコピーする

今回は、『サルワカ』を例にして解説します。

まずは『サルワカ』にアクセスします。

上の画像のように、おしゃれな見出しのデザインが全部で68種類用意されているので、自分が使いたい見出しのデザインを選びましょう。

使いたい見出しのデザインが決まったら、そのデザイン下に表示されている「コードを表示」をクリックします。

するとそのデザインのCSSが表示されるので、全てコピーしましょう。

memo

最初の「h1{」と最後の「}」も含めて全部コピーしてください。

【Step3】CSSコードを貼り付ける

Step3では、さっきコピーしたコードを自分のブログに設定していくよ♪

このStep3は、以下の3つの手順で進めます。

CSSコードを貼り付ける
class・idを確認する
CSSのセレクタを修正する

class？id？セレクタ？

言葉はわからなくて大丈夫だよ♪画像の説明通りにすればとっても簡単にできるから安心してね♪

それでは、上の画像のサイトのデザインを例に手順を解説していきます。

Step3-1：CSSコードを貼り付ける

まずはStep1で開いたWordPressのCSS編集画面を開きましょう。

開いたら、CSSの入力欄にStep2でコピーしたコードを貼り付けます。

コピーしたコードは最初がh1になっていると思うので、h2に変更します。

memo

このh2をh3やh4にすると、h3見出し(中見出し)やh4見出し(小見出し)のデザインを変更することができます。

h2に変更すると、上の画像のように見出しのデザインが一部反映されます。

まだ完璧に変わってないよ。

まだ少しだけ修正が必要だからもう一踏ん張りだよ♪

Step3-2：class・idを確認する

CSSを貼り付けてh2に変更しただけではまだデザインがちゃんと反映されないので、正しく反映させるためにもう1作業必要になります。

まずは、見出しが表示されている画面でデベロッパーツールを開きます。

デベロッパーツールとは

そのWebページのHTMLやCSSなど様々なコードを見ることができるブラウザの機能です。

デベロッパーツールを開くには、見出しが表示されている画面で

Mac：「Command」+「Option」+「i」
Windows：「F12」

で開くことができます。

デベロッパーツールの左上部分に表示されている、カーソルのマークをクリックします。

カーソルのマークが青くなればOKです。

マウスを動かしてカーソルを見出しに合わせると、見出しの箇所が青とオレンジで表示されるので、そのタイミングでクリックします。

デベロッパーツールの画面右下部分に「Style」という欄があり、その欄に上の画像のように

〇〇 h2{

と表示されている箇所があるので、〇〇の文字を「.」や「#」も含めて確認します

今回の例であれば、

.content h2:first-child{

となっているので、

.content

が必要な部分になります。

※h2の後にある「:first-child」は不要です。

これがclassやidというものだよ♪CSSでデザインを指定するためにこの文字列が必要になるよ♪

Step3-3：CSSのセレクタを修正する

再度CSSを編集する画面に戻り、

h2{

となっていた箇所を先ほど確認したコードに変更します。

今回の例であれば、

.content h2{

となるように修正します。

すると見出しのデザインが全体にしっかり反映されます。

やっとデザインが変わったよ♪

見出しのデザインの変更はこれで完了です。

あとは「公開」ボタンをクリックしてCSSを保存すれば完了です。

【補足】h3やh4の見出しデザインを変更する場合

CSSのh2の箇所をh3やh4に変更すると、h3見出しやh4の見出しにデザインを適用できます。

その場合でもh2の時と同じように

.content h4

と、「.content」も併せて記載します。

h4に変更したので、h4見出しのデザインに反映されています。

画像のようにh2・h3・h4それぞれに対してCSSを設定すると、h2見出し・h3見出し・h4見出しそれぞれに別々のデザインを適用することができます。

【Step4】見出しデザインが変わっているか確認しよう

ブログの記事ページで見出しのデザインがちゃんと変わっているか確認しよう！

既に公開されている記事を確認するか、新しく記事を作成してプレビューなどで見出しのデザインが無事変更されているか確認してみましょう。

デザインが反映されない
デザインは変わったけど思うようにならない

という場合は「WordPressの見出しデザインがうまくいかない時は」の見出しをご覧ください。

⇡目次へ戻る

読まれてSEOに強いWordPressの見出しデザイン

この章では、読みやすくて読者の滞在時間が延びる見出しのデザインのポイントを解説します。

2つポイントを抑えるだけでデザイン上級者に！

ポイント①：h2・h3・h4で統一感を出す

1つ目のポイントは、h2・h3・h4の3つの見出しで統一感を出すことです。

例えば以下の画像では、サイトバナーの色やh2・h3・h4の色が全てバラバラで統一感がありません。

統一感がないと、サイト全体としてまとまりがなくなり、読者も見にくかったり読んでいて落ち着かない印象を覚えます。

すると離脱につながってしまいます。

離脱はして欲しくないよ。

上の画像のようにh2・h3・h4に統一感を出すと全体的にまとまっていておしゃれなサイトに見えます。

統一感のポイントは以下の2つです。

色の系統を1つか2つにすること
形や雰囲気を統一すること

色を統一するだけでぐんとおしゃれに見えるよ♪

見出しの線の色や背景色などを変更するには、以下のCSSを追加・あるいは変更することで調整することができます。

上の横線	`border-top：3px solid [#色コード];`
下の横線	`border-bottom：3px solid [#色コード];`
左端の縦線	`border-left：3px solid [#色コード];`
右端の縦線	`border-right：3px solid [#色コード];`
背景色	`background-color：[#色コード)];`
文字色	`color：[#色コード];`

1pxの部分の数字を変えると、線の太さを変えることができるよ♪

色コードはカラーピッカーというサイトで調べることができます。

例えば、見出しの背景色を上の画像の色にする場合は

background-color:#d88cd8;

というコードを追加します。

ポイント②：h2・h3・h4の違いと階層構造がわかる

2つ目のポイントは、h2・h3・h4で強弱をつけて階層構造をわかるようにすることです。

見出しは基本的に

h2の中にh3がある
h3の中にh4がある

という階層になっているので、その階層構造がわかるデザインの見出しになっていないと、読者が今何の話題の箇所を読んでいるのかがわからなくなります。

例えば以下の見出しの場合だと、

どれがh2でどれがh3・h4なのか見た目で区別がつきません。

対策方法：フォントの大きさ・見出しの太さに強弱をつける

見出しの階層構造をわかりやすくするためには、

フォントの大きさの強弱
見出しの太さの強弱

の2つに気をつけましょう。

フォントの大きさを変えると見出しの太さも自動的に変わるから、実質フォントの大きさだけ調整すればOK！

フォントサイズを調整するには、以下のようにCSSを追加(あるいは変更)します。

文字の大きさを変更する	`font-size:1.4em;`

1.4の数字を1.2や1.5など変えると大きさを変更できます。

h2 > h3 > h4

となるような大きさに調整しましょう。

⇡目次へ戻る

WordPressの見出しデザインがうまくいかない時は

この章では、うまくいかない時の対処法を解説するよ♪

以下の2つの場合の対処法をそれぞれ順に解説します。

CSSのデザインが反映されない場合
反映はされるけど見本のデザインにならない場合

CSSのデザインが反映されない場合

まずはCSSが一切反映されない場合！

対処法①：キャッシュを削除する

キャッシュが残っていると、以前のCSSのデータが読み込まれていて新しいCSSが反映しないことがあります。

キャッシュとは

一度読み込んだデータを保存しておき、次回以降はそのデータを表示することで、ページの表示速度を速くするためのもの

以下の2つのキャッシュを削除しましょう。

ブラウザのキャッシュ
キャッシュ管理プラグインのキャッシュ

キャッシュ管理プラグインはW3 Total Cacheが代表的です。W3 Total Cacheを使うことでサイトを高速化することができます。
>> 【2021年最新】W3 Total Cacheのおすすめの設定方法と注意点

対処法②：CSSコードのスペルミスを確認する

続いて確認すべきは、CSSコードのスペルミスです。

正しくコピペできているか
コードを変更したならタイプミスはないか

などを再度確認しましょう。

対処法③：CSSセレクタが正しいか確認する

3つ目の確認事項は、CSSセレクタです。

CSSセレクタとは

CSSコードの最初の「h2{」や「.content h2{」の箇所のこと。この部分で、「サイトのどこにCSSを反映させるか」を指定しているので、ここが間違っていると見出しのデザインが変わりません。

Step3-2：class・idを確認する
Step3-3：CSSのセレクタを修正する

の見出しを参考に、自分のブログにあわせて正しいセレクタを設定してください。

反映はされるけど見本のデザインにならない場合

続いては、

・デザインの一部は反映されるけど一部しか変わらない！
・デザインは変わったけど、見本とは少し違う

という場合の対処法です。

この原因は2つあるので、順番に解説します。

対処法①：CSSセレクタが正しいか確認する

1つ目の原因は、CSSセレクタが正しくない場合です。

「対処法③：CSSセレクタが正しいか確認する」の見出しで詳しく解説しているのでそちらを参照ください。

対処法②：元のCSSを取り消すコードを書く

もう１つの原因は、元々のWordPressテーマのデザインのコードがまだ一部に反映されている場合です。

これが原因でデザインがうまくいかないことはとっても多いので、とても大事なポイントだよ♪

元々のデザインが残っている場合の例

分かりにくいと思うので、以下に例を紹介します。

元々は以下のデザインのh4を、

以下のデザインに変更したいとします。

上のデザインのコードを取得してCSSを貼り付け、セレクタも正しく指定したにも関わらず、仕上がりは以下のようになります。

見本とは違って、元々のh4のデザインが残っています。

※左の線だけでなく、背景色や下線など、デザインが残る部位は異なります。

よくある！とっても困ったよ。。。

これから解決方法を解説するね♪

元々のデザインが残っている場合の解決方法

元のデザインが残っていることが原因なので、元のデザインを打ち消すCSSコードを追加することでこの問題は解決できます。

そのために、どんなコードを追加すれば良いのかを以下の手順で調べます。

まずは、「Step3-2：class・idを確認する」の時と同じ手順で、デベロッパーツールを開いて見出しの箇所の「Style」の欄を確認します。

デベロッパーツールを開くコマンドは以下です。

・Mac：「Command」+「Option」+「i」
・Windows：「F12」

「Style」の箇所を確認すると、上の画像のように

.content h4{

というコードが2つありますが、

上のコードは自分でコピペしたコード
下のコードは元々のデザインのコード

です。

よってこの下のコード(この場合はborder-left)を打ち消すことで解決できます。

先のコードを打ち消すコードを、CSSを指定する箇所に追加します。

すると左の緑の線が消えてデザインが見本通りになりました。

イメージ通りになった！！！

打ち消す際のCSSコード一覧

元のデザインが残っている場所に合わせて、それぞれ以下のコードを追加することで打ち消すことができます。

背景色(白にする)	`background-color:#ffffff;`
文字色(黒にする)	`color:#000000;`
上の横線	`border-top:none;`
下の横線	`border-bottom:none;`
左端の縦線	`border-left:none;`
右端の縦線	`border-right:none;`