ヘッダー画像設定

アフィンガー5wing

ワードプレスブログのヘッダー画像の選び方とアフィンガーへの設置方法の手順を解説

Sponsored Link

こんにちは!ひよりんです。

今日はブログの「顔」であるヘッダー画像の選び方とアフィンガーへの設置方法の手順について解説していきます。

ヘッダー画像を設定すると・・・

どんなブログかすぐにわかってもらえる。

目を引き付ける効果がある。

早速ヘッダー画像を設置して自分の色を存分に出していきましょう!

へッダー画像設置

綺麗な夜景

ブログのデザインの中で一番目立つ部分がヘッダーですよね?

多くのブロガーさんがヘッダー画像を入れています。

ヘッダー画像とはここの事

素敵な画像をヘッダー部分に入れたい

ブログの内容に合った画像を設定したい

画像はどこから持ってくるの?

どうやって設定するの?

そんなあなたにどこから画像を持ってきてどうやってアフィンガーに設置していくのかについて解説します。

ひよりん
私はヘッダーの設定に苦労しました。でも順番通りにやっていけばとっても簡単です。

ヘッダー画像選び

ブログの顔であるヘッダー画像を選んでいきます。

ヘッダー画像は自分が撮った写真を使用する事もできます。

私の場合は写真素材を無料でダウンロードできるサイトから持ってきました。

フリー素材をダウンロードできるサイトはたくさんありますが、私のこのヘッダー画像は写真ACというサイトからダウンロードして使わせてもらっています。

写真ACのサイトはコチラ

サイトに入るとこんな画面が出てきます。

このサイトは無料ですが会員登録が必要なのでまずは会員登録を済ませてください。

赤枠で囲んだ「ダウンロード会員登録(無料)」ボタンをクリックして手順通り会員登録をしてください。

イラストAC

写真ACの公式サイト」から画像引用

ポイント

「写真AC」の会員登録をすれば、同じ会社が運営している「イラストAC」の利用も可能になります。

「写真AC」は画像素材で「イラストAC」はイラスト素材なので用途に合わせて使い分けできますね!

ひよりん
私はどちらもよく使わせてもらっています。
はかせ
「写真AC」と「イラストAC」は一日にダウンロードできる枚数が決まっているためたくさん画像が必要な方は有料のプレミアム会員になれば無制限でダウンロードできます。
  • 無料会員(月額無料)→1日に9点までダウンロード可能。キーワード検索は5回までです。
  • プレミアム会員(月額1,096円)→無制限にダウンロード可能、また、有料で販売されているプレミアム素材無制限にダウンロード可能です。その他もろもろ特典あり。
ひよりん
私は無料会員ですがたまに回数制限でダウンロードできない事が。そんな時は次の日までお預けです

会員登録が終わればログインしてダウンロードしたいキーワードで検索します。

イラストAC

写真ACの公式サイト」から画像引用

パソコン」で検索してみました。

こんな風に色んな画像が出てきます。

写真AC

写真ACの公式サイト」から画像引用

ダウンロードの手順

● 好きな画像を選んでクリックする。

● ダウンロードしたい画像のサイズを選択する。

● ダウンロードをクリックする。

● ダウンロードする前にアンケート等が出てくるのでそれに回答する。

● ダウンロードをクリックする。

 

画像サイズについて

  • Sサイズ「640×427px」主に各記事のアイキャッチ画像などに使用するサイズです。
  • Mサイズ「1920×1281px」主にブログのヘッダー画像などに使用するサイズです。
  • Lサイズ「4000×2668px」私は今まで使った事がありません。
ひよりん
今回はヘッダー画像なのでMサイズ「1920×1281px」を選択します。

画像をダウンロードして自分のPCに保存します。

これで画像選びは終わりです。

おまけ

フリー素材をダウンロードして使用できるサイトは他にもたくさんあります。

私は「pixabay」もよく使わせてもらってます。

こちらは会員登録が不要でその場ですぐにダウンロードして使えるのでとても便利です。

