元サラリーマンブロガーなつのプロフィール

ブログのヘッダー画像の作成ツール「CANVA」で簡単きれい!サイトが5分でおしゃれになる作り方。

こんにちは!ブログ運営半年で月20万超の元サラリーマンブロガーなつです。

ブログを開くとヘッダー画像が一番先に目に留まります。ブログ内容とともにヘッダー画像は重要な部分。

そこで、ヘッダー画像のリサイズや、初心者でもできる簡単な作り方をお伝えしていきます。

ブログのヘッダー画像作成につかうツール「CANVA」とは

ヘッダー画像を作るには、ウィンドウズにあるペイントなどでもできないこともないのですが、サイズ調整、イラストを重ねたりテキストを配置したりといろんなことができるCANVAはSNSのヘッダーをはじめブログのアイキャッチまでマルチに使えます。

Windowsのペイントソフトよりもより柔軟的にいろんなサイズやいろんな操作ができますしテキストも充実しています。

特徴:登録すると保存しておいてくれる

これが一番便利な部分で、ブログのヘッダーなど変更する際に保存してあることで、再度サイズを図る必要もなく、保存しているヘッダーをコピーして少し調整して新たに作ることも可能です。

 

CANVA(ツール)で作ったヘッダー作成例と作業内容

WordPressのテーマのヘッダーはサイズ調整もできます。しかし、サイズ感がしっくりこなかったりする場合もあるので、テーマで推奨しているサイズを最初から作り配置した方が良いです。

Lightning(無料テーマ)のヘッダー

過去に、Lightningというテーマのヘッダーデザインについて記事を書いたことがありました。Lightningはヘッダーの高さを小さくした方がスマートに見えるので以下のような習字っぽいヘッダーを作りました。

「サイズ調整」「PNG画像のアップロード&配置」などが超簡単にできるので今のところ最強ツールだと思っています。

CANVAで作れるSNSなどの画像

SNSのヘッダーやサムネイル、バナーなどほとんどの大きさの画像作成が可能です。これまでのペイントやフォトスケープなどとの大きな違いはそれぞれの大きさのテンプレートが用意されていることです。

それぞれのテンプレートには無料のものが用意されています。

Facebook投稿

soundcloudバナー

Youtubeアイコン

  • ブログバナー
  • Facebookの投稿
  • Facebookカバー
  • Facebookビデオ
  • Youtbeアイコン
  • ロゴ
  • Youtubeサムネイル
  • soundcloudバナー
  • ソーシャルメディア
  • Instagramの投稿
  • Twitterの投稿
  • ピンタレストピン
  • スライドショー動画
  • アニメーション
  • メルマガヘッダー
  • tumblr用グラフィック

もしあなたがデザインに困っているのならCANVAを試してみてください。サイズがわからなくても目的がはっきりしていたらそれ用のサイズとサンプルがあります。

⇒ CANVA公式ページへ

 

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」

【初心者必見!】THE THOR(ザ・トール)の購入特典!割引についても調査!【WordPressテーマ】


※今なら、8大購入特典をお付けしています!

 

CANVAの便利機能「サイズが自由に作れる」

CANVAにはもうひとつ便利な機能が追加されていて自分の欲しいサイズを作れるカスタムサイズがあります。

例えば、600pxと200pxで作る場合、カスタムサイズをクリックすると以下のような枠が出てきます。

600×200は今私が適当に出した大きさですが、なんと!それでもテンプレート候補が出てきますのでそのまんま利用もできますし自分で作り変えることもできます。

中には有料もありますが、無料でも優秀なテンプレートがありますので、ぜひつかいこなしてみてください。

 

ブログのヘッダーの具体的な作成方法

ここからは、CANVAを使ってヘッダー画像の作成方法をお伝えしていきます。まずはヘッダー画像の大きさを調べます。

今回は有料テーマの「THE THOR」の着せ替え02のヘッダー画像を作ってみます。ちなみにヘッダーの大きさは「Lightning」のように記載しているものもありますが「THE THOR」のような着せ替えがある場合ヘッダーの大きさがそれぞれ違います。

