こんにちは、ニシムラ(@nissy421)です。
今回は、ワードプレスブログの見出しのデザインをカスタマイズする方法をご紹介します。
この記事を読めば、HTMLやCSSがよくわからない人でも、見出しの基本的なデザインをカスタマイズできるようになります。
ワードプレステーマのCSSを編集する
ワードプレスの見出しデザインは、つかっているテーマのCSSを編集すれば、変えることができます。
CSSというのは、カスケーディング・スタイル・シートといって、ブログやWebサイトのデザイン（スタイル）を決めることができるプログラミング言語です。
CSSを編集する方法ですが、今回は親テーマではなく、子テーマに必要なCSSを追記していきます。
[aside type=”normal”]子テーマは、親テーマ（もとのテーマ）と一緒につかうことで、機能やデザインをかんたんに編集（追記）することができるテーマです。
親テーマを直接編集すると、テーマがアップデートしたときに、編集した内容が消えてしまいます。
子テーマがはじめから用意されているテーマも多いので、ぜひ導入してみてください。
もしお使いのテーマに子テーマがない場合は、「One-Click Child Theme」というプラグインをつかえば、一発で子テーマをつくることができます。[/aside]
まずはワードプレスの管理画面から【外観】⇒【テーマの編集】で、テーマの編集画面をひらきます。
そして、スタイルシート（style.css）というファイルをひらきましょう。
編集画面が表示されましたか？
それでは、さっそく見出しのCSSを追記していきましょう。
見出し(h2,h3,h4)のCSSを追記する方法
ワードプレスでブログを書くとき、記事の見出しはふつうh2やh3、h4などのHTMLがつかわれています。
数字が大きくなるほど、重要度の高い大きな見出しをあらわしているんですね。
h1は、ふつうブログタイトルにつかわれるものなので今回は編集しません。
たとえば僕のブログでは、見出しはこんなふうに表示されています。
それで、この見出しがどんなCSSで書かれているのかというと、
h2見出しのCSS
.entry-content h2{
padding: 0.8em 0.9em;
box-shadow: none;
font-size:1.1em;
}
h3見出しのCSS
.entry-content h3{
font-size:1em;
border-left: none;
border-bottom:3px solid;
padding: 0.5em 0.5em 0.1em;
margin-top: 1.8em;
}
h4見出しのCSS
.entry-content h4{
font-size:1em;
}
こんなふうに書かれています。
この英語やら数字がまじった横文字（CSS）が、見出しのデザインを表現しているんです。
[aside type=”normal”]ただし、上のCSSだけ書いても、当ブログとおなじ見出しにはなりません。
これから説明するので難しければ読み飛ばしてもかまいませんが、上記のCSSはもともと親テーマに書かれているものではなく、子テーマに追記したCSSです。
たとえば当ブログの親テーマには、
.entry-content h2{
position: relative;
border: none;
font-size:1.25em;
padding: 1em 1.1em;
margin-top: 2.1em;
margin-bottom: 1em;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #e55937;
color:#fff;
box-shadow: 0 0 45px rgba(0, 0, 0, 0.25) inset;
}
というCSSが書かれています。
これに上記のCSSを追記（上書き）することで、当ブログの見出しが表現されています。
お使いのテーマによって多少の差はありますが、おなじようなCSSが親テーマに書かれているはずです。[/aside]
CSSの中身をこまかく見てみると、
.entry content h2{}
の部分が、h2の見出しのデザインを指定しますよーという意味です。
h3のデザインを指定したければ、h2の部分をh3に変えます。
{}の中には、文字の大きさやスタイルなどのデザインを決めるCSSがいくつか書かれています。
たとえば、
font-size:1.1em;
は、フォント（文字）の大きさを、
padding: 0.8em 0.9em;
は、見出しの余白の幅をあらわしているんです。
【CSS：値；】というふうに、：のあとにサイズや色を指定する値を書いて、最後に；で閉じます。
それから値と値の間には空白を入れます。
こんなふうに、いろいろなCSSをつかって自分だけの見出しをつくることができるんですね！
ワードプレスの見出しのスタイルを指定するCSSの実例
では見出しを指定するCSSにはどんなものがあるのか、実際に見ていきましょう。
これからご紹介するCSSを組み合わせたり、数値を調整することで、オリジナルの見出しをつくることができます。
フォントのサイズを指定する【font-size】
.entry content h2{
font-size:1.25em;
}
font-sizeというCSSを書くと、フォントのサイズ（文字の大きさ）を指定することができます。
：をはさんで、1.25emと書かれていますね。
emいうのは、h1のフォントサイズ（テーマで決められている基本のフォントサイズ）に対する割合をあらわす単位です。
たとえばh1のフォントサイズが16pxだとすると、1.25emは20pxということになります。
font-sizeは、ほかにもpx（ピクセル）や％など、いろいろな単位でサイズを指定することができます。
さいごに；で閉じて完成です。
見出しの下に線（ボーダー）を表示する【border-bottom】
.entry content h2{
border-bottom:solid 3px blue;
}
border-bottomというCSSを書くと、見出しの文字の下に線（ボーダー）を表示することができます。
当ブログのh3見出しでつかわれているような感じです。
:のあとに、solid 3px blueと、空白をはさんで３つの文字や数字が書かれていますよね。
CSSではサイズだけではなく、種類も色も一緒に指定することができるんです。
たとえば上の例では、ふつうの線（solid）で3px（サイズ）の青い（blue）ボーダーが表示されます。
勘のいい方はもうお気づきだと思いますが、border-bottomは見出しの下にボーダーを表示しますよね。
bottomは下（底）なので、ここをrightにすれば見出しの右に、leftにすれば左に、topにすれば上にボーダーを表示することができるんです。
組み合わせてつかうこともできるので、「全部ちがう色の四角い線で囲む」なんて奇抜なこともできちゃいます笑
見出しに背景色（ボックス）を表示する
.entry content h2{
background-color: #27ae60;
}
当ブログでもh2の見出しにつかっているのですが、background-colorというCSSを書くと、見出しに背景色（ボックス）を表示することができます。
カラーは#~というカラーコードで指定します。
カラーコードについてはいろいろなサイトで紹介されているんですが、基本の色以外にも、和の色やフラットデザインなど、本当にたくさんの色をWebで表現することができるんです。
僕がいつも参考にさせていただいているサイトをいくつかご紹介しておきますね。
[aside type=”boader”] ■日本の伝統色（和色）
日本人の美の心！日本の色（伝統色・和色）
■フラットデザイン
フラットデザインなWebサイトで使われている色ってどんな色？配色パターン事例・カラーコード付き｜Tips*Blog｜株式会社コプロシステム
■企業のブランドカラー
BrandColors – Official color codes for the world’s biggest brands
■サイトや画像でつかわれている色をしらべる
iromiru (イロミル) – 画像からカラーコード抽出便利サービス[/aside]
背景色のアレンジ① 背景色の角を丸くする
.entry content h2{
background-color: #27ae60;
border-radius: 20px;
}
さきほどのbackground-colorにプラスして、border-radiusというCSSを書くと、背景色のボックスの角をまるくすることができます。
うしろの20pxの部分は、角丸の半径を指定していて、数値が大きくなるほど角がまるくなります。
ちなみに、
border-radius: 20px 18px 15px 30px;
なんていうふうに、左上・右上・左下・右下それぞれの丸さを指定することもできます。
背景色のアレンジ② 背景色に影をつける
.entry content h2{
background-color: #27ae60;
box-shadow: 10px 20px 3px #aaaaaa;
}
もうひとつ、背景色のアレンジをご紹介します。
box-shadowというCSSをつかうと、背景色のボックスに影をつけることができます。
数字が３つならんでいますよね。
前の２つは、ヨコとタテの影の位置を指定しています。
10px 20pxということは、ヨコに10px、タテに20px分ずれた位置に影を表示することができるんですね。
３つ目の値（3px）は、影にぼかしを入れることができます。
ほかの値もそうですが、0pxとすると、何の書いていないのとおなじあつかいになります。
最後の#~は影の色を指定しています。
もともと指定されていたCSSを消す
親テーマで指定されているCSSをリセットするときはnoneをつかいます。
たとえば
「見出しの左にボーダーが表示されていたけど、邪魔だから消したい」
というときには、
.entry-content h2{
border-left: none;
}
と書くと、親テーマに書かれている見出しの左側のボーダー（border-left）を非表示にすることができます。
まとめ
いかがでしたか？
CSSって横文字でとっつきづらいイメージがありますが、意味を理解すると意外とかんたんだし本当に便利なものですよね！
CSSをつかうともっと高度な見出しもつくることができますが、まずは基本のカスタマイズをマスターしましょう。
ちなみに、現在当ブログでつかっているWordPressテーマは「ハミングバード」です。
OpenCageというブランドの国産テーマで、ブロガーさんにすごく人気なんですよ。
僕はCSSもHTMLもまったくわからない状態で購入したんですが、はじめから完成されたテーマなので初心者さんにもぴったりですし、
今日の見出しのカスタマイズのように、デザインを勉強しながらすこしずつカスタマイズして自分色に染めていくこともできるんです。
自信を持っておすすめできるテーマなので、もしよかったらあなたも一度つかってみてください！
絶対気に入りますよ＾＾
WordPressテーマ「ハミングバード」は、以下の販売サイトからもご購入いただけます！
[btn class=”lightning big”]「ハミングバード」販売サイトへ[/btn]
[btn]【関連記事】WordPress無料テーマを卒業して有料デビューしたいあなたへ[/btn]
今回参考にさせていただいた書籍＆Webサイト
[aside type=”boader”]
■NxWorld
シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50 | NxWorld
■HTML5＆CSS３レッスンブック
[/aside]
