現在このブログは、WordPressテーマ「SWELL」を使っています。
また、JINのアップデートによりカスタマイズ機能が増えている場合があります。ご了承ください。
とにかくグラデーションが好きな私。笑
今回は、JINのグローバルメニューをグラデーションにするカスタマイズをご紹介します~♪
![](https://hichoco-blog.com/wp-content/uploads/2020/08/S__19570712.jpg)
バックアップを取ってからやってみてくださいね。
目次
「JINのグローバルメニューをグラデーションにする」のイメージ
完成イメージはこちら
![メニューをグラデーションにするカスタマイズ](https://hichoco-blog.com/wp-content/uploads/2019/05/0003-600x270.jpg)
![メニューをグラデーションにするカスタマイズ](https://hichoco-blog.com/wp-content/uploads/2019/05/0003-600x270.jpg)
メニューバーの部分を水色からピンクにグラデーションにしています♪
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
派手目が好きな人におすすめ!
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://webkul.github.io/coolhue/images/coolhue-cover.png)
![](https://webkul.github.io/coolhue/images/coolhue-cover.png)
![](https://webkul.github.io/coolhue/images/coolhue-cover.png)
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
淡い系もあって、種類がたくさんあります。
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://webgradients.com/Open_graph_image_1200x630.jpg)
![](https://webgradients.com/Open_graph_image_1200x630.jpg)
![](https://webgradients.com/Open_graph_image_1200x630.jpg)
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ユーザーは多いので、グラデーションでちょっと他の人と違くしてみるのも良いですよね♪
お読みいただきありがとうございました。参考になれば嬉しいです!
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://hichoco-blog.com/wp-content/uploads/2019/03/アイキャッチ019-230x129.jpg)
![](https://hichoco-blog.com/wp-content/uploads/2019/03/アイキャッチ019-230x129.jpg)
![](https://hichoco-blog.com/wp-content/uploads/2019/03/アイキャッチ019-230x129.jpg)
JINのパソコン記事内のフォントを全体的に太くするカスタマイズ
JINは華奢で女性らしい印象を与えてくれるテーマですが、フォントを丸文字にした際にやや文字の細さが気になりました。 より見やすさを追求するためにカスタマイズして…
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://hichoco-blog.com/wp-content/uploads/2019/03/アイキャッチ013-230x129.jpg)
![](https://hichoco-blog.com/wp-content/uploads/2019/03/アイキャッチ013-230x129.jpg)
![](https://hichoco-blog.com/wp-content/uploads/2019/03/アイキャッチ013-230x129.jpg)
ワードプレス「JIN」をカスタマイズして自分色のブログにしよう!
現在このブログはテーマSWELLを使っています。また、JINのアップデートによりカスタマイズ機能が増えている場合もあります。ご了承ください。 ワードプレスのテーマ JIN…
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://hichoco-blog.com/wp-content/uploads/2018/07/アイキャッチ016-230x129.jpg)
![](https://hichoco-blog.com/wp-content/uploads/2018/07/アイキャッチ016-230x129.jpg)
![](https://hichoco-blog.com/wp-content/uploads/2018/07/アイキャッチ016-230x129.jpg)
おしゃれなブログのデザインを簡単に作る方法【画像・配色】
自分のブログを持ったからには、おしゃれなブログにしたいですよね。 だけど、「どんな風に色を決めたりしたらよいのかわからない!」という人も多いのではないでしょう…
コメント