今回、canvaという画像編集の神ツールを使って５分以内にWordPressのヘッダー画像を作る技を発見したのでご紹介します。デザインにこだわる必要はありません。
この機会に５分ヘッダー画像作成法をマスターしてみませんか？
完成見本
ヘッダー見本です。文字だけではありますがフォントが変わるだけで文字と比べても完成度がグッと上がります。
PCで見たイメージ
スマホで見たイメージ
それではヘッダー画像を作っていきましょう。
ヘッダー画像作成の手順
canvaに無料登録する
今回、ブラウザ上で画像編集が簡単にできるcanvaを使います。もしcanvaを使ったことがない方がいらっしゃったら無料サービスですのでこの機会に使ってみてください。
クラウド保存されるので、外出先からでも保存したデザインを開いて作ることができます。
フォトショップやイラストレーターなどの画像編集ソフトをパソコンにインストールする必要も一切ありません。
canvaテンプレートを使う
canvaの検索窓に『ロゴ』と入れてみてください。
そうすると、ロゴのテンプレートがたくさん出てきます。
一からデザインを作るのではなく、ロゴのテンプレートを使ってヘッダー画像を作成します。
canvaテンプレートには、ロゴ以外にもTwitterヘッダー・ポスター・ニュースレターなど様々なテンプレートが存在します。
ヘッダー(ロゴ)の作成
今回選んだデザインはこちら。そのまま画像をクリックします。
デザインを選ぶポイント
文字以外の背景画像は使用しませんのでデザイン全体を見て選ぶ必要はありません。
使用するのは、文字とシェイプだけです。
canva編集画面で編集する
いよいよ画像編集。下画像のようなcanva編集画面が開いているはずです。
編集方法はいたって簡単で文字にカーソルを合わせてダブルクリックして文字を打ち変えるだけ。
画像編集後
文字を変更して配置を調整しました。
不要なパーツは削除・色は変更する
背景のある元デザイン
↓↓↓
背景画像など不要なパーツを削除して、文字の色を変更することができます。
文字配置を変更する
レイアウトは元デザインのままでもいいですが、サイトロゴはほとんどの場合横方向ですよね。
その場合は、レイアウトを横方向に変更しましょう。
画像の大きさは気にしない
画像編集画面は編集しやすいように大きく表示される場合もあり実際のサイズとは異なります。
またWordPressに画像挿入する際にサイズや位置を調整するのでcanvaでは画像サイズは気にしないで大丈夫です。
完成画像をダウンロード
編集完了したらダウンロードします。
canva編集画面右上のダウンロードボタンを押してPNGファイルで保存します。
WordPressヘッダー画像設定
メディアライブラリにアップロード
ヘッダー画像を作成したらWordPressのメディアに画像をアップロードします。
WordPress管理画面を開いて左メニューのメディアを選択します。メディアライブラリが表示されたら先ほど保存したヘッダー画像ファイルをドラッグしてアップロードします。
アップロードすると下画像のように一番左上に登録した画像が表示されます。
画像サイズを調整する
登録されたヘッダー画像をクリックします。ヘッダー画像下にある画像を編集と書かれたボタンを押します。
下画像のように画像編集画面に移ります。画像上にマウスを使って必要な箇所だけドラッグしたまま枠を囲うように左上から右下に移動させます。
範囲を決めたら左上のクロックボタン（切り抜き）を押します。
保存ボタンを押して切り抜き完了です。
画像サイズの調整
画像を切り抜いたあとに画像サイズを確かめてみます。
画像サイズの見方は
横ピクセル数 × 縦ピクセル数
です。
ヘッダー画像はサイト表示をして一番最初に表示される画像ですからあまり大きいと下の投稿記事が見えなくなってしまいます。PC画面で確認してみましょう。
スマホの場合は自動的に横サイズを調整するので横長サイズであれば問題ありません。
おすすめサイズは、縦100〜200ピクセル 横は200〜600ピクセルです。
縦が200ピクセル以上になると画面の場所を取りすぎてしまうので縦ピクセルは200ピクセル以内に収めるとよいでしょう。
スマホ画面で表示確認
WordPressでは、ヘッダーロゴがPC／スマホともに自動で調整されて表示されますが、WordPressテーマによって表示のされ方が異なります。念の為に実際のスマホで表示確認をしましょう。
