【ワードプレス制作マニュアル】 トップ画像の変更の仕方
サイトの「トップ画像」の
変更の仕方をご説明します。
テーマによって少し異なりますが
大筋は同じです^^
私がお勧めしている、
3つのテーマを例にとってご案内いたしますね。
・ジラフ
・ライトニング
・ビズベクトル
の３点です。
では順番にご説明していきます。
もくじ
トップ画像を変更する手順
テーマ ジラフの場合
ジラフというテーマだと
初期状態ではこんな
キリンの画像が入っています。
素敵なんですけど
もちろんこのままでは自分のサイトになりませんから
変えないといけませんね。
ジラフではこの画像のことを
「ヘッダー画像」と言います。
まず、管理画面からではなく
サイトを表示させます。
１ カスタマイズ画面を開く
サイトが表示されたら、
「カスタマイズ」を開いてください。
２ 「ヘッダー画像」を開く
左から以下の画像のような
メニューが出てくるので
その中から「ヘッダー画像」を選んでください。
３ 新規画像を追加する
すると、「ヘッダー画像」という表示に変わり
今使っている画像が見れます。
ここで、「新規画像を追加」を開きます。
すると、画像を選択する画面が出てきます。
ここで使いたい画像を選択する…という流れです。
「ヘッダー画像」というメニューの場所が分かれば
次から、画面を見たら思い出してもらえると思います。
※注意事項 画像サイズについて
ジラフの場合は
画像の大きさは2500×800ピクセル
がお勧めだそうです。
横幅2500って、相当大きいので
無料素材などでは足りないことが多いと思います。
小さいサイズだったらどうなるか試してみました。
フリー素材サイトから持ってきた
640×428の画像を入れてみます。
すると、画像を選ぶときに
「選択して切り抜く」がというボタンが出てきます。
ヘッダー画像は横長なので
横長に切ってくれと言われているようです。
画像を横長に切った場合
小さい画像で切りましたけど
縦横の比率を拡大して配置してくれました。
640の画像だと、拡大している分
ちょっと画像が粗くなってしまいました。
そんなに繊細な画像でなければ
気にならないレベルかもしれませんが
できればもう少し大きい画像の方が
良いかもしれませんね。
さて、横長に切りたくない場合はどうなるでしょう・
画像を切らずにそのまま入れた場合
縦にぐんと伸びて
だいぶ無理やりで、
レイアウトが崩れましたが（笑）入りました。
これは極端な例ですが、必ずしも
2500×800ピクセルではなくても
画像に合わせて配置してくれますので
多少は比率が違っても、問題なさそうです^^
では次のテーマ行ってみましょう。
テーマ ライトニングの場合
テーマ、ライトニングはこんな画面になっています。
ライトニングの画像は
「スライドショー」と言って、
何枚かの画像が順番にスライドして
かわるがわる表示させることができる、
プラス機能がついています。
（もちろん、1枚だけにすればスライド機能を
OFFにもできます）
さて、変更の仕方を見て行きましょう。
１ カスタマイズ画面を開く
こちらも、管理画面ではなく
サイトを表示させて
「カスタマイズ」に入ります。
２ 「Lightningトップページスライドショー」画面を開く
カスタマイズの中から、
Lightningトップページスライドショー
を選んでください。
３ 「画像の変更」を開く
すると、
［1］スライド画像 というところに
画像があるので、ここの
「画像の変更」を押します。
ライトニングの推奨サイズは
1900×600ですね。
これも先ほどと同じ画像でテストしてみましょう。
下にスクロール
こちらも指定サイズでなくとも、
ちょうどよく合わせてくれました。
ジラフと違って
「切り抜き」ボタンがありませんでしたので
あらかじめサイズを合わせた画像を用意するか、
ワードプレスのメディアから
「トリミング」という機能でカットするか、
のどちらかが必要になります。
ワードプレスでの画像のカット方法は
こちらの記事をご参照ください^^
↓ ↓
ワードプレスでの画像の切り取り方…と、うまくいかない時の対処方法
https://wp-firststep.com/photoedit/
※注意事項 スライドショーの枚数とサイズ
初期設定では、
３枚のスライドショーが設定されています。
スライダーを使わず、1枚でよいときは、
2枚目、3枚目の画像を削除しておいてください。
でないと初期設定のスライダー画像が
出てきてしまいます。
また、スライダーを使う場合は
同じサイズの画像を使うことを、おススメします^^
大きさがちぐはぐだと
動きがガタガタしてしまいます。
では次のテーマに行ってみましょう。
テーマ ビズベクトルの場合
ビズベクトルはこんな画面です。
１ カスタマイズ画面を開く
ビズベクトルも、
サイトを表示させてから
「カスタマイズ」を開きます。
２ 「ヘッダー画像」画面を開く
ビズベクトルでは
「ヘッダー画像」という表示になっていますね。
こちらを開いてください。
３ 「新規画像を追加」を開く
すると、ヘッダー画像のカスタマイズ画面が出てきます。
ビズベクトルの推奨サイズは
950×250ですね。
少し小さめです。
画像が、画面いっぱいにはならず
ブログ本文などと同じ幅のデザインになっています。
また同じ画像を入れてみましょう。
画像を横長に切った場合
とてもコンパクトにまとまりますね^^
画像を全体に入れるのはかっこいいのですが
よほど視覚に訴える必要がなければ
これくらいのサイズも好感度が高くて、
良いのではないでしょうか^^
画像を切らずにそのまま入れた場合
横幅950に合わせて拡大されました。
ですが、640⇒950に拡大するくらいなら、
画像の粗さはほとんど気になりませんでした^^
こちらも、横長の画像であれば多少のサイズは大丈夫そうですね^^
大まかな手順のまとめ
どのテーマでも
大まかな手順としては
「カスタマイズ」を開く
「ヘッダー画像」を開く
「画像の変更」をする
という3段階で変更ができますね。
ご注意いただきたいのは、
2番目の、「ヘッダー画像」というところが
テーマによっては名前が違うことがあるようですので
見つからないときは
カスタマイズメニューを開いて
探してみて下さい。
思いがけない名前になっているかもしれません。
さて本日は、
「ヘッダー画像」の変更の仕方についての
ご説明でした＾＾
「猫でもわかる！」くらい簡単にわかりやすく、WordPressの使い方をサポートする、WordPressソムリエです。デザインを学んだ後、なぜかレストランでワインサービスに従事。絵も描けるワインソムリエでした。その後大手通信会社に勤めIT・Webの各種サポートを経験。ソムリエもWebも常に「専門知識をお客様に合わせてわかりやすくご提案し、期待以上のサービスをする」ことをモットーとしています。テクニカルサポートの経験は、通算1,100人以上。現在はWebデザイン・ディレクターをしながら、ブログ集客をしたい方へWordPressの制作、使い方のレクチャーなどを行っています。