今回は着せ替え「02」で調整していきます。

 

  • 「THE THOR着せ替え02」・・・1240px × 500px
  • 「Lightning」・・・1900px × 600px

 

ヘッダーの大きさの簡単な調べ方
ヘッダーの大きさについては公式のページに書いてある場合がありますが、調べても出てこない時にはダウンロードした画像を「メディア」で確認する方法があります。

Lightningは推奨サイズがカスタマイズ部分に表記されています。

ここに書かれている1240×500ピクセルが画像のサイズということになります。

↓ 芸大卒のなつが作ったTHE THORのオリジナルデザインです。購入特典です。

THE THORなつ特製オリジナルデザインマニュアルプレゼント中!
今大人気のWordpressテーマTHE THORのオリジナルテンプレート6種類ができました!

このブログからTHE THOR(ザ・トール)をご購入くださった方に特典としてマニュアルをプレゼントしています。マネするだけでデザイン変更が簡単にできます。

ガーリー

シンプル
オーガニック


※残りの3種類とブログの全体像は以下の記事で見れますのでよかったらご覧ください。

⇒ 【簡単な使い方】THE THORデザインの事例集6選!初心者でも作れるアレンジを紹介!

//今なら、なつ特製オリジナルデザインマニュアル付き!\\
 

CANVAを使ったブログヘッダー作成方法

CANVAは最初に登録をしなければ使えません。アドレスとパスワードだけで簡単に登録できますので、使う前に登録を済ませておいてください。

⇒ CANVA公式ページへ

 

CANVAの登録方法

CANVAのページを開いてから、右の「登録」をクリックすると登録画面が現れます。

出典:CANVA

  • 氏名
  • メールアドレス
  • パスワード

 

3点を入力し、下の「無料で開始!」のボタンをクリックすると無料で使えるようになります。

 

本当に無料なの?

初心者の方の中にはこういった登録が不安な方もおられると思います。CANVAの場合には登録と普通に使うのは無料です。

有料のものもありますが、無料のテンプレで十分おしゃれなものが作れます。

 

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」
※今なら、5大購入特典をお付けしています!

 

ブログヘッダー作成手順(既存のテンプレートを使う場合)

ここでは、CANVAの既存のテンプレートを使ってヘッダーを作る方法をお伝えします。

  1. カスタムサイズをクリック
  2. 任意のサイズを入力
  3. テンプレートを選ぶ
  4. テキストや色を変更する
  5. ダウンロード

 

完成図はコレ!

これから作るのは以下のようなヘッダー画像です。

 

1. カスタムサイズをクリック

 

出典:CANVA

トップページの右側に「カスタムサイズ」がありますのでここをクリックしてください。すると、任意のサイズを入力する枠が出てきます。

2. 任意のサイズを入力

ここに、任意のサイズを入力します。今回作るTHE THORの着せ替え02のヘッダーなら「1240×500」Lightningなら「1900×600」と入力してください。

出典:CANVA

3. テンプレートを選ぶ

左側にテンプレート候補が出てきます。カーソル(矢印)を持っていくと、無料で使える画像には右下に「無料」と出てきます。

出典:CANVA

好みのテンプレートがあれば、画像をクリックするとカスタマイズできる場所に貼りつきます。

出典:CANVA

4. テキストや色を変更する

テキストを入力し、必要であれば色やフォントを変更していきます。王冠マークの部分は有料なので使えませんが、無料でも結構使えるものが多いです。

 

5. ダウンロード

画像が出来上がったらダウンロードをします。

右上の「パブリッシュ」から「ダウンロード」というボタンをクリックするとファイル形式を指定しダウンロードをします。

 

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」

※今なら、5大購入特典をお付けしています!

ブログヘッダー作成手順(既存のデータでオリジナルを作成する場合)

CANVAには様々なパーツがそろっています。「画像」「テキスト」「背景」「グリッド」「図形」などがあるので、その中から好きなものを選んでオリジナルを作ることもかのうです。

  1. カスタムサイズをクリック
  2. 任意のサイズを入力
  3. 背景を選ぶ
  4. 素材を選ぶ
  5. テキストとアイコンの入力
  6. ダウンロード
完成図はコレ!

