ヘッダー画像と画像ファイル名

投稿日:

WordPressメニューの[外観]>[カスタマイズ]から、AFFINGER4のテーマカスタマイザーを利用してみました。
ここでは、サイト各部の色の変更ができるほか、背景やヘッダーの画像など、サイトの見た目に関わる設定ができるようです。
このサイトはまーだデフォルトまんまの見た目だったので、ここいらでオリジナリティ的なのを出していきたいですね~。

とりあえずかなりの数の設定項目があるので、順番に上から見ていきました。
今回設定したのは[ヘッダー画像]。

サイト作成関連の情報を集めていると、「ヘッダー」とか「フッター」という言葉をよく見かけます。
ページの上下の部分をそういうっぽいです。たぶんヘッド(頭)とフット(足)ってことなのかな?

ヘッダーはサイトのタイトルとか一番最初に目に入るところなので重要なのは当然ですが、フッターも重要だと言っている人も多いみたいですね。なんでも「離脱率」とかいうのに関わってくるらしく、ここに何もないとページの一番下まで見終わった人はそのまま帰ってしまうんだとか。
ゆくゆくはそういう見る人の立場でも考えてデザインしていかんとですね。やることが山積みだ(汗)

といってもいきなりアレもコレもとこなせるほど私は要領良くないので、まずはヘッダー、の画像を少しいじってみました。

 
まだこのサイトの顔となるべきヘッダー画像を用意どころか考えてもいないので、AFFINGER4をインストールした時にデフォルトで設定されていた、白背景に赤文字ででっかく「AFFINGER4」と書かれた画像をカスタムしてみる。

まずは画像編集ソフト。私は以前ちょっとだけPhotoshopを使っていたことがあったのですが、今のパソコンには入れていなかったので、この機に入れ直そうと思ったのですが、たしかスキャナーだかペンタブレットだかに付いてきたもので、それらの機器と一回繋がないといけないんですよね。メンドくさい…
もともとかなーり古いバージョンのだったこともあるので、ネットで評判の良さそうなフリーの画像編集ソフトを探してみることにしました。

いろいろと見つかったのですが、動作が軽いということから『AzPainter2』というものに決めました。

テキトーにわっちゃわっちゃといじって色だけ変えて、透過pngだったようですが、後々に自分で用意するヘッダー画像はそんなこじゃれたモンにはならんので、無難にjpgにして設定完了。

 
慣れない作業だったのでこの程度にけっこう時間がかかってしまいましたが、表示上は特に問題はなさそう。
だが、一つ気になる点が。それは画像ファイル名。
もともとは英字+日本語でネーミングしていたのですが、アップロードした画像についたファイル名はガチャガチャな英数字の羅列… ちょっと嫌ですね

調べてみると、これは日本語のファイル名にした時に起こる「サニタイズ」とかいうものらしいです。要は文字化けってことみたい。
なんでもこれはWordPressのバージョンに依るものらしく、以前は起こらなかったらしいです。
プラグインを使えばアップした画像のリネームも可能なようですが、原因が日本語によるものなら、まぁ英数字でネーミングしとけばいいだけって話かなーと思い、元のファイル名を変更する事にしました。

で、英数字のみのファイル名で再アップロードしてみたら、ちゃんと元のファイル名と同じファイル名がついていました。
…そーいえば昔、学校のパソコンを使った授業の時、「提出するファイルの名前には日本語は使わないように!」と教えられたのを思い出しました。確か「受け取った側の環境次第では読めない可能性があるから」…だったかなぁ? もうXX年も前の話なんで、うろ覚えです(笑)

 
さて、ヘッダー画像の色を変えただけ、というのは味気ないので、前から「この画像でかすぎ!」と思っていたので、アップ時に「切り抜き」という設定があったのでそれで上下を切り取ってみました。
これも表示上は上手くいったのですが、画像ファイル名に今度は「cropped-」とか付いてしまいました。
画像のリサイズはアップロード前に編集を済ませておいた方が良さそうです。

 

というのが今回の覚え書き。
久々にこのサイトの見た目に変化が加わりました。
しばらくはカスタマイザーをいじる日々が続きそうです。

-ウェブサイト作成

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