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

 

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

 

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

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

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

 

スポンサーリンク

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

 

私は、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でのテーマ変更が必要となります。

 

 

スポンサーリンク
スポンサーリンク
スポンサーリンク
ブログ作成
ニコニコちびちゃん
タイトルとURLをコピーしました