久しぶりにブログ作成についての記事書きです。
このサイトは、グローバルメニューのデザインをカスタマイズしてあります。
グローバルメニューとは、サイト名下の「抱っこ紐 | 知育人形(ぽぽ、メル等)、、、」と書かれてるメニュー部分のことです。
あまり他では見ない感じにしてあるので、どうやってカスタマイズしているか公開。
Contents
グローバルメニューのデザイン、カスタマイズ方法
私は、WordPressを使用してサイトを構築しています。
テーマはsimplicityを使用させていただいています。
なので、今回はsimplicityを使用してのグローバルメニューのデザインの
カスタマイズ方法をご紹介します。
CSSとしてはどのテーマを使用しても同じなので、simplicityではないテーマでも使用可能です。
simplicityをインストール
simplicityのカスタマイズ方法は、
・simplicity（２０１８年４月現在は2）
・simplicity子テーマ
の2つをこうしきHPからダウンロードします。
次に、Wordpressの外観→テーマ→新規追加→テーマのアップロード
を選択していき、
「ファイルを選択」を押して、
先ほどダウンロードしたsimplicity2をまずインストール、有効化します。
次に同じように、simplicity2子テーマをインストール、有効化します。
これで下準備は完璧です。
なぜ子テーマまでインストールする必要があるかは、
公式サイトさんで説明されているのでご確認ください。
simplicityのデザイン、カスタマイズ方法
simplicityでは、子テーマのCSSをカスタマイズしていきます。
WordPressの外観→テーマの編集でデザインを変更します。
テーマの編集のCSSが、子テーマであることを確認してください。
最初は、何のコードも書かれていないと思います。
「/* Simplicity子テーマ用のスタイルを書く */」
の下にコードを記入していきます。
グローバルメニューに区切り線を入れる
このサイトのグローバルメニューは、こんな感じです。
何もしないと区切り線はありませんので、
グローバルメニューの項目ごとに区切り線を入れます。
CSSのコードはこんな感じです。
#navi li {
border-right: 1px dashed #333333;
padding: 0 15px 0 20px;
}
#navi li+ li {
border-left: 0;
border-right: 1px dashed #333333;
padding: 0 15px 0 15px;
}
グローバルメニューってリストなんですね。
このサイトでは区切り線を破線にしているので、「dashed」です。
区切り線を実線にしたい場合：「solid」に、
点線にしたい場合：「dotted」に、
二重線にしたい場合：「double」に、「dashed」部分を変更してください。
「dashed」の左隣の「1px」は、線の太さを指定しています。
太い方がお好みであれば、「2px」とか「5px」とかに変更しましょう。
「dashed」の右側の「#333333」は、線の色を指定しています。
こちらも自由に変更可能です。
カーソルを合わせた時の表示を蛍光ペン風に
こんな感じで、
カーソルを合わせた時の表示方法を変更できます。
#navi ul li a:hover{
background: linear-gradient(transparent 60%, #ffcccc 50%);
}
このサイトのグローバルメニューにカーソルを合わせると、
文字の下の方だけ蛍光ペンで書いたような表示になります。
これは、「linear-gradient」で指定しています。
線形グラデーションを指定する関数です。
「transparent 60%」は、透明度を指定しています。
６０％ではなく８０％や逆に３０％などとすると、色がつく縦幅が異なってきます。
「#ffcccc」はカーソルが当たった時の色指定です。
ピンク色っぽい色に指定してあります。
最後の「50%」は変更しない方が無難です。
下手に変更すると見え方が変わってしまいます。
（0%でも大丈夫ですが、60%だと色が異なってきました。）
グローバルメニューをお好みにカスタマイズしよう
CSSがよくわからない人でも、色など変更すべき部分を間違えなければ、
自分好みのグローバルメニューにデザインを変更することができます。
普通にしていると区切り線はありませんし、
カーソルを合わせると背景全体の色が変更になります。
WordPressのカスタマイズ機能を使ってある程度カスタマイズできますが、
区切り線などはどうしてもCSSでのテーマ変更が必要となります。
