Diver のファーストビューの設定方法【図解&表示サンプルあります】

 

 

ワードプレステーマ Diver で、ブログのヘッダー部分をカスタムできる

「ファーストビュー」の設定方法を解説します。

１．ファーストビューとは

まず最初に「ファーストビュー」について簡単に説明しておきます。

 

ファーストビューとは、Diver に限って使われる言葉ではなく

PCやスマホで、サイトを開いた時に「１番最初に表示されるエリア」のことを言います。

 

わ-研。で言うと、この部分ですね。

 

はっきりと「ココ！」ということはできませんが

主にヘッダーの下から記事一覧の間が、ファーストビューのエリアです。

 

Diver のファーストビュー設定を使うことで

このエリアに画像やテキストなどを設置して、読者にアピールすることができます。

 

２．ファーストビューの設定方法

ファーストビューの設定画面は、管理画面の左側メニューから

Diverオプション ＞ ファーストビュー と選択すると、開くことができます。

 

ファーストビュー設定で設定する項目は、以下の２箇所です。

 

背景設定は、ファーストビューの背景色や画像の設定。

コンテンツ設定で、そのエリアの中に表示する、テキストやボタンリンクなどを設定します。

 

それぞれの項目の設定方法を解説します。

 

2-1 背景設定

ファーストビューの背景設定項目です。

 

表示位置

 

表示位置 では、ファーストビューを表示させる場所を選択できます。

それぞれどのように表示されるのかを、画像で確認しましょう。

 

表示位置：メニューの下

 

表示位置：独立メニューの上

 

表示位置：最上部

 

表示オプション

 

表示オプションでは、ファーストビューをどのページに表示させるかを選択できます。

トップページのみ	トップページのみに表示されます
トップページと投稿/固定ページ	トップページと、投稿ページ、固定ページに表示されます
すべてのページ	すべてのページに表示されます

 

ファーストビュー

 

ファーストビューで表示する内容を設定する項目です。

 

ここでの設定項目は、全部で６つあります。

 

それぞれの表示内容を、画像で見てみましょう。

 

背景スタイル：シンプル

 

背景スタイル：ストライプ

ストライプは、「縦」「横」「斜め」からデザインを選択できます。

 

背景スタイル：ドット

 

背景スタイル：グラデーション

 

背景スタイル：タイル

 

ピックアップスライダー：小

 

ピックアップスライダー：中

 

ピックアップスライダー：大

 

画像

自分で用意した画像を、ファーストビューに設定できます。

 

ファーストビューに画像を設定するときは

PC とスマホにそれぞれ背景を設定する必要があります。

 

レスポンシブなので、基本的にはサイズを自動で調整してくれますが

 

僕の場合だと、

このサイズで綺麗に表示されたので、上手く表示できない方は参考にしてください。

 

画像を背景にする のチェックを外すと、コンテンツが表示されなくなります。

 

画像リピート設定 をオンにすると、以下のように画像が繰り返し表示されます。

↓　　　↓　　　↓

 

背景カラー は、png のように、背景を透過する画像を設置した時に設定します。

 

動画

自分でアップロードした動画はもちろん、YouTubeの動画を設定することもできます。

 

カスタム

さらに自由度の高いファーストビューの設定を行うことができます。

カスタム設定にしたい場合は、コンテンツ部分もあわせてここで設定する必要があります。

 

2-2 コンテンツ設定

コンテンツ設定で、ファーストビューに表示する、タイトルや説明文、アイコン画像などを設定します。

 

コンテンツ設定の設定項目は３つです。

 

テンプレート

あらかじめ用意されている各項目の内容を埋めていくだけで、ファーストビューコンテンツを作成できます。

 

画像

 

ここに画像を設定すると、以下のように表示されます。

 

タイトル

 

ファーストビューに表示させる、タイトルと文字色をここで設定します。

 

説明文

 

ファーストビューに表示させる、説明文と文字色をここで設定します。

 

ボタン

 

ボタンタイトルとリンク先を設定すると、ファーストビューにボタンリンクを設置することもできます。

 

それぞれの設定が終わったら、画面下の 変更を保存 ボタンを押すことをお忘れなく！

 

さいごに

今回は、Diver のファーストビューの設定方法について解説しました。

 

ブログを開いてすぐ目につくところに、画像や解説文を設置することで

あなたのブログがどんな内容なのかを、読者にアピールすることができます。

 

このページのまとめです。

 

 

注目の記事現役アフィリエイターが Diver をおすすめする７つの理由【もう他のテーマはいりません】

注目の記事Diverを使うなら必須のSEO設定方法【やさしく解説します】