WordPressテーマ[Diver]の入力補助機能の記事作成の時短にも！

Diverの入力補助機能とは

入力補助とは、Diverオリジナル機能になります。

一度使うとほかのテーマを使うことができないくらい充実してます。

入力補助機能のデザインパーツは23個あり全てボタン一つで解決できます。

各入力補助の設定画面･使った時のデザインプレビューも一緒に紹介していきたいと思います。

見出しの機能･設定画面

カスタマイザーで設定されている見出しデザイン以外で見出しを作ってみたいなっと思った時に使えるのがDiverの見出しデザインです。

入力補助で作れる見出しデザインですが、たった4項目だけで設定出来ちゃいます。

見出しのタイトルは全部で11種類あります。

ボタンの機能･設定画面

ボタンデザインは、ボタン形式のリンクを作りたい際に効果的に使えます。

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

《ボタン 通常の場合》

《広告タグの場合》

入力補助で作れるボタンデザインですが、9項目で設定出来ちゃいます。

バッジの機能･ 設定画面

バッジは、記事内で読者に対してアピールしたい時などに使うと効果的ですね。

入力補助で作れるバッジデザインですが、4項目で設定が出来ちゃいます。

fa-twitterTwitte 

fa-bluetoothBluetooth

ありがとうfa-heart-o

バッジのデザインは7種類あります。

囲い枠の機能･設定画面

囲い枠は、テキストやリストを囲んで目立たせたり、区切ったりするのに効果的に使えます。

タイトルもつけられるので、囲い枠で囲ったブロックがどういう内容なのかを一目で示すことが出来ちゃいます。

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

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

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

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

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

一本線5px

点線5px

二重線5px

区切り線のデザインは3種類あります。

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

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

なので、通常のデザインよりもデザイン性の良いものが箇条書き･順序付きにあります。

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

プリセットカラーは青[水色]･緑･赤[ピンク色]･黄･オレンジ･グレー･黒の7種で、カスタムカラーはないです。

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

アイコンの機能･設定画面

アイコンは、見出し･テキスト･ボタンなどにデザイン性を持たせたい時に使えます。

挿入できるアイコンの種類は数えきれない位たくさんあってサイズは、周囲の文字サイズに合わせることも、任意のサイズを設定することも容易です。

アイコンのやり方

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

アイコンの選択は、タイル状に並べられたアイコンから選択して色はカラーパレットから設定する形式です。

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

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

アイコンデザインプレビュー

アイコンの一部紹介

 サイズ:周りに合わせる

  サイズ:20px   

サイズ:16px
fa-camera

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

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

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

入力補助で作れるグリッドレイアウトは、2項目で設定出来ちゃいます。

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

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

グリッドレイアウトのデザインは10種類あります。

引用の機能･設定画面

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

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

入力補助で作れる引用デザインは、3項目で設定出来ちゃいます。

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

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

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

引用デザインプレビュー

AMP表示の機能･設定画面

AMP(Accelerated Mobile Pages)に対応したブログであれば、AMP表示の場合にのみ指定したテキストを表示させるといったことも可能です。

入力補助で作れるAMP表示機能は、2項目で設定出来ちゃいます。

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

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

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

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

入力補助で作れる横棒グラフは、3項目で設定出来ちゃいます。

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

棒グラフの長さは、％で入力して、グラフ色はカラーパレット形式になってます。

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

吹き出しの機能･設定画面

吹き出しは大きな吹き出しを作る事ができ、大きな画像を吹き出しに付けたいと思った時に使えます。

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

吹き出し内に表示させたい内容をテキストに入力して、吹き出しをどの方向（上下左右）に向かせたいかをタイプで設定出来ます。

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

タイトル

口コミ内容

画像有りだとこんな感じになります。

会話の機能･設定画面

先程紹介した入力補助機能「吹き出し」の他にも、アイコン(人物像)付きの吹き出しを挿入できる機能があります。
ちなみによく使うアイコン画像は、ダッシュボードの「Diverオプション」から保存しておけるので便利です。

会話風のデザインを作りたい時、一言二言程度のコメントを残したい時に使う事が多いと思います。

入力補助で作れる会話デザインは、7項目で設定出来ちゃいます。

アイコンは、Diverオプションで設定した画像が一覧に並んで、一覧にない画像は、[設定]ボタンから設定出来ます。

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

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

会話デザインプレビュー

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

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

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

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

