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

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

サイトの「トップ画像」
変更の仕方をご説明します。

テーマによって少し異なります
大筋は同じです^^

私がお勧めしている、
3つのテーマを例にとってご案内いたしますね。

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

の3点です。

では順番にご説明していきます。

 

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

テーマ ジラフの場合

 

ジラフというテーマだと

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

素敵なんですけど
もちろんこのままでは自分のサイトになりませんから
変えないといけませんね。

ジラフではこの画像のことを
「ヘッダー画像」と言います。

まず、管理画面からではなく
サイトを表示させます。

サイトを表示に切り替え

 

 

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

サイトが表示されたら、
「カスタマイズ」を開いてください。

カスタマイズメニュー

 

 

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

 

左から以下の画像のような
メニューが出てくるので
その中から「ヘッダー画像」を選んでください。

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

 

 

3 新規画像を追加する

 

すると、「ヘッダー画像」という表示に変わり
今使っている画像が見れます。

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

新規画像を追加

 

すると、画像を選択する画面が出てきます。
ここで使いたい画像を選択する…という流れです。

「ヘッダー画像」というメニューの場所が分かれば
次から、画面を見たら思い出してもらえると思います。

※注意事項 画像サイズについて

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

横幅2500って、相当大きいので
無料素材などでは足りないことが多いと思います。

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

フリー素材サイトから持ってきた
640×428の画像を入れてみます。

犬と猫

 

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

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

 

画像を横長に切った場合

切った場合

 

小さい画像で切りましたけど
縦横の比率を拡大して配置してくれました。

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

拡大画像

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

できればもう少し大きい画像の方が
良いかもしれませんね。

 

さて、横長に切りたくない場合はどうなるでしょう・

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

 

そのまま入れた場合

縦にぐんと伸びて
だいぶ無理やりで、
レイアウトが崩れましたが(笑)入りました。

 

これは極端な例ですが、必ずしも
2500×800ピクセルではなくても
画像に合わせて配置してくれますので

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

 

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

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

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

Lightningトップ画像

 

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

何枚かの画像が順番にスライドして
かわるがわる表示させることができる、
プラス機能がついています。

(もちろん、1枚だけにすればスライド機能を
OFFにもできます)

 

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

 

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

こちらも、管理画面ではなく
サイトを表示させて
「カスタマイズ」に入ります。

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

 

 

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

 

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

 

 

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

 

3 「画像の変更」を開く

すると、

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

ライトニング画像の変更

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

 

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

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

 

下にスクロール

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

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

 

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

あらかじめサイズを合わせた画像を用意するか、

ワードプレスのメディアから
「トリミング」という機能でカットするか
のどちらかが必要になります。

ワードプレスでの画像のカット方法は
こちらの記事をご参照ください^^

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

 

 

※注意事項 スライドショーの枚数とサイズ

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

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

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

2枚目画像の削除

 

また、スライダーを使う場合は
同じサイズの画像を使うことを、おススメします^^

大きさがちぐはぐだと
動きがガタガタしてしまいます。

スライダーイメージ

 

 

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

 

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

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

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

 

 

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

ビズベクトルも、
サイトを表示させてから
「カスタマイズ」を開きます。

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

 

 

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

ビズベクトルでは
「ヘッダー画像」という表示になっていますね。
こちらを開いてください。

ビズベクトル

 

 

 

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

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

 

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

 

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

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

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

 

 

画像を横長に切った場合

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

 

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

画像を全体に入れるのはかっこいいのですが
よほど視覚に訴える必要がなければ

これくらいのサイズも好感度が高くて、
良いのではないでしょうか^^

 

 

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

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

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

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

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

 

大まかな手順のまとめ

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

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

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

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

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

思いがけない名前になっているかもしれません。

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

村重 敦子

「猫でもわかる!」くらい簡単にわかりやすく、WordPressの使い方をサポートする、WordPressソムリエです。デザインを学んだ後、なぜかレストランでワインサービスに従事。絵も描けるワインソムリエでした。その後大手通信会社に勤めIT・Webの各種サポートを経験。ソムリエもWebも常に「専門知識をお客様に合わせてわかりやすくご提案し、期待以上のサービスをする」ことをモットーとしています。テクニカルサポートの経験は、通算1,100人以上。現在はWebデザイン・ディレクターをしながら、ブログ集客をしたい方へWordPressの制作、使い方のレクチャーなどを行っています。

Pocket