この記事のレベル

初心者	（3.0）
重要度	（2.5）
難しさ	（3.0）

こんにちは、編集長のカワウソです！

見出しのデザインを変更したいと考えていませんか？

確かに、見出しはホームページの要素のなかでも、出現率が高いもの。
見出しのデザインを変更して、ホームページのオリジナリティを高めたいですよね。

そこで今回は、WordPress（ワードプレス）でホームページを作る方向けに、見出しのデザインを変更する方法について解説します。

この記事を読めば、見出しのデザインを変更する方法として、「テーマ標準機能」と「追加CSS」の2種類が分かります。

また、記事の後半では、見出しのデザインの参考事例も紹介していますよ。

さらに、見出しのデザインの参考事例を探すときに役立つ「ギャラリーサイト」も紹介しているので、ぜひ最後までご覧ください。

なお、「WordPressって何？」という方は、先に以下の記事をご覧いただくとスムーズです。

それではどうぞ！

WordPressで見出しのデザインを変更する2つの方法

ホームページ初心者の方が、WordPressで見出しのデザインを変更するには、主に以下の2種類の方法が考えられます。

テーマの標準機能のほうが、見出しのデザインを変更するのは簡単です。

しかし、テーマに登録されている見出しのデザインに限られるので、物足りない場合は「追加CSS」によるカスタマイズを検討してください。

それぞれ概要を解説します。

【1】テーマの標準機能

WordPressでは、「テーマ」と呼ばれるデザインテンプレートを用いて、ホームページを作るのが一般的です。

テーマによっては、見出しのデザインを変更するための機能が、標準で実装されていますよ。

たとえば、WordPressテーマ『Nishiki Pro（ニシキ プロ）』は、見出しのデザインを変更するための機能が豊富です。

▼外観のカスタマイズ▼

▼見出しブロックのスタイル▼

▼独自機能「見出しスタイル作成」▼

※『Nishiki Pro』の概要は、以下の記事で詳しく解説しています。

まず、現在使用中のテーマに、見出しのデザインを変更する標準機能があるかどうかを確認してみましょう。

なお、『Nishiki Pro』で見出しのデザインを変更する方法は、のちほど詳しく解説します。

「導入するテーマをまだ決めていない……」「テーマの乗り換えを検討している」という方は、ぜひ参考にしてください。

【2】追加CSS

次に、WordPressで見出しのデザインを変更する、もう一つの方法「追加CSS」について解説します。

追加CSSとは、CSSコードを簡単に追加できる機能のこと。

既存のCSSファイルを直接修正する必要がなく、誤って重要な部分を上書きしたり、消したりするリスクがないため、初心者の方でも扱いやすいのが特長です。

以下が、「追加CSS」の編集画面です。

▼追加CSSの編集画面▼

なお、CSSコードを自分で考えて書くには知識が必要になるため、初心者の方にとってはハードルが高いです。

しかし、インターネット上には、見出しのデザインを紹介するとともに、そのCSSコードを配布しているWebサイトがいくつか存在しますよ。

そのようなWebサイトをうまく活用すれば、初心者の方でもCSSコードをコピーして貼り付けるだけで済み、見出しのデザインを簡単に変更することが可能です。

【1】テーマの標準機能で見出しのデザインを変更する方法（例：Nishiki Pro）

それではまず、テーマの標準機能で見出しのデザインを変更する方法について、見ていきましょう。

ここでは例として、WordPressテーマ『Nishiki Pro』の標準機能で見出しデザインを変更する方法について、解説します。

なお、『Nishiki Pro』以外のテーマを使っている方は、運営元のマニュアルを参考にしてください。
以下は、当メディアで紹介しているテーマの一例です。

もしくは、のちほど「追加CSSで見出しデザインを変更する方法」を解説するので、そちらを参考にするのもよいですよ。

それでは、『Nishiki Pro』の標準機能で見出しデザインを変更する方法を見ていきましょう。

【基本設定】外観のカスタマイズ

『Nishiki Pro』は、WordPressのメインナビゲーションメニューの「外観 ＞ カスタマイズ」から、基本となる見出しのデザインを変更できます。

詳しく見ていきましょう。

【見出し単位の設定】見出しブロックのスタイル

『Nishiki Pro』は投稿もしくは固定ページで挿入した「見出しブロック」に対して、ブロック設定サイドバーの「スタイル」から、見出し単位でデザインを変更できます。

デフォルトで用意されている見出しデザインは、以下の7つです。

なお、「見出しブロック」自体は、WordPressの「標準ブロック」です。

WordPressのブロックエディタの使い方や、「標準ブロック」の種類については、以下の記事で詳しく解説しているので、参考にしてください。

【見出し単位の設定】「見出しスタイル作成」機能

三つ目に、『Nishiki Pro』の独自機能「見出しスタイル作成」で、見出しのデザインを変更する方法を解説します。

「見出しスタイル作成」機能では、あらかじめ登録してある以下14個の見出しデザインを、CSSコード不要でカスタマイズすることが可能です。

しかも、「リアルプレビュー機能」があるので、カスタマイズした内容は即座に確認できます。

それでは、使い方を見ていきましょう。

なお、『Nishiki Pro』の「見出しスタイル作成」機能のマニュアルは、以下のリンクからご確認いただけます。

（参考：Nishiki Pro「見出しスタイル作成」機能）

【2】追加CSSで見出しのデザインを変更する方法

ここからは、「追加CSS」で見出しのデザインを変更する方法を解説します。

前述のとおり、追加CSSならテーマの標準機能にはない見出しデザインに変更可能です。

なお、今回は『Nishiki Pro』のWordPressテーマを例にします。

