MENU
\ このブログのテーマ /
シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』
ブログ内リニューアル中

JINのメニューバーをグラデーションにするカスタマイズ

現在このブログはテーマSWELLを使っています。
また、JINのアップデートによりカスタマイズ機能が増えている場合があります。ご了承ください。

とにかくグラデーションが好きな私。笑

今回は、JINのグローバルメニューをグラデーションにするカスタマイズをご紹介します~♪

ひちょこのアイコン画像ひちょこ

バックアップを取ってからやってみてくださいね。

目次

「JINのグローバルメニューをグラデーションにする」のイメージ

完成イメージはこちら

メニューをグラデーションにするカスタマイズ

メニューバーの部分を水色からピンクにグラデーションにしています♪

JINのグローバルメニューをグラデーションにするカスタマイズ

CSS

/スマホのメニューバー/
@media (max-width: 767px) {
.cps-sp-menu-bar {
background: linear-gradient(90deg, #9795f0, #fbc8d4);}}
/パソコンのメニューバー/
nav-container {
background: linear-gradient(90deg, #9795f0, #fbc8d4);}

上のコードをカスタマイズ画面の追加CSSに追加するか、子テーマのstyle.cssに追加することで、メニューバーがグラデーションに大変身!

#○○○○○○の部分変更して好みのグラデーションにしてみてくださいね♪

グラデーションのイメージ参考サイト

好みのグラデーションのコードを見つけられるサイトをご紹介します。

Grabient

20種類ほどのサンプルがあります。

あわせて読みたい
Grab yourself a gradientBeautiful and simple UI for generating web gradients.

CoolHue 2.0

派手目が好きな人におすすめ!

あわせて読みたい
Gradient Colors Collection Palette - CoolHue 2.0
Gradient Colors Collection Palette - CoolHue 2.0Get coolest handpicked gradient colors collection palette for your next project, alternatively copy css or download as image too.

WebGradients

淡い系もあって、種類がたくさんあります。

あわせて読みたい
Free Gradients Collection by itmeo.com
Free Gradients Collection by itmeo.comFree collection of 180 background gradients that you can use as content backdrops in any part of your website.

まとめ

JINユーザーは多いので、グラデーションでちょっと他の人と違くしてみるのも良いですよね♪

お読みいただきありがとうございました。参考になれば嬉しいです!

この記事が気に入ったら
フォローしてね!

目次
閉じる