アドセンスで月10万円のお小遣いが欲しい人この指とまれ

千愛のレインボーアフィリエイト

ブログ構築

ブログの顔!ヘッダー画像を無料画像編集ツール【PhotoScape】で作る方法

投稿日:

ヘッダー画像の作り方

ワードプレスブログの外観デザインって最初は戸惑いませんか?

  • かっこいいヘッダーはどうやって作るんだろう?
  • 自分のブログ名の入ったヘッダー画像を作りたい。
  • みんなのブログの上に出てる大きな画像どうやって作ってるの?
千愛
よくブログのトップページに大きく出ている画像をヘッダー画像といいます。
自分でヘッダー画像って簡単に作れるの?
ユニコ
千愛
うん。無料のツールで作れるよ。

この記事では、無料の画像編集ツール『Photoscape(フォトスケープ)X』を使ってヘッダー画像を作る方法をご説明します。

ヘッダー画像はいわば、お店の看板。

自分のブログにあったヘッダー画像を作ってみましょう。

千愛
ブログのヘッダー画像以外にもTwitterのヘッダー画像やFacebookのヘッダーも作れるよ

ブログのヘッダー画像はお店の看板

私色のブログ

ワードプレスのインストールも終わり、初期設定も終わり…

さぁ、記事を書くぞ!!
ユニコ
千愛
ちょっと待って!

ブログがデフォルトのままじゃ、他のブログと差別化できません。

ブログの外観は、お店の外観です。

ぼろぼろの外観じゃどんなに美味しい料理を提供するレストランでも、お客様はご来店してくれません。

綺麗で、清潔感があって、感じが良くて、心地いい。

そんなお店がやっぱりいいですよね!

ユーザーは、あなたのブログのデザインで覚えてくれることもあります。

どこかで見たことのあるブログデザインじゃ、あれ?どこかで見たっけ?と印象に残りませんよね。

あなた色のブログを作って、「このブログ、好きだな」とブックマークしてもらえるブログの外観を作りましょう。

ブログのデザインのポイントは、あなたの好みではなくブログのジャンルに合わせ、万人受けするデザインにすることです。

ブログのメインカラーを決めよう!

イメージカラーを決める

ヘッダー画像やロゴ画像を作る前に、サイトのメインカラー、サブカラーを先に決めます。

メインカラー1色、サブカラー2色程度を決めてそれに合わせた画像を作成しましょう。

原色大辞典

原色辞典

千愛
メインカラーとサブカラーは補色を選ぶとメリハリがでてサイトの印象が締まるよ。

見出しの色や枠の色などメインカラーとサブカラーで構成していきます。

ブログの顔!ヘッダー画像を作る前の準備

さて、いよいよヘッダー画像を作っていきます。

最近は、ロゴだけのシンプルなトップページのブログも多いですが、印象的なヘッダー画像があるとぐっと記憶に残りやすくなります。

実は、私が最初にブログを作ったときは…

  • 「サイズはどうしたらいいの?」
  • 「画像はどこから探してくるの?」
  • 「どうやって切り抜くの?」
  • 「画像に文字を入れるのはどうやるの?」

な~んにもわかりませんでした。

千愛
自慢じゃないけどパソコン音痴だったの。(過去形にしてはいけないかも…)

この記事では、パソコン初心者でも簡単にヘッダー画像を作る方法を解説するのでぜひトライしてくださいね♪

ブログ内の画像の名前のおさらい

まず、ブログのトップページでそれぞれのパーツの名称についておさらいしましょう。

私のブログのトップページで説明します。

私のブログトップページ

一番上に表示されている「アドセンスで月10万円のお小遣いが欲しい人この指とまれ」はブログ説明などと呼ばれます。(AFFNGERではキャッチフレーズ)

ワードプレス一般設定キャッチフレーズ

ワードプレス管理画面から「設定」→「一般設定」のキャッチフレーズ(ブログ説明)で入力したテキストがそのまま表示されます。

その下が、ロゴ画像

ここにロゴ画像を表示するように設定しています。

その下はグローバルメニューです。

表示または非表示を選択できます。

