![[WordPress] Diver入力補助の使い方まとめマニュアル！[Gutenberg]編](https://100manblog.com/wp-content/uploads/2019/08/laptop-593673_640.jpg)
WordPressテーマDiverの入力補助機能を解説しているコンテンツはたくさんあるけどいまいちわからない事ってありますよね。
それも今自分が使っているエディターによっても入力補助が違ったりします。
理由はクラシックエディターかブロックエディターかで違うからです。
クラシックエディターの入力補助の解説記事は多いけどブロックエディター（Gutenberg)の記事は少ないのでこの記事ではGutenbergの入力補助をご説明します。
クラシックの入力補助は23個ありますがGutenbergの入力補助は11個と少し少ないけど全て解説します。
Gutenbergエディターの入力補助は全部で11個あります。
入力補助の中にはGutenbergエディターだけしか実装されていない機能もあるため、それぞれの見出しの中で詳細に書いた記事も全てリンクしています。
Gutenbergで実装している11個の入力補助
| Diver入力補助「Gutenberg」の11個の実装 | ||
|---|---|---|
| 1 | 見出し | クラシックエディター/Gutenbergエディター |
| 2 | ボタン | クラシック/Gutenberg |
| 3 | 囲い枠 | クラシック/ Gutenberg |
| 4 | 会話 | クラシック/Gutenberg |
| 5 | アイコン | クラシック/Gutenberg |
| 6 | トグル | クラシック/Gutenberg |
| 7 | Q&A | クラシック/Gutenberg |
| 8 | 記事一覧 | クラシック/Gutenberg |
| 9 | スター | クラシック/Gutenberg |
| 10 | セクション | Gutenbergのみの機能 |
| 11 | アイコンボックス | Gutenbergのみの機能 |
Gutenbergでは入力補助を選ぶと下記の11個が表示されます。
このコンテンツはそれぞれの見出しごとに詳細なコンテンツをリンクしています。
詳しくは各見出しごとに貼っているリンクをご覧頂けます。
Diver入力補助「見出し」
見出しとは何のこと？
見出しとは上の「Diver入力補助「見出し」」の部分です。
何でもそうですが見出しがあれば何が書かれたものかがすぐにわかりますよね。
見出しがあればユーザーもコンテンツのどこに何が書いてあるのか判断しやすくなります。
見出しとは必要不可欠なものです。その見出しをすぐに作れる入力補助機能が見出しです。
見出しには種類があります。
見出しと言っても同じものばかりではありません。
通常は大きく分けて3種類の見出しが使われます。簡単に言うと大、中、小の見出しがあります。
Diverの入力補助の見出しには大（H1）、中（H2）、小（H3）その他(H4)、(H5）、(H6)まであります。
H1はコンテンツのタイトル部分です。H2はコンテンツの中の大見出し(H2)があります。小見出しは(H3)を使います。
その他(H4)(H5)(H6)はほとんど使うことはありませんが使用可能です。
Diver入力補助「見出し」の設定方法や使い方については下記の詳細な記事へどうぞ
![[WordPress]Diver入力補助「見出し」の使い方[Gutenberg]編](https://100manblog.com/wp-content/uploads/2019/08/fullsizeoutput_73b5-1.jpeg)
Diver入力補助「ボタン」
ボタンとは何に使うの？
Diverの入力補助機能には「ボタン」機能があります。
ボタンとはその名の通り「リンク出来るボタン」を作成する機能です。
他のページにリンクする場合などはボタンを目立つように配置すればわかりやすいですよね。
ボタンには種類があります。
ボタンの種類は10種類です。「Gutenberg」の場合
このボタンは押しても反応しませんがボタンにURLを埋め込めばボタンを押して他の記事とリンクできます。
どうですか上のボタンは押したくなりますか？ユーザーが押してみたくなるようなデザインを選んでみましょう。
Diver入力補助「ボタン」の設定方法やボタンでリンクを貼る方法についての詳細記事は下記へどうぞ
![「ボタン」を作って便利に使う方法！[DIVER入力補助]](https://100manblog.com/wp-content/uploads/2019/07/fullsizeoutput_73a6-2.jpeg)
Diver入力補助「囲い枠」
囲い枠とは何の事？
Diver入力補助機能の囲い枠とは枠で囲う入力補助機能です。
囲い枠を使うことによって目立たせる事が可能なのです。
強調したい部分や必須項目など枠で囲う時に役立つ機能ですね。
囲い枠の種類は
Gutenbergエディターの囲い枠の種類は全部で6種類あります。
このように枠で囲って文章を入力すれば目立ちますよね
囲い枠には6種類と11種類＋カスタムカラーが選べるカラー設定があります。
Diver入力補助「囲い枠」の設定や詳しい種類についての詳細記事は下記からどうぞ
因みにこの記事も囲い枠です。
Diver入力補助「会話」
会話とは何に使うのか？
Diverの入力補助機能「会話」はどのように使うのでしょうか？
会話とは記事の中でキャラクターが会話をさせたい時に使う入力補助機能です。
このように簡単に会話をしている記事を作成出来るのが便利ですね
簡単に会話を作成するにはDiverの入力補助機能を使えばすぐに出来ます。
会話の種類や設定
Diver入力補助「会話」にはいくつかの設定が必要です。
会話の中で重要なアイコンも必要になってきます。
Diver入力補助「会話」の設定やアイコンについての詳しい記事は下記からどうぞ
![[WordPress]Diver入力補助「会話」の使い方[Gutenberg]編](https://100manblog.com/wp-content/uploads/2019/07/fullsizeoutput_7315.jpeg)
Diver入力補助「アイコン」
アイコンとは何の事？
アイコンとは絵記号の事です。アイコンは一目見ればわかるような絵の記号ですよね
例えば「携帯電話の電波」などはアンテナのアイコンになってますよね。
スマホだと上の方にアンテナやバッテリーなどのアイコンが表示されています。
アイコンを使えば難しい文書を書かなくてもアイコンがあればすぐにわかって便利です。
アイコンの種類や設定
Diver入力補助のアイコンは種類が豊富です。アイコンは全部で786個あります。
アイコンの数が多くどれを選ぶかは多少の時間が必要です。
アイコンはサイズや背景色、アイコン色などを設定する事が出来て便利なんです。
Diver入力補助「アイコン」の設定についての詳細記事は下記へどうぞ
![「アイコン」の便利な使い方！[DIVER入力補助機能]](https://100manblog.com/wp-content/uploads/2019/08/fullsizeoutput_73cd.jpeg)
Diver入力補助「トグル」
トグルって何の事
トグルと言う言葉はあまり聞く事はありません。トグルとは2つの機能を切り替えられるスイッチです。
簡単に言うとスイッチのON/OFFは同じボタンを押せばONにもOFFにもなりますよね。それと同じで同じ操作で別々の事を切り替えて使う機能です。
そのような機能と同じ機能が使えるものが入力補助「トグル」です。
トグルを開いたり閉じたりして同じボタンで切り替えて表示出来ます。
トグルの種類や設定
トグルは設定もあまりなく簡単に使えます。
トグルは基本的に閉じるか開くかの設定は出来ますがあとは設定はありません。
しかしトグルは使い方を考えて使う必要があります。何をどう入力するのかを良く考えて使いましょう。
Diver入力補助「トグル」のより詳細な使い方の記事は下記へどうぞ。
![[WordPress]Diver入力補助「トグル」の使い方[Gutenberg]編](https://100manblog.com/wp-content/uploads/2019/07/wordpress-589121_640.jpg)
Diver入力補助「Q&A」
Q&Aって何の事
Q&Aはみなさん良く知っているQ&Aの事です。
Q=クエスチョン、A＝アンサー の事ですよね。一問一答ですね。
なぜDiverの入力補助にQ&Aがあるのかと言えば多くの問い合わせなどが来る場合に前もってQ&Aとしてあらかじめ記載しておけるからです。
Q&Aをあらかじめ設定しておく事で問い合わせの数を減らす事ができます。そのための便利な機能です。
なぜQ&Aは設定する必要があるのでしょうか？
こんな感じで先に良く来る質問を記載すれば問い合わせをしなくてもわかりますよね。
Q&Aの設定や種類
Q&Aには設定はありません。クエスチョンとアンサーしかないからです。
種類も１つしかなく単純にクエスチョンとアンサーのみです。
Q&Aに似たものでFAQと言うものがあります。これはQ&Aをまとめてさらに厳選したものになります。
Diver入力補助「Q&A」について入力方法など詳細記事は下記からどうぞ
![[WordPress]Diver入力補助「Q&A」の使い方[Gutenberg]編](https://100manblog.com/wp-content/uploads/2019/08/hatena-1184896_640.png)
Diver入力補助「記事一覧」
記事一覧はどのように使うの？
Diverの入力補助にある記事一覧とはどのように使うのでしょうか？
記事の中に記事を表示してどのように使うのかわかりませんよね
ページの中に他の記事の一覧が表示できることは以外に便利だったりします。
何が便利かと言うと記事の中で紹介したい記事がいくつもある場合に一発で一覧表示することです。
このようにカテゴリー記事が一発で表示できます。
残念ながらこの記事では「記事一覧」の入力補助を表示させると表示が崩れるためスクショ画像を記載しています。
これはグリッド表示をしています。
因みにGutennbergの場合カテゴリーは記事一覧を表示できますがランキングで表示しようとすると下書きでは表示されますがプレビューで確認すると「記事がありません」となって表示されません。
おそらくバグか何かだと思いますがGutenbergの「記事一覧」ではカテゴリー記事だけしか表示をしません。
記事一覧の設定
記事一覧は表示させる記事の種類と記事数などが設定できます。
難しい設定はないため初心者でもスムーズに設定可能です。
しかしGutenbergエディターの場合はカテゴリー記事しか表示できないようです。（記事執筆時点）
Diver入力補助「記事一覧」の設定など詳細記事は下記からどうぞ
![[WordPress]Diver入力補助「記事一覧」の使い方[Gutenberg]編](https://100manblog.com/wp-content/uploads/2019/08/internet-315132_640.jpg)
Diver入力補助「スター」
スター？何それ？
スターとは芸能人のスターではありません。入力補助のスターとは星のことです。
星？ 星と言っても⭐︎のことです。
何に使うのかと言うとレビュースコアなどで使う⭐️です。早速見てみましょう
これです。レビューなどの評価に使う星で、評価が高ければ星の数が5で、評価が低ければ1になります。
スターの種類や設定
スターの種類は3種類です。3種類と言うより大きさが3種類あります。
星の数は数と言うより色が変更可能です。詳しくはスターのことだけを記載したページがありますのでそちらにどうぞ。
Diver入力補助「スター」の設定などの詳細記事は下記からどうぞ
![[WordPress]Diver入力補助「スター」の使い方[Gutenberg]編](https://100manblog.com/wp-content/uploads/2019/08/fullsizeoutput_73bf-1.jpeg)
Diver入力補助「セクション」Gutenbergのみ
セクションって何の事？
セクションとは分割された部分や部門などの事です。
では入力補助のセクションとはどう言った使い方をするのでしょうか？
セクションを設定するとはっきりとした部分が作成できます。下の部分がセクションです。
ここはセクションです。
セクションの部分ははっきりと他の部分と違いますよね。これで記事がはっきりしますよね。
セクションの設定や種類
セクションは背景色だけでなく画像にも変更できます。
またセクションの中にアイコンボックスを入れると説明などがしやすくなります。
因みにアイコンボックスとはこの後の記事で書いています。最後までみていただければアイコンボックスも確認できます。
Diver入力補助「セクション」についての詳細記事は下記からどうぞ
![[WordPress]Diver入力補助「セクション」の使い方[Gutenberg]編](https://100manblog.com/wp-content/uploads/2019/08/coffee-791439_640.jpg)
Diver入力補助「アイコンボックス」Gutenbergのみ
アイコンボックスって何の事？
アイコンではなくアイコンボックスとは何でしょうか？
似たような感じですが実は結構違います。使いやすく便利な機能なんです。
アイコンボックスはアイコンの表示だけではなくアイコンの下にタイトルやテキストを入力できます。
そしてアイコンボックスの最大の特徴はアイコンだけでなく画像まで表示させることが出来ることです。
早速確認してみましょう。
アイコンが表示される部分に画像を表示しています。
カラムで3つに分けても表示できますので画像を用いた説明などはしやすくなりますよね。
アイコンボックスの設定や種類
アイコンボックスは設定やカラーの設定、他のブロックとの併用も出来てとても使いやすいです。
しかし、使いやすい代わりに使い方は初心者には若干わかりずらいかもしれませんね。
使い方や設定方法などはもっと詳しく書いた記事があるのでそちらを確認してください。
Diver入力補助「アイコンボックス」の設定や使い方などは下記からどうぞ
![[WordPress]Diver入力補助「アイコンボックス」の使い方[Gutenberg]編](https://100manblog.com/wp-content/uploads/2019/08/icons-1286876_640.png){kind=icon}
まとめ
DIVERの入力補助機能「Gutenberg」は全部で11個の入力補助があります。
クラシックエディターでは23個ありますがGutennbergでは半分の入力補助しかありません。しかしGutenbergしかない入力補助機能もあります。
この入力補助機能を使って良い記事を書けるように使って練習しましょう。
入力補助機能の中には使い方が良く分からないものもあります。でも自分なりに研究して使う事で使い方も理解できるようになります。
![[WordPress]Diver入力補助「記事一覧」の使い方[Gutenberg]編](https://100manblog.com/wp-content/uploads/2019/08/internet-315132_640-300x198.jpg)
![「アイコン」の便利な使い方！[DIVER入力補助機能]](https://100manblog.com/wp-content/uploads/2019/08/fullsizeoutput_73cd-150x150.jpeg)
