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

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

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

このページで分かること
  • 入力補助機能で作れるデザインパーツの種類
  • 入力補助の簡単な使い方
  • 入力補助で作れるデザインパーツのプレビュー画像

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

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

まい
各入力補助のアイコンをクリックすると、設定画面やデザインプレビュー紹介に移動します!
入力補助機能で作れるデザインパーツ一覧
見出しボタンバッジ囲い枠
入力補助:見出し機能のアイコン入力補助:ボタン機能のアイコン入力補助:バッジ機能のアイコン入力補助:囲い枠機能のアイコン
区切り線リストデザインアイコングリッドレイアウト
入力補助:区切り線機能のアイコン入力補助:リストデザイン機能のアイコン入力補助:アイコン機能のアイコン入力補助:グリッドレイアウト機能のアイコン
引用AMP表示横棒グラフ吹き出し
入力補助:引用機能のアイコン入力補助:AMP機能のアイコン入力補助:グラフ機能のアイコン入力補助:吹き出し機能のアイコン
口コミ会話ランキングレビュー
入力補助:口コミ機能のアイコン入力補助:会話機能のアイコン入力補助:ランキング機能のアイコン入力補助:レビュー機能のアイコン
レビュー表ポップアップQ&Aコード
入力補助:レビュー機能のアイコン入力補助:ポップアップ機能のアイコン入力補助:Q&A機能のアイコン入力補助:コード機能のアイコン
トグルQRコード記事一覧
入力補助:トグル機能のアイコン入力補助:QRコード機能のアイコン入力補助:記事一覧機能のアイコン

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

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

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

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

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

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

見出し機能の設定画面

入力補助の見出し機能 設定画面

入力補助の見出し機能 設定画面
入力補助の見出し機能 設定画面

入力補助の見出し機能 設定画面

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

  • タイプ(h2~h5、div)
  • タイトル
  • スタイル
  • 色(カスタムカラー有)

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

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

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

 タイプは全てdiv属性で表示しています。
スタイル1 プリセットカラー青
スタイル2 プリセットカラー緑
スタイル3 プリセットカラー赤
スタイル4 プリセットカラー黄
スタイル5 プリセットカラーオレンジ
スタイル6 プリセットカラーグレー
スタイル7 プリセットカラー黒
スタイル8 プリセットカラー青
1スタイル9 プリセットカラー青
5スタイル10 プリセットカラー青
スタイル11 プリセットカラー青

まい
番号付きの見出しは、オプションで任意の数字を設定できます!

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

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

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

ボタン機能の設定画面

入力補助のボタン機能 設定画面

入力補助のボタン機能 設定画面

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

  • ボタン生成タイプ
  • リンクオプション
  • ボタンテキスト(ボタン生成タイプ「通常」のみ)
  • リンク先URL(ボタン生成タイプ「通常」のみ)
  • ボタンタイプ
  • 色(カスタムカラー有)
  • ボタンアイコン
  • オプション
  • 大きさ

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

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

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

まい
広告タグから生成する場合は、テキストリンクタグを使用しましょう。画像リンクタグだとデザイン崩れが起こります!

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

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

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

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

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

 リンク先は未設定です。

まい
広告タグから生成したボタンです(スタイル6)↓↓
広告タグ

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

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

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

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

バッジ機能の設定画面

入力補助のバッジ機能 設定画面

入力補助のバッジ機能 設定画面

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

  • バッジテキスト
  • バッジアイコン
  • バッジタイプ
  • 色(カスタムカラー有)

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

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

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

スタイル1

スタイル2

スタイル3

スタイル4

スタイル5

スタイル6

スタイル7

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

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

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

囲い枠機能の設定画面

入力補助の囲い枠機能 設定画面

入力補助の囲い枠機能 設定画面

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

  • タイトル
  • アイコン
  • テキスト
  • 囲い枠タイプ
  • 色(カスタムカラー有)
  • 装飾オプション

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

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

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

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

テスト

スタイル1 罫線あり タイトル内にアイコン
テスト
テスト
テスト
スタイル2 影あり コンテンツ内にアイコン
テスト
スタイル4
テスト
スタイル5
スタイル6 タイトルを挿入しない想定のデザインです。
テスト
スタイル6 タイトルを挿入するとこのようになります。
スタイル7 タイトルを挿入しないことを想定したデザインです。
テスト
スタイル7 タイトルを挿入するとこのようになります。

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

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

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

区切り線機能の設定画面

入力補助の区切り線機能 設定画面

入力補助の区切り線機能 設定画面

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

  • 太さ
  • 線色(カラーパレット)
  • スタイル

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

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

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

