簡単!ワードプレスの見出しデザインをカスタマイズしよう!

こんにちは。西村です。

今回は、ワードプレスブログの見出しのデザインをカスタマイズする方法をご紹介します。

この記事を読めば、HTMLやCSSがよくわからない人でも、見出しの基本的なデザインをカスタマイズできるようになります。

ワードプレステーマのCSSを編集する

ワードプレスの見出しデザインは、つかっているテーマのCSSを編集すれば、変えることができます。

CSSというのは、カスケーディング・スタイル・シートといって、ブログやWebサイトのデザイン(スタイル)を決めることができるプログラミング言語です。

CSSを編集する方法ですが、今回は親テーマではなく、子テーマに必要なCSSを追記していきます。

子テーマは、親テーマ(もとのテーマ)と一緒につかうことで、機能やデザインをかんたんに編集(追記)することができるテーマです。

親テーマを直接編集すると、テーマがアップデートしたときに、編集した内容が消えてしまいます。

子テーマがはじめから用意されているテーマも多いので、ぜひ導入してみてください。

もしお使いのテーマに子テーマがない場合は、「One-Click Child Theme」というプラグインをつかえば、一発で子テーマをつくることができます。

まずはワードプレスの管理画面から【外観】⇒【テーマの編集】で、テーマの編集画面をひらきます。

そして、スタイルシート(style.css)というファイルをひらきましょう。

編集画面が表示されましたか?

それでは、さっそく見出しのCSSを追記していきましょう。

見出し(h2,h3,h4)のCSSを追記する方法

ワードプレスでブログを書くとき、記事の見出しはふつうh2やh3、h4などのHTMLがつかわれています。

数字が大きくなるほど、重要度の高い大きな見出しをあらわしているんですね。

h1は、ふつうブログタイトルにつかわれるものなので今回は編集しません。

たとえば僕のブログでは、見出しはこんなふうに表示されています。

当ブログのh2,h3,h4見出しはこんな感じです
それで、この見出しがどんなCSSで書かれているのかというと、

h2見出しのCSS

h3見出しのCSS

h4見出しのCSS

こんなふうに書かれています。

この英語やら数字がまじった横文字(CSS)が、見出しのデザインを表現しているんです。

ただし、上のCSSだけ書いても、当ブログとおなじ見出しにはなりません。

これから説明するので難しければ読み飛ばしてもかまいませんが、上記のCSSはもともと親テーマに書かれているものではなく、子テーマに追記したCSSです。

たとえば当ブログの親テーマには、

というCSSが書かれています。

これに上記のCSSを追記(上書き)することで、当ブログの見出しが表現されています。

お使いのテーマによって多少の差はありますが、おなじようなCSSが親テーマに書かれているはずです。

CSSの中身をこまかく見てみると、

の部分が、h2の見出しのデザインを指定しますよーという意味です。

h3のデザインを指定したければ、h2の部分をh3に変えます。

{}の中には、文字の大きさやスタイルなどのデザインを決めるCSSがいくつか書かれています。

たとえば、

は、フォント(文字)の大きさを、

は、見出しの余白の幅をあらわしているんです。

【CSS:値;】というふうに、:のあとにサイズや色を指定する値を書いて、最後に;で閉じます。

それから値と値の間には空白を入れます。

こんなふうに、いろいろなCSSをつかって自分だけの見出しをつくることができるんですね!

ワードプレスの見出しのスタイルを指定するCSSの実例

では見出しを指定するCSSにはどんなものがあるのか、実際に見ていきましょう。

これからご紹介するCSSを組み合わせたり、数値を調整することで、オリジナルの見出しをつくることができます。

フォントのサイズを指定する【font-size】

font-sizeというCSSを書くと、フォントのサイズ(文字の大きさ)を指定することができます。

:をはさんで、1.25emと書かれていますね。

emいうのは、h1のフォントサイズ(テーマで決められている基本のフォントサイズ)に対する割合をあらわす単位です。

たとえばh1のフォントサイズが16pxだとすると、1.25emは20pxということになります。

font-sizeは、ほかにもpx(ピクセル)や%など、いろいろな単位でサイズを指定することができます。

さいごに;で閉じて完成です。

見出しの下に線(ボーダー)を表示する【border-bottom】

