Diver のファーストビュー機能では、ヘッダーに画像やテキストを設置することができ
ブログを訪れてきた読者にアピールするために便利な機能なのですが、
今回のわかばちゃんのように「どうも画像が上手く設置できない」という声もちらほら。。
実際にわー研。にも、メールで同様の質問がありました。
ということで、今回はそのご質問に対するアンサー記事になります。
１．Diverのファーストビューの画像に枠が表示されてしまう
「Diver のファーストビューの画像に枠が表示される」とは
どのような状態のことなのか？
こちらはわー研。のサイトを使ってその状態を再現してみたものです。
おそらく、ほとんどの方がこのような状態になっているのではないでしょうか。
一応、画像もテキストも表示されてはいますが、
これではあまりにも不格好だし、逆にない方がいいかも...ってくらいですよね。
さっそく、次の項から設定を見直していきましょう！
２．ファーストビューに設置した画像のサイズを調整する
上述のとおり、Diver のファーストビュー機能では
画像やテキストを自由に設置することが出来るのですが
キレイに表示させるためには、
そのスペースに合うように、画像サイズを調節してあげる必要があります。
ただ画像を設置しただけだと、こーーんな感じに横長になったり、、
このように、縦長の画像が繰り返してしまったりします。
このようにならないためには、
まず画像のサイズを調整する必要があるのですが
表示のさせ方にもよるので、一概に「コレ」という答えはありません。
ということで、ここでは僕が設置している画像サイズを参考にしてもらいましょう。
- PC：1900×400px
- SP(スマホ)：500×600px
PC と スマホ それぞれに画像を用意する必要があり
特に、PC で画面いっぱいに表示させようと思ったときには
1900px（ピクセル）程度の、かなりの横長の画像を用意する必要があります。
わー研。で実際にファーストビューに設置してある画像がこちらです。
無料ソフトで加工ができるので、以下の記事を参照してください
３．Diverオプションでファーストビューの設定を見直す
画像が用意できたら、次にファーストビューの設定をしていきましょう。
管理画面左側メニューから、「Diverオプション」→「ファーストビュー」へと進みます。
わー研。の設定画面のスクショを置いておきますので、
設定項目が多くてわからないという方は、全く同じ設定にしておくと良いでしょう。
画面一番上の設定項目から順番に行きます。まずはPCの設定ですね。
すべて同じ設定にできたでしょうか？
続いて、下のスマホの設定もやっていきましょう。
最後に、「変更を保存」ボタンを押すことをお忘れなく！
以上で設定は完了。
これでサイトを表示させたら、上手く表示されているはず・・！
さいごに
どうですか、上手く表示されましたか？
もし上手くいかない場合は、再度、画像サイズや
ファーストビュー設定が間違っていないか、確認してみてください。
そして今回に限らず、設定が反映されないと思ったら
まずは、「キャッシュを削除してみること」これもお忘れなく！
注目の記事簡単にロゴが作成できるサイト８選【日本語/英語の両方に対応】
注目の記事超手軽にスクショが撮れる「Screenpresso」の使い方とおすすめの設定方法
