Diverの入力補助は、見出しやランキングなど23種類のデザインパーツを簡単に作成できる機能です。
このページでは、各入力補助の機能やデザイン、簡単な作り方をご紹介します。
- 入力補助機能で作れるデザインパーツの種類
- 入力補助の簡単な使い方
- 入力補助で作れるデザインパーツのプレビュー画像
入力補助機能で作れるデザインパーツ一覧
入力補助で作れるデザインパーツは23種類あります。
各入力補助の設定画面やデザインプレビュー
各入力補助の設定画面や、実際に使用した際のプレビューを紹介していきます。
どの入力補助も、入力フォームに沿うだけの簡単ステップです。
見出しの設定画面やデザインプレビュー
見出しデザインは、カスタマイザーで設定されている見出しデザイン以外のものを使用したい時に便利です。
h2~h5のデザイン変更に加え、divで見出し扱いにせずに見出しデザインを使用することもできます。
見出し機能の設定画面
入力補助で作れる見出しデザインは、4項目を設定できます。
- タイプ(h2~h5、div)
- タイトル
- スタイル
- 色(カスタムカラー有)
プリセットカラーは7種あります。
カスタムカラーを選択すると、「テキスト色」「背景色」「枠線色」の3部位を個別にカラー設定できます。
見出し機能のデザインプレビュー
ボタンの設定画面やデザインプレビュー
ボタンデザインは、ボタン形式のリンクを作りたい際に便利です。
画面幅いっぱいのボタンを作成したり、画面幅中央に作成したボタンを設置することも簡単にできます。
ボタン機能の設定画面
入力補助で作れるボタンデザインは、9項目を設定できます。
- ボタン生成タイプ
- リンクオプション
- ボタンテキスト(ボタン生成タイプ「通常」のみ)
- リンク先URL(ボタン生成タイプ「通常」のみ)
- ボタンタイプ
- 色(カスタムカラー有)
- ボタンアイコン
- オプション
- 大きさ
ボタン生成タイプは、「通常」と「広告タグから生成」の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項目を設定できます。
- リストHTML(内容)
- リストデザイン
- 色(プリセットカラーのみ)
プリセットカラーは青(水色)、緑、赤(ピンク色)、黄、オレンジ、グレー、黒の7種。カスタムカラーはありません。
リストデザインは、箇条書きリスト(ul)と順序付きリスト(ol)とに分けてあります。
リストデザイン機能のデザインプレビュー
- 箇条書きリスト スタイル1
- テスト
- 箇条書きリスト スタイル2
- テスト
- 箇条書きリスト スタイル3
- テスト
- 箇条書きリスト スタイル4
- テスト
- 箇条書きリスト スタイル5
- テスト
- 箇条書きリスト スタイル6
- テスト
- 箇条書きリスト スタイル7
- テスト
- 順序付きリスト スタイル1
- テスト
- 順序付きリスト スタイル2
- テスト
- 順序付きリスト スタイル3
- テスト
- 順序付きリスト スタイル4
- テスト
- 順序付きリスト スタイル5
- テスト
- 順序付きリスト スタイル6
- テスト
- 順序付きリスト スタイル7
- テスト
- 順序付きリスト スタイル8
- テスト
アイコンの設定画面やデザインプレビュー
アイコンは、見出しやテキスト、ボタンなどにデザイン性を持たせたい時に便利です。
挿入できるアイコンの種類は数えきれない位たくさんあります。
アイコンサイズは、周囲の文字サイズに合わせることも、任意のサイズを設定することも容易です。
アイコン機能の設定画面
入力補助で作れるアイコンデザインは、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にする設定が行えます。
グリッドレイアウト機能のデザインプレビュー
余白あり、モバイル時解除なし
余白なし(余白0設定)。
モバイル時解除あり。
引用の設定画面やデザインプレビュー
引用は、他サイト等から文章を引用してくる際に、引用していることを分かりやすくするために使用します。
引用先のサイトタイトルやリンク設置などが容易にできるデザインです。
引用機能の設定画面
入力補助で作れる引用デザインは、3項目を設定できます。
- 引用文
- 引用元タイトル
- 引用元URL
引用元タイトルや引用元URLは未入力にもできます。
引用元URLにURLを入力すると、引用元タイトルに新しいタブで開くリンクを自動的に生成します。
引用元タイトルを未入力にして引用元URLを入力すると、引用文のみが表示されます。
引用機能のデザインプレビュー
Diverの入力補助は、見出しやランキングなど23種類のデザインパーツを簡単に作成できる機能です。
Diverの入力補助は、見出しやランキングなど23種類のデザインパーツを簡単に作成できる機能です。
(引用元タイトルと引用元URL未入力)
Diverの入力補助は、見出しやランキングなど23種類のデザインパーツを簡単に作成できる機能です。
(引用元URL未入力)
Diverレビューノート 【Diver】入力補助機能の使い方、作れるデザインの詳細
AMP表示の設定画面
AMP表示は、AMP表示時に限り表示コンテンツ(画像など)を変更したい場合に使用します。
AMP表示機能の設定画面
入力補助で作れるAMP表示機能は、2項目を設定できます。
- 通常時のみ表示
- AMP時のみ表示
通常時のみ表示部分に通常時に表示させたいコンテンツを入力し、AMP時のみ表示部分にAMP表示時に表示させたいコンテンツを入力します。
AMP表示機能のデザインプレビュー
AMP時のみ表示するコンテンツです。横棒グラフの設定画面やデザインプレビュー
横棒グラフは、簡易的なグラフを作りたい際に便利です。
一本一本グラフを作る形式です。視覚的にわかりやすいグラフが作れます。
横棒グラフ機能の設定画面
入力補助で作れる横棒グラフは、3項目を設定できます。
- グラフ内テキスト
- 長さ
- グラフ色
グラフ内テキストは、棒グラフ内に表示されます。棒グラフ以上の長さのテキストはグラフ内に表示できず、溢れてしまいます。
棒グラフの長さは、%で入力します。
グラフ色はカラーパレット形式です。
横棒グラフ機能のデザインプレビュー
1位 猫派
1位 犬派
3位 ハムスター派
4位 カワウソ派
5位 オコジョ派
行間や段落スペースを広めに設定している場合、グラフ部分だけCSSで行間を狭く設定するといいと思います!
また、グラフの長さ以上のテキストを入力すると、グラフ外にテキストが表示されてしまいデザインが崩れるので注意が必要です!
吹き出しの設定画面やデザインプレビュー
吹き出しは、大きな吹き出しを作ることができます。
大きな画像に吹き出しを付けたい時などに便利です。
吹き出し機能の設定画面
入力補助で作れる吹き出しは、3項目を設定できます。
- テキスト
- タイプ(吹き出しの向き)
- 角丸
吹き出し内に表示させたい内容をテキストに入力します。
吹き出しをどの方向(上下左右)に向かせたいかをタイプで設定します。
角丸は0pxだと角ありになります。
吹き出し機能のデザインプレビュー
角丸は0px設定です。
文章を長めにすると、幅広になっていきます。あああああああああああああああああああああああああああああ
角丸5pxです。
角丸20pxです。
口コミの設定画面やデザインプレビュー
口コミは、星評価や口コミ内容を良いデザインで表示できる機能です。
誰が口コミしているのか(50代女性など)、口コミ者の画像などもつけることができて結構良いデザインです。
口コミ機能の設定画面
入力補助で作れる口コミは、5項目を設定できます。
- 評価
- 口コミタイトル
- テキスト
- アイコン画像
- 名前等
評価は小数点も設定できます。0にすると非表示になります。
0評価を表示したい場合は、0.1で設定するといいと思います。
アイコン画像は、大きめの画像でも適切なサイズに縮小されます。
各項目は未入力にすると、非表示になります。
口コミ機能のデザインプレビュー
星の評価は5段階です。小数点設定もできます。
会話の設定画面やデザインプレビュー
会話機能は、会話風のデザインを作りたい場合や、一言二言程度のコメントを残したい場合に使えると思います。
よく使う発言者の画像はDiverオプションで設定できるので、いちいち画像を探す手間が省けます。
会話機能の設定画面
入力補助で作れる会話デザインは、7項目を設定できます。
- アイコン
- 名前
- 名前表示位置
- セリフ向き
- タイプ
- セリフ
- 色(カスタムカラー有)
アイコンは、Diverオプションで設定した画像が一覧に並びます。一覧にない画像は、「選択」ボタンから設定します。
色は8種類のプリセットカラーとカスタムカラーがあります。
カスタムカラーは、背景色と文字色を個別に設定できます。
会話機能のデザインプレビュー
セリフタイプ使用、プリセットカラーの白です。
心の声タイプ使用、プリセットカラーの青です。
プリセットカラーピンクです。
プリセットカラー黄色です。
プリセットカラーオレンジです。
ランキングの設定画面やデザインプレビュー
ランキングは、1商品につき1つずつ作っていくタイプのランキングデザインです。
ランキングデザインを複数個作ることで、ランキングを作ることができます。
ランキング機能の設定画面
入力補助で作れるランキングデザインは、19項目を設定できます。
- ランキング順位
- 評価
- 表示スタイル
- タイプ
- 商材タイトル
- 商材小見出し
- 説明文
- 紹介画像
- 備考
- 購入ページテキスト
- 購入ページURL
- 購入ページボタン背景色
- 購入ページボタンテキスト色
- 詳細リンクテキスト
- 詳細リンクURL
- 詳細リンクボタン背景色
- 詳細リンクボタンテキスト色
- 枠線太さ
- 枠線色
ランキングでも評価は5段階評価で、小数点設定もできます。
表示スタイルは2種類あります。
タイプは商材小見出しの要素をH2~H5、divの中から選択できます。
枠線は0pxにすると非表示になります。ボタンもURLを未入力にすると非表示になります。
ランキング機能のデザインプレビュー
表示スタイル2、評価は4です。
枠線太さは5pxです。
レビューの設定画面やデザインプレビュー
レビューは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機能のデザインプレビュー
Diverは使いやすいテーマですか?
はい。Diverは初心者から熟練者までフィットするテーマです。
コードの設定画面やデザインプレビュー
コードは、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 Pゴシック', 'MS PGothic', sans-serif
}
javascript(行番号あり)
console.log("Hello World");
その他(行番号あり)
Print("Hello World!");
<
や>
の記号を<>と入力ます。また、&
記号も&と入力します。
これを忘れると、表示がおかしくなります_(:3 」∠)_
まいもついさっきしました…(´-ω-`)
トグルの設定画面やデザインプレビュー
トグルは、クリックするたびに隠されていたコンテンツを表示したり非表示にしたりできる機能です。
アコーディオンと呼ばれている機能に似た機能です。アコーディオンは、よくある質問やサイドメニュー等によく使われています。
トグル機能の設定画面
入力補助で作れるトグルデザインは、2項目を設定できます。
- タイトル
- テキスト
タイトルが最初に表示されている部分です。
テキストはトグルをクリックした際に表示される部分です。
トグル機能のデザインプレビュー
QRコードの設定画面やデザインプレビュー
QRコードは、URLを設定することで、QRコードを生成する機能です。
QRコード機能の設定画面
入力補助で作れるQRコードは、2項目を設定できます。
- URL
- サイズ
サイズの単位はpxです。QRコードは中央寄せで表示されます。
QRコード機能のデザインプレビュー
サイズは150pxで、Diverレビューノートのトップページを設定しています。
300pxはこんな感じです。
記事一覧の設定画面やデザインプレビュー
記事一覧は、閲覧数ランキングや投稿日、更新日順などの条件を元に記事一覧を作る機能です。
関連記事機能とは違い、条件に応じた記事を自動的に取得して一覧化してくれます。
記事一覧機能の設定画面
入力補助で作れる記事一覧デザインは、カテゴリータイプだと7項目、ランキングタイプだと5項目設定できます。
カテゴリータイプの設定項目は以下の7項目です。
- 取得数
- 取得タイプ(カテゴリー)
- 取得カテゴリー
- 並び替え条件
- 並び替え
- 表示スタイル
- その他オプション
並び替え条件は、取得記事条件でもあります。
投稿日順にすると、投稿日の新しいものから抽出され、並び順もその通りになります。
更新日順は更新日の新しいものから抽出され、並び順もその通りです。
ランダムは取得条件および並び順がランダムです。
ランキングタイプの設定項目は、以下の5項目です。
- 取得数
- 取得タイプ(ランキング)
- ランク条件
- 表示スタイル
- その他オプション
ランキングタイプを表示するには、Analitics API設定が必要です。
ランク条件で期間を設定することで、設定期間内に閲覧数の多い順に記事がランキングされます。
記事一覧機能のデザインプレビュー
全て5記事表示設定です。
カテゴリータイプ/取得カテゴリー未設定/投稿日順(降順)/シンプルスタイル/日付表示/カテゴリー表示です。
カテゴリータイプ/取得カテゴリー未設定/更新日順(昇順)/グリッドスタイル/日付非表示/カテゴリー非表示です。
カテゴリータイプ/取得カテゴリー未設定/ランダム(降順)/リストスタイル/日付非表示/カテゴリー表示です。
ランキングタイプ/取得カテゴリー未設定/ランク条件全期間/グリッドスタイル/日付表示/カテゴリー表示です。
記事がありません。
入力補助機能の使い方、作れるデザイン まとめ
いかがでしたでしょうか。Diverの入力補助はバリエーションがたくさんある上、簡単にデザインを作ることができます。
サイト制作で使いたいと思うデザインパーツがほとんど網羅されています。
また、アップデートで入力補助機能も拡充されているので、使いやすくなったり使えるデザインパーツが増えたりするのも魅力です。