５分で上手に作れる！WordPressヘッダー画像の作り方

今回、canvaという画像編集の神ツールを使って５分以内にヘッダー画像を作る技を発見したのでご紹介します。デザインにこだわる必要はありません。

文字ではなく画像にするのが今回の目的です。

この機会に５分ヘッダー画像作成法をマスターしてみませんか？

完成見本

ヘッダー見本です。文字だけではありますがフォントが変わるだけで文字と比べても完成度がグッと上がります。

PCで見たイメージ

スマホで見たイメージ

文字を画像にして斜めにしただけじゃん！

ええおっしゃるとおり。５分もかからない予感がプンプンしてきますね。

それではヘッダー画像を作っていきましょう。

ヘッダー画像作成

canvaを使う

今回、ブラウザ上で画像編集が簡単にできるcanvaを使います。もしcanvaを使ったことがない方がいらっしゃったら無料サービスですのでこの機会に使ってみてください。

▼ canva公式サイト▼

Collaborate & Create Amazing Graphic Design for Free – Canva

Create beautiful designs with your team. Use Canva's drag-and-drop feature and layouts to design, share and print business cards, logos, presentations and more.

www.canva.com

▼ canvaの登録方法と使い方 ▼

PC版「Canva」の使い方とデザインの基本【初心者向け】

チラシやポスター、バナーなどを簡単に作れるデザインツール「Canva（キャンバ）」の使い方を分かりやすく解説しました。ショートカットやテクニックなども紹介しています。

saruwakakun.com

クラウド保存されるので外出先からでも保存したデザインを開いて作ることができます。

フォトショップやイラストレーターなどの画像編集ソフトをパソコンにインストールする必要も一切ありません。

canvaテンプレートを使う

すでにcanvaに登録してログインしている状態であれば以下のURLからcanvaテンプレートがご利用いただけます。

Design Templates - Canva

Create stunning designs even if you're not a designer with our range of premium templates.

www.canva.com

一からデザインを作るのではなくこのテンプレートを使ってヘッダー画像を作成します。

LOGO

canvaテンプレートにはポスター・ニュースレターなどテンプレートの種類がありすぎて選びづらいので左メニューからテンプレート種類 Logos を選びましょう。

左メニューのロゴを選択

これで会社ロゴやブランドロゴのテンプレートだけを表示させることができます。デザイン選びの時間を減らすのも今回のポイントです。

今回選んだデザインはこちら。そのまま画像をクリックします。

デザインを選ぶポイント

文字以外の背景画像は使用しませんのでデザイン全体を見て選ぶ必要はありません。

使用するのは、文字とシェイプだけです。

選んだテンプレートを開く

下画面が開くので
画面右下の緑ボタン　Use this template をクリックします。

canva編集画面で編集する

いよいよ画像編集。下画像のようなcanva編集画面が開いているはずです。

編集方法はいたって簡単で文字にカーソルを合わせてダブルクリックして文字を打ち変えるだけ。

画像編集後

文字を変更して配置を調整しました。

画像編集のポイント

背景画像は削除・色は変更する

背景のある元デザイン

↓↓↓

このように背景画像を削除して文字の色を変更することができます。

文字配置を変更する

レイアウトは元デザインのままでもいいですが、サイトロゴはほとんどの場合横方向ですよね。

その場合は、レイアウトを横方向に変更しましょう。

画像の大きさは気にしない

画像編集画面は編集しやすいように大きく表示される場合もあり実際のサイズとは異なります。

またWordPressに画像挿入する際にサイズや位置を調整するのでcanvaでは画像サイズは気にしないで大丈夫です。

完成画像をダウンロード

編集完了したらダウンロードします。

canva編集画面右上のダウンロードボタンを押してPNGファイルで保存します。

WordPressヘッダー画像設定

メディアライブラリにアップロード

ヘッダー画像を作成したらWordPressのメディアに画像をアップロードします。

WordPress管理画面を開いて左メニューのメディアを選択します。メディアライブラリが表示されたら先ほど保存したヘッダー画像ファイルをドラッグしてアップロードします。

アップロードすると下画像のように一番左上に登録した画像が表示されます。

画像サイズを調整する

登録されたヘッダー画像をクリックします。ヘッダー画像下にある画像を編集と書かれたボタンを押します。

下画像のように画像編集画面に移ります。画像上にマウスを使って必要な箇所だけドラッグしたまま枠を囲うように左上から右下に移動させます。

範囲を決めたら左上のクロックボタン（切り抜き）を押します。

保存ボタンを押して切り抜き完了です。

画像サイズの調整

画像を切り抜いたあとに画像サイズを確かめてみます。

画像サイズの見方は

横ピクセル数　× 　縦ピクセル数

です。

ヘッダー画像はサイト表示をして一番最初に表示される画像ですからあまり大きいと下の投稿記事が見えなくなってしまいます。PC画面で確認してみましょう。

スマホの場合は自動的に横サイズを調整するので横長サイズであれば問題ありません。

おすすめサイズは、縦100〜200ピクセル 横は200〜600ピクセルです。

ヘッダー画像サイズによるスマホ画面の見え方

縦横比を保ったままリサイズした場合のスマホ画面での見え方をシミュレーションしてみました。

ヘッダー画像設置

WordPressテーマCocoonではヘッダーロゴを選択するだけでPC／スマホともにきれいに表示されます。

その他のテーマはそれぞれ設定方法が違いますのでテーマの仕様に沿って設定してください。

▼Cocoon公式サイト▼

Cocoon

SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100％GPLテーマです。

wp-cocoon.com