『Nishiki Pro』のように、WordPressのメインナビゲーション「外観 ＞ カスタマイズ」から、基本設定を変更できる場合は、あらかじめ見出しのデザインを「なし」に設定しておきましょう。

ほかの見出しデザインを選んだ状態だと、追加CSSの内容が反映されないことがあるので、注意してください。

企業ホームページの見出しデザイン例5選

最後に、見出しをデザインするときの参考になる、企業のホームページを5つ紹介します。

なお、ここで紹介するのは、主に企業のオウンドメディア（ブログ）に活用されている見出しです。

オウンドメディアは読みものであるため、見出しの重要性が高く、その存在が分かりやすいデザインにする必要があります。

見出しとしての役割を果たしながら、各企業の特徴を出している点に注目して見てみましょう。

シンプルな見出しデザイン／ソフトバンクビジネスブログ

▲出典：ソフトバンクビジネスブログ

『ソフトバンクビジネスブログ』は、ソフトバンク株式会社が運営しているオウンドメディアで、ビジネスの「今」と「未来」を発信しています。

見出しは、文字のみのシンプルなデザイン。
と言っても、本文も太字やラインマーカーなどの装飾がないシンプルなものであるため、十分に見出しだと分かります。

▲出典：ソフトバンクビジネスブログ

このように、見出しのデザインは本文とのバランスが重要です。

なお、シンプルなデザインの見出しは、ビジネスにおいては珍しくありません。

シンプルなデザインのオウンドメディアを作りたい場合は、選択肢の一つになるでしょう。

コーポレートカラーを取り入れた見出しデザイン／Lidea

▲出典：Lidea

『Lidea（リディア）』は、ライオン株式会社が運営する生活情報Webメディアです。

オウンドメディアの配色は、ライオン株式会社のコーポレートカラーである「緑」でうまく構成されており、それは見出しのデザインからも確認できます。

▲出典：Lidea

見出しのデザイン自体はシンプルですが、緑のラインがあることで、より見出しとして分かりやすいものになっていますよね。

また、コーポレートカラーが使用されているため、ライオン株式会社らしさが伝わってくるのも特徴です。

見出しはもちろん、オウンドメディアの配色に悩んだ場合は、コーポレートカラーを使用してみてはいかがでしょうか。

階層構造が分かりやすい見出しデザイン／PINTO!

▲出典：PINTO!

『PINTO!（ピント）』は、企業のデジタルマーケティングを支援する、株式会社PLAN-Bが運営するオウンドメディアです。

こちらも、見出しのデザインにはコーポレートカラーが使われています。

ただ、ここで注目したいのは、大見出し（h2）と小見出し（h3）のデザインの違いです。

▲出典：PINTO!

大見出しのほうが背景ベタ塗りで力強く、小見出しがそれに比べて控えめなデザインになっていますよね。
これにより、見出しの階層構造が分かりやすくなっています。

見出しの階層構造が明確になると、ユーザー（読者）が記事の内容を理解しやすくなりますよ。
これは、とくに情報量が多い記事が多いオウンドメディアには有効です。

オウンドメディアを通して自社のことを知ってもらうためにも、まず読みやすい記事になるように、デザインを工夫しましょう。

インパクトのある見出しデザイン／mercan

▲出典：mercan

『mercan（メルカン）』は、株式会社メルカリが採用を目的に運営するオウンドメディアです。

見出しは、先頭の文字に大きな水色の正円が付いており、インパクトのあるデザインになっています。

▲出典：mercan

「シンプルなデザインにしたいけど、見出しだと気づいてもらえるか心配……」という方は、参考になるのではないでしょうか。

これだけインパクトがある見出しなら、ページをスクロールしたときにすぐ目に飛び込んでくるので、その存在に気づきやすいです。

ちなみに、この水色の正円は『メルカリ』のサービスロゴに使われているものと同じ。

▲出典：mercari

このように、会社やサービスのロゴにある特定の要素を、見出しに採用する方法があることも、知っておくとよいですね。

アイコンを用いた見出しデザイン／北欧、暮らしの道具店

▲出典：北欧、暮らしの道具店

『北欧、暮らしの道具店』は、株式会社クラシコムが運営するECサイトです。
一般的なECサイトとは異なり、「お買いもの」だけでなく、「読みもの」も楽しめます。

見出しのデザインの特徴は、アイコンが使用されていること。
たとえば、以下は虫眼鏡アイコンです。

▲出典：北欧、暮らしの道具店

見出しのサイズはそこまで大きくありませんが、アイコンがあることで注目しやすくなっています。

「モノクロ配色のブログにしたいけど、見出しを目立たせたい」というときに、選択肢の一つになるでしょう。

見出しのデザイン事例を探すならギャラリーサイトがおすすめ

「参考になる見出しのデザイン事例をもっと知りたい」という方には、ギャラリーサイトがおすすめです。

ギャラリーサイトなら、業種、カラー、ホームページの種類などのさまざまなカテゴリから、参考のホームページを探せます。

自社のイメージに近いホームページが採用している見出しのデザインを見れば、より参考にしやすいでしょう。

ギャラリーサイトは以下の記事で紹介しているので、ぜひ参考にしてください。

まとめ

この記事では、WordPressでホームページを作る方向けに、見出しのデザインを変更する方法について解説しました。

ぜひこの記事を参考に、見出しのデザインを変更して、ホームページのオリジナリティを高めてください。

それでは、素敵なホームページの完成を願っております。

以上、最後まで読んでいただき、ありがとうございました。

ホームページの開設を検討している方へ

※ 2024年5月時点、W3Techs調べ。

当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています！

これから始める方はこちらのホームページの作り方をぜひご覧ください！

ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ！