[WordPress]Diver入力補助「アイコンボックス」の使い方[Gutenberg]編

ばにら営業部長

今回はDiver入力補助「アイコンボックス」の解説をするよ

WordPressテーマDIVERでブログやサイトを作ろうと考えている方に入力補助機能で使える「アイコンボックス」について解説します。

DIVERの「アイコンボックス」はGutenbergエディターでしか使えない機能です。

いずれクラシックエディターでも実装するそうですが、現在はGutenbergエディターでのみ使える機能になっています。

「アイコンボックス」を使った読みやすいコンテンツにするレビューをしています。

またカラムに組み込んでアイコンボックスを表示させる場合は若干コツが必要なので詳しく解説しています。

Diver入力補助「アイコンボックス」の使い方

アイコンボックスとは何？

入力補助の「アイコン」ブロックがありますがDIVERのGutenbergエディターには「アイコンボックス」と言う入力補助があります。

「アイコンボックス」とは名前の通りアイコンだけではなくアイコンとテキストが表示できるボックスです。

早速どんなものか見てみましょう！

このように文書も同時に表示出来れば詳しい説明が出来るためユーザーに詳しく解説できますね。

この「アイコンボックス」はGutenbergエディターで使える機能です。

クラシックエディターの方はこの記事を執筆時点では使えないようです。

アイコンボックスの使い方

DIVERのマニュアルでは「アイコンボックス」を単体で使用する方法とカラムとの組み合わせが説明されています。

カラムとは簡単に言うとサイトなどでよく使う配置のことです。

例えば３カラムだと上記の「いいね」のボックスが３列並ぶ事です。

そのカラムにアイコンを表示させるものがアイコンボックスです。

それではいろんな組み合わせをみてみましょう。

まず単体での使い方をみてみましょう。

単体の場合は１つのアイコンを説明する場合に便利ですね。

次にカラム（段組み、列）との組み合わせもみてみましょう

このようにカラムに組み込むことで並べて比較表示も可能です。

グンと見やすくなりますね。色も分ければもっと見やすくなります。

上の「アイコンボックス」はバッテリーが満充電から放電していくアイコンです。

カラムに組み込みわかりやすく説明できます。

アイコンボックスにはアイコンだけでなく画像も使える

アイコンボックスに画像を貼ってみよう

DIVERの入力補助「アイコン」には画像は貼れませんが「アイコンボックス」であれば画像も表示できます。

綺麗な海と空

このようにアイコンではなく画像も貼れるため画像の説明も簡単にできます。

例えばいくつかの画像を貼って下に説明文を添えれば画像の説明もしやすくなりますね。

では次にカラムに組み込んで画像を表示してみましょう

因みにカラムに組み込む場合は2個までは簡単に組み込めますが3つ目はブロックの横をクリックしなければ3列に表示しにくいので若干のコツが必要です。

山

山のほのぼのした感じが良い感じですね。

海

海と空のコントラストが綺麗ですね。

都会の風景

都会のビルの感じがベストです。

このように画像を並べて説明文も添付出来れば説明するのにわかりやすいです。

ただカラムに組み込む場合は2列までは問題なくアイコンボックスを挿入できますが3列の場合はクリックする場所が最初は分かりません。

3列にしようとしたら上にアイコンボックスが表示されたり下側に表示されたりします。

コツはカラムブロックの外側をクリックすることです。

アイコンボックスの設定方法

アイコンボックスは簡単に設定できます。

まずは入力補助ブロックをクリックしましょう

次にアイコンボックスをクリック

そうすればアイコンボックスのブロックが開きアイコンが表示されます。

右側の設定でアイコンやカラーの設定が可能です。

さらにアイコンを画像に変更する場合は「タイトルを追加」のあたりをクリックすれば右側に画像の設定が出現します。

画像設定が出現すればあとは画像をアップロードすればアイコン部分が画像に変更されます。

アイコンボックスをカラムに組み込むには

カラムに組み込んで3列で表示させるにはブロック検索でレイアウト要素を選べばカラムのブロックがあります。

カラムブロックをクリックしてカラムを表示させます。

カラムを表示させてもブロックは真っ白なので＋部分をクリックしてアイコンボックスをクリックすればアイコンボックスが表示されます。

アイコンボックスが表示されたら横の方にある＋をクリックすれば２個目のアイコンボックスが表示されます。

下の画像のようにカラムブロックの外側（青い枠）をタップすれば右側にカラムの設定項目が表示されます。

カラムの設定が表示されたらカラムの数を2から3へ変更してください。

カラムの設定を3に変更すれば下の画像のようにカラムブロックの一番右側に3個目のアイコンボックスが表示できるようになります。

これで3カラムでのアイコンボックスを使うことが可能になりました。

まとめ

DIVERの入力補助「アイコンボックス」の使い方は簡単ですね。

カラムに組み込んで表示させるには若干コツが必要な事も分かりますね。私も最初は3カラムに出来ませんでした。

しかし何度も使っていたらコツがわかったのでこの記事で詳しくレビューしました。

合わせて読みたいDiver入力補助まとめ

[WordPress] Diver入力補助の使い方まとめマニュアル！[Gutenberg]編

2020.9.1

ばにら営業部長こんにちは！ばにら営業部長です WordPressテーマDiverの入力補助機能を解説しているコンテンツはたくさんあるけどいまいちわからない事ってありますよね。 それ...