トップ画像の変更の仕方【WordPress制作マニュアル】

ワードプレス制作マニュアルトップ画像の変更

ブログに使っている、「トップ画像」
変更するときの手順をご説明しますめ。

今回は、

・ジラフ
・ライトニング
・ビズベクトル

の3つのテーマを
例にして説明していきますね。

テーマによって少し異なります
だいたいは同じなので

これをご覧いただければ、
お使いのテーマのカスタマイズの仕方もだいたいわかるかと。

たまーにすんごい独特のテーマもあるので
そういう方はごめんなさい。。

 

トップ画像を変更する手順

テーマ ジラフの場合

 

初期状態ではこんな
キリンの画像が入っています。

ポリゴン、かっこよくて素敵なんですけど
もちろんこの画像のままでは
Giraffeの宣伝サイトになりますから(笑)

変えないといけませんよね。

トップ画像、とかヘッダー画像、とか
いろんな言い方がありますが、

ジラフでは「ヘッダー画像」と書いてありました。

 

 

1 カスタマイズ画面を開く

では
「カスタマイズ」
を開いてください。

カスタマイズメニュー

 

 

2 「ヘッダー画像」を開く

 

ko

の中から「ヘッダー画像」を選んでください。

ジラフカスタマイズメニュー

 

 

3 新規画像を追加する

すると、「ヘッダー画像」には
今この画像が使われていますよ、という
プレビューが表示されます。

ここで、「新規画像を追加」を開きます。

新規画像を追加

 

ここで画像が変更できますよ^^

 

※画像の大きさに注意!!

ジラフの場合は、
ヘッダーに使う画像の大きさは
2500×800ピクセルがお勧めだそうです。

横幅2500って、相当大きいですよ。
さっきのきりんさんの画像も、大きいですもんね。

無料素材などではサイズが足りないかもしれません。

小さいサイズだったらどうなるか試してみました。

640×428の画像を入れてみました。

これです。

犬と猫

 

すると、画像を選ぶときに
「選択して切り抜く」がというボタンが出てきました。

ヘッダー画像は横長なので
横長に切ってくれと言われているようです。

 

画像を横長に切った場合

切った場合

 

小さい画像切カットしたら、拡大して配置してくれました。

でも、拡大している分ちょっと画像が粗くなってしまいました。

拡大画像

そんなに繊細な画像でなければ
気にならないレベルかもしれませんが

ブログのトップに使うものなので、
できればもう少し大きい画像の方が良いかもしれませんね。

海外の無料画像サイトなら、大きいサイズのものもありますよ ^^

次は、カットしないで使ってみました。

 

画像を切らずにそのまま入れた場合

 

そのまま入れた場合

縦にぐんと伸びて
だいぶ無理やりですね(笑)

サイトのほとんどが、画像・・・(笑)

このように(?)必ずしも
2500×800ピクセルではなくても
画像に合わせて配置してくれますので

多少は比率が違っても、問題なさそうです^^

多少、ですが

 

では次のテーマ行ってみましょう。

テーマ ライトニングの場合

 

ライトニングはこんな画面になっています。

Lightningトップ画像

 

ライトニングの画像は
「スライドショー」
と言って、

何枚かの画像が順番にスライドして
かわるがわる表示させることができます。
(1枚だけにすればスライド機能がOFFになります。)

 

さて、変更の仕方を見て行きましょう。

 

1 カスタマイズ画面を開く

こちらも
「カスタマイズ」に入ります。

ライトニングカスタマイズメニュー

 

 

2 「Lightningトップページスライドショー」画面を開く

 

カスタマイズの中から、
Lightningトップページスライドショー
を選んでください。

 

ライトニングカスタマイズ項目

 

3 「画像の変更」を開く

すると、

[1]スライド画像 というところに
画像があるので、ここの
「画像の変更」を押します。

ライトニング画像の変更

ライトニングの推奨サイズは
1900×600ですね。

 

これも先ほどと同じ画像でテストしてみましょう。

ライトニングのトップ画像挿入

 

下にスクロール

ライトニングトップイメージ下

こちらも指定サイズでなくとも、
ちょうどよく合わせてくれました。

 

ジラフと違って
「切り抜き」ボタンがありませんので

あらかじめ縦横の比率を考えて、
サイズを合わせた画像を用意しなければいけませんね。

またはWordPressのメディアには
画像をカットする「トリミング」という機能もありますので
画像編集ソフトがない方は、お試しください

 ↓ ↓
WordPressでの画像の切り取り方…と、うまくいかない時の対処方法
https://wp-firststep.com/photoedit/

 

 

※スライドショーを使うときは大きさを揃える!

初期設定では、
3枚のスライドショーが設定されていますので

スライダーを使わず、1枚でよいときは、
2枚目、3枚目の画像を削除しておいてください。

でないと初期設定のスライダー画像が
出てきてしまいます(笑)
 ↓

2枚目画像の削除

 

また、スライダーを使う場合は
同じサイズの画像を使いましょう。

縦の幅がちぐはぐだと
切り替わるときにガタンガタンとレイアウトがくずれて
非常に見にくいサイトになってしまいます。

スライダーイメージ

 

 

では次のテーマに行ってみましょう。

テーマ ビズベクトルの場合

ビズベクトルはこんな画面です。

ビズベクトルトップイメージ

 

 

1 カスタマイズ画面を開く

「カスタマイズ」を開きます。

ビズベクトルカスタマイズ

 

 

2 「ヘッダー画像」画面を開く

ビズベクトルでは
「ヘッダー画像」という表示になっていますね。

こちらを開いてください。

ビズベクトル

 

 

3 「新規画像を追加」を開く

すると、ヘッダー画像のカスタマイズ画面が出てきます。

 

ビズベクトルトップ画像変更

 

ビズベクトルの推奨サイズは
950×250ですね。

少し小さめです。

画像が、画面いっぱいにはならず
ブログ本文などと同じ幅のデザインになっています。

また同じ画像を入れてみましょう。

 

 

画像を横長に切った場合

ビズベクトル画像トリミングイメージ

 

とてもコンパクトにまとまりますね^^

画像を全体に入れるのはかっこいいのですが
大きな画像を用意するのも大変なので

私は、ブログにはこれくらいのサイズもいいと思いますよ^^

 

 

画像を切らずにそのまま入れた場合

ビズベクトルイメージ画像

横幅950に合わせて拡大されました。

ですが、640⇒950に拡大するくらいなら、
画像の粗さはほとんど気になりませんでした^^

こちらも、横長の画像であれば多少のサイズは大丈夫そうですね^^

 

大まかな手順のまとめ

どのテーマでも
大まかな手順としては

「カスタマイズ」を開く
「ヘッダー画像」を開く
「画像の変更」をする

という3段階で変更ができます。

ご注意いただきたいのは、
2番目の、「ヘッダー画像」というところが
テーマによっては名前が違うことがあるようですので

見つからないときは
カスタマイズメニューを開いて
探してみて下さい。

全部クリックすればどっかに入っていると思います(笑)

 

私は詳しいのではありません。
全部開いて見ただけです(笑)

さて本日は、「ヘッダー画像」の変更の仕方についての
ご説明でした^^

 

WordPressに関するご質問にお答えします。
こちらのフォームから
お気軽にお寄せください^^
https://wp-firststep.com/questionbox/