このような疑問に対しシンプルにお答えします。
この記事は初心者でもわかりやすいように、設定方法を画像つきで解説しています。
今回は、以下に示すメニューバーのカラーの設定、横幅や縦幅の設定、さらにはメニューの配置調整などを解説した記事になります。
その前に、ヘッダーメニューの作成方法について知りたい方は「AFFINGER5でパソコン画面用のメニューを作成する方法」を参考にしてください。
AFFINGER５ 基本用語
パソコン画面の上側に配置されるメニューのことを、一般的に「ヘッダーメニュー」と呼びます。
紹介までにAFFINGER５で設定できるメニューは、ヘッダーメニュー以外にも６つあります。（ヘッダーメニューを含めると７つ）
- ヘッダーメニュー
- フッターメニュー
- サイドバーメニュー
- ガイドメニュー
- スマホ用スライドメニュー
- スマホ用ミドルメニュー
- スマホ用フッターメニュー
それでは、ヘッダーメニューのデコレーション方法を見ていきます。
ヘッダーメニュー デコレーション
ヘッダーメニューには、以下の設定項目があります。
- メニューバーのカラー設定
- メニューの太文字設定
- メニューのセンター寄せ選定
- メニューバーの横幅設定
- メニューの横幅設定
- メニューバーの上下の隙間設定
順に解説していきます。
メニューバーのカラー設定
WordPressの管理画面から「外観」の「カスタマイズ」をクリックします。
「メニューのカラー設定」をクリックし、「PCヘッダーメニュー」をクリックします。
「PCヘッダーメニュー」では、7箇所のカラー設定ができます。サクッと適当にカラーを設定してみました。
変更前は黒で統一されていましたが、変更後はカラフルになりました。
では、一つ一つ詳細をみていきます。
１の「背景色」には、緑（#81d742）、２の「背景色（グラデーション上部）」には、橙（#dd9933）を設定しました。ヘッダーメニューの下側の背景色が緑色、上側が橙色になりました。
ポイント
「背景色」と「背景色（グラデーション上部）」どちらにも同じ色を設定すると、グラデーション効果は無効になります。
３の「ボーダー上下色」には、黒（#000000）を設定しました。ヘッダーメニューの上下にある枠線（横）の色が黒色になりました。
４の「ボーダー左右色」には、赤（#dd3333）を設定しました。ヘッダーメニューの両端の枠線（縦）の色が赤色になりました。
５の「ボーダー右色」には、青（#1e73be）を設定しました。ヘッダーメニューのメニュー間の枠線（縦）の色が青色になりました。
６の「文字色」には、黒（#000000）を設定しました。ヘッダーメニュー内の文字の色が黒色になりました。
７の「下層ドロップダウンメニュー背景色」には、黄（#eeee22）を設定しました。ヘッダーメニューの下層ドロップダウンメニューの背景色が黄色になりました。
簡単ですね。
メニューバーのグラデーション設定
先程の説明では、ヘッダーメニューの背景色のグラデーションが上下方向に設定されてましたが、左右方向のグラデーションにも変更できます。
WordPressの管理画面から「外観」の「カスタマイズ」をクリックします。
「メニューのカラー設定」をクリックし、「PCヘッダーメニュー」をクリックします。
「グラデーションを横向きにする」にチェックをいれ、「公開」をクリックします。
グラデーションの方向が、縦方向から横方向に変更されました。
簡単ですね。
メニューの太文字設定
WordPressの管理画面から「外観」の「カスタマイズ」をクリックします。
「メニューのカラー設定」をクリックし、「PCヘッダーメニュー」をクリックします。
「第一階層メニューを太字にする」にチェックをいれ、「公開」をクリックします。
メニューの文字が太文字に変更されました。
簡単ですね。
メニューのセンター寄せ設定
WordPressの管理画面から「外観」の「カスタマイズ」をクリックします。
「メニューのカラー設定」をクリックし、「PCヘッダーメニュー」をクリックします。
「メニューをセンター寄せにする」にチェックをいれ、「公開」をクリックします。
メニューが、左寄りからセンター寄りに配置されました。
簡単ですね。
メニューバーの横幅設定
WordPressの管理画面から「外観」の「カスタマイズ」をクリックします。
「メニューのカラー設定」をクリックし、「PCヘッダーメニュー」をクリックします。
「メニューの横幅を100％にする」にチェックをいれ、「公開」をクリックします。
メニューバーが、横幅いっぱいに変更されました。あれ？途中で横幅がきれてます。
他エリアの背景色設定によっては、メニューバーの横幅に制限がかかる場合があります。解決方法については「AFFINGER5でパソコン画面用のサイトタイトル周辺に画像や色を設定する方法」を参考にしてください。
他エリアの背景色設定を変更することで、メニューバーが横幅いっぱいまで反映されるようになりました。
簡単ですね。
メニューの横幅設定
WordPressの管理画面から「外観」の「カスタマイズ」をクリックします。
「メニューのカラー設定」をクリックし、「PCヘッダーメニュー」をクリックします。
「メニューの幅」に数値をいれ、「公開」をクリックします。（250pxを入力）
メニュー幅が広くなりました。
簡単ですね。
メニューバー 上下の隙間設定
WordPressの管理画面から「外観」の「カスタマイズ」をクリックします。
「メニューのカラー設定」をクリックし、「PCヘッダーメニュー」をクリックします。
「メニューの上下に隙間を作る」で隙間を設定する場合は、上下どちらに隙間を設定するか選択し、「公開」をクリックします。
「上に10pxの隙間」を選択する場合
「下に10pxの隙間」を選択する場合
簡単ですね。
追加CSSでさらにカスタマイズ
もっとヘッダーメニューを自由にカスタマイズしたい場合は、「追加CSS」にコードを入力して変更します。
ここでは、以下2つの変更方法について解説します。
- メニューバーの縦幅設定
- メニューのフォントサイズ設定
メニューバーの縦幅設定
WordPressの管理画面から「外観」の「カスタマイズ」をクリックします。
「追加CSS」をクリックします。
以下のコードをコピーして「追加CSS」に貼り付けてください。
@media print, screen and (min-width: 960px) {
header .smanone ul.menu li{
box-sizing: border-box;
list-style-type:none;
float:left;
width:180px;
height:55px;
text-align:center;
border-right:solid 1px #0000;
position:relative;
}
header .smanone ul.menu>li:last-child {
border:none;
}
header .smanone ul.menu li a{
display:block;
font-size: 15px;
overflow:hidden;
width:100%;
height:100%;
line-height:55px;
color:#fff;
text-decoration:none;
position:relative;
z-index:1;
}
}
引用元；naolog【ライフスタイル板】
７行目のコードを「55px」から「100px」に変更し、「公開」をクリックします。
ポイント
メニューバーの縦幅を変更すると、メニュー（文字の部分）との位置バランスが崩れてしまう為、バランスをあわせる場合は「Line-height」の値を「height」と同じ値に変更してください。
メニューバーの縦幅が広くなりました。また、メニュー（文字の部分）も縦幅にあった位置に配置されました。
簡単ですね。
メニューのフォントサイズ設定
WordPressの管理画面から「外観」の「カスタマイズ」をクリックし、「追加CSS」に先程のコードをコピーして貼り付ける、ここまでは同じなので省略します。
17行目のコードを「15px」から「25px」に変更し、「公開」をクリックします。
メニューの文字サイズが大きくなりました。
その他にも「メニューの横幅」や「メニューバーの背景色」「メニューを区切るラインの太さやカラー」など、このコードを変更することで変更できるので、いろいろと試してみてください。
まとめ
少し長くなりましたが、色々と試してみて自分好みのデザインを探してみてください。
最後までお読みいただきありがとうございました。
を使ってますが、 メニューバーの色や幅の変更、メニュー項目の配置って、どのように設定すればよいか教えてください？ ){kind=link}