Diverの入力補助機能と便利な使い方マニュアル

WordPress「Diver」を使って見て、特に便利だな、と感じる機能が「入力補助」。

ショートコード不要で記事の装飾ができるから、「ショートコードって?タグって何?」という初心者でも使いやすいんですよね。

記事内に画像を二つ並べたい、会話風に装飾したい、ランキングを作成したい。

ブロガー、アフィリエイター必須のアイテムが、CSSやPHPを触らなくても使える入力補助機能でできることをまとめました。

Diverの入力補助で出来ること・装飾一覧

Diverの入力補助で出来る装飾は23種類。(Ver4.6.6時点)

きじとら
入力補助が使えない、内容が違うという場合は、Diver(親テーマ)のバージョンを確認してみてください
見出し機能と使い方

記事の構成上、見出しが必要になるケースは多いけれど、通常は初期設定済のタグ(h2~h5)を挿入するだけでカスタマイズしたデザインが反映されます。

入力補助の見出し機能を使うと、そのページだけ見出しデザインの変更が可能。

また、見出しではないけど見出しっぽくしたいという際にも使えます。(タイプを「Div」にする)

コンバージョンボタン機能(CVボタン)

ボタン(コンバージョンボタン、CVボタン)は販売ページなどへのリンクを設置することができます。

自分でテキストを設定してリンク先URLを埋め込む方法と、ASPなどの広告タグを埋め込む方法があります。

デザインも13種類(四角:7種類、丸:6種類)あり、カラーは定番カラー選択orカスタムも可能。

アイコンの設置、配置の調整、大きさの選択も入力補助だけで設定できるのは嬉しい。

よく使用するCVボタンは共通コンテンツを使用することで更に管理も楽になります。

バッジ機能と使い方

バッジは文章の冒頭につけることで、アクセントとして注目させる効果が期待できます。

POINTテキストの前後にアイコンを挿入することもできます。

囲い枠の機能や使い方

囲い枠は、記事で注目させたいテキストやリストを、枠で囲って目立たせることができます。

この記事でわかること

①WordPressテーマ「Diver」の入力補助にはどんな機能があるの?

②入力補助の使い方や表示の確認

↑上のようにタイトルを付けたりアイコンを入れたり、またはリスト表示にしたり、罫線をつけるなどの装飾もできます。

枠や文字色はボタン同様に基本カラーより選択orカスタムが可能。

枠内のテキストは、エディタと同じように入力できるので、マーカーや太字などの装飾も簡単ですね。

区切り線の機能や使い方

見出しを使うほどではないけど、この記事内容と次の記事内容を線引きしたい、という時に便利な区切り線。

同じ見出し内でコンテンツを区切ることができます。

線の太さ・色・スタイル(一本線・点線・二重線)をカスタマイズできます。

リストデザインの機能と使い方

通常のシンプルな黒丸がついたリストを、可愛く装飾してくれるリストデザイン。

リストを使うにはタグの知識が多少必要になりますが、箇条書きリストならulタグ、順序付きリストならolタグを使う事を覚えておけばOK。

テキスト欄を記述する際は、ul→【li→りんご(リスト内容)→li】【li→いちご(リスト内容)→li】【li→みかん(リスト内容)→li】→ulという流れになります。

順序付きの場合はliで囲ったリスト項目全体をolで挟みます。

きじとら
閉じるほうのタグにスラッシュ(/)が付いていることを確認しましょう

色もデフォルトの基本カラーorカスタム可能。

アイコンの機能と使い方

Diverでは、FontAwesomeのアイコンが使用できるようになっています。


(↑アイコンの一部です。まだまだあります)

例えば外部リンクを貼る場合に、マークを付けたり、注意やお知らせなどのワンポイントになりますね。

グリッドレイアウトの機能や使い方

グリッドレイアウトは、記事内の分割表示ができる機能です。

記事内で横2等分にしたり、比重を変えた分割も可能。

横2分割を使えば、ボタンや囲い枠を横並びに配置することもできます。

テスト
グリッドレイアウトを設置してから、再度入力補助を使って、左のエリア内に囲い枠を挿入しました。
テスト
グリッドレイアウトを設置してから、再度入力補助を使って、右のエリア内に囲い枠を挿入しました。

レイアウトオプションの【画面サイズが小さい時に、グリッドレイアウトを解除する】にチェックを入れておくと、スマホ表示などでは横並びが解除されます。

引用の機能と使い方

引用文だけでなく、引用元タイトルと引用元URLの入力も簡単にできるのでとても便利。

トラネコ(虎猫)とは、トラのような縞模様を持つネコのことである。タビー(tabby)とも呼ばれる。トラ猫はストライプの他に、縞模様が途切れて、斑模様、薔薇班、細かく縞模様を途切れさせてたもの等があり、多様である。

AMP表示の機能と使い方

AMPは簡単に言うとモバイル表示の高速化です。

高速化する代わりにルールが設けられているせいで、デザイン崩れやエラー表示になることがあるのですが、それを防ぐためにAMP表示の際にはこっちのコンテンツ(amp対応コード)に変更する、といった使い方ができます。

きじとら
正直なとこ、まだ使ってないです。
横棒グラフの機能と使い方

横棒グラフは簡単な統計結果などをグラフで表現できる機能。

1位:きじとらちゃん 8回
2位:はちさん 6回
データを視覚的にアピールすることができます。

ぶち

