【Diver】入力補助機能の使い方、作れるデザインの詳細

Diverの入力補助は、見出しやランキングなど23種類のデザインパーツを簡単に作成できる機能です。

このページでは、各入力補助の機能やデザイン、簡単な作り方をご紹介します。

入力補助機能で作れるデザインパーツ一覧

入力補助で作れるデザインパーツは23種類あります。

各入力補助の設定画面やデザインプレビュー

各入力補助の設定画面や、実際に使用した際のプレビューを紹介していきます。

どの入力補助も、入力フォームに沿うだけの簡単ステップです。

見出しの設定画面やデザインプレビュー

見出しデザインは、カスタマイザーで設定されている見出しデザイン以外のものを使用したい時に便利です。

h2～h5のデザイン変更に加え、divで見出し扱いにせずに見出しデザインを使用することもできます。

見出し機能の設定画面

入力補助で作れる見出しデザインは、4項目を設定できます。

プリセットカラーは7種あります。

カスタムカラーを選択すると、「テキスト色」「背景色」「枠線色」の3部位を個別にカラー設定できます。

見出し機能のデザインプレビュー

ボタンの設定画面やデザインプレビュー

ボタンデザインは、ボタン形式のリンクを作りたい際に便利です。

画面幅いっぱいのボタンを作成したり、画面幅中央に作成したボタンを設置することも簡単にできます。

ボタン機能の設定画面

入力補助で作れるボタンデザインは、9項目を設定できます。

ボタン生成タイプは、「通常」と「広告タグから生成」の2タイプから選択できます。

「通常」はリンク先URLとボタンテキストを任意に設定するタイプです。

「広告タグから生成」の場合は、広告タグからリンク先URLとボタンテキストを自動的に抽出してくれます。

カスタムカラーを選択すると、「テキスト色」「背景色」「枠線色」の3部位を個別にカラー設定できます。

オプションの「ブロック」は、ボタンを幅中央に設置する設定です。

「インライン」は通常の設置方法で、「フルサイズ」は画面幅いっぱいのボタンを設置する方法です。

また、ボタンアイコン設定で、任意のアイコンをボタンテキストの前後どちらかにつけることができます。

ボタン機能のデザインプレビュー

<a href="https://www.infotop.jp/click.php?aid=291216&iid=70619&pfg=1">アフィリエイター収益最大化!最新SEO対策済み!wordpressテーマ「Diver」</a>

バッジの設定画面やデザインプレビュー

バッジは、文頭にアクセントをつけたい際などに便利です。

バッジにしたいテキストにアイコンを付けることもできます。

バッジ機能の設定画面

入力補助で作れるバッジデザインは、4項目を設定できます。

カスタムカラーを選択すると、「テキスト色」「背景色」の2部位を個別にカラー設定できます。

バッジアイコンは、テキストの前後どちらかにアイコンを設置することができます。

バッジ機能のデザインプレビュー

スタイル1fa-arrow-circle-right

fa-backwardスタイル2

スタイル3

スタイル4

スタイル5

スタイル6

スタイル7

囲い枠の設定画面やデザインプレビュー

囲い枠は、テキストやリストを囲んで目立たせたり、区切ったりする際に便利です。

タイトルもつけられるので（div属性）、囲い枠で囲ったブロックがどういう内容なのかを一目で示すことができます。

囲い枠機能の設定画面

入力補助で作れる囲い枠デザインは、6項目を設定することができます。

カスタムカラーを選択すると、「見出し背景色」「見出しテキスト色」「背景色」「枠線色」「テキスト色」を個別に設定できます。

テキストには、文章やリストをはじめ、入力補助やショートコードも入力可能です。

アイコンはタイトル内かコンテンツ内のどちらかに挿入できます。どちらも文頭に挿入されます。

囲い枠機能のデザインプレビュー

区切り線の設定画面やデザインプレビュー

区切り線は、コンテンツを一度区切りたい時に便利です。

区切り線を挿入すると、水平方向にラインが挿入されます。

区切り線機能の設定画面

入力補助で作れる区切り線デザインは、3項目を設定できます。

スタイルは「一本線」「点線」「二重線」の3種類から選択できます。

線色はカラーパレットから選択します。パレット内にプリセットカラーもあり、カラーコードを入力することもできます。

区切り線機能のデザインプレビュー

一本線　太さ2

点線　太さ2

二重線　太さ5

リストデザインの設定画面やデザインプレビュー

リストデザインは、通常のリストよりデザイン性の高いものを簡単に作れます。

箇条書きリストはもちろん、順序付きリストもデザインがあるので便利です。

リストデザイン機能の設定画面

入力補助で作れるリストデザインは、3項目を設定できます。

プリセットカラーは青（水色）、緑、赤（ピンク色）、黄、オレンジ、グレー、黒の7種。カスタムカラーはありません。

