超簡単ヘッダー作成方法！無料でおしゃれなCanvaの使い方

私はテキスタイル、衣装、ファッションデザイナーという、アナログ手作業が多い分野の人。

でも自分の世界観を即！表現したいのでヘッダー画像デザインは自分でやってます。

そしてこの後さらにカッコイイものにしたいとプロに外注するとしても！

「こんなのやってください」と具体的に言えると誤解なくすいすい進みますよね～

プロに頼む側として抽象的な要望はNG!

 

まずは自分の世界観をさっと表現してみよう

無料のCanvaでブログ初心者さんがおしゃれなヘッダー画像を作る！

早速グラッフィックデザインを無料で簡単作成するツールCanvaを使って自作しちゃいましょう！

Canvaへ

 

パソコンだと仕上がりがダンゼン早いのでここではパソコンでの使い方を。

まずは上のボタンから無料アカウント登録。

そして上のメニューバーのホームにいくとこのような画面に。

ヘッダ―画像のサイズ選択！

まずはヘッダー画像サイズを選択。

画像サイズは媒体によって違うので、あったものを選ぼう。

例えばTwitterヘッダー画像作成の場合。

1. デザインの作成をクリック
2. 「Twitterヘッダー」など一覧から選択
3. または検索します

ワードプレステーマJinでヘッダー画像を作成する方法

ワードプレステーマは『JIN』。

では一緒に作り方をみてみましょう。

既存の画像サイズではないのでカスタムサイズを設定。

 

JinのPC表示用ヘッダー画像サイズは2400横幅×800縦幅px。

1. 「デザインを作成」をクリック
2. 横縦幅を入力
3. 「新しいデザインを作成」をクリック

 

そうすると新しいデザイン作成画面に。

ヘッダー画像のベースの色を決めよう

まずはベースの色をきめよう。

ブログのテーマカラーがいいでしょう。

私はグレーとピンクにしてます。

黒だとそれぞれのスマホやPCの設定でいろいろな黒に見えてしまう。

ただの穴にも見えてしまうので一段あげてグレーに。

いいです(笑)

 

アクセントカラーはピンク。

ベースが紫でアクセントに黄色もいいけど‥

公の場だからここはみんなが落ち着く色の方がいいよね。

他にベースが白だときれいに決まって好感度アップ。

 

 

テーマカラーきめたら『にじにじ』をクリック。

カラーははじめに決めておかないと迷って迷って仕上がりが超遅くなるよ！

1. 「新しい色」の◎を動かして好きな色に設定
2. デフォルトカラーにあればそれを選んで

 

1. 好きな色をつくったらこの欄がその色になります
2. 使用中のカラーをクリック
3. 画面全体がベースカラーになるよ

 

画像をいれてみよう！

ここでテキスト分のスペースをあけておくのが肝心！

1. 左のメニューは何もしなくても「アップロード」になります
2. デスクトップなどにある画像をヘッダーにドラッグ＆ドロップ
3. 画像の大きさ・位置決定

画像をドラッグ＆ドロップで位置を変更。

画像を⇒の方にひっぱって大きさを変更。

 

同じように画像を3ついれました～！

画像はハンドメイド作家さんなら自分の作品で。

画像の著作権が心配なら左メニューのCanvaテンプレートをつかってね！

テキスト分の余白を取って画像を設置

さきほど空けておいたテキスト分のスペースを使ってテキストを挿入。

私はピンクのアクセントカラーをいれるよ。

テキストを入れるための四角形を挿入。

1. 左メニュー素材をクリック
2. 図形を選択

 

1. 図形を選択したら欄が図形になってますよ～
2. 四角形をクリック
3. 画面に四角形が！
4. 拡大縮小できない四角形もあるのでこのマークがついてるか注意

 

1. ドラッグ＆ドロップで位置を決め四隅をあやつって好きな大きさに
2. 四角形をはみださせても抜け感あり。これはまったくのお好みだけどわたしはきっちり枠にはまっていないデザインがすきなので

 

1. カラーをクリック
2. 新しい色をクリック
3. カーソルをうごかして好きな色に決定
4. 色の名前とカラーコードがひと目でわかるWEB色見本原色大辞典を使う場合はカラーコードを選んでココにコピペ
5. 色が変わった！

テキストをいれてみよう

1. メニューからテキストをクリック
2. 3つの大きさから一つクリック。これは字の大きさが違うだけであとから縮小拡大できます。下のテンプレートから選んでもカッコイイよ！
3. 『見出しを追加』がでたよ～！

 

自分のテキストに置き換えよう

でも‥このままだと読みずらい。

こなれてない。

 

1. テキストを全選択して
2. 左揃えに
3. 文字の色をかえよう。フォントを変えたいときはこのタイミングでかえよう
4. 白にしてみるよ！

 

イイ感じ！

 

サブテキストを追加

1. 左メニューから『小見出しを追加』か『本文を追加』を選択。字の大きさがちがうだけ
2. サブテキストを書き込みます

このままだとのっぺりしてつまんない‥

文字を回転させよう！

「15年」「ファッション史専門学校！」と言う部分を消してスペースをいれておくよ

1. テキストボックス追加して太字で「15年」といれる
2. テキストボックスを回転させる

「ファッション史専門学校！」も追加。

今度はフォントサイズを大きくして見よう。

シンプルにリズムがついた！

ヘッダー画像にボタンを追加！

私は後で自作のボタンを追加しています。

っていってもハコだけ。

っていうか番号とを黄緑にしたよ。

ピンクは好きだけど全面ピンクで見えなかったね‥

最初から黄緑にすればよかったんだけどポリシーに反するから(笑)

1. 左メニュー『図形』から
2. 矢印を選択
3. すると矢印が挿入
4. カラーパレットで色を変えて
5. 透明度もかえてオシャレにするよ～
6. カーソルを左右に動かしてスケスケにしてみよう。ここではチョット下の絵が透けるくらいに

 

ここにテキストをいれるよ。

1. 左メニューのテキストから挿入できました！
2. 今度は『素材』を選んで
3. 「手」を検索
4. 一つ選んでクリック

完成したヘッダー画像をダウンロードする

デザインできたらデスクトップなどへダウンロードしよう。

1. 「ダウンロード」をクリック
2. 「ファイルの種類」から今回は軽いJPGを選択
3. 「ページを選択」をクリック
4. ダウンロードしたい1ページのみクリック
5. 「完了」をクリックすると任意の場所にダウンロードされるよ！

Jinのヘッダー画像にリンクを貼って（なんちゃって）ホームページっぽく

続いてワードプレスそれぞれのテンプレートのマニュアルを見ながらヘッダー画像のリンク先設定します。

このブログはワードプレステーマJINのブログテンプレート。

オシャレでよみやすいブログを書いているTwitterのフォロワーさんにテーマを聞いたら「JIN」だったからマネ。

JINマニュアルの中のヘッダー画像を設定するを参考に。

これで作業はおしまい。

ヘッダー画像をどこでもクリックしたら任意のページに飛ぶようになってます。

なんか本格的になっちゃった！

https://aoki7.com/site-map/