THE THOR:ヘッダーをグラデーションにしたい

今回のポイント

  • CSSはインストール、登録不要のツールで作成します。
  • 追加CSSにCSSコードを追加します。
    簡単です!

THE THORのヘッダーの色指定はシンプルです

THETHORヘッダーカスタムメニュー
THE THORのカスタマイズメニューから指定できる色は単色です。
グラデーションにしたい!でもCSSわからないし・・
という方でも簡単にグラデーションのヘッダーに変更できます。

グラデーションのCSSを作る

グラデーションツールです。

ColorZilla

A powerful Photoshop-like CSS gradient editor…

リンク先を開いたら、翻訳ツールOFFにしてください。
CSSをコピペするときに、コードまで日本語になってしまいます^^;

illustratorを触ったことある方なら、こちらのツールは感覚で操作できると思います。
初めてという方でも、初期のパレットからワンクリックで選択できます。
Ultimate CSS Gradient Generator ColorZilla com

グラデーションを作ったらCSSの記述場所を確認しましょう。

CSSの記述場所(読み飛ばしてもOKです)

Webサイトトップページを表示します。
右クリックで「検証」(Chromeの場合)→「Ctrl+Shift+C」→でヘッダーをクリックします。
Stylesパネルでヘッダーが「l-header」というclass名ということが分かります。
l-headerのCSSをコピーします。
デベロッパーツール,操作

追加CSSにコードを貼り付ける

WordPressに戻り、外観-カスタマイズ-「追加CSS」をクリックします。
ヘッダーのCSSを貼り付けます。
(何か記述されていたら、一番最後でOKです)。

先ほどのグラデーションツールを開き、作成したグラデーションのCSSをコピーし、追加CSSに貼り付けたコードに上書きします(「ここから~ここまで」の間です)。

完成です

ザ・トールヘッダーグラデーション完成

投稿者プロフィール

memocco
WordPress、マーケティングを勉強中の事務員&Web担当の保育園児ママです。

SNSやブログで知り合った方とも
情報共有できたり楽しくコミュニケーション取れたりできればうれしいです!!
サーバーはエックスサーバーが速くてお勧めです



THE THOR:ヘッダーをグラデーションにしたい
最新情報をチェックしよう!