メルカリ登録で500円ゲット>>

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

現在このブログは、WordPressテーマ「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 gradient Beautiful and simple UI for generating web gradients.

CoolHue 2.0

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

あわせて読みたい
Gradient Colors Collection Palette - CoolHue 2.0 Get 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 collection of 180 background gradients that you can use as content backdrops in any part of your website.

まとめ

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

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

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

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

目次