WordPressサイトのヘッダー画像を作成してアップロード

ヘッダー画像の大きさと表示位置にも世界的トレンドがある

出典：TMZ

大雑把に言うと2000年代はサイト上部に横幅一杯の大きなヘッダー画像がWEBサイトやブログの主流となってきましたが、2010年代に突入するとサイト上部右側に広告バナーを貼るというスタイルが海外の大手メディアを皮切りに世界中のWEBシーンで流行しだした為に、ヘッダー画像はサイト上部左側に小さな文字やロゴでシンプルに表示されるスタイルへと移行していきました。

現在ではサイト上部右側の広告クリック率がそれほどでもないという研究結果が徐々に出始めたようで、海外の大手メディアから一斉にサイト上部右側の広告バナーを外す動きがなされたのが現在の2016年の現状です。

それに合わせて、ヘッダー画像はサイト上部中央あたりに中くらいのサイズで表示するようにトレンドが変遷してきた傾向が目立ちます。

今後どのように変遷していくか分かりませんが、おそらく小から中くらいのヘッダー画像がサイト上部に存在するという点では普遍的であり続けると思います。
当サイト『IBORC(アイボルク)』ではサイト上部の中央に中くらいのヘッダー画像を表示するというスタイルを採用しています。

WordPressテンプレートからヘッダー画像のサイズを予測

ヘッダー画像が自分のものに変更可能なテンプレートをまず選びましょう。

WordPressをサーバーにインストールし、「ダッシュボード」⇒「外観」⇒「テーマ」を選択します。特性として「可変ヘッダー」や「カスタムヘッダー」にチェックボックスをいれて検索したテンプレートの中から気に入ったテンプレートをWordpressにインストールします。

ヘッダー画像の挿入場所を知るには、「ダッシュボード」⇒「外観」⇒「カスタマイズ」を選択、もしくは、サイトトップページの管理者用メニューバーにある「カスタマイズ」というタブをクリックします。

ヘッダー画像はテンプレートによって、「Header(ヘッダー)」と表記されていたり「Logo(ロゴ)」と表記されていたり統一されていないために、自分で試しに画像を挿入してみて、本当にヘッダー画像の挿入場所なのかを確かめましょう。

「Header(ヘッダー)」と表記されているのに、実は背景画像の挿入場所だったりするケースが今日の動画でも紹介していますがありますので気を付けましょう。

また挿入場所にピクセルサイズが「600×150ピクセル」などと書かれているものもあります。（英語表記の場合もあり）

まずはヘッダー画像の挿入場所を探し出して、サイズやアスペクト比を予測してから、ヘッダー画像制作へと移ります。

ヘッダー画像はPixlrで作る

出典：pixlr.com

自分でGIMPやPhotoshopにillustratorを好んで使用しているという人以外は、WEB上でブラウザで無料で利用できる世界的人気画像編集ソフト『Pixlr（ピクセラ）』でヘッダー画像を作ることをお勧めします。

Pixlrの操作方法を1から学びたい人は『画像編集の基礎を始めから丁寧にSTEP1』から順に動画を見ていって下さい。

最近主流となっている小から中くらいの文字のみのヘッダー画像の作りかたを説明します。

WordPressテンプレートでヘッダー画像のサイズを大体見当を付けたら、『Pixlr Editor』の「新しい画像を作る」から、大まかに「600×150ピクセル」あたりに設定をして画像を作りはじめましょう。

この際に『Pixlr Editor』で作業を完結する人は背景を透明レイヤーにして作り、「〇〇〇HEADER.png(例)」などとして、PNGファイル形式で保存するほうがサイトの背景と上手くなじむだけでなく、後で様々な用途に使用できるためにオススメです。

文字フォントのみで仕上げるならPixlr Expressで作成

また洗練されたクールな文字のフォントや遊び心ある文字のフォントで作りたい場合は、『Pixlr Editor』で画像サイズを設定しサイトテンプレートの背景色と同じ色の背景にペンキで塗りつぶしただけの画像を一度保存して、『Pixlr Express』で自分の好きな文字フォントを選んで作成してください。

『Pixlr Express』は『Pixlr Editor』などで作った画像を仕上げにより魅力的に魅せることを目的とした仕上げの画像処理ソフトである為に、機能的には非常に直感的で超有料級に優れていますが、弱点が2つほどあります。

1つ目は、PNG画像での編集がしにくい、さらにPNG画像で保存できないために、背景が透明な画像を作ることが出来ない点。

2つ目は、「新しい画像を作る」機能が無い為に、1から画像を作ることが出来ません。既存の画像を編集してエフェクトや文字を付け加えていくという正しく＂仕上げ＂の画像編集ソフトであるということです。

1から画像を作りたい場合はまず『Pixlr Editor』の「新しい画像を作る」からピクセルで画像サイズを指定して任意の背景色にペンキでレイヤーを塗りつぶしたものを一度自分のPCに保存してから『Pixlr Express』で編集を始めて下さい。

さて、『Pixlr Editor』または『Pixlr Express』でヘッダー画像を作り終えたら任意の名前「〇〇〇HEAD.jpg（例）」などで画像を保存し、Wordpressの管理画面の「ダッシュボード」⇒「外観」⇒「カスタマイズ」から「Logo」もしくは「ヘッダー」のタブをクリックしてヘッダー画像を挿入してください。

一度ヘッダー画像を公開し、自分がイメージした通りのサイズや表示、印象になっているかを確かめて、微調整を繰り返していって下さい。

ヘッダー画像に微調整を加える場合は、保存する際の名前を「〇〇〇〇ヘッダー２」などとして決して上書きをしないようにしましょう。最初のほうが良かったということが良くあるからです。

微調整を加えて納得がいけば、ヘッダー画像の作成は完了です。

今日の講義をより詳細に動画で観て、実際にヘッダー画像を作っていきましょう。

📹動画で観る

☥IBORCを応援してください。