ここでは、サイトのヘッダー画像の作成方法について解説いたします。
ヘッダー画像
ヘッダーとは、サイトの上の部分のことを言います。
ヘッダーに画像を入れることによって、サイトのオリジナリティを出すことができるほか、読者の方にサイトの印象を与えるなどの効果もあります。
それでは、ヘッダー画像の作成方法について解説します。
なお、ここではSTINGER8でヘッダー画像を設定する方法を解説します。
ヘッダー画像の作成方法
まずは、ヘッダーに入れる画像を選択して準備します。
画像は以前にも解説しましたが、著作権等の問題がありますのでタダピクなどの画像サイトで入手します。
なお、タダピクについてはこちらをお読みください。
ヘッダー画像の推奨サイズは、各テーマによって異なります。
STINGER8の場合「1060×300ピクセル」ですが、その他の当サイトおすすめの日本製テーマをご利用の方は、以下のリンクで確認してください。
| 外部リンク
〇 Giraffe (手順9-3で動画解説があります) 〇 Luxeritasは、どらみ様のサイト「まるっと。」がわかりやすく解説しています。 〇 マテリアル 2 |
ヘッダー画像の設置
画像が決まったら、ヘッダー画像を設置します。
ワードプレスのメニューバーから「外観」→「ヘッダー」をクリックします。
すると、左側にカスタマイズ中「ヘッダー画像」と右側にサイトのトップページ画面が表示されます。
上の画像赤枠の「新規画像を追加」をクリックすると、画像の選択の画面に変わります。
メディアライブラリで、タダピクなどでダウンロードしたお気に入りの画像をクリックしてください。
ここでは、タダピクの解説でダウンロードしたこの画像をヘッダー画像にしたいと思います。
画像をクリックすると、右側に添付ファイルの詳細が表示されるので一通り目を通して下さい。
よろしければ「選択して切り抜く」(青ボタン)をクリックします。
画面が変わり、ヘッダー画像を適性のサイズにするために切り抜きます。
この画像だとわかりづらいですが、鮮明に映っているところがヘッダー画像のサイズになります。
マウスを置くと、カーソルが上下左右の矢印に変わるので、ドラッグしながらお好みの位置に調整してください。
また、高さを調節する場合は、点線部分(画像赤ライン上下)にマウスを置くと、上下矢印のカーソルに変わります。
そこからクリックしながらドラッグして、お好みの高さに調節してください。
位置が確定したら、右下にある「画像切り抜き」(青ボタン)をクリックします。
すると、このようにヘッダー画像が入りました。
この表示はパソコンでのプレビュー画面になりますが、スマホやタブレットでのプレビューを見るには以下で表示できます。
他のテーマでもあると思いますが、STINGER8では画面左下にこのような表示があります。
左から、パソコン・タブレット・スマホで観たときのプレビュー画面が表示されます。
各ボタンを押して確認してください。
よろしければ、左上の「公開(青ボタン)」を押して完了です。
最後に、サイトのトップページを表示させて確認してください。
以上で、完了です。
ヘッダー画像があるだけで、サイトの印象がかなり違いますので、ぜひお試しください。
以上が、ヘッダー画像の作成についての解説です。
最後まで読んでいただきありがとうございました。