また、画像もとてもオシャレなものが多いと思います。

参考にしてみてください。

【pixabay】のサイトはコチラ

では次は今ダウンロードした画像の加工をしていきます!

画像の加工

画像を加工していきます。

画像をダウンロードしたらいつも私は加工してからブログに設定しています。

特にヘッダー画像は少しこだわって作りたいですよね?

画像に文字を入れる方法はどうやるの?

画像に装飾をしたい

等々・・・。

画像のサイズを変更したり画像に文字を入れたりするためには画像加工ソフトが必要です。

無料でダウンロードできるものが多いのでまだダウンロードしていない方は先にダウンロードしてから次のステップに進んでください。

私は「PhotoScapeX」という画像加工のソフトを使っています。

ひよりん
初め「PhotoScapeX」をダウンロードしようとしたら公式サイトにはダウンロードするボタンがなく、色々探した結果、 マイクロソフトストアからダウンロードしなくてはいけない事がわかりました。 もし「PhotoScapeX」を使おうと思う人はマイクロソフトストアからダウンロードしてください。

画像加工ソフトが準備できたら画像を加工していきます。

私は画像サイズを「1500×450px」に調整しました。

また、画像に文字を入れてこのように仕上げました。

ヘッダー画像説明用

画像の準備が整ったらいざアフィンガーのヘッダー画像に設定しましょう!

はかせ
自分で撮った画像を使用する場合もサイズ変更は必要なので画像加工ソフトは必ず必要です!

ヘッダー画像の設定

ではヘッダー画像の設定に進みます。

アフィンガーのカスタマイズ設定画面から行います。

まず、ワードプレスのダッシュボードにログインします。

サイドバーの【外観】→【カスタマイズ】→【ヘッダー画像】に入ります。

ヘッダーカラー変更

 

ヘッダー画像をアップロードします。

●「新規画像を追加」をクリックします。

ヘッダー画像選択

 

画像を選択します。

①「ファイルをアップロード」をクリックします。

②「ファイルを選択」をクリックします。

画像のアップロード

 

●設定が完了したら「公開」をクリックします。

公開をクリック

 

これでヘッダー画像の設定は完了です!

ペンギンさん
ちょっと待って!その下にモバイル用のヘッダー画像設定の項目があるよ!
ひよりん
私はこの存在に長らく気づかず・・・。何週間もモバイルヘッダー画像が無い状態でブログ記事を投稿していました。

モバイルヘッダー画像の設定方法はPCの設定の時と同じです。

① 横幅を100%にするにチェックを入れる

②「画像を選択」をクリックする

モバイル用ヘッダー画像

PCヘッダー画像で使った画像をそのまま設定すればいいのでとっても簡単!

すでにアップロード済みの画像は「メディアライブラリ」に保存されてるから選ぶだけ!

①メディアライブラリをクリックする

② 画像にチェックする

③「代替えテキスト」と「タイトル」に画像の詳細を記入する

④「画像を選択」をクリックする

モバイルヘッダー設定

設定が完了したら「公開」をクリックする

モバイルヘッダー公開

これでモバイルの方でもヘッダー画像が追加されました。

ヘッダー画像の設定はこれで完了です。

お疲れさまでした。

まとめ

色鉛筆とチェック

設定お疲れさまでした。

だんだん自分の理想のブログに近づいてきましたか?

私は時間がかかりましたがブログがだんだん自分色になっていくのがすごく嬉しくてワクワクが止まりませんでした。

ヘッダー画像の設定をするだけで自分のブログになってきたー!と感動してしまいます。

初心者の私はつまづいたり、設定すらしていなかったり、色々と順番通りには行きませんでしたが毎日新しい発見で楽しくて仕方がありません。

これからも新しい発見や、つまづいた事、難しかった事などを記事にしていきます。

よかったらまた見にきてください。

最後まで読んでくださりありがとうございます。

Sponsored Link

Sponsored Link

-アフィンガー5wing

© 2021 ブログ日和