毎日、Twitterで日々の成果や頑張りをツイートしてします!

【STORK19カスタマイズ】フッターの背景をグラデーションにする方法を解説!

アイキャッチ画像

みなさん、お疲れさまです!カズトンです!

今回もWordPressの有料テーマである「Stork19」のカスタマイズを行っていこうと思います!

今回で、カスタマイズ記事も4回目ですね!

前回のカスタマイズ記事を見たい方は、こちらから!

WordPressの有料テーマである「Stork19」の購入を検討している方は、こちらの記事も見てみてください!

STORK19アイキャッチ画像

今回のカスタマイズを行うことで、以下のように「背景色をグラデーションぽくする」ことができます!

今回の記事は、「Stork19のフッターの背景色をグラデーションにする方法を解説」です!

今回の記事をおすすめする人
  • WordPressのテーマに「Stork19」を利用している人
  • WordPress初心者の人
  • HTMLやCSSを詳しく知らない人

WordPressの有料テーマ「Stork19」を利用している方は、コピペだけでもカスタマイズができると思います!

コピペだけしたい方は、こちら

また、コピペだけでなく本記事のカスタマイズをしっかりと理解したい方や自分でちょっとしたカスタマイズをしたい方は、こちらの記事を参考にしてみてください!

アイキャッチ画像

では、早速スタートです!

今回のカスタマイズについて

今回のカスタマイズについて、説明〜と言いたい所ですが一文で終わります笑

今回行うカスタマイズは、「フッターの背景色をグラデーションに変える」です!

他に言いようがありません笑

ですが、フッター?グラデーション?ってなってる方もおられると思うかと・・・

いるかな?いるよね笑

軽く「フッター」と「グラデーション」について説明しておきたいと思います!

フッターとは

フッターとは、Webサイトの一番下にあるコーナーのことです!

よくブログサイトでは、以下のような情報を設置しています!

  • カテゴリー
  • サイトマップ
  • グローバルメニュー
  • SNSのリンク

このサイトのフッターは、こんな感じです!

もうグラデーションのカスタマイズはしています!

グラデーションとは

グラデーションとは、「上から下に」「右から左に」と少しずつ色が変えさせたもののことをいいます。

こんな感じ↓↓↓(左から右にグラデーションがかかっている状態)

このカラーは、このサイトのテーマカラーになっている二種類を使いました。

実際に、このサイトのフッターのグラデーションに利用されている色です!

このようなグラデーションを作ってみたい人は、こちらのサイトから作成できます!

CSSの指定方法

では、今回カスタマイズを行うためのコードをまとめました!

今回必要となるコードは、1つです!

指定するコードを紹介

では、指定するコードを紹介していきたいと思います!

まずは、どこをカスタマイズするのかを指定します!

今回は、フッター(footer)ですね!

その後に{}をつけ、その中に指定したいコードを書き込みます!

linear-gradient(to 向かう方向,色コード,色コード)で指定するとグラデーションを指定すうことができます!

例えば、linear-gradient( to right, red , white)

とすると、右(right)に向かって、赤(red)から白(white)のグラデーションを指定するという意味になります。

実際にみると、こんな感じ!

このようなグラデーションを作ってみたい人は、こちらのサイトから作成できます!

実際のコードを見てみると

今回は、自分のテーマで使っている2色の色でコードを指定しました。

footer{
  background:linear-gradient(to bottom, #929aab, #393e46);
}

このコードの意味は、「フッターの背景色」に対して、「下(bottom)」に向かって「#929aab」から始まり、「#393e46」に終わるグラデーションを指定する。

カスタマイズ方法

では、実際にカスタマイズしていきましょう!

WordPressのダッシュボードを開いて下さいね!

では行きましょう!

手順

Step1

以下のコードをコピーしてください!

footer{
  background:linear-gradient(to グラデーションの方向, 始まりの色コード, 終わりの色コード);
}

グラデーションの方向は、

  • right
  • left
  • top
  • bottom

で指定してください。

rightと指定すると、右に移動するにつれて色が変化します。

topと指定すると、上に移動するにつれて色が変化します。

色のコードは、こちらから好きな色を選んでくださいね!

また、グラデーションがどんな感じになるか調べたい人は、こちらのサイトをチェック!

Step2

「WordPressのダッシュボード」→「外観」→「カスタマイズ」→「追加CSS」と順番に進めて行って下さい。

Step3

先ほど、コピーしたコードを貼り付けたら完成!

ちゃんと、以下の3つを設定してコードを貼り付けてくださいね!

  • グラデーションの向き
  • 色コード(スタート)
  • 色コード(ゴール)

実際に見てみると

先ほどの手順でカスタマイズは、成功しているはずです!

実際に見てみましょう!

実際に見ると、こんな感じに!

これで、カスタマイズ完了です!

終わりに

最後まで読んでいただき、ありがとうございます!

他にも、WordPress有料テーマ「Stork19」のカスタマイズ記事を投稿していますのでよろしかったら見てみて下さい!

「Stork19」のカスタマイズ記事は、こちらから!

これからも、どんどんカスタマイズ記事を投稿していきます!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です