表示する位置も下記のように任意で設定できます。

  • ヘッダー(ブログの上部)とフッター(ブログの下部)どちらか
  • ヘッダー(ブログの上部)とフッター(ブログの下部)両方

ユーザーの利便性を考えると、少なくともヘッダーにはグローバルメニューを設置することをおすすめします。

さらにその下が、ヘッダー画像です。

ブログの顔とも言えますね。

千愛
私は画像だけのシンプルなものになってます。

ユーザーの印象に残るので、ブログのイメージが伝わるような画像を選びましょう。

テキスト入れをして、ヘッダー画像内にブログタイトルを入れてもいいですね!

千愛
過去のヘッダー画像はこんな感じでした↓

過去のヘッダー画像

(ブログ初期に作ったヘッダー画像です。当時はサイトカラーが青でした)

今のヘッダー画像の方が華やかでサイトイメージとマッチしますね。

  • 「自由」
  • 「のびのびと」
  • 「パソコンで仕事」
  • 「輝く女性」

ブログで伝えたいメッセージが伝わると思います♪

ヘッダー画像1つでブログの印象は大きく変わりますよね!

では、どこでロゴ画像やヘッダー画像を設定するのか確認しましょう。

お使いのワードプレスのテーマによって、設定する場所は異なりますので、ご利用のテンプレートに付属するマニュアルでご確認ください。

千愛
参考に使用中のAFFINGER5(WING)で説明します。

AFFINGERの場合は、ワードプレス管理画面から「外観」→「カスタマイズ」でデザインの設定ができます。

AFFINGER5カスタマイズ

「ロゴ画像」「ヘッダー画像」はここから設定や変更ができます。

ロゴ画像は、あらかじめ作成したロゴ画像をアップロードするだけです。

ロゴ画像を作る時の注意点は、背景が透過になるPNG形式で作成すること。

AFFINGERロゴ画像

ヘッダー画像も同じく、あらかじめ作成した画像をアップロードします。

自分のブログのヘッダー画像のサイズを確認する方法

千愛
気になるのは、ヘッダー画像のサイズですが、AFFINGERの場合は推奨サイズを教えてくれるので、そのサイズで作ればOKなんです。親切でしょ??

ちなみにAFFINGERは2200×500ピクセルと大き目ですね。

AFFINGER5ヘッド画像サイズ

通常は、幅(横)1000px、高さ(縦)は300~400pxが多いです。

ブログのテンプレートによっては、ヘッダー画像の推奨サイズがマニュアルに記載されているかもしれませんね。

もしくは、検索エンジンで

「テンプレート名 ヘッダー画像 サイズ」と検索するとわかるかもしれません。

試しに、SEOに強いと評判の「賢威」で調べてみたら、すぐにわかりました。

• 幅:1200px

• 高さ:300~450px

愛用者の多いテンプレートなら誰かが記事を書いていてくれる可能性もありますが、新しいテンプレートなどはネット上で情報がみつからないかもしれませんが、大丈夫!

参考

Twitterのヘッダー画像サイズ…1500px×500px

Facebookのヘッダー画像サイズ…820px×360px

ヘッダー画像などのサイズが測れる無料ツール「Page Ruler Redux」

あなたのテンプレートのヘッダー画像サイズがわかるツールがあるんです!

Google Chromeの拡張機能 「Page Ruler Reduxです。

このツールは、表示しているページで何かのサイズを測りたいときに便利ですよ!

【Page Ruler Redexの使い方】

step
1
Google Chromeを開き、「Page Ruler Redex」で検索。

グーグルPage Ruler Redex

step
2
Chromeウェブストアで「Chromeに追加」をクリック

ChromeウェブストアでPage Ruler Redux検索

step
3
Google ChromeのツールバーにPage Ruler Redexのアイコンが表示される

ツールバーPage Ruler Redex

step
4
計測したいページを開き、アイコンをクリック

Page Ruler Redexでヘッダー画像のサイズをはかる

+のカーソルを動かして計測したい部分を四角で指定します。

Width=横、Height=縦

上の方に計測結果が表示されます。

Page Ruler Redex結果

私のブログのヘッダー画像を計測してみたら、横:1514px 縦:249pxでした。

