今回はブログでのヘッダー画像を作成する方法についてせつめいしたいと思います。
ヘッダー画像とはブログの上部にあるこのブログでいうところの↓の画像です。
![[Tags] button-only@2x photoscapeでヘッダー画像を作成する方法](https://sidebisfree.com/wp-content/uploads/2017/06/default_718509c8d3e6481f03bbdd2fcd3b42db.jpg)
photoscapeというソフトで簡単にヘッダー画像を簡単に作ることができるので、今回しっかりヘッダー画像の作り方を覚えてしまいましょう。
photoscapeをダウンロード・インストール
まずはphotoscapeをダウンロードしましょう。photoscapeとは写真を簡単に加工できる画像処理ソフトです。
こちらのソフトを使えばブログのヘッダー画像を簡単に作成できるので、ダウンロード、インストールしておきましょう。
photoscapeのダウンロードはコチラ
photoscapeでヘッダー画像を作成
それでは早速photoscapeで画像を作成してみましょう。
![[Tags] button-only@2x photoscapeでヘッダー画像を作成する方法](https://sidebisfree.com/wp-content/uploads/2017/06/フォトスケープ.jpg)
photoscapeを起動して「画像編集」クリック。
![[Tags] button-only@2x photoscapeでヘッダー画像を作成する方法](https://sidebisfree.com/wp-content/uploads/2017/06/2017y06m26d_202825697.jpg)
画像編集画面が表示されるので何でもいいので、パソコンにある画像ファイルを選択します。
![[Tags] button-only@2x photoscapeでヘッダー画像を作成する方法](https://sidebisfree.com/wp-content/uploads/2017/06/ヘッダー画像1.jpg)
左下のメニューから「オブジェクト」から矩形モード(赤枠で囲った四角いアイコン)にして画像を元の画像を覆いかぶせるように選択しましょう。
![[Tags] button-only@2x photoscapeでヘッダー画像を作成する方法](https://sidebisfree.com/wp-content/uploads/2017/06/ヘッダー画像2.jpg)
画像を覆いかぶせたら赤枠の「写真+オブジェクト」をクリック。
「オブジェクトがフレームの範囲を超えています。すべてを含める為には、写真を拡大する必要があります」にチェックを入れてOKをクリック。
![[Tags] button-only@2x photoscapeでヘッダー画像を作成する方法](https://sidebisfree.com/wp-content/uploads/2017/06/ヘッダー画像3.jpg)
右下の「ホーム」の項目にあるリサイズをクリック。
リサイズのウィンドウが出てくるので幅と高さを選択しましょう。
私はリファインSNOWのテンプレートを使っているので幅は1000ピクセルに設定しています。テンプレートによって幅は異なるのでリファインSNOW以外のテンプレートを使用している方は自分のテンプレートの幅を合わせて設定しましょう。
高さに関しては余りに大きくしていると不格好になるのであまり高くないようにしましょう。個人的には高さは150ピクセル~250ピクセルが妥当かと思います。
(このブログの画像は高さ250ピクセルで作成しているます)
これでヘッダーの下地が完成しました。これに画像を追加します。
今回このブログのヘッダー画像は写真ACというフリー画像サイトから手に入れた画像を使用しています。(↓の画像です)
![[Tags] button-only@2x photoscapeでヘッダー画像を作成する方法](https://sidebisfree.com/wp-content/uploads/2017/06/274122b394996dcc766774e82f1bdf0e_s-1.jpg)
こちらの画像を使ってヘッダー画像を作っていきます。
![[Tags] button-only@2x photoscapeでヘッダー画像を作成する方法](https://sidebisfree.com/wp-content/uploads/2017/06/ヘッダー画像4.jpg)
まずオブジェクトの項目にあるPhoto(赤枠の写真の絵アイコン)をクリックして、今回使用する画像を選択します。
Photoのウィンドウが出てきたらその中の「リサイズ」をクリック。
リサイズのウィンドウが出てくるので、幅を下地と同じ1000ピクセルに設定しましょう。
高さに関しては画像に合うように調節して頂ければOKです。(今回は437ピクセルにしてあります)
![[Tags] button-only@2x photoscapeでヘッダー画像を作成する方法](https://sidebisfree.com/wp-content/uploads/2017/06/ヘッダー画像5.jpg)
それが終わったらphoto項目にあるアンカーをX「0」Y「0」に設定します。
これをすると下地のところに画像がピッタリくるようになります。
このままだと下地の上に画像があり、下地と画像がどのような感じになっているかわからないので、不透明度を下げると下地と画像のバランスを確認します。
![[Tags] button-only@2x photoscapeでヘッダー画像を作成する方法](https://sidebisfree.com/wp-content/uploads/2017/06/ヘッダー画像6-1.jpg)
![[Tags] button-only@2x photoscapeでヘッダー画像を作成する方法](https://sidebisfree.com/wp-content/uploads/2017/06/ヘッダー画像7-1.jpg)
OKだったら透明度を元の「255」に戻しましょう。
そして下メニューの真ん中にある「写真+オブジェクト」をクリックし、ウィンドウが出てきますので「写真をオブジェクトに結合」を選択し、OKをクリック。
![[Tags] button-only@2x photoscapeでヘッダー画像を作成する方法](https://sidebisfree.com/wp-content/uploads/2017/06/ヘッダー画像8.jpg)
これで1000×250ピクセルのヘッダー画像が完成しました。
次はこの画像に文字を入れていきましょう。
![[Tags] button-only@2x photoscapeでヘッダー画像を作成する方法](https://sidebisfree.com/wp-content/uploads/2017/06/ヘッダー画像9.jpg)
オブジェクト項目にある文字(赤枠のアルファベットのTのようなアイコン)クリックして自分のブログと説明文をそれぞれ入力しましょう。
![[Tags] button-only@2x photoscapeでヘッダー画像を作成する方法](https://sidebisfree.com/wp-content/uploads/2017/06/ヘッダー画像10.jpg)
画像が完成したら最後に右下の「保存」を押して画像を保存しましょう。
以上でヘッダー画像の作成は終了です。お疲れさまでした。
![[Tags] button-only@2x photoscapeでヘッダー画像を作成する方法](http://sidebisfree.com/wp-content/uploads/2019/01/img_visual_02.jpg)
![[Tags] button-only@2x photoscapeでヘッダー画像を作成する方法](https://sidebisfree.com/wp-content/uploads/2019/12/2019y12m26d_033012104.jpg)
![[Tags] button-only@2x photoscapeでヘッダー画像を作成する方法](http://sidebisfree.com/wp-content/uploads/2019/01/img_visual_02.jpg)
![[Tags] button-only@2x photoscapeでヘッダー画像を作成する方法](http://money.blogmura.com/pocketmoney_salaryman/img/pocketmoney_salaryman88_31.gif)
![[Tags] button-only@2x photoscapeでヘッダー画像を作成する方法](https://blog.with2.net/img/banner/c/banner_1/br_c_1543_1.gif)