【コピペOK】AFFINGER4メニューのカスタマイズまとめ！

ひつじくん

ここではAFFINGER4のメニューをカスタマイズしていくよ！

おおかみくん

かっこいいメニューツクリタイ！！

AFFINGER4のメニューはテンプレートのままだとちょっと簡素で寂しい感じがあります。そこで、AFFINGER4のメニューをより格好よくデザインしてやりましょう！

今回はコピペでオッケーなメニューカスタマイズを全4種用意させていただきました。すべてを採用する必要はありませんが、お好みのものを採用していただければと思います。

メニューの単体幅を広げる

ひつじくん

じゃあメニューの幅からカスタマイズをして行こうか！

まずはメニュー幅のカスタマイズです。AFFINGER4のデフォルトでは、メニューが4個くらいだと幅が大きく余ってしまって不恰好になります。まずはこれをなんとかしましょう。

なお、CSSの修正は「外観」<「テーマ編集」から行えます。

スタイルシートを開いたら、以下のコードをコピペして追記ちゃってください！追記する場所はどこでもオッケーですが、追記したことがわかりやすいようにスタイルシートの最下部に入れておくと良いでしょう。

以下のコードをコピペして追記する

メニューが4つの場合

header .smanone ul.menu li{
		width: 264.2px !important;

}

メニューが5つの場合

header .smanone ul.menu li{
		width: 210px !important;

}

メニューが6つの場合

header .smanone ul.menu li{
		width: 175px !important;

}

僕のAFFINGER4モデルサイトはメニューが4つしか設置されていないので、1つめのコードを追記し設定完了です。完成イメージをみてみましょう。

完成イメージ

メニュー単体の幅が広くなり、丁度よくなりましたね！最初と比べるとクリックもしやすくなったので、ユーザーにとっても使いやすいデザインへと生まれ変わりました。

おおかみくん

コピペするだけとか超簡単！

メニューに色をつける

ひつじくん

メニューに色をつけていきたいなら次のように設定するといいよ！

AFFINGER4のメニューの色を変えていきたいなら、以下のCSSを追記するようにしましょう。

以下のコードをコピペして追記

【1】メニューの色を変更

#st-menuwide {
	background: #c50a0a !important;/*好きな色に修正*/
}

このように修正しすれば自分の好きな色にメニューを変えることができます。ここでは#c50a0aとしていますが、これを自分のサイトにあったHTMLコードに変えてください。

色のHTMLコードはこちらのカラーガイドを利用すると良いでしょう。

【2】メニューの文字色を変更

また、メニューの文字の色が黒のままでは不恰好なので、文字の色も白くしておきましょう。

header .smanone ul.menu li a{
		color:#000 !important;/*ここを修正*/
	}

ひつじくん

これでメニューの色のカスタマイズは完了だよ！

メニューの色を変えていくかは好みに分かれますが、サイトの全体イメージや好みに合わせてカスタマイズするようにしていきましょう！

マウスを乗せた時に色をじんわり変える

おおかみくん

マウス乗せた時に色が変わるメニューとかあるじゃん？あれもできたりすんの？

ひつじくん

それももちろんできるよ！

次はマウスオーバーした時にメニューの色を変えるように設定してみましょう。

これは僕がよくサイトで採用しするようにしています。サイトに遊び心が出て面白いですよ。設定も簡単にできますのでやってみましょうか！

以下のコードをコピペして追記する

header .smanone ul.menu li{
transition: 0.8s}/*ゆっくりと色を変える*/

header .smanone ul.menu li:hover{

background-color: #c50a0a;/*マウスオーバー時の背景色*/
}

header .smanone ul.menu li a:hover{
color: #fff !important;/*マウスオーバー時の文字色*/
}

基本的にはこれをコピペして追記するだけでオッケーです！とっても簡単ですね！

これを採用するとじんわりと色が変わるサイトメニューが実現されます。もちろん変える色は自分で設定できますので、そこはカスタマイズしちゃってくださいね！

おおかみくん

コピペでオッケー超楽チン！

メニューを横幅いっぱいに広げたい

おおかみくん

AFFINGER4のメニュー幅って広げることはできるのか？

ひつじくん

それも一応できるよ！

AFFINGER4のメニューをサイトの横幅いっぱいに広げるには以下のコードを追記するだけです！追記する場所はAFFINGER4のスタイルシートの最後でオッケー。

以下のコードをコピペして追記する

#st-menubox{
    background-color: #fff;/*メニューの色と同色に設定*/
}

これを追記すると横幅がサイトいっぱいに広がります。カラーは自分のサイトメニューと同色にするように設定しておきましょう。

これも採用するかは好みによりますので、取り入れたい人は取り入れてみてください！

AFFINGER4のメニューカスタマイズまとめ

以上でメニューのカスタマイズは完了です。

ここで紹介したことをすべて取り入れる必要はありませんので、自分のサイトに合わせて必要そうなものだけ取り入れるようにしてくださいね！

おおかみくん

よっしゃー！！俺でも綺麗なメニューが作れたぜ！