キャッチフレーズ・タイトルロゴ・ヘッダー画像デザイン

投稿日:2017年4月14日

さてさて、けっこう長いことやる羽目になってしまったヘッダー画像デザイン。今回で6回目。プランFとなります。

前回からはヘッダー画像を基本通り1枚のみでの構成とし、これ自体はまぁ良かったのですが、レスポンシブ化の際、画像内に入れたキャッチフレーズ(サイト説明文)が小さくなりすぎて読めなくなる、という問題が起きました。

このため、今回のプランFでは、キャッチフレーズをヘッダー画像の上部、ヘッダーエリアに何らかの形で記載し、サイト最上部にあるのがキャッチフレーズだけというのは少し違和感があるので、あわせてサイトタイトルもここに載せ直す必要があります。
ついでにキャッチフレーズを抜いたヘッダー画像も新たに用意しなければなりませんね。サイトタイトルに関してはまぁ二重の表記になっても別に問題は無いでしょう。

 

まずはヘッダーエリアへのキャッチフレーズの記載から。
の前に、ヘッダーエリア背景画像として設定していた工事中ラインを消してしまいましょかね。アコーディオンメニューを残している限りは表示崩れは免れないのでね。

他のAFFINGER4製サイトを見ていたら、このアコーディオンメニューのエリアの高さ分だけ、色を変更しているのを見かけたので、良さそうなので真似してみる。
カスタマイザーの「スマホ用メニューバー背景色」から変更できました。ここの設定はヘッダーエリア背景色に上書き(上塗り?)されるようです。

 
これで下準備は完了。余計な物が無くなって見やすくなりました。
さて、キャッチフレーズなんですが、普通ならここって多分WordPressの一般設定から行うところなんでしょうが、AFFINGER4だとなんかこれが上手くいかなくてですね…
ってこの話はだいぶ前にした気がします。確か「サイトタイトルとメタディスクリプション」の記事だったかな。

この方法以外でヘッダーエリアにテキストを入れるとなると、ウィジェットを使うのがベストですかね。
[ヘッダー用ウィジェット]ならば以前私がやってしまった[ヘッダー画像エリアウィジェット]へのテキストウィジェットの挿入と違い、テキストを入れられる仕様となっているようですので。

ですが、ここにテキストウィジェットとしてキャッチフレーズを入力してもサイトには反映されませんでした。
理由は簡単な話で、AFFINGER4管理画面より、「ヘッダーを分割しない」のチェックを外す。これにチェックが入っていると、書いてある通りウィジェットが非表示となりますので。
こうすればサイトタイトルが左寄りになり、その右側にテキストウィジェットで入力したキャッチフレーズが表示されました。

できればサイトタイトルは中央に配置したかったのですが、他の案がもうありませんので、ここは妥協。
カスタマイザーの「ヘッダーウィジェット背景色」・「ヘッダーウィジェット文字色」よりカラーリングの変更もできる様ですが、とりあえずは設置できただけで今は充分。

 
続いては散々頭を悩まされたレスポンシブデザインを見ていきます。
さっそく当然のごとく問題発生。タブレット・スマホサイズのウィンドウではヘッダーウィジェットが消えてしまいました。
どうやらサイトタイトルが強制的にセンタリングされる仕様なようで、ヘッダー右の部分はカットされてしまうっぽい。

ヘッダーウィジェットのキャッチフレーズはせっかく作ったのでこのままでもいいかなと思うので、これをパソコン表示専用キャッチフレーズとし、新たにタブレット・スマホ表示用のキャッチフレーズを別に用意してみる事にしました。

 

スマホ用キャッチを作るにあたり、まず必要なのは設置場所ですね。
ウィジェットの中から、それっぽい[トップページ上部ウィジェット]を選択。
ここに先ほどと同じ様にテキストウィジェットにキャッチフレーズを入れる。このままではPCでも表示されてしまうので、タグから「PCに表示しないボックス」というのを初使用。コード上では"nopc"と付くようです。

これをPC上から見てみると、確かに今入力した文は見えてはいない。
しかし、入力した文の部分が不自然に空いてしまい、かなりカッコ悪い出来に…

