ヘッダー画像の完成

投稿日:2018年2月20日

さて、今回は前回の予告通り、ヘッダー画像を完成させます。

やーーっとですね。 そろそろこのサイトを運営開始してから1年経ちますよ(^^;
どんなにPCに不慣れな人でも1年もあればブログの1つや2つ完成させられると思いますが…(;´ェ`)

まー今さら焦ってもどーしょーもない。
とりあえず4月からのガンダム新アニメ『ビルドダイバーズ』の放送ぐらいには間に合わせていきたいですかね。 がんばろ。

 

今までのヘッダー画像

作業の前にまずは現在のヘッダー画像のスクショをば。

今までのPC用ヘッダー画像

「準備中」の文字が全てを表しています。

やっとこのフリー素材の写真ともおさらばだぁよ…

 

さてさて、ここからどうしていくか、ということなんですが、

当初の予定としては、上記そのままのような感じで、模型サイトっぽい写真(自分で撮ったやつ)を用意して、ヘッダー画像のサイズにトリミングとかして、サイトタイトルを入れたり入れなかったりして(悩み中)、ちゃちゃっと完成。
…くらいに考えていたんですが、

ここで問題発生。
 

「キャッチフレーズ」の存在。 …むかーしこのブログで散々悩んだアレですね。

上のスクショを見た限りでは、右上に記載されているように見えるんですが、ここの[ヘッダー右ウィジェット]ってPC時にしか表示されないんですよね。

つまり、スマホ・タブレット時には非表示になっているわけです。
現在のモバイル版のヘッダー画像がコチラ↓

今までのモバイル用ヘッダー画像

左上に寄っていたサイトタイトルロゴがセンタリングされ、右上のキャッチフレーズは消えてしまいました。

でもこれは以前から分かっていたことなので、私はその場しのぎの対策として、[トップページ挿入コンテンツ]にPC時と同文のキャッチを別途入力しておきました。

しかし、いくらトップページのみの表示とはいえ、これはとても邪魔だし格好悪い。
 

そんな折、AFFINGERアップデートにて「モバイル用ヘッダー画像」が別個に設定できるようになりました。
上の写真でもヘッダー画像はPC用とは別の物を使用していました。(分かりにくいけど)

これにより、スマホ用のキャッチフレーズはモバイル用ヘッダー画像の中に書き入れておこう、と決めていました。
 

が、問題となったのはここから。
タブレット表示時です。

私の使用しているWordPressテーマ『AFFINGER4』の仕様だと思うんですが、

ヘッダー右ウィジェット(当サイトのキャッチフレーズ入力欄):PC時のみ表示(スマホ・タブレット非表示

モバイル用ヘッダー画像:スマホ時のみ表示(PC・タブレット非表示

となっているんですよ。
 

先の計画の通りにいくのであれば、PC時にはキャッチはウィジェットにて表示されます。

スマホ時にはこれから作るモバイル用ヘッダー画像の中にキャッチを入れ込みます。

しかし、タブレット時にはPC版キャッチのウィジェットも表示されず、スマホ版キャッチのモバイルヘッダーも表示されないわけです!(タブレット時のヘッダー画像はPC用ヘッダー画像が表示される)

なので、ウィジェットがスマホ用ヘッダーはPC用と、PC・スマホ時の表示が混在しているタブレット表示時にはどちらのキャッチフレーズも表示されなくなってしまっていたということに気付いたのです。
 

んでまー、計画の練り直しですね。 作業に入る前に気付けただけマシか。

スマホ表示に関しては先の計画通りで大丈夫でしょう。 スマホ時専用のヘッダー画像が使えるので、それに頼ればよい。

それならばタブレット・PC時にも同じようにヘッダー画像内にキャッチフレーズを落とし込んでおけば良かろうもんよ。

PC時とスマホ時で別々の設定をするのが面倒だったんですよね。
ヘッダー画像のように同じ管理画面から2ヶ所まとめて設定できればいいんですが、今までのウィジェットと挿入コンテンツ、またはウィジェットとヘッダー画像では設定画面が異なるので。

これなら私がやるべき作業は、事前にPC(&タブ)用とモバイル用の2つのヘッダー画像を用意しておくだけ。
写真自体は同じ物を使用し、それぞれの端末サイズに応じた画像サイズ、及び文字サイズで差分を作ればいいだけ。 やったことは無いけど難しくはなさそう。
 

これでPC、タブレット、スマホ、どの端末からでもキャッチフレーズまで表示されるようになるはず!
……いやー、やっと答えに辿り着けたって感じよ。 長かった…
過去記事読み返してみたら、キャッチも含めたヘッダー関連は去年の3月から悩んでましたよ…。

 

PC・タブレット用ヘッダー画像

それでは計画もまとまったところで、新しいPC・タブレット用のヘッダー画像を作ります。
 

素材となる写真のイメージはずっと前から決めてたんですよね。
テーマはズバリ「作業環境」。
モデラーにおけるプラモデル製作場所ですね。

他の人の作業環境ってとても興味あるんですよ。
私はもう10年近くプラモ作っていないので、今はモデラー的な物が全く無いのですが…。

とりあえず、一目見て「プラモデルやってるブログだ!」というのが分かればいいので、テキトーにニッパーとか模型用ツールをぶちまけておきました。

さらにガンプラ感を出すため、未組み立てのプラモからランナーを出してきてまたぶちまける。 もちろんおなじみトリコロールカラーよ。

で、完成したのがコチラ↓

PC用ヘッダー画像

PC表示時は比較的楽ですね。
作業時のサイズがそのまま見たサイズになるので。

完成版のヘッダーということでしたが、やっぱりまだ我が『ガンプラ気分』は仮運営中ですので、キャッチフレーズには「準備中」の一文は必要ですね(;^ω^)

psdファイルで保存してあるので、キャッチを変えたい時はテキスト部分のみを差し替えればいいだけなので、本運営開始時にまた変えればいいでしょう。

右上のウィジェット欄のキャッチフレーズを残したままなので、PC時には2つのキャッチが表示されてしまっていますが、これに関してはまた後日。
 

あ、上の写真で使ったランナー、何のキットか分かります?そこのガンプラ好きのお兄さん。

正解は…ダララララララララ……ジャン!!(ドラムロール)

「MG ZZガンダム」でした~!

そう!ガンプラ30周年記念限定クリアパーツ付きを購入したものの、長い長い積みプラ期間を経て、ついにVer.Kaが発売されたことによりいったいどうすんだこのビス止めキットはYO!!となっているMG ZZガンダムです!!
 

…いつか作ります… いつか……
 

モバイル用ヘッダー画像

続いてはモバイル用ヘッダー画像。 スマホ表示用ですね。

ちょっと試しに、今作った新しいヘッダー画像をスマホから見てみましょうか。
これで何も問題が無ければ、そもそもヘッダー画像を2種類用意する必要もないわけで。

PC用ヘッダー スマホ表示

PC用ヘッダー スマホ表示(横)
横画面で

うーん…、予想通り文字が小さいですね。
スマホを横にして見るとちょうどいいっくらいですかね。

でも今まで使っていた[挿入コンテンツ](旧キャッチフレーズ入力欄)を削除できたことで、だいぶトップページに余裕ができました。

これならヘッダー画像そのものをもう少し大きくしても大丈夫そうかな。
そうすりゃ文字も大きくなるし。
 

で、改良版がコチラ↓

モバイル用ヘッダー

ちょっっとだけさっきよりヘッダー画像を大きくし、文字もフォントサイズ上げて打ち直しました。 分かりやすく色も変えて。

まだ小さいですね。
はいやり直し。
 

モバイル用ヘッダー改

モバイル用ヘッダー改(横)
横向きで

これで…どうでしょ?

さらにちょびっっとだけヘッダー画像を大きくし、文字も大きく。
PC時と同じ文面では入らなくなってしまったので、文面を少し変更。
 

大丈夫そうかな? 今回はこれにて完成ってことにしておきます。
あんまりこだわりすぎてもまた時間ばかりかかってしまいますし。

今回ヘッダー画像を作るにあたって、他のガンプラブログさんを勝手ながら参考にさせてもらいましたが、ヘッダー画像使ってるとこ減ってきましたねー。いつごろからなのかは知りませんが。

今はブログもスマホから見る時代のようですし、余計なものはトコトン省いてなるべくシンプルにした方がウケるって感じなんですかね?

 

私の用意したモバイル版ヘッダー画像は他の人と比べても若干大きめになってしまいましたが、右上のアコーディオンメニュー(三本線の展開マーク)の左側が完全に無駄なスペースとなってしまっているので、ここをどうにかできればヘッダー画像のデカさなんて取るに足らない問題となるでしょうから、ここが次の課題ですね。
 

っとその前に、ヘッダー画像に続いて次は「ロゴ画像」を完成させなければ。
現在は「ガンプラ気分」とだけ書かれている色つきアイコンですね。

 

では今回のブログカスタマイズはここまで!

やはり見た目が変わると進んだ~って感じがしますね。

-ウェブサイト作成

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