ざっくり1500×250ですが、大き目に作ったほうが安心です。

あとで、リサイズする時に大から小は問題ありませんが、小から大は画像が荒くなったりするので、迷ったら大きめに作りましょう。

無料画像サイトでヘッダー用画像素材をゲットする

無料画像

これで、作成するヘッダー画像のサイズが分かったので、画像を選びます。

画像は、無料画像サイトで入手できます。

千愛
私の愛用無料画像サイトはこちらです。

【おすすめ無料画像サイト】

千愛
私はPhoto ACのプレミアム会員ですが本当に便利です!!

Photo ACのプレミアム会員になった理由

  1. ダウンロード待ち時間なし
  2. 1日のダウンロード数に制限なし
  3. 複数画像まとめてダウンロードできる
  4. プレミアム会員限定のプレミアム素材もダウンロードOK
  5. イラストAC・シルエットACでもプレミアム会員となる
  6. 無料会員は1日5回までの検索が無制限になる
千愛
Photo ACのプレミアム会員費はだんだんと上がっていくので今、会員になると値上げ後の入会時の価格で更新されます。
本当に値段上がってるよね…
ユニコ
千愛
私がプレミアム会員になったときは今の3分の1くらいの値段だった!早めに会員になったほうがお得。

無料画像サイトはいくつかありますので、サイトのイメージにあった画像を探してください。

無料であっても、クレジット表示が必須のサイトもあるので、必ず利用規則を確認してから利用しましょう。

  1. 「商用利用OK」
  2. 「無料」
  3. 「クレジット不要」

この3点は絶対に確認!!

※無料サイトであっても、PRで有料画像サイトの画像も表示されることがあります。

画像をダウンロードするときはサイズに注意です。

ヘッダー画像用は大きめサイズが必要です。

Pixabayの例ですが、ダウンロードサイズが選べます。

Pixabay画像サイズ

640×445 アイキャッチ画像用

1280×890  ヘッダー画像用

1920×1335 大きめのヘッダー画像用

4000×2782 背景画像など

ここでは、1280×890で十分ですね。

ダウンロード時にサイズが選べないものは自分でリサイズします。

【無料画像編集ツール】PhotoScapeでヘッダー画像を作る方法

PhotoscapeX

用意した画像素材を加工してヘッダー画像を作ります。

ここでは、無料で使える画像編集ツールのPhotoScape X(フォトスケープ)を利用します。

千愛
私のアイキャッチ画像はPhotoScape Xで作ってるよ。大好きすぎる、このツール♪

PhotoScape Xのダウンロード

無料でリサイズ、切り抜き、テキスト入れなど画像編集ができるソフトを利用します。

WindowsでもMacでも利用可能です。

PhotoScape Xをダウンロード

お使いのPCをチェック!

Windows 10 または、Macユーザーは Photoscape X

Windows 98 または、 Meユーザーは Photoscape

千愛
私は、PhotoScape Xを使ってます!

photoscapeダウンロード

PhotoScapeの機能

PhotoScape画面

【PhotoScapeで出来ること】

  • 写真編集
  • コラージュ
  • GIFアニメetc.

【Photoscapeの画像編集機能】

  • リサイズ、切り抜き
  • 画像を明るく、または暗くする
  •  フィルターをかける
  • 光で印象変化
  • フレーム
  •  矢印&ラインいれ
  •  枠入れ
  •  図形&吹き出し
  • テキスト
  •  モザイク&ぼかし
  •  拡大鏡
千愛
これだけの機能で無料ですからねっ!!

有料のPRO版もありますが、無料版で十分です。

PhotoScapeは直感的に使えるので、いろいろと実際にいじってみるとすぐに使い方がわかります。

このマニュアルでは、ヘッダー画像に使用する操作は説明しますが、全機能説明するとマニュアル一冊できてしまうので…。

疑問点などありましたら、お気軽にお問い合わせください♪

では、いよいよヘッダー画像のサイズを変更しますよ。

PhotoScape Xでリサイズ&切り抜きの仕方

まず、PhotoScape Xを起動し、画像をドロップまたはフォルダーから開く。

PhotoScapeリサイズ