とりあえずタブレット・スマホからキャッチフレーズの表示を確認しておこうとカスタマイザーからウィンドウサイズを変更したのだが、"nopc"の文は表示されない…
どうやらカスタマイザーからはレスポンシブ化でのタブレット・スマホサイズへのデザイン変更には対応している様だが、タブレット・スマホからでしか見れないものに関してはPC上からは見れないらしい。

まー仕方ないっちゃ仕方ないですかね、こればかりは。
ユーザーエージェントとか言うのでしたっけ?こういうの。
PCでスマホページが見られたら、パソコンからスマホ専用ゲームがやれるようになっちゃたりしますもんね。…調べればいくらでも抜け道は出てきそうですが。

 
ここでふと、AFFINGER公式サイトで表示確認サービスとして紹介されていた、『screenfly』という無料サービスがあったのを思い出す。
こちらはブラウザ上で様々なブラウザサイズの表示がチェックできるんだそうで。
試しに使ってみましたが、結果はカスタマイザーと同様、レスポンシブの表示確認ができるだけで、スマホ専用ページでしか表示されないものに関してはやはり表示されず。

こういうユーザーエージェントをごまかす?みたいなツールを探してみようかとも思ったんですが、ちょっとグレーっぽい気もしますので、面倒ですがスマホからチェックしてみる事にしました。
ネット情報を見ても、最終的には実機確認が重要と書かれていたりしましたし。

 

とは言え、今のままのスマホ用テキストの空白が空いた状態ではとても完成とは呼べませんので、別の方法を見つけなければなりません。

PCで表示されない文、では駄目だったので、最初からスマホでしか表示されないエリアを探してみます。

 
候補として挙がったのは[広告・スマホ用上部のみ]ウィジェット。
その名の通り広告用なんでしょうけど、一つも広告主との契約なぞ取っていない今の私には関係無いので、好きに使わせてもらいましょう。

ここへもテキストウィジェットへキャッチフレーズを入れるというお決まりの作業をし、PC上からはウィンドウサイズを縮めても何も表示されないという事が確認できたので、スマホからの実機チェック。

初めてスマホからこのサイトを見てみましたが、まずはちゃんと繋がることに感動しました。
ホームページ作りとか初めてだったので、ホントにネット上にこの『ガンプラ気分』というサイトが存在しているのかどうかすら定かではなかったもので。

おっと、そんなことはさておき、先程設定したスマホ用キャッチフレーズなんですが、無事表示されていました!
ただヘッダー下に思っていたよりも大きめのエリアが新しく追加されており、もうちょっと小さくしたいなと思ったので、スマホ用キャッチは短めにしてみました。

今回最初に設定したヘッダーウィジェットのPC用キャッチなんですが、ここはヘッダーエリア右だけでなく、フッター部分にも同文が表示される様です。
なので、ちゃんとしたキャッチフレーズはスマホ閲覧時ではフッター部で読める、という構成でいこうかなと考えてます。

 

さーて、今回も…いや、今回は特にあれをしたらこれがダメ、みたいのが多かった気がします。
その場しのぎ程度で考えたPC用とスマホ用の表示差分でしたが、いざ実機で確認してみると、なんだか悪くないんじゃないかと思えるようになってきました。

このサイトはパソコンから見た時を第一に考えて作っていましたので、スマホから見た時でもそのPC用のコンテンツをいかにスマホでも表示できるようにするか、と考えていたのですが、PCでしか見れない部分ってのはレスポンシブ化にあたりどうしても出てきてしまいそうだったので、その見れなくなった部分をスマホ用としてリデザインすれば、スマホからでもよりPC版に近いものを提供できるようになるんじゃないかなー…なーんていっぱしな事を思ってみちゃったり。

 
後はもーちゃちゃっとキャッチ抜きのヘッダー画像を作って、サイトタイトルはやっぱりただのテキストよりもイラスト的にデザインされた物を将来的には使いたいので、ロゴ画像で置き換えてみる。
はいはい、今回の完成品がこれ。

「雑」の一言に尽きますね(笑)
あっ、写真は毎度「写真AC」様よりお借りしました。

 

あ~~終わった!ヘッダー完成!
もういい、もうムリ、もう限界。

次回からは別のとこ進めていきます。久々に。
…まぁ本当に大変なのはここからなんだけどね…

-ウェブサイト作成

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