Last Updated: 2019年6月17日
WordPressはcssを１からカスタマイズできるのが特徴ですが、他の方が作成したテーマを使っていると、少しだけ替えたい場合も面倒だったりします。この記事では見出しを簡単に替える方法を纏めました。
他の方のWordpressの記事を見ていると、見出しが他の文字よりも大きいだけではなく、カラフルに装飾されています。
自分もやってみたい！と思ってその方法を検索してたんですが、「style.cssに書き加えてください」「プラグインを導入しましょう」という結果が沢山出てきます。
しかし、それですら敷居が高いｗ。プラグインはこれ以上入れたくないという考えもあったので、他に方法がないかなぁと思ってたんですが、見出しの変更くらいなら「追加CSSを使う」という手もあるの事を確認したで、その方法を書いておきます。
見出しのCSSを公開してくれているwebサイトから拝借する
ネット検索すると、色々な見出しのCSSコードを作って公開してくれているサイトが結構あります。一例ですが以下のサイトを紹介します（この他にも沢山あります。有難うございます！）。
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選 – by サルワカさん
【CSS】見出しデザインのCSSサンプル集 – by なるほど。さん
シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50 – by NxWorldさん
これらのサイトにある見出しから、好みの見出しを見つけ、コードをコピーします。
追加CSSに貼り付ける
自分のWordpressのダッシュボードから、外観＞カスタマイズ＞追加CSSと進んでいくと、画面左下に「1」とかかれたスペースが出てくるので、ここに先程のコードをペーストします。
これで完了なんですが、「何も変わらないぞ？」と思うかも知れません。これが反映されているかどうかは公開されているページをカスタマイズで開いて、対応している見出しを表示させないといけません。
分かりやすい方法として、一旦実験ページとして（投稿ページでも固定ページでも可）以下のように見出しを全部書いて公開します。その上で見出しを調整すればスマートかと。
ちゃんと貼り付けできていれば、どれかに装飾がつくはずです。
CSSを調整する
さてどれかに装飾がついたと思いますが、今度は目的の見出しに対応させましょう。
上の画像では、コードの一番最初にある「h1」というのがありますね。CSSやHTMLで「hタグ」と呼ばれています。
そしてWordpress上では、記事編集にある見出し設定の「H1」に対応しています。
ここの数字を１〜６のどれかにすれば、その数字に対応した見出しに反映される、というわけです。
もし見出しを複数または全部変えたいのなら、CSSのコードを後ろに足していき、それぞれの最初にあるhタグ(ｈ○)の数字をそれぞれに合わせればOKです。
以降の調整は好みに変えれば良いんですが、それについてはサルワカさんが詳しく解説してくださってますのでそちらにお任せします。
色を指定する
ここでは一番変更すると思われる「色の指定」について書きますね。
文字や背景の色を指定するには、以下のように書きます。
h4{
color: #ffffff;
background: #000000;
}「color」は文字、「background」は背景です。これを「 h○{ 」の次の行（実際は「}」までの間ならどこでも可）にペーストします。
実際の色そのものの指定は「#」とそれに続く6桁の数字or英字です。16進数（0~9,a,b,c,d,e,f）で指定します。これを「カラーコード」といいます。
色の指定方法は以下の通り。
# 赤 緑 青
# 00 00 00
数字は16進数で表される00~ffの2桁で、00だとその色は全く含まれず、ffに指定すると一番明るく出ます。そして光の三原色である赤緑青（RGB）の混ざり具合で最終的な色が表示されます。
下の図は、RGBをそれぞれ一番明るくした場合の組み合わせです。
赤、緑、青のどれを混ぜればどの色になるかを把握しておけば、ピンクなら紫に緑を足したり、オレンジや茶色なら赤に少し緑を入れるなど、目星がつくようになります:)
色が変わるだけで、レイアウトが崩れたりblogが見えなくなるなんてことは無いので、色々試してみてください。
色見本をネットで探す方法もあります。
素人でもプロ並みの配色ができるデザインパターン参考サイト21選 -by CodeCampusさん
またMacユーザーなら、アプリケーションのユーティリティフォルダにある「Digital Color Meter」を使うことによって、例えばblogのトップにある色や、他のサイトの色など、画面に表示されている色なら何でもカラーコードで表示してくれるので、サイトの色を統一することができます。
バックアップを取る
さて、見出しが出来上がったらテキストエディタなどでコードを保存しておきましょう。
別のテーマに変更したときにこのコードは未入力の状態になりますが、コードを貼り付ければまた反映されます。
注意
テーマのタイトルやサイドバーなどで見出しのhタグ（h○）が使われている事があるので、装飾をつけたい見出しと同じタグを使っている場合、その部分にも装飾が付くことになります。
つまりblog全体の見た目が若干変わる可能性があります。
大幅にレイアウトが変わることはないでしょうが、そこは簡易的手法なので、他のhタグで代用するか、妥協するしかありません(′・∀・‵)
ただしhタグには一応ながら約束事があるので、そちらも考えつつ設定してくださいね。
見出しタグ（hタグ）のSEOを意識した適切な使い方・設置方法とは？ -by PLAN-Bさん
というわけで、見出しをサクッと替える方法をご紹介しました。
この程度なら追加CSSで充分機能しますが、もしwordpressテーマをもっとあちこち改良したいと思ったら、本格的にCSSで組んでいった方が良いので、頑張ってトライしてみてください:)