Wordpress テーマEASELのカスタマイズ③ ～グローバルメニュー用CSSと背景色をグラデーションにし固定する方法編～

2022年1月28日 09:33

タイトルが長い！

①②に引き続きWordpressのテーマEASELに特化した記事です。今回はグローバルメニューのデザインを変更するときに参考になるサイトを紹介します。それと、ページの背景色をグラデーション化し固定表示にするCSSにも触れます。

Wordpressで使えるグローバルメニュー用のCSSテンプレート

EASELのメニューは<ul><li>~</ul></li>という非常に一般的なタグで記述されているので、リスト系のCSSはなんでも流用できます。まるっとコピーしてきてぺっとペーストできる。やったね！

自分のサイトでは↑で紹介されているCSSの、

グロナビアニメその1・下線を横に広がる

をお借りしています。シンプルで使いよく、どんなデザインのサイトにも合うと思います！中級編から下で紹介されているものは、自サイトのデザインと要相談という印象。

うちのサイトでは↑のようにカスタマイズしています。①カーソルを乗せたときの文字色を変更（background: #ed135c;）②アニメーションで表示されるラインの開始位置を変更（left: 10%;→なし）

ちなみに…

ここで変更したデザインは<nav>に効いてますので、フッターメニューとモバイル用のハンバーガーメニューにも同時に適用されます

ので、NGな場合は要調整です。

グラデーションを作るサイトはいろいろありますが、自分はこちらのサイトが使いよかったです。いま風のかわいいパターンが多いし、カラーコードもコピペしてそのまま使えます。

背景を固定するCSSはこちらが詳しいです。固定化する方法は他にもいっぱいありますが、スマホビューを考えるとこちらのコードがいいかな。古いブラウザへの対応は割愛しちゃいました。いまどきほとんどの人は個人サイトなんてパソコンで見ない…。

①各グラデーションの右下にある【Copy CSS】を押すと、そのグラデーションのCSSがクリップボードにコピーされる

②/*色味の変更ここから*/～/*色味の変更ここまで*/の間にペーストする

グラデーションの角度だけ変えたいときはlinear-gradient内のto top→120degなどに変更。degの前の数字部分が角度です。負の数字もオッケー！

グラデーションの色はこちらのサイトもいい感じです！

（グラデーションをいじってみて思ったんですが、色を間違うと途端に「古くさッ！」感が漂いはじめるし、グラデーションみたくインパクトのある背景が文字と一緒にスクロールしちゃったりすると、ここはジ〇シティーズ時代のインターネッツか…？ 感もすごいので気をつけようと思いました）

背景をいじったあとは、本文の視認性も上げたいです。

自分はlit.link風のプロフカードっぽいサイトを作りたかったので、トップページの本文は角が丸いボックスに入れて小分けにしました。

（こんなにlit.linkを推してるわりになんでlit.linkでプロフを作らなかったかというと、単純にlit.linkから漂う陽のオーラに圧倒され近寄れなかったからです）

ボックスのCSSやデザインはこちらを参考にしました！

色の数を増やしたくなかったのでボックスの色は白にして、それだけだとちょっと寂しいので影をつけたりしました。それがこちら。

background-color: rgba( 255, 255, 255, 0.50 );などにしてボックス全体を半調にするのもありかもしれません！

最近Designspiration（デザインスピレーション）にはまってます。暇なときずーっと見ちゃう。Pinterestみたいにアプリ化してほしい☺︎

以上！