サイト幅の非ワイド化とグローバルメニューのセンタリング

投稿日:

本当は前回書く予定だった本記事ですが、前回の記事が長くなってしまったので、別記事として分けての投稿です。

今回カスタマイズしていくのは、主にサイト全体の横幅について。
AFFINGER4のデフォルトでは「1060px」となっている部分ですね。

ついこの間までやっていた3カラム化のカスタマイズをしていた際、CSSで設定するためにサイト幅をいろいろといじってみて、ちょっと気がかりがあったので、今回はそこに手を付けていきます。

 

まず気になったのは、「グローバルメニュー」。「ヘッダーメニュー」とか「ナビゲーションメニュー」とか呼ばれたりもするんですかね? ともかくAFFINGER4ではヘッダー画像の上か下にあるヤツですね。(デフォルトでは下)

私はここに6つのメニューを現時点では設定してるんですが、いつぞや自分で言っていた気がしますが、ここのメニュー数が"6つ"だと、だいたいメニューが中央寄りになって、バランス良く見えるんですよね。

ここは本来は左寄りに設定されていて、AFFINGERの設定からはこれは変えられません。

なので、ここを中央寄せ(センタリング)させたい人向けに、そのためのカスタマイズコードがAFFINGER使いの方々によって提供されていたりしました。

が、先月ついに公式の方からそのカスタマイズ用のコードが公開され、私も気になっていました。
今のままでもほぼ中央に見えるとはいえ、今後メニュー数を変えたりした時のことを考えると、今の内にカスタマイズしといた方が良いんじゃないかなーと。

最初の話に戻りますが、サイト幅をいじっている内に、見ているモニターサイズによってサイトのデザインが崩れるというか、レスポンシブウェブデザインってやつなんでしょうけど、各パーツの位置が端に寄ったりしてしまって、見た目が変わってくるんですよね。いや、当たり前の話なんですけどね。

自分の目でいざソレを見ると、やっぱり「自分と同じ環境の人にはキレイに見える」だけじゃあダメなんだな、と痛感しましてね。
公式からコードが出た、ということでこれを使わせて頂くことにしました。

CSSにちょちょっと書き加えまして、サクッと作業は完了。
キレイに真ん中にくるようになりました。

欲を言えば、メニューの両端の2つにも境目のバーがあれば良かったんですけどね。
クリックできる領域とそうでない領域の境目が分かりにくいので。 ってこれも前に言った気がする。

 
そして今回やりたいカスタマイズはもうひとつ。
サイトの横幅の非ワイド化。

今まではサイト幅はワイド化させていたので、たぶんモニターサイズがどんなに大きくても、端っこまでデザインは切れることなく表示されていたと思います。

私がAFFINGER4の購入を検討していた頃、他の購入者の「購入したキッカケ」みたいな書き込みの中に、「ヘッダーをワイド表示させられるから」みたいなのを複数回見かけました。
他のテーマだと難しいんですかね? 私はAFFINGER4以外のWordPressテーマを使ったことがないので分かりませんが…

またまた最初の話に戻って、サイト幅を広げていった際、グローバルメニューの位置のほかにもう一箇所気になったトコがありまして…

それはヘッダー画像。 ここもウィンドウサイズによってどんどん大きく引き伸ばされていってたんですよね。
おそらくその辺も考慮されてのデフォルトヘッダー画像の推奨サイズ2200×500pxってことなんだとは思いますが…

でもさ、今後技術が進んでいって、なんか3000pxくらいのでっかいモニターとかが一般的なサイズになったりする可能性もあるやん? ない?
今でももしかしたら自宅のホームシアター的なモンで映画館ばりの超でかいモニターでこのサイトを見てる人もいるかもしれないやん? ない?

なので(?)、自分の想定してたよりもヘッダー画像が引き伸ばされてることってのはあると思うんですよ、私は。
縦横比が維持されてくれてれば、多少画像が粗っぽくなる程度なモンでしょうけど…
私は自分の意図しない形でせっかく手を掛けてきたこのサイトが見られるってのがちょーっとイヤかなーって思うんですよね。

で、考えた結果、今の自分の環境で確認できる範囲のサイト幅にしとこう。ってことにしました。

今私が使ってるモニターは1280px。ここからスクロールバーとブックマークバーの幅を取り除くと、たぶんこれがAFFINGERデフォルトの"1060px"ってことなんだと思うんですよね。測ったわけではありませんが。

つまり、デフォルトの設定に戻そうって話ですな。

そうと決まればカスタマイザーから、
[ヘッダー画像の横幅を100%にする]
[ヘッダー背景の横幅を100%にする]
[フッターの背景色を100%にする](←これ多分「背景の横幅を」の間違いだと思う
[メニューの横幅を100%にする]
の4つのチェックを外しました。

これでサイト幅は1060pxに戻りました。

1060px以上のモニターサイズで表示される両脇の空きスペースの色は、[背景色]で設定した色が反映されました。
ただここで設定した色は、サイト読み込み時などに画面全体に重なる色となるようなので、"白"以外だと少し変ですね…

また、ヘッダー画像横の空きエリアには、[ヘッダー画像エリアの背景色]での設定色が優先されるようです。

…まぁ、この辺は以前カスタマイザーいじった時に知っていたんですけどね。
でも今回初めていじってみた項がありまして…

それが[サイト背景色]の項なんですが、ここって前回いじった時は特に変化なかったような気がしたんですが、今回はここで設定した色が、サイト幅の両端の部分に反映されてました。(フッターエリア除く)

※色を設定すると幅のMAX値は1100pxになります」の注意書きがあることからも、これは1100px-1060pxの残り40pxに反映される色だったんだと思います。
もしかしたら前回は自分のモニターサイズである1280pxをサイト幅に設定していたため、反映が視認できなかったのかもしれません。

これがあると、サイト幅がキッチーっと1100pxに収まってるように見えるので、どんなモニターサイズで見ても変わらないデザインで表示されることになるんだと思います。

…難点は、デザインが旧時代的ってトコでしょかね?
「ウチはワイド化対応してませーん」って言ってるのと同じですからね。

とは言っても、ガンプラブログって実はそういうのけっこう見かけるんですよね。
長いところは10年以上やってますからねぇ。仕方ないっちゃーその通りなんでしょうが、それでも不動の人気を誇ってる訳ですから、やっぱ人気ってのはデザインだとか流行だとかそういうんじゃないよなーってのは見て取れますよね。

私のサイトもどうしようか悩んだんですが、テーマがワイド化に対応している訳ですし、あえてそこまで縮こまらせることもないんじゃないかなーっと思ったので、とりあえずはオフで。
ま、チェックひとつで簡単に変えられますから。「とりあえず」ですね。

 

というわけで、今回のカスタマイズはひとまず完了。

作業量の割りに文章量が多いなぁ…
ただ自分のやっていった事をビャーーッと書き殴ったようなモンだからなぁ。

このままじゃあまりにも読みにくいので、次回は『見出し』について考えていこうと思います。ブログ開始4ヶ月目にしてついに(笑)

-ウェブサイト作成

Copyright© ガンプラ気分 , 2020 All Rights Reserved.