うーんなんとなく聞いたことあるけど、まだ使ったことないですねぇ...
ここで入力補助の使い方を全部教えてあげるから
使えるようになっちゃおう！
ワードプレステーマ Diver の入力補助で使える機能のすべてを徹底解説します。
目次
１．Diver の入力補助機能とは
Diver の入力補助機能とは、Diver をインストールしたワードプレスブログの
投稿編集画面に表示される、入力補助 をクリックすると使える機能のことです。
入力補助 ボタンをクリックすると、このように使える機能の一覧が表示されます。
使用できる機能は、全部で２３種類あります。
１つ１つの使い方について解説していきます
２．Diver の入力補助機能 これが使い方のすべて
ここからは、Diver の入力補助機能23種類の使い方をすべて解説していきます。
項目がかなり多くなるので、これが知りたいという目当ての機能がある場合は
ページ上の目次から、直接その機能の見出しにジャンプして確認してくださいね。
2-1 見出し
投稿ページの見出しのデザインを設定することができます。
見出しを設定できる項目は3種類。
- タイプ（h2～h5）
- スタイル（11種類）
- 色
をそれぞれ設定することが可能です。
見出しサンプル
見出しサンプル
見出しサンプル
1見出しサンプル
2-2 ボタン
投稿ページにボタンを設置することができます。
ボタンの設定項目は全部で9種類。
- ボタン生成タイプ
- リンクオプション
- ボタンテキスト
- リンク先URL
- ボタンタイプ
- 色
- ボタンアイコン
- オプション
- 大きさ
以下、ボタンのデザインサンプルです。（リンク先はわー研。のトップページに設定してます）
ボタンは使える機能がたくさんあるので、詳しい使い方は別ページで解説してます。
参考リンクワードプレステーマ Diver のボタン機能の使い方
2-3 バッジ
投稿ページにバッジを設置することができます。
バッジの設定項目は4種類あります。
- バッジテキスト
- バッジアイコン
- バッジタイプ
- 色
こちらがバッジのサンプルです。
2-4 囲い枠
投稿ページに囲い枠を設置することができます。
囲い枠の設定項目は6種類あります。
- タイトル
- アイコン
- テキスト
- 囲い枠タイプ
- 色
- 装飾オプション
囲い枠のデザインサンプルです。
囲い枠サンプル
2-5 区切り線
投稿ページに区切り線を設置することができます。
区切り線の設定項目は3つ。
- 太さ
- 線色
- スタイル
区切り線のサンプルです。
2-6 リストデザイン
リスト（箇条書き）のデザインを変更できます。
リストデザインの設定項目は3つ。
- リストHTML
- 箇条書きリスト or 順序付きリスト
- 色
以下リストデザインサンプルです。
- チェックマーク
- チェックマーク
- チェックマーク
- 矢印
- 矢印
- 矢印
- 順序付きリスト
- 順序付きリスト
- 順序付きリスト
リストの使い方については、以下のページで詳しく解説しています。
2-7 アイコン
投稿ページにアイコンを設置することができます。
アイコンの設定項目は3つ。
- アイコン選択
- 色
- サイズ
以下アイコンデザインサンプルです。
2-8 グリッドレイアウト
グリッドレイアウトは、投稿ページを縦に分割して表示することができます。
グリッドレイアウトの設定項目は2つ。
- レイアウトの選択
- レイアウトオプション
以下グリッドレイアウトのサンプルです。
普通に縦並びで表示されます
2-9 引用
引用文と引用元のURLを表示することができます。
引用の設定項目は3つ。
- 引用文
- 引用元タイトル
- 引用元url
以下、引用のサンプルです。（Wikipediaの ”引用” 解説ページ）
引用（いんよう、英語：citation, quotation[1]）とは、広義には、自己のオリジナル作品のなかで他人の著作を副次的に紹介する行為、先人の芸術作品やその要素を副次的に自己の作品に取り入れること
「引用元のソース」を表示できることです
2-10 AMP表示
AMP（アンプ）表示と、通常表示を出し分けできる設定項目です。
AMP を簡単に解説すると、モバイル端末（スマホ）で、ブログを高速で表示させるシステムのことです。
AMP について詳しく知りたい方は、以下のリンク先ページを参照してください。
参考リンクAMPって何？（ビジネスとIT活用に役立つブログ）
AMP表示で設定できる項目は2つ。
- 通常時のみ表示
- AMP時のみ表示
2-11 横棒グラフ
投稿ページに横棒グラフを表示できます。
横棒グラフの設定項目は3つ。
- グラフ内テキスト
- 長さ
- グラフ色
横棒グラフサンプル。（ブログを複数持っている人の割合）
2-12 吹き出し
投稿ページに吹き出しを表示できます。
吹き出しの設定項目は3つ。
- テキスト
- タイプ
- 角丸
吹き出し表示サンプルです。
角丸：10
にするとこんな感じに表示されます。
2-13 口コミ
投稿ページに口コミ欄を表示することができます。
口コミの設定項目は5つ。
- 評価
- 口コミタイトル
- テキスト
- アイコン画像
- 名前等
以下口コミ表示サンプルです。
まだ届いていませんが...
まだ手元にありませんが、期待を込めて星5つ！
2-14 会話
投稿ページに吹き出し付きの会話を表示できます。
会話の設定項目は7つ。
- アイコン
- 名前
- 名前表示位置
- セリフ向き
- タイプ
- セリフ
- 色（吹き出しの色）
以下のように心の声にすることもかのうです
2-15 ランキング
投稿ページにランキングを表示できます。
ランキングの設定項目は全部で20項目。
- ランキング順位
- 評価
- 表示スタイル
- 商材タイトル（見出しタイプ）
- 商材小見出し
- 説明文
- 紹介画像
- 備考
- 購入ボタン
- 購入ボタンテキスト
- 購入ボタンURL
- 背景色
- テキスト色
- 詳細ボタン
- 詳細ボタンテキスト
- 詳細ボタンURL
- 背景色
- テキスト色
- 枠線太さ
- 枠線色
ランキングの表示サンプルです。（ボタンリンク先は、わー研。トップページです）
ランキング機能については、以下のページでもっと詳しく解説してます。
2-16 レビュー
投稿ページにレビュー用の「星」を表示できます。
レビューの設定項目は2つ。
- レビュースコア（星の数）
- タイプ（星の大きさ）
以下レビュー表示サンプルです。（小数点まで設定可能）
星5つ、タイプ（大）
星3.5、タイプ（中）
2-17 レビュー表
投稿ページにレビュー表を表示できます。
↓ ↓ ↓
レビュー表の設定項目は3つ。（フルサイズまたはハーフサイズ選択後）
- 見出し
- 表示スタイル
- コンテンツ
以下レビュー表の表示サンプルです。
フルサイズのサンプル
| 見出し | テキストが表示されます | ||
|---|---|---|---|
ハーフサイズのサンプル（左：テキスト表示 右：星表示）
| 見出し | テキスト | 見出し |
|
|---|
2-18 ポップアップ
投稿ページにポップアップコンテンツを設置できます。
ポップアップの設定項目は2つ。
- リンクコンテンツ
- 表示コンテンツ
以下ポップアップの表示サンプルです。
ポップアップ機能のより詳しい使い方は、以下のページで解説してます。
参考リンクポップアップ機能を簡単に使いこなす方法
2-19 Q&A
投稿ページに Q&A を設置できます。
Q&A の設定項目は2つ。
- 質問
- 回答
以下 Q&A の表示サンプルです。
2-20 コード
投稿ページに HTML や CSS、PHP などのコードを表示できます。
コードの設定項目は3つ。
- 言語（HTML/PHP/CSS/javascript/その他）
- コード
- その他オプション（桁番号の表示の有無）
コードの表示サンプルです。（ポップアップで使った画像のHTML）
<a href="https://waken01.com/wp-content/uploads/2020/09/screenshot_23-4.jpg">
<img src="https://waken01.com/wp-content/uploads/2020/09/screenshot_23-4.jpg" alt="ポップアップサンプル"
width="499" height="350" class="aligncenter size-full wp-image-1567" /></a>
2-21 トグル
投稿ページにトグルを設置できます。
トグルの設定項目は2つ。
- タイトル
- テキスト
以下トグルの表示サンプルです。
2-22 QRコード
URLを指定するだけで、QRコードを表示させることができます。
QRコードの設定項目は2つ。
- URL
- サイズ
QRコードの表示サンプルです。（わー研。のトップページURLです。サイズ：300px）
2-23 記事一覧
投稿ページに記事一覧を表示できます。
記事一覧の設定項目は7つ。
- 取得数
- 取得タイプ
- 取得カテゴリー
- 並び替え条件
- 並び替え
- 表示スタイル
- その他オプション
以下記事一覧の表示サンプルです。（クリックするとそのページに移動します）
ユーザーを目的の記事に誘導したいときに便利な機能だよね
さいごに
今回は、ワードプレステーマ Diver の入力補助機能のすべてを解説しました。
基本的には、ぱっと見でわかりやすいように表示してくれていますが
使い方が複雑な機能に関しては個別に解説していくので、あわせて参考にしてください。
最後にこのページのおさらいです。
- Diver の入力補助機能について
- Diver の入力補助機能のすべてを解説
- 使い方が複雑な機能は別ページで個別に解説
これだけ機能が揃っていたら困りませんね！
注目の記事現役アフィリエイターが Diver をおすすめする７つの理由【もう他のテーマはいりません】
注目の記事超便利！Diver のウィジェット機能の使い方を図解つきで徹底解説
