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

投稿日:2017年4月3日

引き続き、ヘッダー画像のデザインをやっていきます。今回で3回目。

今回は一番シンプルに、「ヘッダー画像」を使っていきます。
前回でヘッダーエリアは(ほぼ)消せるようになったので、ここを消した事による代わりのサイトタイトルをトップへのリンク付きで用意せねばなりませんでした。
テキストウィジェットを使い前回はとりあえずの形にはしたのですが、どうも仕様外っぽい使い方だったらしく、少し表示におかしな部分が出てきてしまいました。

プランCとなる今回の案では、もういっそ文字によるリンクは諦めて、ヘッダー画像そのものにリンクを設定するという、このサイトで一番最初にやっていた形に戻してみようかなと。
ヘッダー画像自体がリンクとなっているので、幅100%のヘッダー画像だとクリックできる領域が端から端までと広すぎてしまうので、これをヘッダー画像エリアの中央部のみの表示とし、両端は「ヘッダー画像エリア背景画像」として設定すればうまくいくはず。

私は、サイトのタイトルは用意されているフォントではなく、イラストの様な形でデザインされたものが使いたいなーと思っていたので、結局の所こういった「画像」で落とし込む以外に方法はなかったんですよね。今気付きましたが。
なんかこう筆文字ででっかくドビャーって書かれたタイトルとかカッコイイと思いません?

まー今からデザイン案を考えていても仕方ないので、まずはその設置場所を作らねば話になりませんね。

 
まずは仮としてテキトーにヘッダー画像を作成。いくつか気に入ったデザインのサイトを参考にしまして、サイズは600×250くらいで。

で、ヘッダー画像として早速設定してみたのですが、なんか横幅いっぱいにバカでかいヘッダー画像として表示されてしまいました。
[横幅100%]のチェックを外しているのに効果は無し。
[AFFINGER4管理]より[ヘッダー画像トリミング]という項があったので、そこを用意したヘッダー画像と同じ幅・高さに設定してやると、どうやらそれぐらいの大きさで表示されてくれたようです。

ちょいとここをいじってみた感じだと、[高さ]は関係なく、[幅]に合わせてヘッダー画像のサイズが決められているっぽいです。たぶん。

しかし!サイズは合ったものの、表示されているヘッダー画像の位置がおかしい…左に寄っている…
たしか以前もありましたね、こんなこと。あの時は一度表示位置の設定を左にしてから真ん中に設定し直せば大丈夫でしたが…
ところが!今回のヘッダー画像には表示位置の設定箇所がありません。
設定でどうにかできないのであれば、私にはもうどうにもなりません。お手上げ。

さらにィ!トップへ飛ぶためのリンクが、ヘッダー画像部分だけでなく、ヘッダー画像エリア全体がクリック可能領域となってしまっているじゃーありませんか!
何も無いはずのヘッダー画像エリア背景部分にマウスオーバーさせると、ヘッダー画像が反応してしまっている…
しかもヘッダー画像が透けて背景画像が見えてしまっている…ってこれは自分で設定した記憶がありますね(-∀-`;)

 
えー…私としてはこのプランCが一番簡単かつ完璧な仕上がりになると踏んでいたのですが、残念ながら、今回は完成まで辿り着くことすらできそうにありません。
とりあえず挫折した今回のヘッダー画像を載せときます。

 
あっ、そうそう、前回の記事投稿から、投稿一覧にサムネイル(小さい画像)を表示させてみました。どのブログを見ても設定してありますしね。なんだか今風っぽくなった気分(´m`)

 
はてさて、今回の案が上手くいかなかった事で八方塞がりになってしまった訳なんですが、今回のヘッダー画像を用意するにあたり、こういうヘッダーがいいなーと参考にさせて頂いていたAFFINGER4製サイトを読んでいたら、「ロゴ画像」を使用しているとのカスタマイズ記事がありました。

ロゴ画像…!完全に見落としていました。
ロゴってサイトタイトルが書いてあって、その横に入れるちょっとしたマークみたいなのを言うのかと思っていましたが、マニュアルを読み直してみると、サイトタイトルまで含めてロゴ画像として設定してありました。

いやー、目から鱗ですね。やはり先人の知恵は頼りになる。
次回、プランDはこれでいこうと思います。今度こそ…!

 

こっからはちょっと別の話題。
鉄血おもしろかったね!!
…ではなく、いや、おもしろかったけどね?
AFFINGER4のアップデートの話。

私はAFFINGER4ver20170322βはその名の通りβ版との事だったので見送りまして、ver20170307から最新版である「AFFINGER4ver20170328」へとアップデートしたのですが、公式でアナウンスされている機能以外の、既存の機能においても表示がちょっと変わったような気がする点が2つほどありまして…

1つはサイドバーへ設置していた[固定ページ]のウィジェット。
以前はただ上から下に並んでいただけだったと思うのですが、今は各メニュー間にうっすらと下線が入り、行間が広く取られるようになった?ような気がします。
まぁこれは全然悪いこととかじゃあないので。いつの間に変わったのかなー?と。

2つ目、これなんですが、トップページの投稿記事一覧のページなんですが、ここの各記事の抜粋文ってPC表示時のみでしたっけ?タブレット・スマホ用のウィンドウサイズにまで縮小されると、この抜粋文が全て非表示になってしまうんですよね。
今までもこういう仕様でしたっけ??なんかカスタマイザー画面にした時に違和感を感じたんですよね。

試しにAFFINGER4製サイトを少し見に行ったのですが、最近ブログ更新があったサイトは抜粋文が非表示になり、しばらく更新されてないサイトを見たら抜粋文が表示されたんですよね。たまたまかもしれませんが。
アップデートが原因と断言は出来ませんが、たぶん私の気のせいではないと思います。たぶん。

WordPressのテーマってダウングレードしていいものなのか私には分かりませんが、現verには待望だった「スマホ用ミドルメニュー」が追加されているので、ダウングレードできたとしてもしたくはないのですよね…

 
この仕様は嫌なので、またひとつやらなければいけない事ができてしまったなぁ…

-ウェブサイト作成

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