現在このブログは、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ユーザーは多いので、グラデーションでちょっと他の人と違くしてみるのも良いですよね♪
お読みいただきありがとうございました。参考になれば嬉しいです!
あわせて読みたい




JINのパソコン記事内のフォントを全体的に太くするカスタマイズ
JINは華奢で女性らしい印象を与えてくれるテーマですが、フォントを丸文字にした際にやや文字の細さが気になりました。 より見やすさを追求するためにカスタマイズして…
あわせて読みたい




ワードプレス「JIN」をカスタマイズして自分色のブログにしよう!
現在このブログはテーマSWELLを使っています。また、JINのアップデートによりカスタマイズ機能が増えている場合もあります。ご了承ください。 ワードプレスのテーマ JIN…
あわせて読みたい




おしゃれなブログのデザインを簡単に作る方法【画像・配色】
自分のブログを持ったからには、おしゃれなブログにしたいですよね。 だけど、「どんな風に色を決めたりしたらよいのかわからない!」という人も多いのではないでしょう…
コメント