ロゴ画像とヘッダーエリア背景画像のデザイン

投稿日:2017年4月5日

今回で4回目となりますヘッダー画像デザイン。
プランDとなる今回は、ヘッダーエリアに「ロゴ画像」を使用し、背景画像をその下に設定してやる事で、ロゴ画像そのものがトップへのリンクになりつつ、クリックできる領域も中央部だけにとどめておけるんじゃないかと考えています。

 
まずはロゴ画像を用意。これは前回使ったヘッダー画像の使い回しでいいや。
前回設置してみたところ、若干高さがあるかなと思っていたので少し縦に潰して、サムネ用に色だけ変えておく。
そして初めて使う[ロゴ画像]の設定項目から設置してみると、見事画像は中央部に!さらに自動でトップへのリンク付き!背景部分はちゃんとクリックできないようになってる!…完璧やん。
これでサイトタイトル&キャッチフレーズ欄は完了。次は背景画像。

 
背景画像には中央に設置した画像を挟み込む様な形で写真を載せたいんですよね。
左端用と右端用の2つの写真を中央部を空けて繋いで1枚の背景画像としたい。
ヘッダー用画像ってちょっと横に長すぎてどういう写真を載せればいいのか分からないんですよね。
でも左に1つ、右に1つ、とやれば編集で繋ぐのはちょっと面倒だけど、写真選びには幅が持てるようになると思うんですよね。
このサイトは模型写真がメインコンテンツになる予定ですので、まー2体のバストアップ写真でも並べておけばそれっぽいんじゃないですかね?
…問題はサイトの顔として見映えのある物を作れるだけの技量が私に無い事ですね(汗) 数年前にちょちょっと素組みした程度のドッ素人なので。

今は仮の画像でいいので、とりあえず先のロゴ画像と高さを合わせただけの真っ黒な背景画像を設置してみると、ロゴ画像の上下に余白部分ができていた事に気付く。
プランBの時のテキストウィジェット下の余白程目立ちはしないように見えますが、ちょっとだけこれは残念ですね。
とは言ってもこの余白は背景画像内ですので、デザイン的に処理できそうなので、この上下の余白を埋めようと、工事現場とかでよく見る黄色と黒のラインを付けてみました。
(画像素材は「写真AC」様よりお借りしました。)
このサイト自体がまだ工事中(準備中)という意味を込めて(笑)

で、完成したのがこちら

写真はまだ入れてませんが、パッと見は悪くはなさそうかな。

 
問題はここから。ウィンドウサイズ変更による表示崩れが心配ですね。「レスポンシブデザイン」って言うヤツですかね?

ではウィンドウサイズを縮めていってみると…
案の定表示崩れが起きました。背景画像の下部に更に余白ができたり、上下に加えた黄ラインが見えなくなったり。
これは背景画像の位置がロゴ画像に対して常に中心に来る様になっているからだと思ったので、[背景画像の縦位置]を[下]に設定してやると大分マシな表示になってくれました。

ただスマホサイズまで縮めると上部黄ラインはどっかいきますね。どうもロゴ画像に対して背景画像のサイズが大きくなってしまうような?
でもここで背景画像のサイズを変えると今度はPC表示と合わなくなるし…
多分ですが、この上の部分ってのは、タブレット・スマホ表示には「アコーディオンメニュー」(右上の三本線マーク)が表示されるので、その分の領域がヘッダーエリアの上部に拡張される仕様みたいですね。
今まで表示崩れと思っていたのはコレによる見た目の変化によるところが大きかったのかと。

こうなってくると、このアコーディオンメニューの有無も考える必要が出てきそうですね。
私はこのサイトを作るにあたって、まずはPC用を作り、その後タブレット・スマホ用表示を考えていこうかなと決めていました。
しかしここでとりあえずのヘッダー画像を用意してみても、既にレスポンシブ化で表示が崩れる事を知ってしまった今、2度手間になるのは必須。
ヘッダーデザインだけでもレスポンシブを考慮しておいた方が後の為にもなりそうですし、ここはもう少し時間をかけて取り組んでいこうと思います。
幸いな事に、先日のAFFINGER4のアップデートで「スマホ用ミドルメニュー」機能も追加されましたし、アコーディオンメニューを取り払ってもなんとかなるはず。

 

今回のヘッダーデザインはここまでにして、具体的に今後どうしていくかを考えてみたいと思います。ちょっと考え方を改める必要がありそうなので、自分の頭を整理する意味も込めて。

