ヘッダーエリアとヘッダー画像エリアのデザイン

投稿日:2017年3月25日

今回からはサイトの顔とも言えるヘッダーのデザインに取り掛かっていきます。

ここは人それぞれ、好みによる部分なので、自分が満足いくものが出来上がればそれで完成ですね。

 
私の求める理想形としては、ページの一番上にヘッダー画像が端から端までデーーンってあって、その中央にサイトタイトルがデーンってあって、その下にサイトのキャッチフレーズ(説明文)がモソモソっと書いてあるような感じです。

以前ヘッダーエリアを消したいと言ってたのはコレの為です。
サイトのタイトルもキャッチフレーズも画像の中に入れたいのです。

あ、サイトタイトルをクリックするとトップページへ飛べるというのも忘れちゃならんね。

 
さてさて、この形にするためにはまずはヘッダーエリアは必要無いのでバッサリ消去してしまいたいのですが…

WordPressの一般設定(又はカスタマイザーのサイト基本情報)からサイトタイトルを消してみると、何もなくなったヘッダーエリアの高さは今の半分程になりはしたが、余白というにはあまりに大きすぎるスペース…

ここが消せないというのであれば、ここにヘッダー用の画像を入れて、ヘッダー画像エリアの方を消してしまえばいいんじゃないかという逆の発想を試してみる。

 
ヘッダーエリアの背景画像に今使ってるAFFINGERのロゴ画像を入れてみると、ヘッダーエリアの高さは変わらず、そのせいで画像はちょん切れててほとんど表示されなかった。

ヘッダー画像エリアはヘッダー画像の大きさによってエリアの大きさ自体が変化するのだが、「背景画像」ではそうはならないようだ。

 
困った、非常に困った。ヘッダーエリアを消す事も広げる事もできない。

仕方が無いので、妥協案としてヘッダーエリアに画像の上半分を、ヘッダー画像エリアに画像の下半分を、という実にナンセンスなプランでいくことにした。

 
けっこうな画像の編集作業になりそうな気がしたので、以前めんどくさがって入れなかったPhotoshopを導入。

画像を上下二分割するという事で、サイトが完成するまでは今のAFFINGERロゴのような仮のヘッダー画像でもいいやと思っているので、引き続きAFFINGERロゴを使わせてもらいました。

今回は分かりやすく上部分と下部分で1:1で分けようと考えているので、高さの変えられないヘッダーエリアに合わせようと思う。

 
高さを少しずつ縮めていった上半分の画像を何度も入れて、それが完全に表示されるようになったのが70pxでした。

せっかくヘッダーエリアを使うというのであれば、サイトタイトルはリンク付きなのでそのまま利用させてもらい、キャッチフレーズは下半分の70pxの画像の方に入れる事にしました。

この作業はカスタマイザー上で行ったのですが、何故かライブプレビュー上の画像と実際のサイト画面の画像が違って見えていました。原因は分かりません。

 
高さが分かったので、あとは140pxの画像を用意して、それを70pxずつ上下に切り分けて…
「ヘッダーエリア背景画像」と「ヘッダー画像」に設定してひとまず完了!
…のはずだったんですが、なんだか表示がおかしい…
上と下の画像がずれている…

原因はおそらく、諸々のところで設定していた「横幅100%」だと思う。
AFFINGERにデフォルトで入っていたヘッダー画像の幅は1060px。私の使っているPCのモニターは1280px。
この足らない部分のpxを自動で引き伸ばしてくれていたんですね。たぶん。
んで、その引き伸ばし方がヘッダー画像と背景画像とで違っているんじゃないかなーと。たぶん。

 
そこでカスタマイザーより、[ヘッダー画像の横幅を100%にする]のチェックを外し、ヘッダーエリアの[背景画像を繰り返さない]にはチェックを入れてみる。
あ、ヘッダーエリアは画像の引き伸ばしでなく繰り返しだったんですね。エリアの高さが固定されているからかな?これが2つのエリア間で画像が上下にずれる原因っぽい。たぶん。

その結果、無事ヘッダー画像が繋がっているかのように見えるようになりました~!(カスタマイザー上ではぐちゃぐちゃだけど)

 
しかしどちらも横幅100%ではなくなってしまったので、両端に空白ができてしまっています。
これは最初から1280px以上の画像を用意すればいいだけの話ではありますが、今回は上下二分割で1枚のヘッダー画像に見せかけるのが目的なので、今はこのままでもいいや。(ここまででけっこう疲れた(^^;)

そういえばAFFINGER4のヘッダー画像って推奨サイズが2200×500pxなんですよね。
な、なんでこんなにでかいのでしょうか…?
PCモニター横に2台分くらいありますよね…?
まぁ小さい画像を引き伸ばすよりかは大きい画像を縮めた方が綺麗だとは思いますが…

 
この両端の空白部分はせっかくなので、背景色を分ける事でどこから上下に分割してあるかの線引きとして使おうと思います。

そのままでは画像部分と同じ幅なため、色を指定しても反映されてないように見えたので、「ヘッダー画像エリア」の[背景画像を幅100%のレスポンシブにする]と、「ヘッダーエリア」の[ヘッダー背景の横幅を100%にする]にチェック。

これでそれぞれの背景色が両端に反映されるはず。
…だったのですが、またしても表示崩れ。
今度はヘッダーエリアの背景画像が左寄りになってしまいました。

カスタマイザーの設定上のヘッダーエリアの[背景画像の横位置]はデフォルトのままの[真ん中]に設定してある。
解決策が分からなかったので、とりあえずてきとうに[左]にしてからまた[真ん中]に戻してみたら…
直りました(笑)
なんなんでしょ、プチ不具合?
その後試しに[ヘッダー背景の横幅を100%にする]のチェックを付け外ししてみましたが、同じ現象は起きませんでした。
ま、直ったので良し!

 
これで設定は全て終わったので、あとはヘッダー画像の下半分に画像編集でキャッチフレーズを差し込み、そのままのカラーリングだと文字が見えにくかったので、グレースケールにでもしておきました。
圧縮しすぎなのか、なんか画像がジャギジャギしてますが、色合いとしてはなかなかカッコいいんじゃないかなと。ロールアウトカラーっぽくて。(*´ー`*)

 

妥協案という事で今回はこんなんになってしまいましたが、AFFINGER4製の他の人のサイトなんかをコッソリ参考がてら見に行ったりし始めたんですが、多分ヘッダーエリアって消せてますよね…?
コードをいじったのか、私が見落としているのか…

 
上手いことどうにかできるようになれば、今回の二分割ヘッダー画像なんてものはもう使う事も無くなるでしょうから、今の画像を記念に(?)載っけておきます。

…そういえば、このサイトに画像載せるの初めてでしたね。
文字だけのブログなんて読み難くてしゃーないので、なんかしらこれからは入れてった方がいいんでしょうかね。

-ウェブサイト作成

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