ここあです。
AFFINGER5が前々から欲しくて遂に購入。
しかも、5/15までならSUGOI目次の特典付きでした。
AFFINGER5は別に高いテーマではありませんが
私は特に使うあてもなかったので
どうしようか悩んでたのですが…
結局、なんだかんだで滑り込みセーフでGET!
物欲にはめっぽう弱い私…
やっぱり、欲しい時が買い時ですよね…（笑）
誰かさんの受け売り…＾＾
ということで、購入してから少しずつ検証しつつ、
現在はテストサイトを鋭意制作中。
私はSTORKがかなり使い慣れているので
いろいろと勝手もわからず困惑中ですが
それでも…
「ここが気に入らん！」という部分が
早くも見つかったので、カスタマイズしました（笑）
それは、どこかと言うと…
ヘッダーメニューの幅と位置です＾＾；
AFFINGER5の公式サイトで紹介されている
ヘッダーメニューの推奨設置数は6個。
↓ 以下の通り＾＾
私はそのマニュアルを見て…
「なるほど、6個にすればキレイに収まるのか」と思い
6個にしてみました。
ところがどっこい、全然そんなことはない…（笑）
確かに、6個未満で設定すれば、枠からはみ出したり
メニューが2段になって崩れるということはないみたいですが…
そういう問題じゃない〜っ！
デザイナーの私から見れば
「ヘッダーメニューがキレイに並ぶサイト構造にも配慮して欲しかった」
というのが正直なところ…
メニューの数に応じて幅を調整するだけなら
たいしてCSSコードも難しくないって思うんだけど
その辺の甘さは少し残念…。
メニューの数なんて絶対に人によって違うんだし
そんなことを言う前に…
「メニューをいくつ設定してもキレイに並ぶ構造にしておけばいいやん！」
と思ってしまします…＾＾；
そもそもデザインの現場ではそんなこと絶対に許されませんからね…（泣）
ということで、今回はそんな中途半端で残念な
ヘッダーメニューの幅をキレイに整える
カスタマイズ方法を大公開します。
しかも、今回のカスタマイズ方法は
CSSをコピペするだけで一瞬で終わる上に
メニューの数に合わせて自動で左右ピッタリ収まる優れもの！
さらに、レスポンジブ対応！
もうこれはコピペするしかないですよね＾＾
なので…
「ちゃんとヘッダーメニューを左右キレイに収めたい！」
という方はぜひ試してみてください。
※ただし、カスタマイズは自己責任でお願いします。最悪CSSを消せばOK！＾＾
今回は我ながらよくできた自身作＾＾
「別にそんな幅や位置は気にしない」という方は
スルーしてもらえれば、それで結構！
私はデザイナーなので見過ごすことはできないのです。
そこにこだわるのがデザイナーの性分（笑）
ということで、コピペするだけの
超優秀CSSをご紹介致しますので
カスタマイズしたい方はぜひ使ってやってください＾＾
ヘッダーメニュー用のCSSを追加するとこうなる
百聞は一見に如かず。
まずはサンプルをお見せします。
今回、私があなたにご紹介するCSSを追加するとどうなるか？
↓ 使用前
↓ 使用後
キレイに収まってますよね＾＾
さらに、文字数にさえ気をつければ…
8個でも全然余裕！
↓ サブメニューもご覧の通りばっちり収まる！
まぁ、そんなCSSコードです。
ね、いいでしょ？（笑）
ただし、メニューの文字数についてはご注意ください。
こればっかりは私の力ではどうしようもありません＾＾；
まぁ、やり方もなくはないですが、そこは勘弁してくださいね…
ヘッダーメニュー幅を左右キレイに収める方法
それではヘッダーメニューを
左右キレイに収める方法を説明します。
ヘッダーメニュー調整のCSSコード
それでは以下のCSSコードを先ほどお伝えした
記述先にコピペしましょう。
- CSSコード
@media print, screen and (min-width: 960px) {header .smanone ul.menu {display: flex;text-align: center;}header .smanone ul.menu li{width: 100%;}}
CSSコードをコピペした時点で
ヘッダーメニューは左右ぴったりに収まったはず＾＾
はい。公開ボタンをクリックしておしまい！
お疲れさまでした！（笑）
ヘッダーメニューのCSSコードの調整も不要！
今回、あなたにご紹介するコードは
ボタンがいくつ設定されていようが
左右の幅がピッタリ収まるように設計しています。
なので、CSSなんて分からなくても全然OK！
しかも、レスポンジブ対応なので
画面を小さくしても崩れるということもありません。
どうですか？コピペしてみましたか？＾＾
ヘッダーメニューの幅はコピペだけで簡単に調整できる！
以上がヘッダーメニュー幅の調整方法です。
というより、調整する必要もないので
非常に簡単でしたね＾＾
AFFINGER５はPHPコードも多く
カスタマイズが非常にしにくいという話もありますが
変更するためのコードさえわかれば
それほどややこしいことを考えない限り
ちょっとした微調整は簡単にできます。
なので、もしも
ヘッダーメニューの収まりが悪くて気持ち悪いと
思っている場合は…
CSSコードを追加して
ヘッダーメニューを左右キレイに収めていただければ
私はそれで大満足＾＾
デザインなんて分からないし、気にしないと思っていても
やっぱりキレイに収まると気持ちいいですよね？＾＾
最後までお読みいただきありがとうございました！
