Diviのコメントモジュールの使い方

こんにちは、根本です。今回は、Diviのコメントというモジュールの使い方をご紹介していきます。

Diviのコメントモジュールとは？

Diviのコメントモジュールでは、ユーザーにコメントを記入してもらったり、そのコメントを記事中に表示することができるモジュールです。よく、記事の直下にコメントを投稿するフォームが用意されていると思いますが、それを作成できるモジュールとなっています。

コンテンツ設定

それでは、実際に設定を確認していきましょう。まずは、「コンテンツ」から確認していきます。

要素

• 著者アバターを表示：コメントしてくれた人のアバターを表示するかどうかの設定です。
• 返信ボタンを表示：コメントに対して返信できるようにするかどうかの設定です。
• ショーのコメントの数：提出してもらったコメントの数を表示するかどうかの設定です。

「要素」では、コメントモジュールに何を表示するかの設定になります。また、それぞれ、どこの設定になっているのかというのは、上の画像をご確認ください。

デザイン設定

次は、「デザイン」の設定を確認していきます。ここは、コメント記入欄の色の変更だったり、ボタン、テキストのスタイルなど、細かい設定をやっていきます。

フィールド

• フィールド 背景色：コメント欄の背景色を設定します。
• フィールド テキストカラー：コメント欄に表示されるテキストの色を設定します。
• フィールド フォーカスの背景色：ユーザーがコメント欄をクリックした時に背景色がここで設定した色に切り替わります。
• フィールド フォーカステキストの色：ユーザーがコメント欄で文章を入力している時のテキストの色がここで設定した色になります。
• フィールドのマージン：コメント欄の上・下・左・右の余白を調節できます。
• フィールドパディング：コメント欄の上・下・左・右のパディング（コメント欄の外枠と中のテキストとの隙間）を調節できます。
• フィールド フォント：コメント欄に表示されるテキストのフォントを変更できます。
• フィールド ソフトライト：フォントのタイプを選択できます。
• フィールド 書式コピー：テキストを車体にしたり、アンダーラインを引いたりできます。
• 文字列の揃え：文字の整列を設定できます。
• フィールド 文字サイズ：コメント欄内の文字の大きさを調節できます。
• フィールド 文字間隔：コメント欄内の文字間隔を調節できます。
• フィールド 行の高さ：コメント欄に表示される文章の行の高さを調節できます。
• フィールド 文字サイズ：コメント欄の文字のシャドウを設定できます。
• フィールド 角丸長方形：コメント欄の4つの角の丸みを調節します。

• フィールドボーダースタイル：コメント欄のボーダーの色を設定します。
• 強調ボーダーカラーを使う：「はい」に切り替えると、「フィールドフォーカス 角丸長方形」、「フィールドフォーカス ボーダースタイル」、「フィールドフォーカス ボーダー幅」、「フィールドフォーカス ボーダーカラー」、「フィールドフォーカス ボーダースタイル」の5つの設定項目が表示されます。
• フィールドフォーカス 角丸長方形：コメント欄を選択している時の4つの角の丸みを調節します。
• フィールドフォーカス ボーダースタイル：コメント欄を選択している時に表示したいボーダーのタイプを選択します。
• フィールドフォーカス ボーダー幅：（コメント欄を選択している時の）ボーダーの幅を調節します。
• フィールドフォーカス ボーダーカラー：（コメント欄を選択している時の）ボーダーの色を設定します。
• フィールドフォーカス ボーダースタイル：（コメント欄を選択している時の）ボーダーの形状を選択します。
• フィールド ボックスシャドウ：コメント欄のシャドウを選択します。

「強調ボーダーカラー」というのは、ユーザーがコメント欄に記入する際のボーダーを指します。通常時のフィールドには影響がありません。

画像

• 画像 角丸長方形：画像の四角の丸みを調節します。
• 画像 ボーダースタイル：画像の4つの辺のうち、どこにボーダーをつけるのかを選択します。
• 画像 ボーダー幅：ボーダーの幅を調節します。
• 画像 ボーダーカラー：ボーダーの色を設定します。
• 画像 ボーダースタイル：ボーダーのタイプを選択します。
• 画像とビデオ：画像に付けるぼかしを選択します。

テキスト

• 文字列：コメントモジュール全体のテキストの位置を選択します。
• テキストの色：コメントモジュール全体のテキストの色を「明るい」か「暗い」から選択します。
• 文字サイズ：コメントモジュール全体のテキストのシャドウの設定をします。

Comment・Form Title・メタ情報・コメント テキスト

• 見出し3を挿入：デフォルトでH2タグが選択されていますが、必要に応じて別のタグに切り替えましょう。
• フォント：テキストのフォントを変更できます。
• ソフトライト：文字の太さを選択します。
• 書式のコピー：テキストの書式（斜体にしたり、打ち消し線を引いたり）を設定します。複数の書式を選択することも可能です。
• 文字の揃え：テキストの位置を設定します。
• テキストカラー：文字の色を設定します。
• 文字サイズ：文字の大きさを調節します。
• 文字間隔：テキストの各文字の隙間を調節します。
• 行の高さ：縦の幅を調節します。
• 文字サイズ：テキストにかけるシャドウを設定します。

この項目は、「Comment」と「Form Title」、「メタ情報」、「コメント」の4つの設定をまとめてしまいました。

ボタン

• ボタンにカスタムスタイルを使用：「はい」に切り替えると以下の設定項目が表示され、ボタンの細かい設定が可能になります。
• ボタン 文字サイズ：ボタンの文字の大きさを設定します。
• ボタン テキストカラー：ボタンの文字色を設定します。
• ボタン Background：ボタンの背景色（メインとなる色）を設定します。
• ボタン ボーダー幅：ボタンのボーダーの幅を調節します。
• ボタン ボーダーの色：ボタンのボーダーの色を設定します。
• ボタン 境の半径：ボタンの角の丸みを調節します。
• ボタン 文字間隔：ボタンテキストの字間を調節します。
• ボタン フォント：ボタンテキストのフォントを選択します。
• ボタン ソフトライト：ボタンテキストの書体を変更できます。
• ボタン 書式のコピー：ボタンテキストの書式を設定します。
• ボタン アイコン：アイコンを表示したい場合は、こちらからデザインを選択します。
• ボタン アイコンの色：設定したアイコンの色を設定します。
• ボタン アイコンを配置：アイコンの配置をテキストの「左」に置くか「右」に置くか設定します。
• みのアイコンを止のためのボタン：アイコンを常時表示しておきたい場合は、「はい」に切り替えます。「いいえ」のままだと、マウスカーソルが置かれた時だけアイコンが表示されます。
• ボタン 文字サイズ：ボタンテキストのシャドウの設定ができます。
• ボタンのマージン：ボタン単体のマージンを設定できます。
• ボタンのパディング：ボタン単体のパディングを設定できます。
• ボタンのボックス影：ボタンにシャドウをつける場合は、こちらからデザインを選択します。

最後にご紹介するのは「ボタン」です。「コメント」の「要素」で「返信ボタンを表示」を「はい」に設定している場合は、ボタンが2箇所に表示されますが、そのボタンの外観の設定になります。