サイト幅の再ワイド化とロゴ画像のリサイズ

投稿日:

今回は、これまでサイトのカスタマイズ記事を書いてきた中で、1記事使って書くほどじゃないけど、いつかはやっとかないとなぁー的な軽めのカスタマイズをいくつかまとめてやってしまおうと思います。
 

今回のカスタマイズの予定は、

・サイト幅の一部再ワイド化
・ロゴ画像(ヘッダー部)のリサイズ
・見出しタグ(h1、h3)のリデザイン
・『Jetpack』プラグインの再設定

の4項目を行なっていきます。

 

サイト幅の一部再ワイド化

少し前の記事で、元々ワイド化として設定していた当サイトの幅を、自身が使用しているモニターサイズに合わせる形で非ワイド化させた、と書きました。

しかし、あれからしばらく自サイトを見続けていくうちに、なんだか違うんじゃないかなーと感じるようになってきたので、ちょっと見直してみます。
 

AFFINGER4のテーマカスタマイザーにより、「ヘッダーエリア」・「ヘッダー画像エリア」・「グローバルメニュー」・「フッターエリア」はワイド化(横幅100%)とする事が可能です。

しかし、コンテンツ部(記事エリア+サイドバーエリア)ってワイド化で固定なんですよね。
サイト幅を非ワイド化させたのに、このコンテンツ部が横幅いっぱいにまで広がってるのを見て、ちょっとデザインに違和感を覚えたわけです。

このコンテンツ部を非ワイド化させるためには、カスタマイザーから[サイト背景色]を設定する事で対応できるのですが、前にも書いたようにここを設定するとサイト幅は1100pxに固定されます。

これにより、このサイト背景色が上から「ヘッダーエリア」・「ヘッダー画像エリア」・「グローバルメニュー」・「コンテンツ部」にまで反映されるのですが、「フッターエリア」にだけ反映されないんです。(非ワイド化はされている)

つまり、各エリアを個別に非ワイド化させる現在の設定でも、[サイト背景色]の設定による非ワイド化でも、どうしてもデザインの統合性がとれないんですよ。(あくまで私の主眼ですが)
 

なので、不完全な非ワイド化にするよりは、とりあえずでもワイド化させておいた方が見映えはいいんじゃないか、という結論に達しました。

もともと私が非ワイド化させておきたかったのって「ヘッダー画像」が横幅いっぱいにまで引き伸ばされるのが嫌だったから、ってだけなので、サイト全体としてはワイドでも非ワイドでも正直どっちでも良かったって話なんですよね。 「ヘッダー画像」さえ非ワイドになっていればよい。
 

テーマカスタマイザーでワイド化

ごたくはいいんでさっさとカスタマイズしちまいますかね。

[ヘッダー背景の横幅を100%にする]と[フッターの背景色を100%にする]にチェック。
作業自体はこれだけですね。

悩むのが「グローバルメニュー」ですね。
最初はここもワイド化させようと思ったんですが、以前ここのメニューをセンタリングさせた事で、押せる領域の感覚が変わってるんですよね。

端っこからならまー分かるんですが、中央寄せにした時の両端の境目は(私には)ちょっと判別しにくい…

それと、ここが両端までびろーって伸びると、ここを境にヘッダー部とコンテンツ部がキッチリ分けられることになるんですよね。
現在の全エリア色分けしている状態だと、ものすごく変…

そろそろ当サイトの完成後のカラーリングも考えていかねばならなそうです。
 

サイトのカラーリングを考える

基本的にはサイトカラーは、白バックに黒文字か、黒バックに白文字か、の2択な気はしますね。

昔、PCモニターでは黒背景に白文字の方が目に優しい、なんて聞いたことあったんですが、本当かなぁ?

ま、ここは基本通りに背景が白で、文字は黒、でいいでしょうね。

でもまだカスタマイズを続けていく以上、判別用の色分けは重要だと思っているので、とりあえずサイト全体のカラーを薄くして、完成予定の白に近づけてみました。

ただ、フッターエリアだけは色変えたいんですよね、なぜか。
たぶんここを黒に設定しているブログを多く見てきたからだと思います。
あとフッターって、目ぼしいというか、見どころみたいのも特に無いような…

できれば私もフッターエリアは黒にしたかったんですが、ここの文字色が黒なので、ずっと悩んでたんですよね。

カスタマイザーから[フッター文字色]で変更できるんですが、そうすると元々グレーで色分けされていたフッター部メニューの文字色まで同色になってしまうんですよね。
ここはぜひとも個別に設定できるようになってほしいなぁ…

試しに黒ではなく現在のテーマカスタマイザーの設定色である緑を少し入れてみたら、思いのほか良さげ。 しばらくはこのまま様子を見よう。
 

グローバルメニューの設定

おっと、話が飛んでしまった、グローバルメニューの設定についてだったか。

当サイト完成後の背景を白とするのであれば、やはりグローバルメニューを横幅100%でめいっぱい伸ばしてしまうと、ここでコンテンツが上下真っ二つに区切られてしまうように見える。…と思う。

なのでヘッダー画像同様に、ここもとりあえずは非ワイド化ってことにしときます。
ヘッダー画像にピッタリくっついているので、これはこれでそういうデザインと見えなくもない。

問題はグローバルメニューの空いた両端のスペースか。
ここは[背景色]が反映される部分なのだが、ここで設定した色はサイト全体に重なってくる色なので、白以外は望ましくない。

