【コピペOK】AFFINGER4メニューのカスタマイズまとめ!|ひつじアフィリエイトただいまサイトのリニューアル中です2017.11.21テンプレート【コピペOK】AFFINGER4メニューのカスタマイズまとめ!ひつじ当サイトのコンテンツ内には商品プロモーションを含みます。ひつじくんここではAFFINGER4のメニューをカスタマイズしていくよ!おおかみくんかっこいいメニューツクリタイ!!AFFINGER4のメニューはテンプレートのままだとちょっと簡素で寂しい感じがあります。そこで、AFFINGER4のメニューをより格好よくデザインしてやりましょう!今回はコピペでオッケーなメニューカスタマイズを全4種用意させていただきました。すべてを採用する必要はありませんが、お好みのものを採用していただければと思います。Contentsメニューの単体幅を広げる以下のコードをコピペして追記する完成イメージメニューに色をつける以下のコードをコピペして追記マウスを乗せた時に色をじんわり変える以下のコードをコピペして追記するメニューを横幅いっぱいに広げたい以下のコードをコピペして追記するAFFINGER4のメニューカスタマイズまとめメニューの単体幅を広げるひつじくんじゃあメニューの幅からカスタマイズをして行こうか!まずはメニュー幅のカスタマイズです。AFFINGER4のデフォルトでは、メニューが4個くらいだと幅が大きく余ってしまって不恰好になります。これをなんとかしましょう。CSSの修正は「外観」<「テーマ編集」から行えます。スタイルシートを開いたら、以下のコードをコピペして追記ちゃってください!追記する場所はどこでもオッケーですが、追記したことがわかりやすいようにスタイルシートの最下部に入れておくと良いでしょう。!important;}僕のAFFINGER4モデルサイトはメニューが4つしか設置されていないので、1つめのコードを追記し設定完了です。完成イメージをみてみましょう。完成イメージメニュー単体の幅が広くなり、丁度よくなりましたね!最初と比べるとクリックもしやすくなったので、ユーザーにとっても使いやすいデザインへと生まれ変わりました。おおかみくんコピペするだけとか超簡単!メニューに色をつけるひつじくんメニューに色をつけていきたいなら次のように設定するといいよ!AFFINGER4のメニューの色を変えていきたいなら、以下のCSSを追記するようにしましょう。!important;/*好きな色に修正*/}このように修正しすれば自分の好きな色にメニューを変えることができます。ここでは#c50a0aとしていますが、これを自分のサイトにあったHTMLコードに変えてください。色のHTMLコードはこちらのカラーガイドを利用すると良いでしょう。【2】メニューの文字色を変更また、メニューの文字の色が黒のままでは不恰好なので、文字の色も白くしておきましょう。!important;/*ここを修正*/}ひつじくんこれでメニューの色のカスタマイズは完了だよ!メニューの色を変えていくかは好みに分かれますが、サイトの全体イメージや好みに合わせてカスタマイズするようにしていきましょう!マウスを乗せた時に色をじんわり変えるおおかみくんマウス乗せた時に色が変わるメニューとかあるじゃん?あれもできたりすんの?ひつじくんそれももちろんできるよ!次はマウスオーバーした時にメニューの色を変えるように設定してみましょう。これは僕がよくサイトで採用しするようにしています。サイトに遊び心が出て面白いですよ。!important;/*マウスオーバー時の文字色*/}基本的にはこれをコピペして追記するだけでオッケーです!とっても簡単ですね!これを採用するとじんわりと色が変わるサイトメニューが実現されます。変える色は自分で設定できますので、そこはカスタマイズしちゃってくださいね!おおかみくんコピペでオッケー超楽チン!メニューを横幅いっぱいに広げたいおおかみくんAFFINGER4のメニュー幅って広げることはできるのか?ひつじくんそれも一応できるよ!AFFINGER4のメニューをサイトの横幅いっぱいに広げるには以下のコードを追記するだけです!追記する場所はAFFINGER4のスタイルシートの最後でオッケー。#fff;/*メニューの色と同色に設定*/}これを追記すると横幅がサイトいっぱいに広がります。カラーは自分のサイトメニューと同色にするように設定しておきましょう。これも採用するかは好みによりますので、取り入れたい人は取り入れてみてください!AFFINGER4のメニューカスタマイズまとめ以上でメニューのカスタマイズは完了です。ひつじアフィリエイト記事URLをコピーしました。