ブログに最初に訪れる人がまず目にするのはヘッダー画像です。ヘッダー画像はサイトの看板のようなもの。
訪問者はヘッダー画像を見て『なんかオシャレなサイトだなー』とか『このサイトはダサいなー』とか、そういった判断を瞬時にされてしまいます。
しかし、初心者の方が最初からハイクオリティなヘッダー画像を作ることは困難だと思いますし、ブログの中身を充実させる方にも時間がかかるため、なるべく簡単にそれなりのクオリティのヘッダー画像を作成したいですよね。
そこで今回の記事では、WordPressブログのヘッダー画像を無料で簡単に作成する方法を分かりやすく解説します＾＾
サイトにオリジナリティを出すためにも、ぜひヘッダー画像を作成してみてくださいね。
もくじ
良いヘッダー画像を作成するために
良いヘッダー画像の条件として、下記のことが挙げられます。
・サイトの内容と合っているかどうか
→例えば、サイト内ではお花のことを書いているのに、ヘッダー画像が料理の画像だったら合っていないですよね。
ミスマッチなヘッダー画像だとおかしいので、サイトの内容とはなるべく合うようにしましょう。
・ぱっと見てキレイか
→見るからに下手なヘッダー画像だと、サイトの中身も大したことないのかなと思われてしまうので、洗練されたキレイなヘッダー画像が良いです。
凝ったものを作らなくても、今回ご紹介する作成方法で作成していただければ、簡単にキレイなヘッダー画像が作れます＾＾
・どんな情報を発信しているサイトかひと目で伝わるかどうか
→サイトのタイトルやサブタイトルなどもヘッダー画像に入れ、このサイトではどんな情報を発信しているのかを伝えてあげましょう。
・サイト全体の雰囲気と合っているか
→ヘッダー画像の色やデザインがサイト全体の雰囲気と合っていないとおかしいので、そのあたりも考えて作成しましょう。
ヘッダー画像作成に必要なもの
ヘッダー画像作成にあたって必要なものは2つあります。
1つはフリーソフトのPhotoScape。このソフトは画像の大きさを変えたり文字を入れたりといった加工編集がとても簡単に操作できるので、初心者の方にもオススメです。
PhotoScapeを使うことで簡単にヘッダー画像を作成することができます＾＾
あらかじめインストールしておきます。
そしてもう1つはヘッダー画像に使う素材です。
素材は、無料のものでOKです。無料素材サイトから好きな画像をダウンロードしておきましょう。
こちらのサイトだと、ヘッダー画像用の画像がたくさんそろっているので便利です。
950×250のサイズをダウンロードしておくと、そのまま使えて楽です。
→ぷくっと
その他の無料素材サイトとしてはこちらが画像の種類が豊富で便利ですね。
あらかじめフリーソフトのPhotoScapeと、ヘッダー画像に使用したいフリー素材をダウンロードしたら準備OKです。
ヘッダー画像作成の手順
準備ができたらヘッダー画像を作成していきましょう！
まずは、950×250のサイズの画像を使用して解説していきます。
画像をPhotoScapeに表示させる
まずはPhotoScapeを起動し、『画像編集』をクリックしてダウンロードしておいた画像を表示させます。
画像をドラッグしても表示できますし、左側から選択してもOKです。
表示できました。
文字を入れていく
画像に文字を入れていきます。
左下の方にある『オブジェクト』→『T』で文字を入れることができます。
テキストの中に文字を入力していきます。
文字を入れてフォントの種類や文字サイズ、色などを選んで『OK』をクリックすると画像に文字が表示されます。
文字は、カーソルを合わせて移動させることができます。
このままだと文字が見づらいので、文字の後ろに白いラインを入れました。
白いラインは『オブジェクト』の中の右側にある■や●から設定できます＾＾
一度文字を消し、ラインを引いてまたその上に文字を乗せればOKです☆
右側の『保存』をクリックして完了です。
画像をダウンロードする際に、あらかじめヘッダーサイズのものをダウンロードしてしまえば、PhotoScapeでは文字を入れるだけなのでとっても簡単に、10分もあれば完成すると思います♪
ヘッダー画像が完成したらWordPressサイトに入れていきます。
オシャレな文字を入れるには？
ヘッダー画像に入れる文字も重要ですね。デフォルトで入っている『ゴシック体』などを使用するよりも、かわいらしい文字やオシャレな文字を入れたほうが印象が良いです。
オシャレな文字にする方法は2つあります。
1つはオシャレなフォントをパソコンにダウンロードし、PhotoScapeでテキストを入力する際にフォントの種類を選択する方法。
もう1つはロゴが簡単に作れるsquarespaceというサイトでロゴを作成して画像化し、それをヘッダー画像に入れる方法です。
フォントをダウンロードして使用する場合
フォントフリーというサイトで色々な種類のフォントが無料でダウンロードできます。ヘッダー画像に使いたいフォントを選んでダウンロードして使ってみてください＾＾
ダウンロードし、パソコンにインストールしたあとは、PhotoScape内で使用することができます。
squarespaceを使用する場合
squarespaceを使用して簡単にロゴを作り、ダウンロードしてヘッダー画像に追加することができます。
『LOGO NAME』のところに好きな文字を入れ、右の→をクリックします。
オシャレなフォントのロゴが作成できます＾＾
左下の『SEVE LOGO』をクリックし、画像をダウンロードします。
保存した画像はPhotoScapeで使用することができます。
以上の方法を使えば、オシャレな文字をヘッダー画像へ入れることができます。
画像のサイズを変える場合
ダウンロードした画像が大きいサイズで、そこからヘッダー画像用にサイズを変える方法を解説しますね。
こちらでは、1280×853の画像をヘッダーサイズの950×250にして、文字を入れるという流れでいきます☆
まず『リサイズ』から幅の長さを変えていきます。
幅を『950』にし、『OK』をクリックします。
見た目は変化ありませんが、きちんと変わっています。
次に、『トリミング』を使って高さを250にしていきます。
トリミングした部分は上下に変更可能です。ヘッダーに入れたい部分をトリミングしてください。
トリミングする場所が決まったら『トリミング』をクリックします。
すると、画像をヘッダーサイズの950×250に変更できました。
こちらに文字を入れるところからは、先ほどのやり方でOKです＾＾
文字を入れたら『保存』をクリックして完了です！
ちなみに、『ホーム』の『フィルター』を使うと、画像を絵画風に加工したりガラススタイルにしたり、色々楽しめるのでやってみてください＾＾
まとめ
ヘッダー画像はPhotoScapeというフリーソフトを使えば、初心者の方でも簡単に作ることができます。
基本的にはこの流れでヘッダー画像が作成できます。
・PhotoScapeをインストール
・素材をダウンロード
・素材のサイズによってはトリミングする
・文字を入れる
・保存
これだけでヘッダー画像が作れます☆
PhotoScapeは、画像加工ソフトの中でもかなり使いやすいので、ぜひこの方法でヘッダー画像を作成してみてくださいね♪
