【Diver】LPページの機能や設定項目、プレビュー画像のアイキャッチ画像

Diverは、ブログやサイト制作だけでなく、LP(ランディングページ)も簡単に制作することができます。

このページでは、DiverのLP制作機能の詳細や実際に作成した際のプレビュー(イメージ)画像をご紹介します。

このページで分かること
  • LP制作機能で設定できること
  • DiverのLPページのプレビュー画像
  • 投稿ページとの違い

DiverのLPページで設定できること

DiverのLPページで設定できること
  • タイトル
  • テキスト(内容)
  • LPファーストビュー
  • 背景設定
  • サイズ設定
  • デザイン設定(メインエリア背景色など)
  • head内出力設定
  • カスタムCSS

タイトル

LP(ランディングページ)のタイトルは、ページ内には表示されません。

タイトルに入力した内容は、ウィンドウのタブに表示されます。
LPのタイトルに入力した内容は、ウィンドウのタブに表示されます。

まい
もちろん、メタタグにもページタイトルとして反映されます!

テキスト(内容)

LPのタイトルとテキスト入力フォーム

LPのタイトルとテキスト入力フォーム

LP(ランディングページ)の内容をここに入力します。

何も入力していない状態だと、こんな感じです。
テキスト未入力状態のLPプレビュー画像

テキスト未入力状態のLPプレビュー画像

まっさらで何もありません。

表示内容が少なすぎるので、メインエリア(白いエリア)の下にグレー部分ができてしまっていますが、実際にはメインエリアの下部にグレー部分はありません。

入力補助やショートコードも問題なく使用できるので、投稿記事や固定記事の制作と同じ感覚でLP(ランディングページ)を作ることができます。

まい
LPページでは、見出しデザインの「ボックス(幅いっぱい)」のデザインが投稿記事と違った表示になってしまいます。

 

幅いっぱいの見出しをLPで使用したい場合は、CSSや余白設定で調整する必要があります!

 

その他、いくつかの入力補助をLPで撮影してきました!

ボックス(幅いっぱい)の見出しランキングと関連記事ボタンと会話
ボックス(幅いっぱい)の見出しをLPで表示したプレビュー画像

ボックス(幅いっぱい)の見出しをLPで表示したプレビュー画像
LPで入力補助の「ランキング」や関連記事を表示したプレビュー画像

LPで入力補助の「ランキング」や関連記事を表示したプレビュー画像
LPで入力補助の「ボタン」や「会話」を表示したプレビュー画像

LPで入力補助の「ボタン」や「会話」を表示したプレビュー画像

LPファーストビュー


DiverのLP用ファーストビューは、PC表示時とモバイル表示時で別の画像を設定することができます。

まい
「PC版では目の引く大きな画像を、モバイル版ではモバイルに合わせた情報量の画像を」と使い分けることができます!

 

タブレットはPC版の画像が使用されます(*'ω'*)

PC版では、ウィンドウサイズに合わせて画像が縦横比そのままに拡大されます。

正方形に近い形の画像を使用すると、ファーストビューがとても大きくなってしまう場合があるので注意が必要です。

まい
LPファーストビューがどう見えるのか、PC版とモバイル版で撮影しました!
設定イメージPC版タブレット版モバイル版
LPのファーストビュー設定イメージ

LPのファーストビュー設定イメージ

タブレット版ファーストビュープレビュー画像

タブレット版ファーストビュープレビュー画像
モバイル版ファーストビュープレビュー画像

モバイル版ファーストビュープレビュー画像

背景設定

LPの背景設定イメージ

DiverのLPは、背景も個別に設定することができます。

リピート画像か、背景カラーを設定するかを選択できます。

また、どちらも設定しない場合(デフォルト設定も消して未入力状態にする)透明扱いになり、カスタマイザーで設定されている背景が適用されます。

まい
背景設定ブロックや、実際に設定した場合のプレビュー画像を撮影しました!
設定ブロックリピート画像を使用カスタマイザーの背景を使用
LPの背景設定ブロック

LPの背景設定ブロック

サイズ設定

LPのサイズ設定
LPでは、ウィンドウサイズも個別に設定することができます。

サイズ設定では、%かpx(ピクセル)のどちらかで数値設定します。

まい
サイズ設定を%表示にすると、下にある画像のようにファーストビューも縦横比そのままに拡縮します。

 

画像の拡縮が気になる方は、px(ピクセル)で設定するといいと思います!

ウィンドウサイズの大きい時ウィンドウサイズの小さい時
LP ウィンドウサイズの大きい時のファーストビュープレビュー画像

