2016年10月11日AFFINGER4のメニューはテンプレートのままだとちょっと簡素で寂しい感じがあります。そこで、AFFINGER4のメニューをより格好よくデザインしてやりましょう!今回はコピペでオッケーなメニューカスタマイズを全4種用意させていただきました。すべてを採用する必要はありませんが、お好みのものを採用していただければと思います。メニューの単体幅を広げるまずはメニュー幅のカスタマイズです。AFFINGER4のデフォルトでは、メニューが4個くらいだと幅が大きく余ってしまって不恰好になります。これをなんとかしましょう。CSSの修正は「外観」<「テーマ編集」から行えます。スタイルシートを開いたら、以下のコードをコピペして追記ちゃってください!追記する場所はどこでもオッケーですが、追記したことがわかりやすいようにスタイルシートの最下部に入れておくと良いでしょう。!important;}僕のAFFINGER4モデルサイトはメニューが4つしか設置されていないので、1つめのコードを追記し設定完了です。完成イメージをみてみましょう。完成イメージメニュー単体の幅が広くなり、丁度よくなりましたね!最初と比べるとクリックもしやすくなったので、ユーザーにとっても使いやすいデザインへと生まれ変わりました。メニューに色をつけるAFFINGER4のメニューの色を変えていきたいなら、以下のCSSを追記するようにしましょう。!important;/*好きな色に修正*/}このように修正しすれば自分の好きな色にメニューを変えることができます。ここでは#c50a0aとしていますが、これを自分のサイトにあったHTMLコードに変えてください。色のHTMLコードはこちらのカラーガイドを利用すると良いでしょう。【2】メニューの文字色を変更また、メニューの文字の色が黒のままでは不恰好なので、文字の色も白くしておきましょう。!important;/*ここを修正*/}メニューの色を変えていくかは好みに分かれますが、サイトの全体イメージや好みに合わせてカスタマイズするようにしていきましょう!マウスを乗せた時に色をじんわり変える次はマウスオーバーした時にメニューの色を変えるように設定してみましょう。これは僕がよくサイトで採用しするようにしています。サイトに遊び心が出て面白いですよ。設定もとても簡単にすることができます。!important;/*マウスオーバー時の文字色*/}基本的にはこれをコピペして追記するだけでオッケーです。簡単ですね!これを採用するとじんわりと色が変わるサイトメニューが実現されます。変える色は自分で設定できますので、そこはカスタマイズしちゃってくださいね!メニューを横幅いっぱいに広げたい「AFFINGER4のメニューを横幅いっぱいに広げたい...」という人もいるのではないでしょうか?それも意外と簡単にできちゃうんで、以下のコードを追記するだけで実装できちゃうんです!追記する場所はAFFINGER4のスタイルシートの最後でオッケー。#fff;/*メニューの色と同色に設定*/}これを追記すると横幅がサイトいっぱいに広がります。カラーは自分のサイトメニューと同色にするように設定しておきましょう。これも採用するかは好みによりますので、取り入れたい人は取り入れてみてください!AFFINGER4のメニューカスタマイズまとめ以上でメニューのカスタマイズは完了です。当サイトはAFFINGER4の見本サイトです。AFFINGER4にはどのようなサイトを作ることができるのかを視覚的に分かりやすく示すために作られたサイトですね。AFFINGER4ならHTML/CSSをほとんど知らなくてもちゃんとランキング作成ができるようになっています。基本】AFFINGER4でヘッダー用メニューを作成する方法AFFINGER4のテンプレートを適応させたばかりの状態では、ヘッダーのメニューが1つしかなくてちょっと寂しい状態です。...AFFINGER4で採用したいh2・h3見出しサンプル8選!今回はAFFINGER4の見出しをカスタマイズしてみましょう。AFFINGER4の見出しはデフォルトではかなり簡素なものになっています。...名脇役!サイドバーに施したい5つのAFFINGER4カスタマイズ今回はAFFINGER4のサイドバーカスタマイズに施したい5つのカスタマイズについてお話しましょう。AFFINGER4のサイドバーはデフォルトのままではあまりに簡素すぎる状態です。...PREV【基本中の基本】AFFINGER4でヘッダー用メニューを作成する方法NEXT【コピペで実装】AFFINGER4にヘッダー背景をつけてオシャレに!AFFINGER4AFFINGER4の特徴AFFINGER4はアフィリエイターに最適化されたWordPressテンプレートです。ランキング作成機能を始め、アフィリエイトする上での必須機能が揃っています。通常の販売価格は6500円ですが、当サイトでは5500円の特別価格で販売しています。超優秀!AFFINGER4の注目すべき機能8つ&購入者特典3つフッターメニュートップページAFFINGER4カスタマイズ購入者限定カスタマイズ商品ランキングAFFINGER4の見本サイト遂に有料テンプレートデビューを果たしたAFFINGER4。そんなAFFINGER4の全機能/カスタマイズ方法をお伝えしましょう。AFFINGER4.。