リストデザインは、箇条書きリスト（ul）と順序付きリスト（ol）とに分けてあります。

リストデザイン機能のデザインプレビュー

アイコンの設定画面やデザインプレビュー

アイコンは、見出しやテキスト、ボタンなどにデザイン性を持たせたい時に便利です。

挿入できるアイコンの種類は数えきれない位たくさんあります。

アイコンサイズは、周囲の文字サイズに合わせることも、任意のサイズを設定することも容易です。

アイコン機能の設定画面

入力補助で作れるアイコンデザインは、3項目を設定できます。

アイコンの選択は、タイル状に並べられたアイコンから選択します。

色はカラーパレットから設定する形式です。

サイズは「周りに合わせる」「サイズを指定する」の2種類から選択します。

「周りに合わせる」の場合は周囲の文字サイズを判別してアイコンのサイズが設定されます。

アイコン機能のデザインプレビュー

fa-amazonサイズ：周りに合わせる

fa-caret-square-o-rightサイズ：16px

fa-cc-visaサイズ：30px

fa-exclamation-triangleバッジ+アイコン

グリッドレイアウトの設定画面やデザインプレビュー

グリッドレイアウトは、コンテンツの配置を分割したい際に便利です。

横幅を2～4分割にすることができ、「1：2」や「1：3」などの分割も可能です。

グリッドレイアウト機能の設定画面

入力補助で作れるグリッドレイアウトは、2項目を設定できます。

レイアウトオプションでは、モバイル時にグリッドレイアウトを解除する設定や、グリッドレイアウト内の余白を0にする設定が行えます。

グリッドレイアウト機能のデザインプレビュー

引用の設定画面やデザインプレビュー

引用は、他サイト等から文章を引用してくる際に、引用していることを分かりやすくするために使用します。

引用先のサイトタイトルやリンク設置などが容易にできるデザインです。

引用機能の設定画面

入力補助で作れる引用デザインは、3項目を設定できます。

引用元タイトルや引用元URLは未入力にもできます。

引用元URLにURLを入力すると、引用元タイトルに新しいタブで開くリンクを自動的に生成します。

引用元タイトルを未入力にして引用元URLを入力すると、引用文のみが表示されます。

引用機能のデザインプレビュー

Diverの入力補助は、見出しやランキングなど23種類のデザインパーツを簡単に作成できる機能です。

Diverレビューノート　【Diver】入力補助機能の使い方、作れるデザインの詳細

Diverの入力補助は、見出しやランキングなど23種類のデザインパーツを簡単に作成できる機能です。

（引用元タイトルと引用元URL未入力）

Diverの入力補助は、見出しやランキングなど23種類のデザインパーツを簡単に作成できる機能です。

（引用元URL未入力）

Diverレビューノート　【Diver】入力補助機能の使い方、作れるデザインの詳細

AMP表示の設定画面

AMP表示は、AMP表示時に限り表示コンテンツ（画像など）を変更したい場合に使用します。

AMP表示機能の設定画面

入力補助で作れるAMP表示機能は、2項目を設定できます。

通常時のみ表示部分に通常時に表示させたいコンテンツを入力し、AMP時のみ表示部分にAMP表示時に表示させたいコンテンツを入力します。

AMP表示機能のデザインプレビュー

横棒グラフの設定画面やデザインプレビュー

横棒グラフは、簡易的なグラフを作りたい際に便利です。

一本一本グラフを作る形式です。視覚的にわかりやすいグラフが作れます。

横棒グラフ機能の設定画面

入力補助で作れる横棒グラフは、3項目を設定できます。

グラフ内テキストは、棒グラフ内に表示されます。棒グラフ以上の長さのテキストはグラフ内に表示できず、溢れてしまいます。

棒グラフの長さは、％で入力します。

グラフ色はカラーパレット形式です。

横棒グラフ機能のデザインプレビュー

吹き出しの設定画面やデザインプレビュー

吹き出しは、大きな吹き出しを作ることができます。

大きな画像に吹き出しを付けたい時などに便利です。

吹き出し機能の設定画面

入力補助で作れる吹き出しは、3項目を設定できます。

吹き出し内に表示させたい内容をテキストに入力します。

吹き出しをどの方向（上下左右）に向かせたいかをタイプで設定します。

角丸は0pxだと角ありになります。

吹き出し機能のデザインプレビュー

口コミの設定画面やデザインプレビュー

口コミは、星評価や口コミ内容を良いデザインで表示できる機能です。

誰が口コミしているのか（50代女性など）、口コミ者の画像などもつけることができて結構良いデザインです。

口コミ機能の設定画面

入力補助で作れる口コミは、5項目を設定できます。

評価は小数点も設定できます。0にすると非表示になります。

0評価を表示したい場合は、0.1で設定するといいと思います。