これから作るのは以下のようなヘッダー画像です。ラストにアレンジもありますのでご覧ください。

1. カスタムサイズをクリック

既存のテンプレートの作り方と同じです。右側のカスタムサイズをクリックします。

 

2. 任意のサイズを選ぶ

既存のテンプレートの作り方と同じです。任意の数字を入力します。

 

3. 背景を選ぶ

左端の黒い部分にある「背景」をクリックするといろんな背景がでてきます。好きなものをクリックして貼り付けます。

出典:CANVA

 

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」

※今なら、5大購入特典をお付けしています!

4. 素材を選ぶ

このままテキストを追加しても良いのですが、すこし凝った作りにするために透過する図形を入れていきます。

左端の「素材」をクリックし好きな素材をクリックします。

 

出典:CANVA

 

素材の色を追加し透過にする

素材の図形を導入したら、次はその素材に色を追加します。今回は全体の素材が紫の花柄なので白を入れてみます。

↓ 配色に迷ったら以下の記事を参考にしてみてください、芸大卒のなつがおしゃれな配色になるようなコツをまとめてあります。

配色パターン3色だけでセンスの良いブログにする方法!気を付けるポイントとは。

 

出典:CANVA

白そのままだとキツイ色になってしまうので、透過にして後ろの花柄が見えるようにしてみます。

 

5. テキストとアイコンの入力

バックが出来上がったら、テキストとアイコンを入れていきます。左側の「テキスト」をクリックすると組み合わせたフォントといろんな大きさのシンプルなフォントが出てきます。

適当な大きさを入力すると真ん中に貼りつきますので、大きさやフォントや色を調整していきます。


出典:CANVA

フォントを変更するなら、上の窓をクリックすると候補のフォントが出てきますのでここで選び、大きさと色もおなじ部分をクリックして変更していきます。

アイコンを検索

見ると、上のあたりが寂しいのでアイコンを入れてみます。左端の「素材」をクリックし検索窓に「アイコン」と入力してください。

すると候補のアイコンがでてきます。ここでも矢印をアイコンの上にもっていくと「無料」か「有料」か出てきますので無料のものを探してください。

出典:CANVA

右のポインターで大きさを調整するとできあがります。

6. ダウンロード

右上の「パブリッシュ」⇒「ダウンロード」をクリックし、画像様式を選びダウンロードします。

完成図

上記デザインをアレンジしたヘッダー画像

これはすべてCANVAの中にある素材で作っています。もっと材料が多いので作りこもうと思えばいくらでもできます。

 

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」

※今なら、5大購入特典をお付けしています!

ブログヘッダー作成手順(自分でダウンロードした素材を使う場合)

CANVAでは、中にある素材でいくらでもおしゃれなヘッダー画像が作れるのですが、自分の気に入った画像を使うことも可能です。

↓ ちなみに素材を見つけるなら以下の記事が役立ちます!

ブログで使えるイラスト25選!フリー(無料)素材でサイトをパワーアップ!

 

  1. カスタムサイズをクリック
  2. 任意のサイズを入力
  3. 画像をアップロード
  4. 素材を選ぶ
  5. アイコンを入れる

 

完成図はコレ!

これから作るのは以下のようなヘッダー画像です。

1. カスタムサイズをクリック

既存のテンプレートの作り方と同じです。右側のカスタムサイズをクリックします。

 

2. 任意のサイズを選ぶ

既存のテンプレートの作り方と同じです。任意の数字を入力します。

 

3. 画像をアップロード

画像をアップロードはとても簡単。左端の「アップロード」をクリックして「画像または動画をアップロード」をクリックして取り込みます。

保存しておいた画像をクリックすると右の作業場所に貼りつきます。

出典:CANVA

白い枠まで画像をドロップ&ドラッグで引っ張ってサイズを調整します。

 

 

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」

※今なら、5大購入特典をお付けしています!

4. 素材を選ぶ

柄が細かく色が濃いので真ん中にフレームを入れていきましょう。「素材」をクリックして好きな素材を選びクリックします。

出典:CANVA

 

素材に色を付ける

ここで色の調整をしていきます。

出典:CANVA

5. アイコンを入れる

