こんにちは！ブログ運営半年で月20万超の元サラリーマンブロガーなつです。
Diverは初心者にも使いやすい「入力補助」があります。ブロックエディターっぽい雰囲気でアイコンとテキストを見れば多くの機能を使いこなすことができます。
Diverの入力補助でできることと使い心地などもお伝えしていきます。
※ 今現在、プラグイン「classiceditor」で旧エディターの入力補助とGutenberg（ブロックエディター）の入力補助が使えますので双方お伝えします。
もくじ
- 1 Diverの入力補助の全項目
- 2 Diver入力補助の使い方【動画】
- 3 Diverの入力補助の使い方の基本
- 4 Diverの入力補助 1. 「パーツ系」
- 5 Diverの入力補助 2. 「装飾」
- 6 Diverの入力補助 2. 「アフィリエイト用」
- 7 Diverの入力補助 4. 「SEO」
- 8 Diverの入力補助 5. 「リスト・囲い枠」
- 9 Diverの入力補助 6. 「会話」
- 10 GutenbergのDiver入力補助の形式
- 11 ブロックエディターでのDiver入力補助の基本的な使い方（新エディタ）
- 12 Diverの入力補助の使い心地は？ 「まとめ」
- 13 初心者だからこそWordpress有料テーマ を使うべき理由
Diverの入力補助の全項目
旧エディターで使う場合では、投稿ページのツールバーの部分に入力補助ボタンがあります。開けると以下のようなメニューが現れ、この部分でさまざまなカスタマイズができます。
- 見出し
- ボタン
- バッジ
- 囲い枠
- 区切り線
- リストデザイン
- アイコン
- グリッドレイアウト
- 引用
- AMP表示
- 横棒グラフ
- 吹き出し
- 口コミ
- 会話
- ランキング
- レビュー
- レビュー表
- ポップアップ
- Q＆A
- コード
- トグル
- QRコード
- 記事一覧
Gutenbergでも、「クラッシック」をクリックすることでこの画面がでてきます。Gutenbergのブロック内でもシンプルになった入力補助がありますので使いやすい方を使ってみてください。
Gutenbergの入力補助
入力補助の役目
Diverの入力補助とは、記事の内容の装飾を簡単にできるツールだと考えてください。囲い枠やボタンなどは、基本CSSを追加しHTMLを触らないとできません。
始めたばかりの初心者にとってはハードルが高いものも、この入力補助があればクリックするだけで、表示されます。
つまり、導入するだけで上級者のような装飾ができることになります。
↓芸大卒のなつがDiverのオリジナルデザインを作りました！
Diverデザインのマニュアル特典Diverのオリジナルデザインです！当ブログよりDiverを購入くださった方に特典として差し上げます。
このマニュアルの通りに作ればCTAやタブなどの設定も併せてできるようになります。上記5種以外にアフィリエイト用100種類デザインマニュアルが付いてきます！
⇒ デザインの確認はコチラをご覧ください。
（さらにアフィリ用デザイン100個追加！）
Diver入力補助の使い方【動画】
ブロックエディターでの入力補助の作り方の動画です。
00:00 オープニング
00:08 入力補助の表示のさせ方
00:48 ボタンの設定
02:58 会話
04:23 アイコン
05:28 囲い枠
06:16 アイコンボックス
07:14 ボックス横並び
08:54 見出し
09:49 セクション
10:15 トグル
10:54 スター
11:20 記事一覧
12:03 Q＆A
Diverの入力補助の使い方の基本
まずは、Diverの入力補助の基本的な使い方をお伝えします。カスタマイザーなどは操作する必要はなく、投稿ページのボタンで入力補助が出現します。
Gutenbergの入力補助の出し方
エディターの中にある「+」マークを押し、検索窓に入力補助と入れて検索をするか、下までスクロールしていけば出てきます。
旧エディターの入力補助の出し方
エディターの中にある「+」マークを押し、「クラッシック」のアイコンをクリックすると旧エディターが出てきますので「Dマーク」をクリックします。
Diverの入力補助 1. 「パーツ系」
ここでは、入力補助のパーツ系統の説明をしていきます。
（新）・・・新入力補助にあるもの
（旧）・・・旧入力補助にあるもの
- ボタン（新・旧）
- バッジ（新）
- アイコン（新・旧）
- 横棒グラフ（新・旧）
新エディターでは、上記バッジは他の項目から挿入できます。
1. ボタン （旧エディター作り方)
入力補助の「ボタン」をクリックします。この部分では自分の思う通りのボタンを作ることができます。
- ボタンタイプ
- リンクオプション
- ボタンテキスト
- リンクURL
- ボタンタイプ
- 色
- ボタンアイコン
- 大きさ
アイコンは矢印部分をクリックすると一覧表がでてきますので選んでクリックし、ボタンのどの位置に配置するのか指定します。
プレビューがありますので、確認しながらボタンを作ることができます。全部入力が終われば「ボタンを挿入する」をクリックで表示できます。
2. バッジ （旧エディター作り方）
入力補助の「バッジ」をクリックします。
- バッジテキスト
- バッジアイコン
- バッジタイプ
- 色
アイコンは矢印部分をクリックすると一覧表がでてきますので好きなものを選び位置を指定します。
3. アイコン （旧エディター作り方）
入力補助の「アイコン」をクリックします。
- アイコン選択
- 色
- サイズ
アイコン選択は矢印をクリックし好きなものを選んでください。
4. 横棒グラフ （旧エディター作り方）
入力補助の「横棒グラフ」をクリックします。
横棒グラフをひとつずつ作っていきます。
- グラフ内テキスト
- 長さ
- グラフ色
Diverの入力補助 2. 「装飾」
ブログの文章だけでは少し味気ないですし、区切り等がなければ読みづらいです。文章内に区切り線や記事一覧で区切ることで読みやすくなります。
（新）・・・新入力補助にあるもの
（旧）・・・旧入力補助にあるもの
- 区切り線（旧）
- グリッドレイアウト（旧）
- 引用（旧）
- ポップアップ（旧）
- トグル（旧・新）
- コード（旧）
- 記事一覧（旧・新）
1. 区切り線（旧エディター作り方）
入力補助の「区切り線」をクリックします。
- 太さ
- 線色
- スタイル
色等も簡単に変更ができるのでとても便利です。
2. グリッドレイアウト（旧エディター作り方）
入力補助の「グリッドレイアウト」をクリックします。
- レイアウトを選択
- レイアウトオプション
記事内でのレイアウトが10パターン変更できます。片方が広くなったりなども調整できます。
3. 引用 （旧エディター作り方）
入力補助の「引用」をクリックします。
- 引用文
- 引用元タイトル
- 引用元URL
上記を入力し「ポップアップを挿入する」をクリック。
4. ポップアップ （旧エディター作り方）
ポップアップとはどんなものなのかというと、設定した文字や画像をクリックすると指定した文字が浮き上がってくる機能です。
あいうえおという文字をクリックするとABCDEFGという文字が浮き上がってきます。
ポップアップの作り方
入力補助の「ポップアップ」をクリックします。
- リンクコンテンツ
- 表示コンテンツ
上記を入力し「ポップアップを挿入する」をクリック。
5. トグル （旧エディター作り方）
トグルとは、文字などが多かったり最初は見せたくない時、アコーディオンのように折りたたんでみたい時にみることのできる機能です。
右側の矢印をクリックすると展開します。
トグルの作り方
入力補助の「トグル」をクリックします。
- タイトル
- テキスト
上記を入力し「トグルを挿入する」をクリック。
6. コード （旧エディター作り方）
WordPressブログのようにブログ系の記事を書くとき、HTMLなどのコードをを貼り付けることがあります。そんな場合にコード専用を枠があると便利です。
コードの作り方
入力補助の「コード」をクリックします。
- 言語
- コード
上記を入力し「コードを挿入する」をクリック。
7. 記事一覧 （旧エディター作り方）
記事の中にこれまで更新した記事一覧を表示できるようになっています。
記事一覧の作り方
入力補助の「記事一覧」をクリックします。
- 取得数
- 取得タイプ
- 取得カテゴリー
- 並び変え条件
- 並び変え
- 表示スタイル
- その他オプション
上記を入力し「記事一覧を挿入する」をクリック。
Diverの入力補助 2. 「アフィリエイト用」
アフィリエイトにはテクニックも必要です。悩んでいるユーザーに時には背中を押すような仕掛けも配置しましょう。
（新）・・・新入力補助にあるもの
（旧）・・・旧入力補助にあるもの
- ランキング（旧）
- レビュー（旧・新）
- レビュー表（旧・新）
- 口コミ（旧・新）
- Q＆A（旧・新）
- QRコード（旧）
1. ランキング
入力補助の「ランキング」をクリックします。
- ランキング順位
- 評価
- 表示スタイル
- タイトル
- 商材小見出し
- 説明文
上記を入力し「ランキング」をクリック。
↓ Diverのランキングのもっと詳しい内容は以下の記事を参考にしてみてください。
2. レビュー （旧エディター作り方）
レビューは、シンプルな星評価を出すときにつかいます。
入力補助の「レビュー」をクリックします。
- レビュースコア
- タイプ
上記を入力し「レビューを挿入」をクリック。
3. レビュー表 （旧エディター作り方）
1つのレビューだけではなく複数のレビューを見やすく表示する機能です。レイアウトと星評価とテキストを選択できます。
レビュー表の作り方
入力補助の「レビュー表」をクリックします。
フルサイズもしくはハーフサイズを選びます。
- 見出しと
- 表示スタイル
- コンテンツ
※星表示の場合はコンテンツは不要です。
上記を入力し「レビュー表」をクリック。
4. 口コミ （旧エディター作り方）
口コミを入れ使用感や感想を入れることで読んでいる人の商品への興味を得る方法があります。
口コミの作り方
入力補助の「口コミ」をクリックします。
- 評価
- 口コミタイトル
- テキスト
- アイコン画像
- 名前等
上記を入力し「口コミを挿入」をクリック。
5. Q＆A （旧エディター作り方）
入力補助の「Q＆A」をクリックします。
質問
- 回答
上記を入力し「Q＆A」をクリック。
できあがりは以下の通りとなります。
Diverの入力補助 4. 「SEO」
- AMP表示
1. AMP表示 （旧エディター作り方）
入力補助の「AMP」をクリックします。
- 通常時のみ表示
- AMP時のみ表示
上記を入力し「コンテンツを挿入する」をクリック。
Diverの入力補助 5. 「リスト・囲い枠」
リストや囲い枠はブログを作る上でなくてはならないものです。目立たせる部分に枠を付けたり番号を振るとさらに見やすくなります。
（新）・・・新入力補助にあるもの
（旧）・・・旧入力補助にあるもの
- 見出し（旧・新）
- 囲い枠（旧・新）
- リストデザイン（旧・新）
1. 見出し （旧エディター作り方）
h2～h5までの見出しを自由に作ることができます。
見出しの作り方
入力補助の「見出し」をクリックします。
- タイプ
- 見出しテキスト
- スタイル
- 色
上記を入力し「見出しを挿入する」をクリック。
2. 囲い枠 （旧エディター作り方）
7種類のデザインの囲い枠を簡単に編集できます。
囲い枠の作り方
入力補助の「囲い枠」をクリックします。
- タイトル
- アイコン
- テキスト
- 囲い枠タイプ
- 色
- オプション
上記を入力し「囲い枠を挿入」をクリック。
3. リストデザイン （旧エディター作り方）
入力補助の「リストデザイン」をクリックします。
- リストHTML
- スタイル
- 色
上記を入力し「リストデザインを挿入」をクリック。
Diverの入力補助 6. 「会話」
- 吹き出し（旧・新）
- 会話（旧・新）
1. 吹き出し
入力補助の「吹き出し」をクリックします。
- テキスト
- タイプ
- 角丸
上記を入力し「吹き出し」をクリック。
2. 会話
入力補助の「会話」をクリックします。
- アイコン
- 名前
- 名前表示位置
- セリフ向き
- タイプ
- セリフ
- 色
上記を入力し「会話を挿入する」をクリックすると以下のようになります。
GutenbergのDiver入力補助の形式
ブロックエディター（Gutenberg）になってから、Diverの入力補助も操作が少し変わりました。大体は同じものが出来上がりますが、操作する場所が違いますのでここでお伝えします。
作りたいもののブロックをクリックするところまでは一緒です。
出典：Gutenbergの入力補助
項目が少し減っていますが、旧エディターの入力補助はちょっと重複しているものもあったので、おそらくよく使われるものを厳選しているのかなと思います。
Diverでは、センス良いトップページが自由自在に作れるようになっています。当ブログでも作ってご紹介しています。
ブロックエディターでのDiver入力補助の基本的な使い方（新エディタ）
まずは、調整する画面を出すまでの一連の操作をお伝えします。ブロックエディターに出てくる、（左上や右上）プラスマークをクリックします。
すると、検索入力ができますので、「入力補助」と検索をかけるか、そのまま下までスクロールしていくと入力補助のエリアがでてきます。
- （+）をクリックする
- 入力補助と検索するor下までスクロール
ボタンの作り方
入力補助のボタンアイコンをクリックすると以下のようにボタンが配置されます。最初は右側の調整項目は出ていませんので、配置されたボタンをクリックしてみてください
すると右側の項目が出てきます。
ボタンの背景色、テキストの色、枠線の色など好みに調整してください。
会話の作り方 （新エディター使い方）
画像付きの会話の作り方には少しだけコツが必要ですので、注意点をお伝えします。入力補助の会話をクリックし配置します。
同じく配置されたものをクリックし右側に調整部分を出します。
画像を設定する方法
ちょっとだけアイコン設定で苦労するかもしれませんのでここで丁寧に説明します。右側の調整項目を表示させたら、会話アイコン画像設定の下の「アイコン設定」という文字をクリックします。
すると、メディアライブラリがでてきますので、どの画像にするのか選んでください。その他、吹き出しの色や枠の色テキストの色、心の声か実際の声なのか設定をします。
囲い枠の作り方 （新エディター使い方）
囲い枠も記事の装飾には必要です。入力補助のブロックを出し、囲い枠をクリックします。基本の形が表示されますので出てきた囲い枠をクリックし右側の調整項目を出します。
枠の色やタイトルの色を調整します。
Diverの入力補助の使い心地は？ 「まとめ」
Diverの一番の特徴は、レイアウトのコンパクトさと初心者向けに作られた入力補助機能です。入力補助の機能ではパーツや吹き出しや記事一覧などこの部分で全部できてしまうのでWordpressの操作が難しいと感じる方にはおすすめです。
この機能を使ってみて思うのは説明がいらないくらいあっけなく難しいことができてしまうこと。パーツなども用意されていないテーマなどは追加CSSなどで編集しますので苦労しますが、Diverの場合この入力補助だけで自分の好みのサイトにできます。
↓ WordpressテーマDiverを当ブログからお買い上げの方に特典をプレゼントしています。
初心者だからこそWordpress有料テーマ を使うべき理由
無料テーマを使うことで時間の無駄遣いをしていませんか？
- 思い通りのデザインにできない
- なかなか稼げない
- アクセス数が増えない
こんな悩みを抱えていませんか？
稼ぐブログにしろ趣味ブログにしろ検索の上位にこなければなかなか読んでもらえません。もしあなたが稼ぐブログを作りたいなら、初心者の時に初期投資することはとても大事なことです。
Wordpressの有料テーマができる５つのこと
- 検索上位を目指せる
- 見た目が綺麗でおしゃれになる
- 機能が豊富で出来ることが多い
- マニュアルなどのサポート
- 有名ブロガーも有料テーマを使っている
これまでにあげた5つの有料テーマの特徴を説明していきます。
1. 検索上位を目指せる
ブログを運営していく上で対策をしていかなければいけないのがSEO対策です。検索エンジンのことを考えてブログを最適に合わせていくということがSEO（SearchEngine Optimizationの略）です。
- 情報の信頼性
- ユーザーへの役立つ情報であるか？
- スマホ・PCなどでストレスなく使える
などたくさんの要因がありますが、ブログを訪問した人があなたのブログの多くの記事を読んでくれるようなテンプレートの仕組みも有料テーマでは細やかに考えられています。
2. 見た目が無料テーマ以上に綺麗になる
シンプルが良いか、綺麗なテーマが良いのかそれぞれの好みによります。無料テーマは必要最低限のものを備えていますがやはりシンプルすぎていずれつまらなくなってしまいます。
有料テーマはデザイン性が高く自分の好きなデザインにもカスタマイズしやすいです。
出典：Diver
↓ 芸大卒のなつが作ったDiverオリジナルデザインです。
出典：なつオリジナルデザイン
3. 機能が豊富でできることが多い
今現在新しい機能として出てきたのが「着せ替え機能」です。過去にも賢威などにはベース色とパターンがありましたが最近ではアフィリなどはっきりと違った用途で使えるように作りこんでいます。
4. マニュアルなどのサポート
なにかわからないことがあった場合、相談できる場所があるだけで安心できます。ここが無料テーマと一番違う部分、有料テーマでは売りっぱなしにしない工夫がされています。
5. 有名ブロガーも多数使用
稼いている有名ブロガーと言われる人のほとんどは有料テーマを使っています。ブログ造りでは内容も非常に大事ですが、文章や扱っている分野が同じ程度ならやはり最後の勝負はテーマの構造などになります。
もしあなたが稼ぐブログを作りたいと考えているならば「有料」テーマも検討してみてください。
カスタマイズで悩んでいる時間、ブログの完成度、上位に表示するメリットなど考えると有料テーマはあなたのお役にたちます。
初心者に特におすすめのWordPressテーマ
⇒ 最新SEO対策済み!wordpressテーマ「Diver」はコチラ
- 高機能で最新SEO対策済みのテーマ
- 基本色変更がワンクリックで完了
- 初心者にも使いやすい入力補助
- ペラサイトなどもラクラク作成
- カッコいいヘッダー背景が標準装備
- グラデーションも簡単
⇒ Diverの公式ページを確認する。
※今なら、6大購入特典をお付けしています！