まずは今回のロゴ画像+ヘッダーエリア背景画像のレスポンシブ化で思ったのが、2つの画像を組み合わせて1つの画像にするやり方は無理があるんじゃないかということ。
今までの4つの案は全てこの方式でやってきました。
PC上だけならまぁ何とかなるんですが、タブレット→スマホとウィンドウサイズが縮んでいくにつれて表示はどんどん崩れていく。というより、設置していたヘッダー画像(ロゴ画像)と背景画像にズレが出てくるんですよね。
前回より(勝手に)参考にさせて頂いておりますAFFINGER製サイトを見ましても、ロゴ画像のバックには何も設定していないようでした。
おそらく背景画像ってのはガッツリ写真を入れ込む様なものではなく、なんかこう小っちゃなハートだの星だの散りばめた様な、設定的には[繰り返し]が可能な画像に使われるんじゃーないかと。

こう考えると、私が今までやってきたのでは失敗するのは当然っちゃ当然だった訳ですね。
私のやり方だときっとタブレット表示用、スマホ表示用、とで個別に設定を用意しておくしか無かったんじゃないかと思います。
でもネットで読んだ限りでは、自分でHTMLだのをいじってそれぞれのページを用意するのが一番良いらしいですね。
とはいえ、私にはそんなことできませんので、ここはAFFINGER4のレスポンシブデザインに合わせていかねば。

 
今まで私が理想としてきたヘッダー画像は本記事でも書いたように、中央部にサイトタイトル&キャッチフレーズがあり(そこをクリックでトップへ)、その両脇を写真で挟むようなもの。それがサイトの一番上にあり、その下からはコンテンツ(記事など)がすぐに始まっている感じ。
基本余計な物は極力省いて、一枚の画像だけでサイトの印象付けを全て果たしてしまおう、という狙いです。
個人的な好みになるんですが、サイトトップの画像が大き過ぎたりして、最初に下にスクロールしないとコンテンツまで辿り着けない、という形式が好きじゃないんですよね。
最初に表示される画面を(スクロール無しで)一目見るだけで、どんなサイトかが分かる、そういうのが理想。

しかしAFFINGER4では画像内のクリック範囲の指定はできないようなので(テキストウィジェットでは辛うじてできましたが)、クリックできる画像とそうでない画像とを重ねて1枚の画像に見えるようにしようとしてきました。
これも先に書いた様に、レスポンシブ化でズレができてしまった訳です。
なので次の案、プランEからは1枚の画像をヘッダー画像としていこうと思います。
こうなってくると妥協しなくてはいけない点が出てきます。

  • 1つはクリック範囲。
    画像をクリック可とするのであれば、ウィンドウ上の端から端まで全てがクリック可能領域となってしまいます。
    私はこれが嫌で今までどうにかしようとやってきた訳だったんですが、今回のプランDのロゴ画像以上に上手い事はできそうもないので、これは諦めるべきですね。
    …他の無料ブログなんかでは出来ていることだったので、ここはどうにかしたかったんですけどね。
     
  • 2つ目の妥協点はサイトタイトルのテキスト表記。
    これは2つ目と言っても、上記のヘッダー画像をクリック不可、つまりそこからはトップへ飛べない仕様にした場合。
    こうすると結局サイトタイトル、そしてキャッチフレーズはWordPress上からテキストとして入れる他ありません。
    これはまぁブログの形式としてはよく見るものではあるんですけどね。
    サイト名が左上、あるいは上部中央にあり、その下に小さい文字でサイトの説明文を入れる。ヘッダー画像はその下にあったりなかったり。
     
    何度も同じ話を出して申し訳無いのですが、私はサイトタイトルもデザイン的と言いますか、イラスト風にできたら良いなと思っているので、これは画像で入れたかったんですよね。
    でもいろんなサイトを見て回ったら、画像内にデザインされたサイト名を入れ、さらにテキストでのサイト名も載せる、というサイトタイトルを二重に書いてるところもけっこう見かけたんですよね。
    そういうサイトは大体ヘッダー画像の方はクリックできる様にはなっていない。
    こういうのもありなんじゃないかと思いまして。

 
ごっちゃごっちゃ書き連ねましたが、とりあえずは上記2点を意識してなんか作ってみようと思います。

おそらくまたなんかしらの問題も出てくるのでしょうが、後はもーやってみてから考えるしかないでしょうしね。

 

今回は特に雑文となってしまいました(-∀-`;)
もしこんなところまで読んでくだすった方がいたらすまねぇだ

-ウェブサイト作成

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