ヘッダー画像エリアとテキストウィジェットのデザイン

投稿日:2017年3月28日

前回はヘッダーエリアとヘッダー画像エリアの上下で二分割される画像を用意し、このサイトのヘッダー画像として設定しました。

いろいろと思い通りにいかない中での妥協案だった訳ですが、あれからちょいちょいAFFINGERをいじっていたら、前は気付かなかった設定とかでこの二分割ヘッダーよりかはマシなのができそうな感じだったので、今回はヘッダー画像の新しいバージョンを作成していきます。

 

  • ウィンドウサイズによる表示崩れ
    前回の記事で、ライブプレビュー上の画像と実際のサイト画面の画像が違って見える。なんて書きましたが、これはどうやら、カスタマイザーと私が確認用に表示させていた画面とでウィンドウのサイズが違っていた事が原因だったようです。
     
    ウィンドウサイズを縮めていくと、ヘッダー画像は画像全体が縮んでいくのに対し、ヘッダーエリア背景画像は左右の端から切れていってしまう。
    ついでにエリアの高さもなんだか安定しない。
     
    まだよく挙動が分かっていない部分も少なからずあるのですが、ともかくPC以外から見た場合に表示がぐじゃぐじゃになってしまっていた、という致命的な欠陥がありました。これが今回新しくヘッダー画像を作らねば、と思った次第であります。
     
     
  • ヘッダーエリアの消去
    そもそもがヘッダーエリアの消し方が分からない、というのが二分割ヘッダーなんてものの発端だったのですが、[AFFINGER4管理]>[ヘッダーにサイト名(またはロゴ)を表示しない]にチェックを入れただけでヘッダーエリアをほぼ消す事ができました。あっさりと。
    ただし完全には消えず、若干は残ってしまう様です。(現在はこの部分を黄色で表示しています)
     
    しかもサイトタイトルが表示されなくなってしまったので、代わりとなるタイトルの表示法を考えねばなりません。
     
     
  • テキストウィジェットの設置
    ヘッダー画像上に文字を入れるだけなら前回と同じく画像の中に文字をあらかじめ入れておけばいいだけの話なのですが、サイトタイトルにはトップページへのリンクを含めたいのでそうはいきません。
     
    そこで、今までろくに触れてこなかったウィジェットに着目しまして、テキストを入れるなら「テキストウィジェット」だろうと安直にチョイス。
     
    だがこのテキストウィジェット、HTMLが使えるとの事ですが、私にゃそんなのサッパリです。ブログも全部ビジュアルエディターで書いてるぐらいですから。
    それならばと、一度書きたい内容をビジュアルエディタ上に打ち込んで、それをテキストエディタに表示を切り替え、出てきたコードをコピペでテキストウィジェットに貼り付けたところ、無事思い通りに表示させることができました!
     
    ところがですよ、テキスト自体は大きな問題は無かったのですが、なぜかヘッダー画像エリアの下に空白の行が差し込まれてしまってました。
     
     
    このテキストウィジェットをヘッダー画像エリアに設置した時、今まで表示されていたヘッダー画像が表示されなくなったんですよね。ほんでその時に説明をよく読んでみたら、「ヘッダー画像の代わりに挿入するウィジェットです」と書かれていたんですよ。「プラグインMetaSliderなど」とも。
     
    調べてみたらこの「MetaSlider」とはスライドショーを設置できるようにするプラグインだそうで。
     
    おそらくですが、このヘッダー画像エリアウィジェットというのは、こういった画像表示に関するものだけを設置する前提の設計になっているのではないかと。
    そこに私はテキストウィジェットなんてものを置いたので、なんかおかしなことになってしまったのかも?
     
    どうにかこの余白部分(?)を消そうとしたのですが、できたのはせいぜい[背景色]の設定で色を変えられたことぐらい。(現在は赤色で表示)
    今度のやり方でも大きな問題が残ってしまいました。
     
    問題という程ではないのですが、テキストウィジェットでリンク付テキストとして表示させると、テキストに下線が付いてしまうので、サイトタイトルとしてはちょっとカッコ悪いですね…
     
     
  • ヘッダー画像エリア背景画像を設定
    さて、今回のこのヘッダー画像制作プランB(←今名付けた)、なんかもう失敗くさいんですが、ここまでやってしまった以上は最後までやってみます。
     
    ヘッダー画像エリアウィジェットを設定したことにより、ヘッダー画像は強制的に非表示になっていますので、肝心のヘッダー用の画像は「ヘッダー画像エリア背景画像」として設定します。ややこしいですね。
     
    以前使っていたのは、デフォルトの物の色をちょっと変えただけなので、そのままだと1060pxで横幅が足りないんですよね。
    これを私のPCのディスプレイサイズである1280pxに変更します。(AFFINGER4の推奨サイズは2200pxのようですが)
     
    ついでに高さが中途半端な140pxにして使っていたので、とりあえず150pxに。
    ほんの少しだけ高さが足りてませんが、ウィンドウ縮小時の画像の変化を確認しやすいかなと思いこのままで。(ここの背景色はオレンジで表示)

 
そんなこんなで完成したのがこちら。

まぁ前回ほどの表示崩れはありませんし、管理も格段にしやすくなったので、だいぶ良くはなりましたかね。

メリットとしてはサイトタイトルの文字をビジュアルエディタでできる範囲内でカスタマイズできる点でしょうか。
WordPress設定でのサイトタイトルだとそういったカスタマイズはできませんでしたから。

デメリットは下の赤線となっている部分を消せない点ですね。辛うじて色を変えられる程度。
あとはサイトタイトルについた下線がダサい。
ウィンドウサイズが小さくなると、画像の両端から切れていくのもちょっとどうかなぁ…

 

完璧といえる結果では全然ありませんが、前のよりは良くなったって事で今回は完了。
ヘッダー画像の第3案、もといプランCを思いついたので、次回はそれを試してみる予定です。ノシ

-ウェブサイト作成

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