ランキングの評価は5段階評価で、小数点設定もできて表示スタイルは2種類あります。

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

枠線は0pxにすると非表示になって、ボタンもURLを未入力にすると非表示になっちゃいます。

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

WordPressテーマ[DVIER]

お勧めなテーマ[DVIER]

利益化しやすいお勧めするWordPressテーマ[DVIER] 1度使ってみてください。

ご購入はこちら

詳しくはこちら

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

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

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

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

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

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

レビューデザインプレビュー

評価4.5    サイズ大

評価3        サイズ中

評価2.5     サイズ小

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

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

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

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

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

フルサイズで追加すると、画像の上側の表が表示されハーフサイズで追加すると、画像の下側の表が表示されるようになってます。

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

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

レビュー表デザインプレビュー

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

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

画像やテキストをクリックした時に、画像やテキストをポップアップさせる機能になります。

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

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

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

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

画像のコードの出し方

それではテキストから画像を出すやり方を見ていきましょう。

『メディアを追加』を押すよ。

メディアライブラリから使いたい画像を選択するよ。

画像が決まったら『投稿に挿入』を押すよ。

テキスト部分を押したら

赤線の部分を全てコピーします。（ここまで出来たら後は簡単だよ。)

リンクコンテンツに画像を貼って、表示コンテンツにテキストのパターンや両方画像、両方テキストなども可能だよ。

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

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

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

ネタバレがあるような情報を取り扱う場合はネタバレ隠しにもいいかもしれませんね。

Q&Aの機能･設定画面

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

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

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

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

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

コードの機能･設定画面

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

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

言語では、HTML/PHP/CSS/javascript/その他の5種類から選択でき、言語を選択しておくと、コードを見やすくカラーリングしてくれます。

コードデザインプレビュー

<span class="sc_marker-animation y">wordpressテーマ｢DVIER｣</span><span class="sc_marker-animation"></span>

<img src="https://kopeiblog.jp/wp-content/uploads/2021/01/Screenshot_20210116_215357.jpg" alt="" width="1079" height="809" class="aligncenter size-full wp-image-8689" />

トグルの機能･設定画面

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

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

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

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

QRコードの機能･設定画面

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

入力補助で作れるQRコードは、2項目で設定出来ちゃいます。

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

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

記事一覧の機能･設定画面

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

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

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

カテゴリータイプの設定項目は以下の7項目になります。

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

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

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

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

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

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

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

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

表示設定に紹介なります。

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

• 12月 5, 2022
  副業初心者
  りもわサロンって実際どうなの？の疑問に忖度なく答える記事
• 12月 10, 2021
  投資
  不労で月5万円を得た初心者ができる！デルニュー実践完全ロードマップ
• 4月 8, 2021
  副業初心者
  契約社員の副業は禁止されている？副業が大丈夫かどうか解説します。
• 4月 5, 2021
  副業対策
  副業対策・税金対策～まとめ～
• 4月 5, 2021
  WordPressテーマ
  Diverの始め方〜まとめ〜

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

• wordpressブログによって収入を得る仕組みを初心者向けに解説

  6月 10, 2020

• 初心者でも確実にできるブログのはじめ方を解説【WordPressについて】

  6月 30, 2020

• 会社員が副業で収入を得て、初めて行う確定申告の4つの行程を解説【体験談含む】

  7月 8, 2020

• ブログの自分だけのハイクオリティなキャラクター作成を依頼する方法

  7月 14, 2020

• 「理学療法士」という仕事について、収入や将来性について解説します

  7月 29, 2020

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

• wordpressブログによって収入を得る仕組みを初心者向けに解説

• 初心者でも確実にできるブログのはじめ方を解説【WordPressについて】

• 会社員が副業で収入を得て、初めて行う確定申告の4つの行程を解説【体験談含む】

• ブログの自分だけのハイクオリティなキャラクター作成を依頼する方法

• 「理学療法士」という仕事について、収入や将来性について解説します

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

記事がありません。

まとめ

WordPressのテーマ[DVIER]の入力補助は様々なデザインがあり、難しい操作がないのでパソコン作業が苦手な方や、スマホ･タブレットで作業してる人にも簡単に使えると思います。

blogを始めようと思ってる方･始めているけど無料タイプ･他の有料タイプを使ってる方は1度騙されたと思って使ってみてください。おススメです。

≫Diverはこちらから

※クリックするとDiver公式ページへ移動します。

詳しく知りたい方はこちらを見てください。