ここでも、テキストの上が寂しいのでアイコンを入れていきます。無料で使えるものも多いので好きなものを選んでください。

「素材」をクリックして好きなものを選びます。(アップロードしたアイコンも使えます。)

出典:CANVA

 

ブログヘッダー作成のまとめ

最近のブログのアイキャッチなどもCANVAで作っています。少し前までは、Photoscapeを使ってたのですが、ネット上でよくないような書き方をしてあったのでCANVAに変えたのです。

これまで使ってきた中で一番使い勝手が良く、やりたいことが全部詰まっている印象があります。

ブログは中身もありますがやはり見た目も良い方が滞在率もあがります。こういう無料ツールで自分のオリジナルを作ってみてください。

 

↓ このブログから大人気のTHE THOR(ザ・トール)を購入くださった方に特典をプレゼントしています。

【初心者必見!】THE THOR(ザ・トール)の購入特典!割引についても調査!【WordPressテーマ】

 

初心者だからこそWordpress有料テーマ を使うべき理由

無料テーマを使うことで時間の無駄遣いをしていませんか?

  • 思い通りのデザインにできない
  • なかなか稼げない
  • アクセス数が増えない

こんな悩みを抱えていませんか?

 

稼ぐブログにしろ趣味ブログにしろ検索の上位にこなければなかなか読んでもらえません。もしあなたが稼ぐブログを作りたいなら、初心者の時に初期投資することはとても大事なことです。

 

Wordpressの有料テーマができる5つのこと

  1. 検索上位を目指せる
  2. 見た目が綺麗でおしゃれになる
  3. 機能が豊富で出来ることが多い
  4. 会員フォームなどのサポート
  5. 有名ブロガーも有料テーマを使っている

これまでにあげた5つの有料テーマの特徴を説明していきます。

1. 検索上位を目指せる

ブログを運営していく上で対策をしていかなければいけないのがSEO対策です。検索エンジンのことを考えてブログを最適に合わせていくということがSEO(SearchEngine Optimizationの略)です。

 

  • 情報の信頼性
  • ユーザーへの役立つ情報であるか?
  • スマホ・PCなどでストレスなく使える

 

などたくさんの要因がありますが、ブログを訪問した人があなたのブログの多くの記事を読んでくれるようなテンプレートの仕組みも有料テーマでは細やかに考えられています。

 

2. 見た目が無料テーマ以上に綺麗になる

シンプルが良いか、綺麗なテーマが良いのかそれぞれの好みによります。無料テーマは必要最低限のものを備えていますがやはりシンプルすぎていずれつまらなくなってしまいます。

有料テーマはデザイン性が高く自分の好きなデザインにもカスタマイズしやすいです。

出典:THE THOR 着せ替え「01」

↓ クリックで拡大します
出典:特製THE THORオリジナルアレンジ

 

3. 機能が豊富でできることが多い

今現在新しい機能として出てきたのが「着せ替え機能」です。過去にも賢威などにはベース色とパターンがありましたが最近ではアフィリなどはっきりと違った用途で使えるように作りこんでいます。

4. 会員フォーラムなどのサポート

なにかわからないことがあった場合、相談できる場所があるだけで安心できます。ここが無料テーマと一番違う部分、有料テーマでは売りっぱなしにしない工夫がされています。

5. 有名ブロガーも多数使用

稼いている有名ブロガーと言われる人のほとんどは有料テーマを使っています。ブログ造りでは内容も非常に大事ですが、文章や扱っている分野が同じ程度ならやはり最後の勝負はテーマの構造などになります。

もしあなたが稼ぐブログを作りたいと考えているならば「有料」テーマも検討してみてください。

カスタマイズで悩んでいる時間、ブログの完成度、上位に表示するメリットなど考えると有料テーマはあなたのお役にたちます。


当ブログおすすめのWordPressテーマ!

 

WordPressテーマ「THE・THOR」

  • 高機能の最新テーマで有名ブロガーも使用
  • 着せ替え機能でいろんな用途に使える
  • 複数のブログに使える(本人のブログ)
  • 会員フォーラムやマニュアル完備

 

 

シェアしてね!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です