【WordPress】背景の色をグラデーションさせる方法

今回は、WordPressにおいて、ヘッダなど特定の部分の色をグラデーションさせる方法について記載していきます。

おそらくほとんどのWordPressテーマにおいて、カスタマイズ項目からの色指定は単色のみ可能と思われますが、下記に記載する方法でグラデーションすることができます。

【手順①】適用したい部分の「定義名」を調査する

適用したい項目に対して、設計上どのような名前が付けられているのかを調査します。

まずサイトで右クリックし、「検証」を選択します。
(ブラウザがGoogle Chromeであることを想定しています。Internet Explorer の場合「要素の検査」、Fire Foxの場合「要素を調査」を選択してください。)

これで「デヴェロッパーツール」なるものが画面端に立ち上がります。

次に、正方形に矢印が向いているアイコン

要素選択アイコン

をクリックしてサイトの部分ごとの情報が分かるモードにし、サイト上の色を変更したい部分をクリックします。

するとデヴェロッパーツール上にクリックした部分の情報が出てくるので、そこから背景色を指定している部分を見つけます。

ヘッダ
クリックした部分
背景色を指定した部分

上記では「#head-in」という部分に「background」と色コードが書かれており、背景色の指定がされていることが分かります。
この「#head-in」をメモしておきましょう。

もし指定している部分がツール上に表示されていなかった場合、クリックした場所を含む範囲をツール上からいくつか選べるので、別の範囲を選択することでどこかの範囲から見つけ出すことができます。

クリックした場所を含む範囲一覧が表示されている画像
クリックした場所を含む範囲一覧

【手順②】CSSを追加する

背景色をグラデーションしたい部分の名前を調べたら、その部分にグラデーションする命令を設定しましょう。

カスタマイズの項目から「追加CSS」を選択してください。

追加CSS選択項目

下記のような画面が出現します。

追加CSS記載場所

ここに命令を書いていきます。

まず、
『背景色を指定している部分の名前{}』
を記載します。
上記例だと
『#head-in{}』
になりますね。
部分によって『#』や『.』が文字の先頭についていますが、こちらも忘れずに記載してください。

次に、グラデーションの種類を指定する命令を『{}』の中に書きます。

グラデーションが縦の場合、
『background:linear-gradient(上部の色,下部の色);』

グラデーションが横の場合、
『background:linear-gradient(to right,左部の色,右部の色);』

グラデーションを中央に寄せる場合、
『background:radial-gradient(中央の色,外側の色);』

というようにそれぞれ記載します。
色の記載については
https://www.colordic.org
のサイトが参考になります。
「pink」などの色名でも「#000000」などの16進数カラーコードでもOKです。

縦方向へのグラデーション

縦方向のグラデーションCSS説明画像
CSS見本
縦方向のグラデーション画像
ヘッダ見本

横方向へのグラデーション

横方向へのグラデーションCSS説明画像
CSS見本
横方向へのグラデーションヘッダ画像
ヘッダ見本

中央へのグラデーション

中央へのグラデーションCSS説明画像
CSS見本
中央へのグラデーションヘッダ画像
ヘッダ見本

上記3パターン以外にもCSSによって様々なグラデーションをさせることができますので、もっと知りたい方は「CSS グラデーション」などで検索してみてください。

また、もしCSS追加が失敗して表示がおかしくなってしまった場合でも、テーマに最初から設定されている内容を更新しているわけではないので、CSS追加の部分を元に戻せば問題ありません。
あくまで追加した命令の優先度が高いだけです。

以上となります。
グラデーションを効果的に使って、目を引きやすいブログを書いていきましょう。

見栄えが結構かわるよー、試してみてね!