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

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

「自己責任」の意味がわからない方はこちら

カスタマイズは自己責任。ぼくはこんな風に思っています。

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

CUSTOM　POINT

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

こんな感じで変更

Before

カスタマイズ前

After

カスタマイズ後

このサイトの環境

テーマ

子テーマ

プラグイン

使うソフトなどはこちら

必須

WordPress

Google Chrome

推奨

File zilla

sublime text

ジャンプマップ

カスタマイズの準備

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

背景色を削除

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

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

追加方法	難しさ
追加CSS
テーマエディター
FTPソフト

はじめてカスタマイズをする方におすすめなのは追加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%}

}

確認の手順

カスタマイズコードを保存
カスタマイズしたページを開く
cntrl+F5を押す

いわゆるキャッシュ削除ですね。詳しい手順はこちらの記事で書いています。

カスタマイズはキャッシュ削除をマスターしてからです

例）色の切り替わりをわかりやすくした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。
追加のコードを書き込んで、保存。アップロード。
更新して確認。

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

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

そうだね