【SANGOカスタマイズしてみた】動くグラデーションにしてみた

カスタマイズは自己責任で！

このブログのワードプレス環境

ワードプレステーマ

子テーマ

この記事ではヘッダーお知らせ欄の背景を動くグラデーションにしたカスタマイズを説明。

CUSTOM　POINT

お知らせ欄がもっと目立つようにしてみました。

こんな感じで変更

Before

After

このサイトの環境

テーマ

子テーマ

プラグイン

使うソフトなどはこちら

必須

WordPress

Google Chrome

推奨

File zilla

sublime text

見たい場所へジャンプ

1 カスタマイズの準備
2 カスタマイズコードの追加
- 2.1 例）色の切り替わりをわかりやすくしたver
- 2.2 例）速度を早くしたver
3 まとめ

カスタマイズの準備

とりあえずSANGOのお知らせ欄の背景色を空白にします。

ダッシュボード＞外観＞カスタマイズ＞SANGOオリジナル機能の管理＞ヘッダーお知らせ欄で背景色を空欄にした後、お知らせ文に「チャーリーブラウンはどんな男の子？」を記入します。

もともとある背景色は消しておきましょう

追加CSSの手順

外観

カスタマイズ

追加CSS

子テーマの手順

外観

テーマの編集

FTPソフトの手順

FTPソフト起動

自サイトに接続

style.cssを開く

追加CSSの使い方はこちら

ブログのカスタマイズを加速させる「追加CSS」の使い方

カスタマイズコードの追加

CSSコード（コメントあり）

/*--------------------------------------
  お知らせ欄　動くグラデーション
--------------------------------------*/
.header-info {
  background: linear-gradient(45deg, #FFB74D, #FF5252, #FFA5A5);/*角度 色三色*/
  background-size: 600% 600%;/*背景のサイズ幅と高さ*/
  animation: osirase 5s ease infinite;/*切り替わるスピード*/
}
@keyframes osirase {/*アニメーションのキーフレーム*/
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

/*--------------------------------------

お知らせ欄　動くグラデーション

--------------------------------------*/

.header-info {

background: linear-gradient(45deg, #FFB74D, #FF5252, #FFA5A5);/*角度色三色*/

background-size: 600% 600%;/*背景のサイズ幅と高さ*/

animation: osirase 5s ease infinite;/*切り替わるスピード*/

}

@keyframes osirase {/*アニメーションのキーフレーム*/

0%{background-position:0% 50%}

50%{background-position:100% 50%}

100%{background-position:0% 50%}

}

CSSコード（コメントなし）

/*--------------------------------------
  お知らせ欄　動くグラデーション
--------------------------------------*/
.header-info {
  background: linear-gradient(45deg, #FFB74D, #FF5252, #FFA5A5);
  background-size: 600% 600%;
  animation: osirase 5s ease infinite;
}
@keyframes osirase {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

/*--------------------------------------

お知らせ欄　動くグラデーション

--------------------------------------*/

.header-info {

background: linear-gradient(45deg, #FFB74D, #FF5252, #FFA5A5);

background-size: 600% 600%;

animation: osirase 5s ease infinite;

}

@keyframes osirase {

0%{background-position:0% 50%}

50%{background-position:100% 50%}

100%{background-position:0% 50%}

}

確認の手順

保存ボタンを押す

ブラウザでキャッシュを削除して更新

例）色の切り替わりをわかりやすくしたver

/*変更箇所*/
.header-info {
  background: linear-gradient(45deg, red, blue, green);/*赤→青→緑→青→赤の順に変化します*/
}

/*変更箇所*/

.header-info {

background: linear-gradient(45deg, red, blue, green);/*赤→青→緑→青→赤の順に変化します*/

}

例）速度を早くしたver

/*変更箇所*/
.header-info {
  animation: osirase 3s ease infinite;/*5秒から3秒に変更*/
}

/*変更箇所*/

.header-info {

animation: osirase 3s ease infinite;/*5秒から3秒に変更*/

}

他にもいっぱいあるよ

SANGOをカスタマイズしたまとめホームへ戻る

まとめ

手順をザクッと説明

変更手順

FTPソフトとテキストエディタを開いて準備OK。
追加のコードを書き込んで、保存。アップロード。
更新して確認。

似ている色を使うと優しいグラデーションになるよ

コントラストがありすぎるのは良くないな

そうだね