アイコン画像は、大きめの画像でも適切なサイズに縮小されます。

各項目は未入力にすると、非表示になります。

口コミ機能のデザインプレビュー

会話の設定画面やデザインプレビュー

会話機能は、会話風のデザインを作りたい場合や、一言二言程度のコメントを残したい場合に使えると思います。

よく使う発言者の画像はDiverオプションで設定できるので、いちいち画像を探す手間が省けます。

会話機能の設定画面

入力補助で作れる会話デザインは、7項目を設定できます。

アイコンは、Diverオプションで設定した画像が一覧に並びます。一覧にない画像は、「選択」ボタンから設定します。

色は8種類のプリセットカラーとカスタムカラーがあります。

カスタムカラーは、背景色と文字色を個別に設定できます。

会話機能のデザインプレビュー

ランキングの設定画面やデザインプレビュー

ランキングは、1商品につき1つずつ作っていくタイプのランキングデザインです。

ランキングデザインを複数個作ることで、ランキングを作ることができます。

ランキング機能の設定画面

入力補助で作れるランキングデザインは、19項目を設定できます。

ランキングでも評価は5段階評価で、小数点設定もできます。

表示スタイルは2種類あります。

タイプは商材小見出しの要素をH2～H5、divの中から選択できます。

枠線は0pxにすると非表示になります。ボタンもURLを未入力にすると非表示になります。

ランキング機能のデザインプレビュー

レビューの設定画面やデザインプレビュー

レビューは5段階の星評価を表示できる機能です。

ランキングデザインを自分で作りたい場合や、簡易的に評価を表示したい場合に使えると思います。

レビュー機能の設定画面

入力補助で作れるレビューデザインは、2項目を設定できます。

レビュースコアは5段階、小数点設定可能です。

タイプでサイズを設定します。

レビュー機能のデザインプレビュー

評価4.6　タイプ大

評価3.2　タイプ中

評価0　タイプ小

レビュー表の設定画面やデザインプレビュー

レビュー表は、星レビューとレビューコメントを表にして表示できる機能です。

表は1列のタイプと2列のタイプがあり、組み合わせることもできるのでカスタマイズ性が高めです。

レビュー表機能の設定画面

レビュー表デザインの設定画面は少し特殊です。

まず、レビュー表のデザインを2項目から選択します。

フルサイズで追加すると、画像の上側の表が表示されます。

ハーフサイズで追加すると、画像の下側の表が表示されます。

フルサイズとハーフサイズの設定項目はどちらも3項目です。

表示スタイルはスターかテキストかを選択できます。

また、複数のサイズを作成した場合、設定画面内ではドラッグアンドドロップで順序を入れ替えることができます。

レビュー表機能のデザインプレビュー

ポップアップの設定画面やデザインプレビュー

ポップアップは、レビューノートで多用されている機能です。

画像やテキストをクリックした場合に、画像やテキストをポップアップさせる機能です。

画像を拡大させたい場合や、長めの文章を省略しておきたい場合に便利だと思います。

ポップアップ機能の設定画面

入力補助で作れるポップアップデザインは、2項目を設定できます。

リンクコンテンツは、クリックするコンテンツです。ページを読み込んだ際に表示されています。

画像を拡大させることを例にすると、小さい画像をリンクコンテンツに入力します。

表示コンテンツは、ポップアップで表示されるコンテンツです。リンクコンテンツをクリックした際に表示されます。

先ほどの例で言うと、大きな画像を表示コンテンツに入力します。

ポップアップ機能のデザインプレビュー

ネタバレ注意

Q&Aの設定画面やデザインプレビュー

Q&Aは、Q&Aを作成するときにとても有用です。

質問と答えに表示したい文章を入力するだけで、簡単にQ&Aが作成できます。

Q&A機能の設定画面

入力補助で作れるQ&Aデザインは、2項目を設定できます。

項目の通り、質問（Q部分）に表示する文章と、回答（A部分）に表示する文章を入力するだけです。

Q&A機能のデザインプレビュー

コードの設定画面やデザインプレビュー

コードは、HTMLコードやCSSコードなどの「直接入力すると適切に表示されない文章」を他の文章と区別して表示する機能です。

コード機能の設定画面

入力補助で作れるコードデザインは、3項目を設定できます。

言語では、HTML/PHP/CSS/javascript/その他の5種類から選択できます。

言語を選択しておくと、コードを見やすくカラーリングしてくれます。

コード機能のデザインプレビュー

HTML（行番号あり）

<html>
<body>
</body>
</html>

PHP（行番号あり）

<?php echo "Hello, world!"; ?>

CSS（行番号なし）

body{
font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif
}

javascript（行番号あり）

console.log("Hello World");

その他（行番号あり）

Print("Hello World!");

トグルの設定画面やデザインプレビュー