なんの?なんのデータなの?

吹き出し機能と使い方

吹き出しは会話機能とは別で、テキストを吹き出しで囲むことができる機能です。

グリッド機能と併用すれば、大きな画像に吹き出しを付けることもできます。

私たちだけでこっそり街へショッピングに繰り出すこともあるの。
やっぱり女子だけっていうのも楽しいよね!好きなものを食べられるし、かわいいカフェにも行けるもの。あー、女子最高!

ぶち

雑な使い方してるな…

口コミ機能と使い方

口コミ評価を★マークとコメントで見栄えよく表示できます。

評価も小数点が設定できるので、4.5と入力すれば、★4.5つ分で表示。

初めての有料テーマ

初心者でも難しいカスタマイズなどが不要で、いろんな装飾が使えるのはとっても便利。
サポートが丁寧なのも助かります。
きじとらさん
会話機能と使い方

当ブログでもお馴染みの会話機能。吹き出しとは違って、アップロードした画像をアイコンとしてセットで表示できます。

きじとら
会話風にすることで、記事がより読みやすくなる利点もあります。

右から、左から、心の声風、吹き出しのカラー変更なども、入力補助内で設定できます。

ちゃとら
アイコンはDiverオプションで固定設定することができるよ。

プラグインを使うとより簡単に使用できるので、こちらも参考にどうぞ↓

ランキング機能と使い方

アフィリエイターに必須のランキング機能も、簡単に作成できます。

ランキング順毎に作成します。★評価や説明文、画像の挿入も入力補助内でできます。

リンクボタン(購入ページ/詳細ページ)の挿入も簡単ですね。

きじとらちゃん
当ブログの代表クルーを務めるきじとらちゃんが堂々の1位を獲得!
生真面目な性格と意外と恥ずかしがり屋さんなところが、野良猫たちのハートを射止めたようです。(そんなバカな)
レビュー機能と使い方

ランキング機能まで使わなくても、簡易的なレビュースコア(★表示)を付けることができます。

サイズも大・中・小選べて、中でこれくらいです↓

レビュー表の機能と使い方

レビュー表を使うことで、テーブル内にスコアを付けることができます。

フルサイズ・ハーフサイズを指定しての作成が可能です。

きじとらグッズ
ちゃとらグッズ
ブルーグッズ
はちグッズ 完売御礼 ぶちグッズ 入荷待ち

 

ポップアップの機能や使い方

画像の拡大などによく利用されるポップアップですが、画像ならWordPressの機能を使うこともできます。(添付ファイルの表示設定でリンク先をメディアファイルにする)

が、このポップアップ機能を使うと、文章もポップアップにできてしまいます。

↓ポップアップ設定してます。クリックするとどう表示されますか?

きじとらさんの秘密はこちらでこっそり…

きじとらさん、なんとねこまんまを食べたことがないそうです!

ただ、テキストをポップアップする使いどころが見つからないのですが…

Q&Aの機能と使い方

Q&Aの使い方・機能はとてもシンプル。

質問と回答を文章で入力するだけです。

きじとらさんは肉派ですか?魚派ですか?
どちらかというと肉派です。どちらもレアが好きです。

ぶち

そうなんだ…

コードの機能と使い方

カスタマイズCSSなどを紹介している当ブログでは必須機能なんですが、HTMLやCSSのコードを直接記述してしまうと、【コード】として読み込まれるので、うまく表示ができません。

コード機能を使うことで、プラグインなしで記事内にコードの記述をすることができます。

トグルの機能と使い方

トグルでは、一部のコンテンツを非表示にすることができます。目次に使われる【隠す】【見る】の機能ですね。

表示する文章をタイトル欄に、隠したい文章をテキスト欄に入力するだけです。

きじとらちゃん、ハチさんの秘密を暴露する?!
じつはハチさん、歌舞伎町でブイブイ言わせてた経歴をお持ちだそうです。
QRコードの機能と使い方

ページのQRコードを作成することができる機能です。

該当ページURLとサイズを入力するだけで、以下のようにQRコードが自動生成されます。

QR Code
記事一覧機能と使い方

カテゴリーやランキングで記事一覧を取得し、ショートコードを作成します。

ランキング(リスト)↓

カテゴリー別(グリッド)↓

リスト表示だとこんな感じ↓

※カスタマイズで外枠(水色)がついてます。

きじとら
関連記事が複数ある時や、イチオシ記事をアピールしたい箇所に内部リンクをまとめて貼る事ができますね。

入力補助の機能や使い方まとめ

これだけの入力補助があれば、記事装飾も捗りそうですが、よく使う装飾ならAddQuicktagや共通コンテンツを使うとより便利。

記事作成のスピードアップにも繋がるので、ぜひ活用してみてくださいね!

このブログはWordPressテーマ「Diver」を使用しています

ブログの収益化・効率化を狙うならテーマによるSEO対策や操作性は大事な要素の一つ。

WordPressテーマ「Diver」は初心者にも使いやすく、自分色のブログを作りやすいサイト構造が特長。

人と被るようなブログにしたくない!そんなあなたにおすすめのテーマです。

ブルー
当サイトからのDiver購入者限定特典もあるんだな

はち
可愛いブログを作りたいけど、カスタマイズしてる時間ない!そんな人は必見だね

ちゃとら
ブログ作りの時間短縮をお手伝いする秘伝のレシピなの
おすすめの記事