初めの一歩的なヘッダー画像準備編
引き続きWordPressに挑戦し始めた友人の話です。先日は、とうとうキャッシュ残存の罠にはまったようで、「修正したはずが一向に反映されない！」とメッセージが飛んできました（あるあるですね）。さて、そんな彼から以下の通り質問が来ました。
＜相談事項＞
ヘッダー画像をどうやって加工すればよいのか？
これまで画像加工の経験がない友人は、独力で画像を準備するところまでは良かったものの、その後は全く想像通りにいかなかったとのことです。このようなハードルに対する解説サイトは、既にごまんとありますので、今回は「今まで画像加工の経験もなく、画像処理のソフトなども所持していない人が、とりあえずヘッダー画像を用意する場合」というスタンスで解説してみたいと思います（尤も、このようなテーマで解説している先人も、多くいらっしゃるでしょうが）。
ヘッダー画像とはなにか？
ここでいうヘッダー(header)とは、WordPressひいてはWEBサイトにおける画面上部の部分を意味します。元来のヘッダーは、データの先頭にあるデータに関する情報のことを示しますが、HTMLでは画面上方の見出し・ロゴ・ナビゲーションなどを置く場所として定義されています。そして、このヘッダー部分に表示する画像のことを「ヘッダー画像」と呼ぶわけです。
WEBにおけるヘッダーは、最も初めに来訪者の目に飛び込んでくる部分です。ここにインパクトのある画像やロゴを配置することで、分かりやすくなるというメリットがあるのは勿論のこと、ページ全体のイメージや見栄えが良くなるという効果が期待できます。
WordPressは使用するテーマごとにデザインが異なりますが、おおよそ、ヘッダー画像を手軽に導入できる造りになっています。ただ、小さなデバイスで閲覧した場合は、画像を非表示にするケースも珍しくないので、「ヘッダー画像でサイト情報の多くを語りたい」といったデザイン性の高い表現を求める場合は、そういった点について事前にチェックしてからテーマを導入した方が無難でしょう。
ただしもっと重要なこととして、テーマごとに「ヘッダー画像の推奨サイズがある」ということがあげられます。友人がつまずいたのも、このサイズを全く意識していなかったためですので、ヘッダー画像を準備する前に確認しておきましょう。
推奨サイズが決められている理由としては、デバイスによって写真の表示サイズなどを変えるレスポンシブデザインであるため、という理由が一般的かと思われます。そういったサイズの可変に対応できる値が「推奨サイズ」となっており、テーマごとに異なっています。例えば、twenty seventeenの場合は「1000×1200」、twenty fifteenの場合は「954×1300」が推奨値です。これらを無視してしまうとデザインの大幅な乱れの原因になり得ます。
なお、推奨サイズの確認方法ですが、WordPressのメニューから「外観」→「ヘッダー」などでアップロード画面に遷移することができると思いますが（テーマによって異なる恐れがあります）、ここに明記されている可能性が高いです。
画像を準備する
さて、ヘッダー画像の推奨サイズを確認したら、画像を準備・加工しましょう。
①写真を用意する
無料の画像提供サイトなどを活用して、推奨サイズを上回る大きさの画像をゲットしましょう。なお、運営形態によっては「商用利用可」と明記された提供サイトである必要があります。また、著作権、およびサイトごとに定められた画像の利用規約などをよく確認してください。提供サイト独自のルールとして、例えば「サイトのURLを公開することが利用条件」などとしている場合もあるからです。
②ペイントソフトで画像サイズを加工する
Windoewsで標準搭載されているペイントを使ってみましょう。細かな加工は難しいですが、最低限のサイズ変更、トリミング加工などは十分に実行できます。勿論、画像加工ソフトウェアは無償・有償を問わず、良いものが沢山ありますので、興味を持ったら導入を検討することをお勧めします。
画像をペイントで開く。
- 「ホーム」→「サイズ変更と傾斜」を開く。
- 「サイズ変更」欄にある、
- 「単位」の選択を「ピクセル」にする。
- 「縦横比を維持する」のチェックボックスを【外す】。
※先にチェックを外さないと以下の数値が入力できません。 - 「水平方向」の欄に、推奨サイズの高さの値を入れる。
- 「垂直方向」の欄に、推奨サイズの幅の値を入れる。
- 「OK」を押す。
これで推奨サイズの画像が完成します。
ただし、画像の縦横比率を無視して縮尺を変更することになるため、一面の空や海といった画像でもない限り、縦横比が狂った珍妙な仕上がりになることでしょう。それでは困る、という場合は、もう少し頑張って、画像の一部を切り取る「トリミング」という方法を併用すると良いでしょう。縮小（「縦横比を維持する」のチェックをそのまま、単位を「パーセント」にして、50%などの値を入力することで、画像のサイズのみを小さく）した後にトリミングをする、あるいはトリミング加工のみで推奨サイズに切り出す、といった方法が考えられます（参考：ペイントで同じ大きさの画像に揃える／初心者のためのOffice講座）。
③容量を削減する
加工を終えたからといって、そのままWordPressにアップロードするのはお勧めできません。その前に画像の容量を確認し、必要に応じて容量の削減作業を行いましょう。数百キロバイト以上であれば、読み込みに影響を及ぼす可能性があると考えられますので、何らかの方法で容量削減を行いところです。
その一つのやり方として、WEB上で無料利用可能な「画像圧縮サイト」を利用することがあげられます。（画像の元サイズ・形式などにも左右されますが）外見上の劣化は少ないままに、容量の桁を一つ圧縮してくれるので、個人的に大変重宝しています。
このような技術サイトは沢山ありますので、好みのサイトを探すと良いでしょう。僕は、画像がpngの場合は「TinyPNG」、画像がjpgの場合は「JEPGmini」などを利用しています。
④アップロードする
画像のサイズ処理が終わったら、「外観」→「ヘッダー」などでアップロード画面に遷移し、画像をアップロードします。これで、ヘッダーに画像が表示されることでしょう。