AFFINGER5カスタマイズ!ヘッダーメニューの幅を調整する方法!

AFFINGER5カスタマイズ!ヘッダーメニューの幅を調整する方法!

ここあです。

 

AFFINGER5が前々から欲しくて遂に購入。

しかも、5/15までならSUGOI目次の特典付きでした。

 

別に高いテーマではありませんが、特に使う宛もなかったので

どうしようか悩んでたのですが、結局、なんだかんだで

滑り込みセーフでGET! 

 

物欲にはめっぽう弱い私…

やっぱり、欲しい時が買い時ですよね(笑)

誰かさんの受け売り…^^

 

ということで、購入してから少しずつ検証しつつ、

現在はテストサイトを鋭意制作中。

 

STORK」がかなり使い慣れているので、

いろいろと勝手もわからず困惑中ですが、

それでも…

 

ここが気に入らん!という部分が

早くも見つかったので、カスタマイズしました(笑)

 

それは、どこかと言うと…

ヘッダーメニュー」の幅と位置です^^;

 

AFFINGER5の公式サイト」で紹介されている

ヘッダーメニューの推奨設置数は6個。

↓ 以下の通り^^

AFFINGER5:メニュー作成時の注意点

 

私はそのマニュアルを見て…

なるほど、6個にすればキレイに収まるのか」と思い

6個にしてみました。

 

ところがどっこい、全然そんなことはない…(笑)

 

確かに、6個未満で設定すれば、枠からはみ出したり

メニューが2段になって崩れるということはないみたいですが…

そういう問題じゃない〜っ!

 

デザイナーの私から見れば

ヘッダーメニューがキレイに並ぶサイト構造にも配慮して欲しかった

というのが正直なところ…

 

メニューの数に応じて幅を調整するだけなら

たいしてCSSコードも難しくないって思うんだけど

その辺の甘さは少し残念…。

 

メニューの数なんて絶対に人によって違うんだし

そんなことを言う前に…

 

メニューをいくつ設定してもキレイに並ぶ構造にしておけばいいやん!

と思ってしまします…^^;

そもそもデザインの現場ではそんなこと絶対に許されませんからね…(泣)

 

ということで、今回はそんな中途半端で残念な

ヘッダーメニューの幅をキレイに整える

カスタマイズ方法を大公開します。

 

しかも、今回のカスタマイズ方法は

CSSをコピペするだけで一瞬で終わる上に

メニューの数に合わせて自動で左右ピッタリ収まる優れもの!

 

さらに、レスポンジブ対応!

もうこれはコピペするしかないですよね^^

 

なので…

ちゃんとヘッダーメニューを左右キレイに収めたい!

という方はぜひ試してみてください。
※ただし、カスタマイズは自己責任でお願いします。最悪CSSを消せばOK!^^

 

今回は我ながらよくできた自身作^^

 

別にそんな幅や位置は気にしない」という方は

スルーしてもらえれば、それで結構!

私はデザイナーなので見過ごすことはできないのです。

 

そこにこだわるのがデザイナーの性分(笑)

 

ということで、コピペするだけの

超優秀CSSをご紹介致しますので

カスタマイズしたい方はぜひ使ってやってください^^

 

ヘッダーメニュー用のCSSを追加するとこうなる

百聞は一見に如かず。

まずはサンプルをお見せします。

 

今回、私があなたにご紹介するCSSを追加するとどうなるか?

 

↓ 使用前

AFFINGER5:ヘッダーメニューサンプル

 

↓ 使用後

AFFINGER5:ヘッダーメニューサンプル

 

 

キレイに収まってますよね^^

さらに、文字数にさえ気をつければ…

8個でも全然余裕!

AFFINGER5:ヘッダーメニューサンプル

 

 

↓ 「サブメニュー」もご覧の通り! ばっちり収まる!

AFFINGER5:ヘッダーメニューサンプル

 

まぁ、そんなCSSコードです。

ね、いいでしょ?(笑)

 

ただし、メニューの文字数についてはご注意ください。

こればっかりは私の力ではどうしようもありません^^;

まぁ、やり方もなくはないですが、そこは勘弁してくださいね…

 

ヘッダーメニュー幅を左右キレイに収める方法

それでは「ヘッダーメニュー」を

左右キレイに収める方法を説明します。

 

CSSコードの記述先

今回はラッキーにも調整する必要が全くありません。

CSSコード」をコピペするだけでキレイに収まるんです。

ミラクルですよね(笑)

 

ということで、以下の場所にCSSコードを追加しましょう。

追加する先は、ダッシュボードメニューから

 

外観」→「カスタマイズ

ダッシュボードメニュー

 

 

追加CSSをさらにクリック。

カスタマイズメニュー

 

 

追加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コードの調整も不要!

今回、あなたにご紹介するコードは

ボタンがいくつ設定されていようが

左右の幅がピッタリ収まるように設計しています。

 

なので、CSSなんて分からなくても全然OK!

 

しかも、レスポンジブ対応なので

画面を小さくしても崩れるということもありません。

どうですか?コピペしてみましたか?^^

 

ヘッダーメニューの幅はコピペだけで簡単に調整できる!

以上がヘッダーメニュー幅の調整方法です。

 

というより、調整する必要もないので

非常に簡単でしたね^^

 

AFFINGER5はPHPコードも多く

カスタマイズが非常にしにくいという話もありますが

変更するためのコードさえわかれば

 

それほどややこしいことを考えない限り

ちょっとした微調整は簡単にできます。

 

なので、もしも

ヘッダーメニューの収まりが悪くて気持ち悪い

思っている場合は…

 

CSSコードを追加して

ヘッダーメニューを左右キレイに収めていただければ

私はそれで大満足^^

 

デザインなんて分からないし、気にしないと思っていても

やっぱりキレイに収まると気持ちいいですよね?^^

 

ということで、最後までお読みいただきありがとうございました!

 

また、どこかカスタマイズしたらアップします!

 

AFFINGER5カスタマイズ!ヘッダーメニューの幅を調整する方法!

「自分らしく」夢に向かって楽しい人生を生きるために


未来の自分を想像しよう
「副業であなたは変わる」

会社に縛られず
「自由な生き方を選べる」ように
副業で稼ぐ方法をご紹介します。


ABOUTこの記事をかいた人

ここあ

グラフィックデザイナー歴20年。2017年アフィリエイトを始めて独立。デザイナーのスキルも生かし、アフィリエイトでストレスフリーな生活を楽しみながら、ネットビジネスの素晴らしさを一人でも多くの方に伝えたくこのブログを立ち上げました。