Diverのトップページに設定できる、ファーストビュー。
（LP用は個別設定できるのでまた別の話になります）
パッと目を惹くこともありますが、テキストやリンクボタンを設置することで、コンテンツのアピールをすることもできます。
Diverの公式ページfa-external-linkのように動画を設置することも可能ですが、今回は画像設置の際の適正サイズやスマホ用ファーストビューのポイントを解説してもらいましょう。
Contents
Diverのファーストビューってどこで設定するの？
当ブログのトップページでは、現時点でこのようなファーストビューを設置しています。
パッと見でどういったブログなのかが伝わるようにしてくれる、そんな役割を持っているのがファーストビューです。
また、画像だけを設置するのではもったいないので、ブログのアピールページやメイン商材のリンクなどを設置することも可能、
ファーストビューの設定は、ダッシュボードのDiverオプション⇒ファーストビューへ進みます。
内容は、背景設定（画像など）とコンテンツ設定（テキストやリンクボタンなど）に分かれています。
ファーストビューの表示位置や画像の調整などを設定していきます。
…が、その前に！
Diverのファーストビューに設置する画像サイズは？
ブログ内のアイキャッチ画像とは違って、ファーストビューの画像は表示サイズが大きくなることもあるから、用意する画像サイズには多少気を遣います。
1枚の画像を使用するなら、縦幅をどのくらいにするのが先に決めておいたほうがスムーズに設置できるかと思います。
当ブログのファーストビュー画像の縦幅は350px。ファーストビューだけでトップ画面を埋め尽くさず、次のコンテンツを表示させる目的があります。
ちなみに画面の高さを調べるには、前回紹介した拡張ツールなどが便利。
ファーストビューの高さが決まったら、画像を用意。
自分が使ってるパソコンの幅いっぱいで用意しても、他の人のパソコンは画面の幅が違う可能性があります。
それに、画面の幅が1500pxあるのに用意した画像の幅が640pxしかなかったら、もちろんきれいに表示されない。
（ファーストビューなのに小っさ！）
他の人が使ってるパソコンの画面サイズとか知らないし。
そこで、デスクトップの画面解像度統計を確認してみると…
（https://gs.statcounter.com/fa-external-link）
1920×1080ピクセルのシェア率が一番高い。
となると、画面いっぱいのサイズを使用するトップページのファーストビューなら、画像の横幅は1920pxにしておけば良さそうですね。
よって、当ブログで用意したファーストビューの画像サイズは1920×350。
※あくまでも参考であって絶対値というわけではないです。
スマホの画像サイズと設定は？
今時はレスポンシブデザインが当たり前だから、スマホ画像を設定しなくてもしっかり表示はされるんだけど、写真を使うと、どうしても表示したい部分がズレてしまったり、テキストやボタンなどの配置の邪魔になってしまう場合があります。
例えば今回、テストサイトに設定してみたファーストビューをPCで見るとこのようになりますが、
ディベロッパーツールを使ってスマホ表示（iPhoneX）を確認すると、こんな感じ↓
…なんの画像？
なので写真の構成によっては、スマホ用の画像も用意したほうがきれいに表示できる場合もあります。
今回は400×350の画像を用意してみました。（更に自動調整300）
ファーストビュー画像の背景設定を一覧にしてみたよ
今回ファーストビューの背景設定は以下のように行いました。（カスタマイザーの設定も影響するので、あくまでも当ブログでの設定となります。参考程度にどうぞ）
- 表示位置⇒メニューの下
- 表示オプション⇒トップページのみ
- ファーストビュー⇒画像
- 表示領域⇒カスタマイズ（300）
- 画像は1920×350
- 画像を背景にするにチェックを入れる
- 画像リピート設定⇒しない
- 画像ポジション設定⇒中央
- 背景画像サイズ⇒どちらも自動
- 背景カラー⇒設定なし
- スマホ画像設定⇒個別設定
- スマホ時表示領域⇒300
- 画像は400×350
- スマホ背景画像サイズ⇒どちらも自動調整
変更を保存、で完了です。
ファーストビューにテキストやリンクボタンを設置する
ファーストビューに設定した画像上に、文字やリンク、ボタンを設置するのは、コンテンツ設定で行えます。
カスタムにチェックをいれて、あとは記事の投稿と同じようにインナーコンテンツにテキストや装飾を入れていきます。
入力補助も使えるから、ボタンの設置も楽々♪
入力後は、こちらも変更を保存。
実際にテキストの配置をPC・スマホで確認して完成です。
Diverファーストビューにピックアップスライダーを設置する
今回はファーストビューを画像で設定してみたけど、もう一つ捨てがたいのがピックアップスライダー。
現時点ではトップページと投稿記事のメニュー直下にもいれてるこれ↓
自分が厳選した記事をスライダー表示してくれる機能なんだけど、これをファーストビューにもってくることもできるんですよね。
ファーストビューの設定画面でピックアップスライダーにチェックを入れて、大きさを選ぶだけ。
ちなみにファーストビューのピックアップスライダーの見た目はこんな感じ↓
大サイズ↓
中サイズ↓
小サイズ↓
スライダーも捨てがたいなぁ…。そのうち変更しちゃうかもしれません。
ファーストビューを作ることで、ブログのオリジナル感が出せるので上手に活用してみてくださいね~！