リサイズしたい場合はサイズ変更です。

比率はそのままにただ単に小さくしたいなら、「縦横比を固定」をオンにしておきます。

真四角を、長方形にするなど形ごと変える場合はオフにします。

変更したいサイズを入力したら、「適用」で完了です。

もとの画像サイズは1280×890を、1000×300にしてみました。

PhotoScapeリサイズゆがむ

千愛
でも…サイズを変える時は単にリサイズするとゆがむんですよね…。

完全につぶれた絵になってます。

ゆがみの少ないリサイズ方法

  1.  まず、大まかに切り取る
  2. そして、サイズ変更する

これでずいぶんとゆがみが改善されます。

では、実際にやってみましょう。

PhotoScape切り抜き

ここでは、1000×300に変更したいとして、それに近い値で画像の印象を考慮しながらぎりぎりで切り取ります。

切り取り後のサイズは、1081×408でした。

これをリサイズします。

PhotoScape切り抜き後

サイズ変更で、変更したいサイズを記入し、適用をクリック。

Photoscapeでサイズ変更

ずいぶんとゆがみが改善されましたね!

これでヘッダー画像ができました。

このままでもいいですが、ブログタイトルや説明などを入れたい場合は、テキスト入れをします。

PhotoScapeテキスト入れ

テキストをクリックすると、字体やカラー、サイズ、効果などが選択できます。

複数のテキストを入れる場合は、1回ずつテキスト入れの作業を繰り返します。

これが完成したヘッダー画像です。1000×300で作りました。

ヘッダー画像例

千愛
慣れると10分程度で出来ますよ!

自分ではヘッダー画像なんて作れない人はオーダーしよう!

ココナラヘッダーオーダー

どうしても、自分ではできない場合は、ココナラで500円~オーダーできます。

千愛
下記の招待コードを利用すると、300ポイントもらえるので300円引きでオーダーできますよ。

つまり、200円でヘッダー画像が出来るんです!!

千愛のココナラ招待リンク】から千愛の招待コード【ay18j3】を入力すると300ポイントプレゼント!!

ココナラで、ヘッダー画像と検索するといろいろな人のオファーがチェックできます。

ヘッダー画像以外にもブログのアイコンやSNSアイコン、吹き出し用のアイコンなどココナラでオーダーすると便利です。

私のアイコンもココナラです♪

千愛千愛笑顔千愛ウインク

千愛全身千愛全身

千愛
複数ポーズでオーダーしました♪普段、本当にこんな感じのファッションです。パール大好き♪

まとめ

夕日の沈むビーチで散歩する親子

この記事のまとめ

  • ブログの顔ヘッダー画像のサイズはお使いのテンプレートによって異なる
  • 無料ツールPhotoScapeでヘッダー画像は簡単に作れる
  • 自分でヘッダー画像を作れない時はココナラでオーダーしよう

ヘッダー画像以外にもPhotoScapeはアイキャッチ画像やバナーなど画像加工が簡単にできますよ。

ぜひぜひ使ってみてくださいね。

千愛メルマガ登録ページ

【千愛メルマガ】月10万円稼ぐブログレシピ

  • この記事を書いた人
  • 最新記事
千愛

千愛

オーストラリア在住主婦アフィリエイター。3人の子供を育てながらできる仕事を探していたらアフィリエイトに出会い、会社員並みのお給料を稼いでいます。 このブログでは、私と同じように子育てのスキマ時間を使いお小遣い稼ぎをしたい人に、アドセンスやブログで稼ぐためのノウハウをお届けしています。ほぼ放置で稼げるブログを作るのが得意です♪ ブログで稼ぐためには誰かにサポートしてもらいながら進めるのが、一番効率的に稼げます。もし、あなたがアドセンスやアフィリをやってみたいけど、やり方がわからないなら、私が全力でサポートします!! いつでも、お気軽にお問い合わせくださいね♪ マンツーマンコンサルに全力投球中!! 【アドセンス実績】 月収47万円達成 【物販アフィリエイト実績】 月収10万円達成 【最高月収】 60万円達成

-ブログ構築

Copyright© 千愛のレインボーアフィリエイト , 2019 All Rights Reserved.