グローバルメニューのデザインをカスタマイズ、コピペ可能

久しぶりにブログ作成についての記事書きです。

このサイトは、グローバルメニューのデザインをカスタマイズしてあります。

グローバルメニューとは、サイト名下の「抱っこ紐  |  知育人形(ぽぽ、メル等)、、、」と書かれてるメニュー部分のことです。

あまり他では見ない感じにしてあるので、どうやってカスタマイズしているか公開。

スポンサーリンク

グローバルメニューのデザイン、カスタマイズ方法

私は、WordPressを使用してサイトを構築しています。

テーマはsimplicityを使用させていただいています。

>>simplicity公式HP

なので、今回はsimplicityを使用してのグローバルメニューのデザインの

カスタマイズ方法をご紹介します。

CSSとしてはどのテーマを使用しても同じなので、simplicityではないテーマでも使用可能です。

simplicityをインストール

simplicityのカスタマイズ方法は、

・simplicity(2018年4月現在は2)

・simplicity子テーマ

の2つをこうしきHPからダウンロードします。

次に、Wordpressの外観→テーマ→新規追加→テーマのアップロード

を選択していき、

「ファイルを選択」を押して、

先ほどダウンロードしたsimplicity2をまずインストール、有効化します。

次に同じように、simplicity2子テーマをインストール、有効化します。

これで下準備は完璧です。

なぜ子テーマまでインストールする必要があるかは、

公式サイトさんで説明されているのでご確認ください。

simplicityのデザイン、カスタマイズ方法

simplicityでは、子テーマのCSSをカスタマイズしていきます。

WordPressの外観→テーマの編集でデザインを変更します。

テーマの編集のCSSが、子テーマであることを確認してください。

最初は、何のコードも書かれていないと思います。

「/* Simplicity子テーマ用のスタイルを書く */」

の下にコードを記入していきます。

グローバルメニューに区切り線を入れる

このサイトのグローバルメニューは、こんな感じです。

何もしないと区切り線はありませんので、

グローバルメニューの項目ごとに区切り線を入れます。

CSSのコードはこんな感じです。

グローバルメニューってリストなんですね。

このサイトでは区切り線を破線にしているので、「dashed」です。

区切り線を実線にしたい場合:「solid」に、

点線にしたい場合:「dotted」に、

二重線にしたい場合:「double」に、「dashed」部分を変更してください。

「dashed」の左隣の「1px」は、線の太さを指定しています。

太い方がお好みであれば、「2px」とか「5px」とかに変更しましょう。

「dashed」の右側の「#333333」は、線の色を指定しています。

こちらも自由に変更可能です。

カーソルを合わせた時の表示を蛍光ペン風に

こんな感じで、

カーソルを合わせた時の表示方法を変更できます。

このサイトのグローバルメニューにカーソルを合わせると、

文字の下の方だけ蛍光ペンで書いたような表示になります。

これは、「linear-gradient」で指定しています。

線形グラデーションを指定する関数です。

「transparent 60%」は、透明度を指定しています。

60%ではなく80%や逆に30%などとすると、色がつく縦幅が異なってきます。

「#ffcccc」はカーソルが当たった時の色指定です。

ピンク色っぽい色に指定してあります。

最後の「50%」は変更しない方が無難です。

下手に変更すると見え方が変わってしまいます。

(0%でも大丈夫ですが、60%だと色が異なってきました。)

グローバルメニューをお好みにカスタマイズしよう

CSSがよくわからない人でも、色など変更すべき部分を間違えなければ、

自分好みのグローバルメニューにデザインを変更することができます。

普通にしていると区切り線はありませんし、

カーソルを合わせると背景全体の色が変更になります。

WordPressのカスタマイズ機能を使ってある程度カスタマイズできますが、

区切り線などはどうしてもCSSでのテーマ変更が必要となります。

スポンサーリンク
スポンサーリンク

シェアする