WordPressの見出しをCSSの知識がなくてもサクッと替える方法

WordPressはcssを1からカスタマイズできるのが特徴ですが、他の方が作成したテーマを使っていると、少しだけ替えたい場合も面倒だったりします。この記事では見出しを簡単に替える方法を纏めました。


他の方のWordpressの記事を見ていると、見出しが他の文字よりも大きいだけではなく、カラフルに装飾されています。
自分もやってみたい!と思ってその方法を検索してたんですが、「style.cssに書き加えてください」「プラグインを導入しましょう」という結果が沢山出てきます。

しかし、それですら敷居が高いw。プラグインはこれ以上入れたくないという考えもあったので、他に方法がないかなぁと思ってたんですが、見出しの変更くらいなら「追加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」に対応しています。

ここの数字を1〜6のどれかにすれば、その数字に対応した見出しに反映される、というわけです。

もし見出しを複数または全部変えたいのなら、CSSのコードを後ろに足していき、それぞれの最初にあるhタグ(h○)の数字をそれぞれに合わせればOKです。

追加するCSSコードは、前のコードの後に改行して貼り付けて数字を合わせます。

以降の調整は好みに変えれば良いんですが、それについてはサルワカさんが詳しく解説してくださってますのでそちらにお任せします。

【CSS】文字装飾の基本を総まとめ!初心者向けに解説

色を指定する

ここでは一番変更すると思われる「色の指定」について書きますね。

文字や背景の色を指定するには、以下のように書きます。

h4{
color: #ffffff;
background: #000000;
}

「color」は文字、「background」は背景です。これを「 h○{ 」の次の行(実際は「}」までの間ならどこでも可)にペーストします。

上記サンプルです。見出しh4を、文字色を白(#ffffff)、背景を黒(#000000)に指定しています。。すいません既存の記事をサンプルにしました。

実際の色そのものの指定は「#」とそれに続く6桁の数字or英字です。16進数(0~9,a,b,c,d,e,f)で指定します。これを「カラーコード」といいます。
色の指定方法は以下の通り。

# 赤 緑 青
# 00 00 00

数字は16進数で表される00~ffの2桁で、00だとその色は全く含まれず、ffに指定すると一番明るく出ます。そして光の三原色である赤緑青(RGB)の混ざり具合で最終的な色が表示されます。

下の図は、RGBをそれぞれ一番明るくした場合の組み合わせです。

※黒は「#000000」となります。

赤、緑、青のどれを混ぜればどの色になるかを把握しておけば、ピンクなら紫に緑を足したり、オレンジや茶色なら赤に少し緑を入れるなど、目星がつくようになります:)
色が変わるだけで、レイアウトが崩れたりblogが見えなくなるなんてことは無いので、色々試してみてください。

色見本をネットで探す方法もあります。
素人でもプロ並みの配色ができるデザインパターン参考サイト21選 -by CodeCampusさん

またMacユーザーなら、アプリケーションのユーティリティフォルダにある「Digital Color Meter」を使うことによって、例えばblogのトップにある色や、他のサイトの色など、画面に表示されている色なら何でもカラーコードで表示してくれるので、サイトの色を統一することができます。

表示されている数値を矢印で示している通りに並べれば、CSSやHTMLで使えるようにます。

バックアップを取る

さて、見出しが出来上がったらテキストエディタなどでコードを保存しておきましょう。
別のテーマに変更したときにこのコードは未入力の状態になりますが、コードを貼り付ければまた反映されます。

注意

テーマのタイトルやサイドバーなどで見出しのhタグ(h○)が使われている事があるので、装飾をつけたい見出しと同じタグを使っている場合、その部分にも装飾が付くことになります。
つまりblog全体の見た目が若干変わる可能性があります。

大幅にレイアウトが変わることはないでしょうが、そこは簡易的手法なので、他のhタグで代用するか、妥協するしかありません(′・∀・‵)
ただしhタグには一応ながら約束事があるので、そちらも考えつつ設定してくださいね。

見出しタグ(hタグ)のSEOを意識した適切な使い方・設置方法とは? -by PLAN-Bさん


というわけで、見出しをサクッと替える方法をご紹介しました。
この程度なら追加CSSで充分機能しますが、もしwordpressテーマをもっとあちこち改良したいと思ったら、本格的にCSSで組んでいった方が良いので、頑張ってトライしてみてください:)

PR
Leave a Reply