最終的なサイトの背景が全て白で統一されるというのであれば、ここはデフォルトの白にしておけば良いだろう、きっと。
 

さて、既に2000字オーバーしてしまったが、次だ次。 まだ2個チェック入れただけだ。

 

ロゴ画像(ヘッダー部)のリサイズ

こちらも以前からずっと気になっていた部分。
このサイトタイトルを入れたロゴ画像、見ての通りすっごい間に合わせで作った物で、デザイン、サイズ、何もかもテキトーです(-∀-`;)

あ、でもフッターロゴにも同様の画像を使ってますが、こっちは意外とシンプルで悪くないかも。
どうせフッターとか誰も見ねーしな!!

というわけで、今回手を加えるのはヘッダーロゴ画像のみ。
 

デザインに関しては凝り始めると切りが無いので、今回もまだ仮のデザインにしときます。
今やりたいのはサイズの調整。

今使ってるヤツはテキトーに作ったのがたまたま上手くハマったってだけなので、今後ちゃんとしたデザインのを作る時のため、サイズだけでもキチンとしておこう、と思ったのです。

現在のロゴはサイトの左上に寄ってしまっているので、これをできる限り中央に寄せたい。

まずは試しにバカでかい画像を貼ってみると、なんと今のロゴとサイズがほとんど変わらなかった。
どうやら二分割ヘッダーにした場合、左端と右端の決められた領域内にしか設置できず、中央には何も置けないらしい。

おそらくAFFINGERはフッターも同様の仕様なんじゃないですかね? だからフッターエリアの三分割カスタマイズが各所に見受けられる。
ヘッダーエリアの三分割カスタマイズってのは需要無いのかしら?

気にし始めると私はすぐに脱線してしまうので、今はロゴのリサイズだけに集中しよう。
 

ロゴ画像の計測とタブレット表示の問題点

二分割ヘッダー時のロゴ画像に使える領域が知りたいので、目分量でいくつか計測用に作ったロゴを貼りまくっていく。
このサイトの場合は、反対側に設置してあるキャッチフレーズと高さを合わせたいので、まずは幅が知りたい。

ほんで10個ほど試してみたところ、どうやら 400×50px だとちょうど収まるようだ。

ただひとつ困った点がありまして…
タブレット時のロゴ画像の表示サイズが厄介なんですよね。

タブレット以下のウィンドウサイズだと、(当サイトでは)キャッチフレーズとして設置していたヘッダーウィジェットが非表示になるんですよ。
そうするとヘッダーエリアにはロゴ画像のみが表示されることになるわけなんですが、この時のタブレットのロゴのサイズがPC時よりも大きくなってしまうんです。

スマホ時ならばヘッダーにはタブレット同様ロゴのみの表示ですが、画面が小さいため実質PC用のロゴを一回り小さくした程度なんですよね。 これはレスポンシブ化により自動でサイズが変わるので特に問題はありません。

タブレット表示時のみ、ロゴ画像が本来の大きさで表示されてしまう。
元画像が大きければ、タブレットのモニターサイズに収まる範囲内でそのままの大きさでの表示となってしまう。

それならタブレットに合わせて大きめのロゴ画像を用意しておけばいいだけの話なんですが、タブレットサイズで伸びるのって横幅だけなんですよね。
タブレット用に横幅だけ伸ばしたロゴにしてしまうと、PC・スマホ時には相対比で縮小され、横幅の分だけ高さが縮められた、小さく細~いロゴとして表示されてしまう。

この問題をどうしようかと考えたんですが、タブレット時には二分割ヘッダーでないためロゴは中央寄せで表示されるので、PC用の幅短めのサイズでもべつに良いかなーと割り切ることにしました。
ロゴ画像はホームへのリンクも兼ねていますが、中央にある分には押し間違いとかしないんじゃないかなーと思いますし。
 

新ロゴ画像を設定

では後は測ったサイズに合わせたタイトル入り画像を用意し、管理しやすくするため以前の物とは色とか変えて、メディアへアップロードして画像を変更して完了!

あ、最近気が付いたんですが、画像って「メディアへアップロード」→挿入と面倒な手間を踏まず、直接ドラッグ&ドロップで挿入箇所に貼り付けられるんですね。
なんか「WordPressは画像の添付が面倒くさい」みたいに聞いていましたが、こうすればそんなに手間ではないような?
元画像のフォルダを開いておかねばならない手間はありますけどね。

おっと話逸れた。
ロゴ画像を新しくしましたが、以前の無意味に大きかったのを設置領域(ほぼ)ピッタリの画像に置き換えたってだけなので、見た目には特に変化は無いですね…

ま、まぁ今後本格的にロゴのデザインをするってなった時に、大きい画像が縮小されて貼られていたら細かい部分とか潰れて見えなくなってしまうかもしれませんしね!
1/1で表示されるのであれば元画像そのままですからね。 きっと今日のこの努力は後で実を結ぶことでしょう。 …たぶん。

 

おわりに

さぁ!今日のカスタマイズはあと2項目!次は…

といきたいところなんですが、ここで4000字オーバー。

今回はここで一旦切っておきます。
 

読む側としても2日分の長文記事よりも2回に分けた方が読みやすいものですよね?
「毎日更新」という素敵な肩書きも付きますしね!

でもこの記事AFFINGER4使って私と全く同じカスタマイズしてる人にしか分からないような……(;^ω^)

-ウェブサイト作成

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