border-bottomというCSSを書くと、見出しの文字の下に線(ボーダー)を表示することができます。

当ブログのh3見出しでつかわれているような感じです。

:のあとに、solid 3px blueと、空白をはさんで3つの文字や数字が書かれていますよね。

CSSではサイズだけではなく、種類も色も一緒に指定することができるんです。

たとえば上の例では、ふつうの線(solid)で3px(サイズ)の青い(blue)ボーダーが表示されます。

勘のいい方はもうお気づきだと思いますが、border-bottomは見出しの下にボーダーを表示しますよね。

bottomは下(底)なので、ここをrightにすれば見出しの右に、leftにすれば左に、topにすれば上にボーダーを表示することができるんです。

組み合わせてつかうこともできるので、「全部ちがう色の四角い線で囲む」なんて奇抜なこともできちゃいます笑

見出しに背景色(ボックス)を表示する

当ブログでもh2の見出しにつかっているのですが、background-colorというCSSを書くと、見出しに背景色(ボックス)を表示することができます。

カラーは#~というカラーコードで指定します。

カラーコードについてはいろいろなサイトで紹介されているんですが、基本の色以外にも、和の色やフラットデザインなど、本当にたくさんの色をWebで表現することができるんです。

僕がいつも参考にさせていただいているサイトをいくつかご紹介しておきますね。

背景色のアレンジ① 背景色の角を丸くする

さきほどのbackground-colorにプラスして、border-radiusというCSSを書くと、背景色のボックスの角をまるくすることができます。

うしろの20pxの部分は、角丸の半径を指定していて、数値が大きくなるほど角がまるくなります。

ちなみに、

なんていうふうに、左上・右上・左下・右下それぞれの丸さを指定することもできます。

背景色のアレンジ② 背景色に影をつける

もうひとつ、背景色のアレンジをご紹介します。

box-shadowというCSSをつかうと、背景色のボックスに影をつけることができます。

数字が3つならんでいますよね。

前の2つは、ヨコとタテの影の位置を指定しています。

10px 20pxということは、ヨコに10px、タテに20px分ずれた位置に影を表示することができるんですね。

3つ目の値(3px)は、影にぼかしを入れることができます。

ほかの値もそうですが、0pxとすると、何の書いていないのとおなじあつかいになります。

最後の#~は影の色を指定しています。

もともと指定されていたCSSを消す

親テーマで指定されているCSSをリセットするときはnoneをつかいます。

たとえば

「見出しの左にボーダーが表示されていたけど、邪魔だから消したい」

というときには、

と書くと、親テーマに書かれている見出しの左側のボーダー(border-left)を非表示にすることができます。

まとめ

いかがでしたか?

CSSって横文字でとっつきづらいイメージがありますが、意味を理解すると意外とかんたんだし本当に便利なものですよね!

CSSをつかうともっと高度な見出しもつくることができますが、まずは基本のカスタマイズをマスターしましょう。

ちなみに、現在当ブログでつかっているWordPressテーマは「ハミングバード」です。

OpenCageというブランドの国産テーマで、ブロガーさんにすごく人気なんですよ。

僕はCSSもHTMLもまったくわからない状態で購入したんですが、はじめから完成されたテーマなので初心者さんにもぴったりですし、

今日の見出しのカスタマイズのように、デザインを勉強しながらすこしずつカスタマイズして自分色に染めていくこともできるんです。

自信を持っておすすめできるテーマなので、もしよかったらあなたも一度つかってみてください!

絶対気に入りますよ^^

WordPressテーマ「ハミングバード」は、以下の販売サイトからもご購入いただけます!

今回参考にさせていただいた書籍&Webサイト

こちらの記事もおすすめです

ABOUTこの記事をかいた人

ニシムラ・ケイイチ

ブロガー | Webライター | 九州男児 | 立教大学中退| 好き→猫、旅、読書 | 趣味で文系エンジニア | 夢はおっぱい | 童顔だけどオッサンだもの | 美しい言葉や素敵な文章が集まる日本一のブログを目指して、心震わす珠玉の読み物をあなたに。詳しいプロフィールやお仕事のお問い合わせはこちら⇒ ニシムラ・ケイイチのプロフィールとお問い合わせのページ