一本線 太さ2

点線 太さ2

二重線 太さ5

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

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

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

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

入力補助のリストデザイン機能 設定画面

入力補助のリストデザイン機能 設定画面

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

  • リストHTML(内容)
  • リストデザイン
  • 色(プリセットカラーのみ)

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

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

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

 区切り線でリストデザイン間を区切っています。

 

  • 箇条書きリスト スタイル1
  • テスト
  • 箇条書きリスト スタイル2
  • テスト
  • 箇条書きリスト スタイル3
  • テスト
  • 箇条書きリスト スタイル4
  • テスト
  • 箇条書きリスト スタイル5
  • テスト
  • 箇条書きリスト スタイル6
  • テスト
  • 箇条書きリスト スタイル7
  • テスト
  1. 順序付きリスト スタイル1
  2. テスト
  1. 順序付きリスト スタイル2
  2. テスト
  1. 順序付きリスト スタイル3
  2. テスト
  1. 順序付きリスト スタイル4
  2. テスト
  1. 順序付きリスト スタイル5
  2. テスト
  1. 順序付きリスト スタイル6
  2. テスト
  1. 順序付きリスト スタイル7
  2. テスト
  1. 順序付きリスト スタイル8
  2. テスト

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

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

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

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

アイコン機能の設定画面

入力補助のアイコン機能 設定画面

入力補助のアイコン機能 設定画面
入力補助のアイコン機能 設定画面

入力補助のアイコン機能 設定画面

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

  • アイコン選択
  • サイズ

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

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

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

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

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

サイズ:周りに合わせる

サイズ:16px

サイズ:30px

まい
バッジのテキストにアイコンを使うことで、違った雰囲気のアイコンも作れます!

バッジ+アイコン

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

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

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

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

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

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

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

  • レイアウト選択
  • レイアウトオプション

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

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

 グリッドレイアウトの機能していることが分かりやすいように、背景に色を付けるdiv要素を加えています。

 

収益に特化
「1:2」の2分割設定です。
余白あり、モバイル時解除なし
『Diverレビューノート』お勧めWordPressテーマDiverの評価や使い方、特典など!
「1:2:1」の3分割です。
余白なし(余白0設定)。
モバイル時解除あり。

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

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

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

引用機能の設定画面

入力補助の引用機能 設定画面

入力補助の引用機能 設定画面

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

  • 引用文
  • 引用元タイトル
  • 引用元URL

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

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

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

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

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

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

(引用元タイトルと引用元URL未入力)

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

(引用元URL未入力)

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

AMP表示の設定画面

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

AMP表示機能の設定画面

入力補助のAMP表示機能 設定画面

入力補助のAMP表示機能 設定画面

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

  • 通常時のみ表示
  • AMP時のみ表示

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

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

通常時に表示するコンテンツです。
通常時に表示

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

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

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

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

入力補助の横棒グラフ機能 設定画面

入力補助の横棒グラフ機能 設定画面

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

  • グラフ内テキスト
  • 長さ
  • グラフ色

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

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

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

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

4,000

1位 猫派

4,000

1位 犬派

1,000

3位 ハムスター派

800

4位 カワウソ派

5位 オコジョ派

