カスタマイズは自己責任でやろう！
「自己責任」の意味がわからない方、初めてカスタマイズする方はこちら
この記事では
ヘッダーお知らせ欄の背景を動くグラデーションにしたカスタマイズを説明。
ヘッダーお知らせ欄の背景を動くグラデーションにしたカスタマイズを説明。
CUSTOM POINT
お知らせ欄がもっと目立つようにしてみました。こんな感じで変更
Before
After
このサイトの環境
テーマ 
子テーマ 
プラグイン 
使うソフトなどはこちら
必須
WordPress
Google Chrome
推奨
File zilla
sublime text
ジャンプマップ
カスタマイズの準備
とりあえずSANGOのお知らせ欄の背景色を空白にします。
ダッシュボード＞外観＞カスタマイズ＞SANGOオリジナル機能の管理＞ヘッダーお知らせ欄で背景色を空欄にした後、お知らせ文に「チャーリーブラウンはどんな男の子？」を記入します。
もともとある背景色は消しておきましょう
| 追加方法 | 難しさ |
|---|---|
| 追加CSS | |
| テーマエディター | |
| FTPソフト |
はじめてカスタマイズをする方におすすめなのは追加CSSです。
カスタマイズコードの追加
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | /*-------------------------------------- お知らせ欄 動くグラデーション --------------------------------------*/ .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%} } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | /*-------------------------------------- お知らせ欄 動くグラデーション --------------------------------------*/ .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
1 2 3 4 5 | /*変更箇所*/ .header-info { background: linear-gradient(45deg, red, blue, green);/*赤→青→緑→青→赤の順に変化します*/ } |
例）速度を早くしたver
1 2 3 4 5 | /*変更箇所*/ .header-info { animation: osirase 3s ease infinite;/*5秒から3秒に変更*/ } |
まとめ
手順をザクッと説明
変更手順
- FTPソフトとテキストエディタを開いて準備OK。
- 追加のコードを書き込んで、保存。アップロード。
- 更新して確認。
似ている色を使うと優しいグラデーションになるよ
コントラストがありすぎるのは良くないな
そうだね
コメント( ˶ˆ꒳ˆ˵ )