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

 

わかば
私のブログを開いた時に、かわいい画像を表示させたいんですけど
Diver にそんな機能ってありますか?

山本
それならファーストビューで簡単に設定することができるよ

わかば
へぇ~そうなんですね!
では、またやり方教えてもらってもいいですか?

山本
もちろんOKだよ!

 

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

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

1.ファーストビューとは

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

 

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

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

 

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

ファーストビューとは

 

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

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

 

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

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

 

2.ファーストビューの設定方法

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

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

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

 

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

  • 背景設定
  • コンテンツ設定

 

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

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

 

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

 

2-1 背景設定

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

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

 

表示位置

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

 

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

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

 

表示位置:メニューの下

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

 

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

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

 

表示位置:最上部

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

 

表示オプション

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

 

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

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

 

ファーストビュー

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

 

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

 

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

  • 利用しない
  • シンプル
  • ピックアップスライダー
  • 画像
  • 動画
  • カスタム

 

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

 

山本
背景やテキストの色は、もちろん自由に変更することができます
背景スタイル:シンプル

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

 

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

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

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

 

背景スタイル:ドット

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

 

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

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

 

背景スタイル:タイル

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

 

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

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

 

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

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

 

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

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

 

画像

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

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

 

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

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

 

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

 

僕の場合だと、

  • PC:1900×400px
  • SP(スマホ):500×600px

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

 

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

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

 

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

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

↓   ↓   ↓

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

 

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

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

 

動画

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

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

 

カスタム

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

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

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

 

2-2 コンテンツ設定

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

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

 

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

  • なし
  • テンプレート
  • カスタム

 

テンプレート

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

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

 

画像

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

 

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

山本
この画像のように背景を透過したい場合は
「jpg」ではなく「png」の画像を使うようにしましょう

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

 

タイトル

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

 

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

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

 

説明文

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

 

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

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

 

ボタン

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

 

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

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

 

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

変更を保存

 

さいごに

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

 

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

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

 

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

  • ファーストビューはサイトの1番上のエリアのこと
  • ファーストビューの設定方法
  • 背景とコンテンツをそれぞれ設定すると表示される
  • ファーストビューを使って読者にアピールしよう

 

わかば
画像だけじゃなくて、説明文とかリンクも設置できるんですねー!

山本
ファーストビューは1番見られる場所だから
ブログを読者にアピールするには最適の機能だよね

 

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

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

 

ゼロから始める!ワードプレスブログ スタートマニュアル
ワードプレスブログスタートマニュアル

ブログには興味があるけど、ワードプレスってなんか難しそうだなぁなんて思ってませんか?

わー研。では、そんなあなたのために、手順通り進めるだけでワードプレスブログが開設できるマニュアル(特設ページ)をご用意しました!

もちろん無料で利用が可能ですので、はじめての方はぜひご活用ください!

Twitterでフォローしよう

おすすめの記事