JIN

JINカスタマイズ|インフォメーションバーをグラデーション

JINのインフォメーションバーをカスタマイズ

カスタマイズは自己責任にてお願いします(カスタマイズ前にバックアップ推奨)。コードを記入してもうまく反映されない場合があります。このカスタマイズは、あくまでもぼくのサイトで行ったものです。

この記事では

インフォメーションバーの背景色をグラデーションにカスタマイズします。

 


Before
前


After
後


MENくん
MENくん
グラデーションにしたら、なんだかおしゃれになった!
くま3号
くま3号
おいおい、鳥も飛んでやがるな

カスタマイズの準備

子テーマを使用している方は、style.cssを開いてください。

追加CSSでちゃちゃっと終わらしたい方は、こちらの記事を参考にしてください。

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

下記のコードを追記してください。

.cps-info-bar a, .cps-info-bar.animate a {
    background: linear-gradient(-135deg, #dbc3c7, #2c3e50);
}

 

-135deg

これはグラデーションの角度です。お好きなように変更してください。

#dbc3c7

左側の色です。こちらもお好みで変更してください。

#2c3e50

右側の色です。お好みで。

MENくん
MENくん
グラデーションの色を選ぶ際は、追加CSSだとリアルタイムで反映されて見やすいよ!

まとめ

ちょっとしたカスタマイズなので、特にありません。

MENくん
MENくん
さて、カスタマイズ沼に入っていきますか!
くま3号
くま3号
マジで何がしたいんやお前

 

 

SANGOのメインカスタマイズ(?)サイトはこちら


メンくん
ここに内容

ここにボックスタイトルを入力