LP ウィンドウサイズの大きい時のファーストビュープレビュー画像
LP ウィンドウサイズの小さい時のプレビュー画像

LP ウィンドウサイズの小さい時のプレビュー画像

また、デバイスごとに余白設定もできます。1px以上の数値が設定できます。

自由に余白を設定できるので、レスポンシブデザインに合わせて余白を調節できます。

まい
余白設定「左右20px、上下40px(デフォルト)」「左右100px、上下100px」「左右1px、上下1px」のデザインを撮影しました!
左右20px、上下40px(デフォルト)左右100px、上下100px左右1px、上下1px
余白設定「左右20px、上下40px」のLPイメージ

余白設定「左右20px、上下40px」のLPイメージ
余白設定「左右100px、上下100px」のLPイメージ

余白設定「左右100px、上下100px」のLPイメージ
余白設定「左右1px、上下1px」のLPイメージ

余白設定「左右1px、上下1px」のLPイメージ
余白設定「左右20px、上下40px」のLP最下部イメージ

余白設定「左右20px、上下40px」のLP最下部イメージ
余白設定「左右100px、上下100px」のLP最下部イメージ

余白設定「左右100px、上下100px」のLP最下部イメージ
余白設定「左右1px、上下1px」のLP最下部イメージ

余白設定「左右1px、上下1px」のLP最下部イメージ

デザイン設定(メインエリア背景色など)

LPのデザイン設定:背景に影効果

デザイン設定では、メインエリアの背景色や影効果の有無を設定できます。

メインエリアの背景色は、未入力状態(デフォルト設定も消去)にすることで透明にもできます。

まい
透明にすると、背景設定の背景色(リピート画像)がメインエリアにも適用されます!

 

背景色も透明の場合は、カスタマイザーで設定されている背景が適用されます。

デザイン設定ボックス影効果あり影効果なしメインエリア背景色透明
LPのデザイン設定

LPのデザイン設定
LPのデザイン設定:背景に影効果

LPのデザイン設定:背景に影効果
LPのデザイン設定:背景に影効果無し

LPのデザイン設定:背景に影効果無し
LPのデザイン設定:背景色未入力(透明)

LPのデザイン設定:背景色未入力(透明)

head内出力設定

LPのhead内出力エリア

DiverのLP(ランディングページ)には、head内出力エリアも搭載されています。

この入力フォームに入力すると、head内に入力した内容が出力されます。

トラッキングコード等をhead内に出力したい場合に便利です。

投稿ページとの違い

LP(ランディングページ)の投稿ページとの大きな違いは、以下の点が挙げられます。

  • head内出力エリアがある
  • サイズ設定や背景色設定をLP(ランディングページ)に対して個別に行える
  • サイドバーウィジェットやヘッダー、フッターがない

見出しデザインなどのカスタマイザー設定や、CSS設定はLP(ランディングページ)でも適用されます。

もし、見出しデザインを投稿ページと違うものにしたい場合は、入力補助の見出しを利用してデザインを変更するとよいでしょう。

また、カスタムCSSも投稿ページと同様に搭載されているので、LP(ランディングページ)用のCSSも設定可能です。

まい
ヘッダーやフッターは必要な場合は、固定ページで「サイドバー非表示」設定にすると、ヘッダーやフッターのあるLP風ページが作れます!

LPページの機能や設定項目 まとめ

いかがでしたでしょうか。

DiverではLPを投稿ページのように簡単に作ることができます。

入力補助など、Diverの独自機能も使用できるので、ページ内容も投稿ページを作るかのように苦戦することなく制作できます。

サイトやブログ制作ももちろん、LP(ランディングページ)を必要とするサイト制作者におすすめのWordPress有料テーマと言えるでしょう。

あらゆるデザインがDiverで叶う。それも難しい操作無しで。
Diverロゴ
イメージ画像

「企業に納品してきたノウハウと技術をすべての人に利用可能なWordpressテーマ」がモットーの有料WordPressテーマ「Diver」。 “ユーザーの質問や意見に真摯に応える” 開発陣の想いは無制限のメールサポートに留まらず、アップデートにも反映されています。もはやそれは、初心者でもあらゆるデザインが作れてしまう程の性能。Diverの能力を知ってしまったら、もう他のテーマには心移りできなくなってしまうでしょう。

販売価格 : 17,980円 (税込)/当サイト限定購入特典あり
無期限・無制限メールサポート付き/無料バージョンアップ有り
おすすめの記事