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

スポンサーリンク
ロゴデザイン

 

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

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

 

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

 

完成見本

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

 

PCで見たイメージ

ヘッダー画像完成図(PC)

 

スマホで見たイメージ

ヘッダー画像完成図(スマホ)

 

 

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

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

 

 

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

 

ヘッダー画像作成

 

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.

 

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

PC版「Canva」の使い方とデザインの基本【初心者向け】
チラシやポスター、バナーなどを簡単に作れるデザインツール「Canva(キャンバ)」の使い方を分かりやすく解説しました。ショートカットやテクニックなども紹介しています。

 

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

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

 

canvaテンプレートを使う

canvaテンプレートサイト

 

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

 

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

 

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

 

時短のコツはcanvaテンプレートを利用すること。

 

 

LOGO

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

 

ロゴを選択

左メニューのロゴを選択

 

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

 

 

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

今回選んだデザインテンプレート

 

 

デザインを選ぶポイント

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

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

 

自分のイメージに合った文字・シェイプかどうかを判断して選ぼう。

 

 

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

 

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

 

テンプレートを開く

 

 

canva編集画面で編集する

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

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

 

 

テンプレート編集画面

 

画像編集後

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

画像編集後のイメージ

 

 

画像編集のポイント

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

 

背景のある元デザイン

↓↓↓

背景を無くした画像

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

 

文字配置を変更する

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

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

 

レイアウト変更例

 

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

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

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

 

完成画像をダウンロード

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

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

 

ダウンロードボタンを押す

 

 

WordPressヘッダー画像設定

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

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

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

 

WordPressメディアに保存する

 

 

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

メディア

 

 

画像サイズを調整する

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

 

 

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

画像のカット

 

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

画像の切り抜き

 

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

 

画像サイズの調整

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

画像サイズの調整

 

画像サイズの見方は

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

です。

 

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

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

 

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

 

縦が200ピクセル以上になると画面の場所を取りすぎてしまうので縦ピクセルは200ピクセル以内に収めるとよいでしょう。

 

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

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

 

486×180ピクセル

スマホ画面の見え方

270×100ピクセル

 

ヘッダー画像設置

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

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

 

▼Cocoon公式サイト▼

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

 

 

この記事を書いた人
ganchan69
Wordpress de アフィリエイト運営者。ネットショップ運営・ウェブ制作との兼業アフィリエーターです。
ganchan69をフォローする
ロゴデザイン
スポンサーリンク
ganchan69をフォローする
WordPress DE アフィリエイト

コメント