トグルは、クリックするたびに隠されていたコンテンツを表示したり非表示にしたりできる機能です。

アコーディオンと呼ばれている機能に似た機能です。アコーディオンは、よくある質問やサイドメニュー等によく使われています。

トグル機能の設定画面

入力補助で作れるトグルデザインは、2項目を設定できます。

タイトルが最初に表示されている部分です。

テキストはトグルをクリックした際に表示される部分です。

トグル機能のデザインプレビュー

QRコードの設定画面やデザインプレビュー

QRコードは、URLを設定することで、QRコードを生成する機能です。

QRコード機能の設定画面

入力補助で作れるQRコードは、2項目を設定できます。

サイズの単位はpxです。QRコードは中央寄せで表示されます。

QRコード機能のデザインプレビュー

サイズは150pxで、Diverレビューノートのトップページを設定しています。

300pxはこんな感じです。

記事一覧の設定画面やデザインプレビュー

記事一覧は、閲覧数ランキングや投稿日、更新日順などの条件を元に記事一覧を作る機能です。

関連記事機能とは違い、条件に応じた記事を自動的に取得して一覧化してくれます。

記事一覧機能の設定画面

入力補助で作れる記事一覧デザインは、カテゴリータイプだと7項目、ランキングタイプだと5項目設定できます。

カテゴリータイプの設定項目は以下の7項目です。

並び替え条件は、取得記事条件でもあります。

投稿日順にすると、投稿日の新しいものから抽出され、並び順もその通りになります。

更新日順は更新日の新しいものから抽出され、並び順もその通りです。

ランダムは取得条件および並び順がランダムです。

ランキングタイプの設定項目は、以下の5項目です。

ランキングタイプを表示するには、Analitics API設定が必要です。

ランク条件で期間を設定することで、設定期間内に閲覧数の多い順に記事がランキングされます。

記事一覧機能のデザインプレビュー

全て5記事表示設定です。

カテゴリータイプ/取得カテゴリー未設定/投稿日順（降順）/シンプルスタイル/日付表示/カテゴリー表示です。

• 2019-03-29
  Diverの機能
  【Diver】GoogleAnalyticsとAPIの設定方法
• 2019-03-15
  Diverの機能
  【Diver】SEOプラグインは不要！充実したSEO対策/設定を紹介
• 2019-03-06
  Diverの機能
  【Diver】ショートコードの使い方、入力補助との違い
• 2019-02-07
  Diverの機能
  【Diver】入力補助機能の使い方、作れるデザインの詳細
• 2019-01-29
  Diverの機能
  【Diver】LPページの機能や設定項目、プレビュー画像

カテゴリータイプ/取得カテゴリー未設定/更新日順（昇順）/グリッドスタイル/日付非表示/カテゴリー非表示です。

• 【Diverで作る】少しデザイン性のあるCTAの作り方

• 【Diver】カスタマイザー機能の設定項目とプレビュー画像

• 【Diver】ショートコードの使い方、入力補助との違い

• 【Diver】入力補助機能の使い方、作れるデザインの詳細

• 【Diver】設置できるCTAの種類や機能、プレビュー画像

カテゴリータイプ/取得カテゴリー未設定/ランダム（降順）/リストスタイル/日付非表示/カテゴリー表示です。

• CTA

  【Diverで作る】少しデザイン性のあるCTAの作り方

• Diverの機能

  【Diver】入力補助機能の使い方、作れるデザインの詳細

• Diverの機能

  【Diver】LPページの機能や設定項目、プレビュー画像

• Diverの機能

  【Diver】SEOプラグインは不要！充実したSEO対策/設定を紹介

• CTA

  【Diver】設置できるCTAの種類や機能、プレビュー画像

ランキングタイプ/取得カテゴリー未設定/ランク条件全期間/グリッドスタイル/日付表示/カテゴリー表示です。

• Diverの機能

  【Diver】カスタマイザー機能の設定項目とプレビュー画像

  2019-01-16

• Diverの機能

  【Diver】LPページの機能や設定項目、プレビュー画像

  2019-01-29

• Diverの機能

  【Diver】入力補助機能の使い方、作れるデザインの詳細

  2019-02-07

• Diverの機能

  【Diver】SEOプラグインは不要！充実したSEO対策/設定を紹介

  2019-03-15

• CTA

  【Diver】設置できるCTAの種類や機能、プレビュー画像

  2019-01-28

入力補助機能の使い方、作れるデザイン まとめ

いかがでしたでしょうか。Diverの入力補助はバリエーションがたくさんある上、簡単にデザインを作ることができます。

サイト制作で使いたいと思うデザインパーツがほとんど網羅されています。

また、アップデートで入力補助機能も拡充されているので、使いやすくなったり使えるデザインパーツが増えたりするのも魅力です。