まい
このランキングは事実ではありません!(´・ω・`)笑
行間や段落スペースを広めに設定している場合、グラフ部分だけCSSで行間を狭く設定するといいと思います!

 

また、グラフの長さ以上のテキストを入力すると、グラフ外にテキストが表示されてしまいデザインが崩れるので注意が必要です!

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

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

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

吹き出し機能の設定画面

入力補助の吹き出し機能 設定画面

入力補助の吹き出し機能 設定画面

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

  • テキスト
  • タイプ(吹き出しの向き)
  • 角丸

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

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

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

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

タイプは右の吹き出しです。

角丸は0px設定です。

角丸10pxの左向き吹き出しです。

文章を長めにすると、幅広になっていきます。あああああああああああああああああああああああああああああ

上方向の吹き出しです。

角丸5pxです。

下方向の吹き出しです。

角丸20pxです。

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

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

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

口コミ機能の設定画面

入力補助の口コミ機能 設定画面

入力補助の口コミ機能 設定画面

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

  • 評価
  • 口コミタイトル
  • テキスト
  • アイコン画像
  • 名前等

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

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

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

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

まい
評価の下にある下線は、該当するdivコードを消すことで非表示にできます!

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

口コミタイトル

口コミ内容

星の評価は5段階です。小数点設定もできます。

口コミ者の名前
タイトル
評価を0にすると、星マークが非表示になります。

画像無しもできます。

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

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

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

まい
まいのコメントは会話機能で作っています!

会話機能の設定画面

入力補助の会話機能 設定画面

入力補助の会話機能 設定画面

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

  • アイコン
  • 名前
  • 名前表示位置
  • セリフ向き
  • タイプ
  • セリフ
  • 色(カスタムカラー有)

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

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

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

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

まい
名前表示位置がアイコン下、セリフ向きは左です。

 

セリフタイプ使用、プリセットカラーの白です。

ぶーちゃん
名前表示位置がセリフ上、セリフ向きは右です。

 

心の声タイプ使用、プリセットカラーの青です。

まい
心の声タイプでプリセットカラー緑です。

ぶーちゃん
最近は会話デザインのサイトも増えてきているから、こういう機能は嬉しいね。

 

プリセットカラーピンクです。

まい
会話にしなくても、一言コメントを会話機能で入れると、アクセントになるから使いやすい機能です!

 

プリセットカラー黄色です。

ぶーちゃん
アイコンも入れれちゃうんだよ

 

プリセットカラーオレンジです。

まい
プリセットカラーグレーです。

ぶーちゃん
プリセットカラーブラックです。

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

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

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

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

入力補助のランキング機能 設定画面

入力補助のランキング機能 設定画面
入力補助のランキング機能 設定画面

入力補助のランキング機能 設定画面

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

  • ランキング順位
  • 評価
  • 表示スタイル
  • タイプ
  • 商材タイトル
  • 商材小見出し
  • 説明文
  • 紹介画像
  • 備考
  • 購入ページテキスト
  • 購入ページURL
  • 購入ページボタン背景色
  • 購入ページボタンテキスト色
  • 詳細リンクテキスト
  • 詳細リンクURL
  • 詳細リンクボタン背景色
  • 詳細リンクボタンテキスト色
  • 枠線太さ
  • 枠線色

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

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

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

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

まい
ランキングにボタン2つを組み込んだデザインが出来上がります!

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

商材タイトル部分
商材小見出し部分
説明文部分

表示スタイル1です。評価は4.8です。

枠線の太さは1pxです。
商材タイトル部分
商材小見出し部分
説明文部分です。

表示スタイル2、評価は4です。

表示スタイル2だと、大きい画像は大きいまま表示されがちです。

枠線太さは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機能 設定画面

入力補助のQ&A機能 設定画面

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

  • 質問
  • 回答

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

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

質問部分です。

Diverは使いやすいテーマですか?

回答部分です。

はい。Diverは初心者から熟練者までフィットするテーマです。

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

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

コード機能の設定画面

入力補助のQ&A機能 設定画面

入力補助のQ&A機能 設定画面

入力補助で作れるコードデザインは、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!");

まい
コードを書く場合は、<>の記号を&lt;&gt;と入力ます。また、&記号も&amp;と入力します。

 

これを忘れると、表示がおかしくなります_(:3 」∠)_

 

まいもついさっきしました…(´-ω-`)

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

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

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

トグル機能の設定画面

入力補助のトグル機能 設定画面

入力補助のトグル機能 設定画面

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

  • タイトル
  • テキスト

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

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

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

トグルのタイトル部分です。クリックしてください。
トグルのテキスト部分です。クリックすると表示されます。

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

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

QRコード機能の設定画面

入力補助のQRコード機能 設定画面

入力補助のQRコード機能 設定画面

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

  • URL
  • サイズ

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

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

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

QR Code

300pxはこんな感じです。

QR Code

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

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

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

記事一覧機能の設定画面

入力補助の記事一覧機能(カテゴリー) 設定画面

入力補助のQR記事一覧機能(カテゴリー) 設定画面
入力補助の記事一覧機能(ランキング) 設定画面

入力補助のQR記事一覧機能(ランキング) 設定画面

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

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

  • 取得数
  • 取得タイプ(カテゴリー)
  • 取得カテゴリー
  • 並び替え条件
  • 並び替え
  • 表示スタイル
  • その他オプション

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

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

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

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

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

  • 取得数
  • 取得タイプ(ランキング)
  • ランク条件
  • 表示スタイル
  • その他オプション

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

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

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

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

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

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

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

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

まい
グリッドスタイルなら、3の倍数で記事数設定をするとキレイかもしれません!

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

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

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

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

まい
サイト制作初心者にも簡単に扱えるので、おすすめの機能です!
あらゆるデザインがDiverで叶う。それも難しい操作無しで。
Diverロゴ
イメージ画像

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

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