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