テーマカスタマイズ、ヘッダーにバナー画像を挿入しただけで見違えた

ここまでWordPressのインストールと一番大事な管理画面について見てきました。さて次は記事入力といきたいところですが、1つだけちょっとした作業を挟んでみましょう。それはあなたのブログのヘッダーにバナー画像を挿入することです。

Initializing...

ヘッダーにバナー画像をいれるだけで見違えた!

あなたも自分のブログのヘッダーにバナー画像をいれたいと思っていませんか? WordPressならこんなことも簡単にできてしまうんです。あなたはお気に入りの画像を用意するだけ。下の2枚の画像は、WordPressの標準テーマTwenty Sixteenをインストール直後にみたサイトのトップページ。右側の画像をバナー画像をいれただけですが、いっぺんにマイブログ的な雰囲気が出ましたね。

ヘッダー画像を指定する

ヘッダーとして表示したい画像を1枚用意してください。ただし、ヘッダー画像に使用するためには画像の推奨サイズがあります。Twenty Sixteenの場合のヘッダー画像の推奨サイズは、1200x280ピクセルです。推奨サイズに合った画像を用意してください(後述)。

外観・ヘッダーを選択

ヘッダー画像を指定するのは、WordPressの管理画面にログインし、サイドメニューの「外観」を選んで、次に表示されたサブメニューからヘッダーを選択してください。

画像をアップロード1

画像をアップロードする場合、画像の推奨サイズを確認してください。サイドメニューが表示されていた部分に、

お使いのテーマはヘッダーのサイズとして1200x280ピクセルを推奨しています。

と表示されているのみ気付かれたと思います。この画像の推奨サイズは、テーマ毎にことなりますので、画像を用意する場合にここの推奨サイズを確認の上、用意してください。
ヘッダー画像は複数枚指定することが可能です。ここで例にした画像では、まだ1枚も指定していないので、前に指定したヘッダー画像は表示されていません。
とりあえず、ここは新規画像を追加ボタンで追加します。

画像アップロード2

画像のアップロード方法としては2つ。1つはエクスプローラで表示した画像をドラック&ドロップする方法。2つ目は、下の画像中央にあるファイルを選択ボタンをクリックして、直接指定する方法です。今つかっている液晶が小さい場合は、このボタンを押して指定する方法が便利です。

画像を切り抜く

アップロードした画像は、ヘッダーのサイズの合わせて切り抜く必要があります。これは今アップロードした画像の右上にチェックが入っているのを確認し、右下の選択して切り抜くボタンをクリックします。

切り抜く位置を指定する

切り抜く位置は指定できます。下の図のように今選択されている範囲は明るく表示しています。この位置はマウスを上や下にドラックすることで変更することが可能です。位置がきまったら、右下の画像を切り抜きボタンをクリックして切り抜いてください。

ヘッダー画像挿入完了

無事画像を切り抜いてヘッダー画像が指定できました。画面右側に今挿入したヘッダー画像を表示したサイトのイメージが表示されているのが確認できました。

これで、ヘッダー画像の挿入は完了です。

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

スポンサーリンク
ページ上部へ戻る