こんにちは、アキです。
今回は、アドセンスブログのヘッダーの作り方と設定方法を解説します。
ブログの顔ともいえる「ヘッダー」は、アクセスしてくれた人が一番最初に目にする画像です。
ブログの内容を紹介しなくても、見た目だけでも伝わるヘッダーだと良いですよね。
さらにヘッダーの印象で記事を読んでもらう確率も上がる可能性もあります！
無料で使えるツールでもステキなヘッダー画像が作れますよ。
簡単にできるオリジナルヘッダーの作り方とWordPressにヘッダーを設定する方法を解説します。
ブログのヘッダー画像を決める
まずは、ヘッダーにする画像を決めます。
あなたのブログのコンセプトやイメージする画像を見つけてください。
画像を探すのにオススメは、フリー画像サイト『 Pixabay 』
イメージする言葉を検索すると、その言葉に合う画像が出てきます。
【ヘッダー画像を決めるポイント】
あまり画像がごちゃごちゃしているとブログタイトルを入れづらくなるので、ヘッダーになった時のイメージも頭に入れつつ決めていきましょう。
画像に適度に余白があるとブログタイトルも見やすくなります。スッキリとして画像も文字も映えるのでオススメです。
画像が決まったらダウンロードします。
ダウンロードするサイズは、横幅が1000ピクセル以上あるといいです。
今回は「1280×789」というサイズを選びました。
次は、ヘッダー画像をリサイズして加工していきます。
「関連記事】フリー画像サイトおすすめ5選！著作権や注意点についても！
ヘッダーに合うサイズに変更する
ヘッダーを作るのに、画像編集ソフト フォトスケープを使います。
インストールと使い方はこちら
まずは画像のサイズを変更しましょう。
ヘッダー画像を選んだら、画面下にある「リサイズ」をクリック。
次に、幅を「1280」から「1000」に変更して「OK」をクリックします。
幅が変更されても、編集画面にある画像はとくに変化はありません。
画像の下のところが「Photo 1000×616」になっていればOK！
次にヘッダー画像の高さを250にしていきます。
「トリミング」というタグを選んで、マウスをドラッグして高さを調整します。
「w:1000 h:250」になればOK！
あとはカーソルで切り取る場所に移動させます。
切り取る場所が決まったら「トリミング」をクリックすると、リサイズ完了です。
【ヘッダー画像のサイズ】
- 横幅：1000～1100
- 高さ：200～250
くらいで収まるはずです。
使っているWordPressのテンプレートによってヘッダーサイズは変わってきますが
横幅：1000、高さ：250で今回はヘッダーを作っていきます。
リサイズしたら一度WordPressに設定してみてサイズが合うか試してみるのもいいです。
私は試したりせず、ぶっつけ本番でやってしまいます。でも何度かサイズのやり直しも経験してます＾＾；
フォトスケープを閉じなければ画像の修正もできますので、そのあたりは設定してから微調整をしてください。
【関連記事】画像キャプチャソフトSnipping Toolの使い方と保存方法を解説！
ヘッダー画像にブログタイトルを入れる
次に、ブログのタイトルを画像に入れていきます。
「オブジェクト」タグを選んで「T」をクリック。
ブログのタイトルを入力していきます。
文字の大きさ、文字の色などを決めて「OK」をクリック。
文字の位置もカーソルで好きなところに動かして決めていきます。
完成したら「名前をつけて保存」で作成したヘッダー画像を保存します。
今回作成したヘッダー画像はこちら。
次は、WordPressに完成したヘッダー画像を設定していきます。
【関連記事】ワードプレスで文字の装飾をして文章を読みやすくする方法
ヘッダーをWordPressに設定する
ヘッダーの設定方法は、テンプレートによって違います。
今回は、ALPHAのテンプレートでの解説です。
WordPressの管理画面の「外観」⇒「ヘッダー」を選びます。
「新規画像を追加」をクリック
作ったヘッダー画像を選択して、「切り抜かない」をクリックします。
最後に「保存して公開」でヘッダー画像の設定が完了です。
テンプレートによっては、ブログのタイトルのテキスト表示の下にヘッダー画像が表示される場合もあります。
ヘッダー画像のみにしたい場合は
「外観」⇒「カスタマイズ」を選んで「サイト基本情報」をクリック。
『サイトのタイトルとキャッチフレーズを表示』のチェックを外します。
設定後はヘッダー画像がちゃんと表示されているか確認してみてください。
【関連記事】圧縮解凍ソフト7-Zipのインストール方法と使い方を解説！
まとめ
ヘッダーは「ブログの顔」！
有料のツールじゃなくても無料でもヘッダー画像はいい感じで作れてしまいます＾＾
使う画像も、加工ソフトも無料で使いやすいものが多くありますので、ぜひ活用してください。
ブログのイメージがひと目でわかるオリジナルヘッダーを目指して作ってくださいね＾＾
[…] ＞＞＞ ブログのオリジナルヘッダーの作り方！画像サイズと設定方法を解説！ […]