現在このブログは、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種類ほどのサンプルがあります。
CoolHue 2.0
派手目が好きな人におすすめ!
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…
おしゃれなブログのデザインを簡単に作る方法【画像・配色】
自分のブログを持ったからには、おしゃれなブログにしたいですよね。 だけど、「どんな風に色を決めたりしたらよいのかわからない!」という人も多いのではないでしょう…
コメント