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

お知らせ欄の背景を動かしてみた

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

「自己責任」の意味がわからない方、初めてカスタマイズする方はこちら

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


この記事では
ヘッダーお知らせ欄の背景を動くグラデーションにしたカスタマイズを説明。
CUSTOM POINT
お知らせ欄がもっと目立つようにしてみました。

こんな感じで変更

Before

カスタマイズ前

After

カスタマイズ後


このサイトの環境

テーマ
子テーマ
プラグイン

使うソフトなどはこちら

必須

WordPressWordPress

グーグルクロームGoogle Chrome

推奨

ファイルジッラFile zilla

サブクライムテキストsublime text

カスタマイズの準備

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

背景色を削除

ダッシュボード外観カスタマイズSANGOオリジナル機能の管理ヘッダーお知らせ欄背景色を空欄にした後、お知らせ文に「チャーリーブラウンはどんな男の子?」を記入します。
MENくん
もともとある背景色は消しておきましょう
追加方法難しさ
追加CSS
テーマエディター
FTPソフト

はじめてカスタマイズをする方におすすめなのは追加CSSです。

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

夏だし髪を斬りに行こう!

夏だしどっか行こう!

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

確認の手順

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

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

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

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

カスタマイズ色変更


例)速度を早くしたver

カスタマイズ速度変更

 

まとめ

追加CSSのまとめ

手順をザクッと説明
変更手順
  • FTPソフトとテキストエディタを開いて準備OK。
  • 追加のコードを書き込んで、保存。アップロード。
  • 更新して確認。
MENくん
似ている色を使うと優しいグラデーションになるよ
くま3号
コントラストがありすぎるのは良くないな
そうだね