ブログ投稿テンプレート内でDiviのコメントモジュールのスタイルを設定する方法

公開: 2020-01-11

ブログ投稿テンプレートのデザインは、Diviテーマビルダーを使用すると非常に簡単です。 しかし、ブログテンプレートをデザインするときに見落とされがちなことが1つあります。それは、コメントセクションです。 ありがたいことに、Diviには、ブログ投稿テンプレートに簡単に追加できるカスタマイズ可能なコメントモジュールがあります。 この投稿では、ブログテンプレートに含めることができる2つのカスタムコメントセクションデザインを作成する方法を紹介します。 JSONファイルも無料でダウンロードできます！

それを手に入れましょう。

プレビュー

コメントレイアウトのデザインがさまざまな画面サイズでどのように表示されるかを見てみましょう。 最初のデザインは白黒のミニマルなスタイルで、2番目のデザインはよりカラフルです。

デスクトップ

ブログ投稿テンプレート内のDiviのコメントモジュール

タブレット

電話

デスクトップ

ブログ投稿テンプレート内のDiviのコメントモジュール

タブレット

モバイル

コメントモジュールテンプレートを無料でダウンロード

無料のコメントモジュールテンプレートを入手するには、まず下のボタンを使用してテンプレートをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする
無料でダウンロード

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

コメントモジュールデザイン＃1を再現しましょう

背景デザインを作成する

黒と白のコメントレイアウトテンプレートを再作成する最初のステップは、ドットの背景をデザインすることです。 1つはデスクトップビュー用で、もう1つはレスポンシブ画面用です。 これを自分で作成したい場合は、AdobeIllustratorのパターンメーカーツールが必要になります。 それ以外の場合は、インターネットから同様のパターンを入手するか、上記のダウンロード可能な.zipファイルに含まれているパターンを使用できます。

  1. Adobe Illustratorで、高さ1920ピクセル+幅670ピクセルの空白のアートボードを作成します。
  2. 円の約半分のサイズのマージンを持つ白い正方形の内側に黒い円を作成します。
  3. 両方の形状を選択し、オブジェクト>パターン>作成をクリックしてパターンを作成します。
  4. パターンメーカーで、[列ごとのブリック]を選択し、パターン見本として保存します。
  5. アートボードのサイズの形状を作成し、パターンを適用します。
  6. レスポンシブ画面サイズの場合は、形状を半分のサイズに縮小します。 Shiftキーを押して、円の比率を維持します。
  7. パターン化された形状を最初の形状の横にコピーして貼り付けると、同じパターンに小さな円が表示されます。
  8. 両方を別々にダウンロードしてください。

テーマビルダーを開き、新しいテンプレートを追加します

次に、テーマビルダーを開きます。 新しいテンプレートを追加します。

すべての投稿のテンプレートを選択します

すべての投稿で新しいテンプレートを使用します。

カスタムボディを追加し、ゼロから構築する

最後になりましたが、テンプレートのカスタムボディの作成を開始します。

新しいセクションを追加

バックグラウンド

これで、コメントレイアウトのデザインの作成を開始できます。 テンプレートエディタ内に、セクションがあります。 セクション設定を開き、パターンの背景画像をアップロードします。 グラデーションオーバーレイも追加します。

  • 背景：グラデーション
  • 色1：半透明の白rgba（255,255,255,0.96）
  • 色2：白#ffffff
  • 背景画像の上にグラデーションを配置：はい
  • 画像：
    • デスクトップ：ドットパターン画像1
    • タブレットと電話：ドットパターン画像2

新しい行を追加

カラム構造

次に、2列の新しい行を追加します。

サイジング

次に、行のサイズを調整します。

  • カスタムガター幅：2
  • 幅：80％
  • 最大幅：100％

列2の設定

国境

列の設定で、2番目の列に上部の境界線を追加します。

  • スタイル：トップのみ
  • 幅：3px
  • カラー：ブラック#ffffff

列1にテキストモジュールを追加

コンテンツ

最初のテキストモジュールを列1に追加し、選択したH3コンテンツをいくつか追加します。

  • テキスト：段落

見出しテキスト

次に、[デザイン]タブで、見出しテキストのスタイルを設定します。

  • 見出しレベル：H3
  • フォント：GFS Didot
  • カラー：ブラック＃000000
  • サイズ：
    • デスクトップ：5vw
    • タブレット：9vw
    • 電話番号：13vw

間隔

また、間隔を調整します。

  • ボトムパディング
    • デスクトップ：3vw
    • タブレットと電話：7vw

列1に紹介文モジュールを追加する

コンテンツ

次に、選択したコンテンツを含む証言モジュールを列1に追加します。 画像もアップロードしてください。

  • 著者：忠実な読者
  • 役職：コンテンツマーケティングオフィサー
  • 会社：タイガーメディア会社
  • 本文：段落テキスト
  • 画像：ポートレート写真

バックグラウンド

背景が透明であることを確認してください

  • 背景色：透明

要素

[要素]タブで、引用アイコンを表示するように選択します。

  • 見積もりアイコンを表示：はい

引用アイコン

次に、引用アイコンのスタイルを次のように設定します。

  • カラー：ブラック＃000000
  • 背景：白#ffffff
  • アイコンのフォントサイズ：
    • デスクトップ：2vw
    • タブレット：5vw
    • 電話番号：9vw

画像

次に画像設定を変更します。

  • 幅と高さ：
    • デスクトップ：110px
    • タブレットと電話：90px
  • 丸みを帯びた角：90px
  • ボーダーカラー：透明

文章

テキストの配置も変更します。

  • 配置：中央

本文

次に、本文のスタイルを設定します。

  • フォント：Verdana
  • カラー：ブラック
  • サイズ：
    • デスクトップ：0.7vw
    • タブレット：2vw
    • 電話：3vw

著者テキスト

著者のテキストのスタイルを設定して続行します。

  • フォント：GFS Didot
  • 重量：太字
  • カラー：ブラック#ffffff
  • サイズ：
    • デスクトップ：1.2vw
    • タブレット：2.5vw
    • 電話：4vw
  • 文字間隔：1px

位置テキスト

次に、位置テキスト。

  • フォント：GFS Didot
  • カラー：ブラック#ffffff
  • サイズ：
    • デスクトップ：0.9vw
    • タブレット：2vw
    • 電話：3vw
  • 線の高さ：2em

会社のテキスト

また、会社のテキスト。

  • フォント：GFS Didot
  • カラー：ブラック#ffffff
  • サイズ：
    • デスクトップ：0.7vw
    • タブレット：2vw
    • 電話：3vw
  • 線の高さ：2em

サイジング

モジュールのサイズを調整して続行します。

  • 幅：
    • デスクトップ：60％
    • タブレット：65％
    • 電話番号：75％
  • モジュールの配置：中央

間隔

また、間隔を調整します。

  • トップパディング：
    • デスクトップ：1.5vw
    • タブレット：5vw
    • 電話：6vw

国境

最後に、モジュールに上部の境界線を追加します。

  • ボーダースタイル：トップのみ
  • 幅：2px
  • カラー：ブラック#ffffff

コメントモジュールを列2に追加

要素

列2に移動して、コメントモジュールを追加します。 要素の設定を次のように変更します。

  • 著者のアバターを表示：いいえ
  • 返信ボタンを表示：はい
  • コメント数を表示：いいえ

田畑

モジュールの[デザイン]タブに移動し、フィールドの設定を変更します。

  • テキストの色：黒#oooooo
  • 背景色：ペールグレー＃f7f7f7
  • フォーカステキストの色：黒#oooooo
  • フォーカスの背景色：ペールグレー＃f7f7f7
  • フォント：GFS Didot
  • 文字サイズ：
    • デスクトップ：0.9vw
    • タブレット：1.5vw
    • 電話：2.5vw
  • 文字間隔：1px

フォームタイトルテキスト

次に、フォームのタイトルテキスト設定を変更します。

  • フォント：GFS Didot
  • カラー：ブラック#ffffff
  • サイズ：
    • デスクトップ：0.9vw
    • タブレット：2.5vw
    • フォント：3.5vw

メタテキス​​ト

メタテキス​​トのスタイルを設定して続行します。

  • フォント：GFS Didot
  • カラー：ブラック#ffffff
  • サイズ：
    • デスクトップ：1.3vw
    • タブレット：3vw
    • 電話：4vw

コメントテキスト

また、コメントテキスト。

  • フォント：Verdana
  • カラー：ブラック#ffffff
  • サイズ：
    • デスクトップ：0.7vw
    • タブレット：1.7vw
    • 電話：2.7vw
  • 文字間隔：1px
  • 線の高さ：1.8em

ボタン

次に、ボタンのスタイルを設定します。

  • 文字サイズ：
    • デスクトップ：0.9vw
    • タブレット：2.5vw
    • 電話：3.5vw
  • テキストの色：白＃000000
  • 背景：黒#ffffff
  • 文字間隔：1px
  • フォント：GFS Didot

サイジング

次に、モジュールのサイズ設定を調整します。

  • 幅：90％
  • モジュールの配置：中央

間隔

最後に、間隔も。

  • トップパディング：
    • デスクトップ：4vw
    • タブレットと電話：8vw
  • 左右のパディング：3vw

コメントモジュールデザイン＃2を再現しましょう

背景デザインを作成する

カラフルな円のコメントモジュールのレイアウトを再作成するための最初のステップは、背景デザインを準備することです。 お気に入りのグラフィックエディタ内でシンプルなサークルデザインを作成できます。 背景画像を作成するために必要な手順は次のとおりです。

  1. 幅1800ピクセル、高さ約1800ピクセルのキャンバスを作成します。
  2. 一方が他方よりも大きい2つの円を追加します。
  3. 円に色を付け、透明度を追加します。
  4. キャンバスの左上に少し重なった2つの円を配置します。
  5. 円を1つのオブジェクトとしてグループ化し、複製します。
  6. 円を裏返し、最初の2つから斜め下と右に配置します。
  7. 上下にスペースを残してください。 コメントが多い場合は、画像が繰り返され、縦に並べて表示されます。

このコメントレイアウトテンプレート用に作成した背景デザインは、チュートリアルの最初にダウンロードできるzipフォルダーにもあります。

テーマビルダーを開き、新しいテンプレートを追加します

次に、テーマビルダーを開きます。 新しいテンプレートを追加します。

すべての投稿のテンプレートを選択します

テンプレートをすべての投稿に適用します。

カスタムボディを追加し、ゼロから構築する

そして、テンプレートのカスタムボディの作成を開始します。

新しいセクションを追加

テンプレートエディタに入ると、セクションが表示されます。 そのセクションを開き、背景画像をアップロードします。 グラデーションカラーオーバーレイも含めます。

バックグラウンド

  • 背景：グラデーション
  • グラデーションカラー1：透明な白rgba（255,255,255,0.55）
  • グラデーションカラー2：透明な白rgba（255,255,255,0.55）
  • 画像：サークルの背景

間隔

また、行を追加する前にセクションの間隔を調整してください。

  • 上下のパディング：200px

新しい行を追加

カラム構造

次に、3列の行を追加します。

サイジング

モジュールを追加する前に、行のサイズを調整してください。

  • カスタムガター幅：2
  • 幅：80％
  • 最大幅：100％

列2の設定

バックグラウンド

次に、青い背景を追加して2番目の列のスタイルを設定します。

  • 背景色：青＃51a2ff

国境

境界線を丸めて続行します。

  • 丸みを帯びた角：1vw四隅すべて

ボックスシャドウ

最後に、ボックスシャドウも追加します。

  • シャドウ：3番目のオプション
  • ぼかし強度：80px
  • 色：rgba（0,0,0,0.13）

個人モジュールを列1に追加

コンテンツ

モジュールを追加する時が来ました。 列1のpersonモジュールから始めて、コンテンツを追加します。

  • 名前：ジェニー・マカビー
  • 役職：定期的な寄稿者
  • 本文：段落テキスト
  • 画像：ポートレート写真

バックグラウンド

モジュールに白い背景を追加します。

  • 背景色：白＃000000

画像

[デザイン]タブで、画像の境界線を次のようにスタイル設定します。

  • 丸みを帯びたコーナー：左上と右上に0.5vw
  • ボーダースタイル：ボトムボーダー
    • 幅：5px
    • カラー：ブルー＃51a2ff

タイトルテキスト

見出しテキストのスタイルを設定して続行します。

  • 見出しレベル：H4
  • フォント：Alegreya Sans SC
  • スタイル：TT
  • 色：＃021859
  • サイズ：
    • デスクトップ：1vw
    • タブレット：3vw
    • 電話：5vw
  • 文字間隔：1px
  • 線の高さ：1.6em

本文

次に、本文も。

  • フォント：ラト
  • 色：青＃1a1f73
  • サイズ：
    • デスクトップ：0.7vw
    • タブレット：2vw
    • 電話：3vw
  • 線の高さ：2em

位置テキスト

ポジションテキストを続行します。

  • フォント：ラト
  • スタイル：斜体
  • 色：＃021859
  • サイズ：
    • デスクトップ：0.8vw
    • タブレット：3vw
    • 電話：3.5vw

サイジング

次に、サイズを調整します。

  • 幅：
    • デスクトップ：100％
    • タブレット：50％
    • 電話番号：70％
  • モジュールの配置：中央

間隔

また、間隔。

  • 上下のパディング：4vw

国境

次に、いくつかの丸い角を追加します。

  • 丸みを帯びた角：四隅すべてにo.5vw
  • ボーダースタイル：4辺すべて24ピクセル
    • 色：白#ffffff

ボックスシャドウ

最後に、ボックスシャドウを追加します。

  • シャドウ：3番目のオプション
  • ぼかし強度：80px
  • 色：rgba（0,0,0,0.13）

ソーシャルメディアフォローモジュールを列1に追加

ネットワーク

個人モジュールの下に、3つのソーシャルネットワークを備えたソーシャルメディアフォローモジュールを追加します。

  • フェイスブック
  • Linkedin
  • ツイッター

ネットワーク設定

各ソーシャルネットワークに透明な背景色を適用します。 これを1つずつ行う必要があります。

  • 背景：透明

配置

メインの設計設定で、モジュールの配置を中央に配置します。

  • モジュールの配置：中央

アイコン

最後に、アイコンを青色にします。

  • カラー：ブルー＃51a2ff
  • サイズ：
    • デスクトップ：1vw
    • タブレットと電話：4vw

列2にテキストモジュールを追加します

コンテンツ

列2に移動します。選択したh3コンテンツを含むテキストモジュールを追加します。

  • テキスト：コメントを残してください

バックグラウンド

白い背景を追加します。

  • 背景色：白#ffffff

見出しテキスト

次に、[デザイン]タブに移動し、見出しテキストのスタイルを設定します。

  • 見出しレベル：H3
  • フォント：Alegreya Sans SC
  • 重量：太字
  • フォントスタイル：TT
  • カラー：ブルー＃021859
  • サイズ：
    • デスクトップ：2vw
    • タブレットと電話：5.5vw

間隔

最後に、間隔を調整します。

  • トップパディング：
    • デスクトップ：3vw
    • タブレット：2vw
    • 電話：6vw
  • ボトムパディング
    • デスクトップとタブレット：3vw
  • 左右のパディング：
    • デスクトップとタブレット：1vw

コメントモジュールを列2に追加

要素

次に、コメントモジュールを列2に追加します。すべての要素を有効にします。

  • 著者のアバターを表示：はい
  • 返信ボタンを表示：はい
  • コメント数を表示：はい

バックグラウンド

コメントモジュールに白い背景を追加します。

  • 背景色：白#ffffff

田畑

次に、次のようにフィールド設定を調整して、モジュールのスタイリングを開始します。

  • 背景色：白#ffffff
  • テキストの色：青＃1a1f73
  • フォーカスの背景色：白#ffffff
  • フォーカステキストの色：青＃1a1f73
  • フォント：Alegreya Sans SC
  • スタイル：TT
  • サイズ：
    • デスクトップ：1vw
    • タブレット：3vw
    • 電話：4vw
  • 丸みを帯びた角：5pxすべての角

画像

画像設定も変更してください。

  • 丸みを帯びた角：5px
  • ボーダースタイル：すべての側面
  • 幅：3px
  • 色：青＃1a1f73

コメントカウントテキスト

次に、コメントカウントテキスト。

  • 見出しレベル：H3
  • フォント：Alegreya Sans SC
  • フォントスタイル：TT
  • カラー：ブルー＃021859
  • サイズ：
    • デスクトップ：1.3vw
    • タブレット：3vw
    • 電話：5vw
  • 線の高さ：2 em

フォームタイトルテキスト

また、フォームのタイトルテキストのスタイルを設定します。

  • 見出しレベル：H3
  • フォント：Alegreya Sans SC
  • フォントスタイル：TT
  • カラー：ブルー＃021859
  • サイズ：
    • デスクトップ：1vw
    • タブレット：3vw
    • 電話：5vw
  • 線の高さ：2 em

メタテキス​​ト

次のようにメタテキス​​トとスタイルに移動します。

  • フォント：ラト
  • 色：＃021859
  • サイズ：
    • デスクトップ：1vw
    • タブレット：2.7vw
    • 電話：3.5vw

コメントテキスト

次に、コメントテキスト。

  • フォント：ラト
  • 色：＃021859
  • サイズ：
    • デスクトップ：0.9vw
    • タブレット：1.8vw
    • 電話：2.5vw

ボタン

ボタンのスタイルも忘れないでください。

  • 文字サイズ：
    • デスクトップ：0.9vw
    • タブレット：2.5vw
    • 電話：3.5vw
  • テキストの色：白#ffffff
  • 境界半径：5px
  • フォント：ラト

間隔

また、コメントモジュールの間隔。

  • トップマージン：
    • デスクトップ：-1vw
    • タブレットと電話：-3.3vw
  • トップパディング：
    • デスクトップとタブレット：3vw
    • 電話：4vw
  • ボトムパディング：
    • デスクトップ：3vw
    • 携帯電話とタブレット：0vw
  • 左右のパディング：
    • デスクトップ：2vw
    • タブレット：4vw
    • 電話：7vw

国境

最後に、コメントモジュールにいくつかの丸い角を追加します。

  • ボーダースタイル：4辺すべて2px
  • 色：青＃1a1f73

Eメールオプチンモジュールを列3に追加

コンテンツ

列3と電子メールオプチンモジュールに移動します。 モジュールにタイトルを付けます。

  • テキスト：定期的な更新を取得する
  • 本文：段落テキスト

メールアカウント

[メールアカウント]タブでメールプロバイダーを設定します。 リストを選択し、APIキーを追加します。

  • メールプロバイダー
    • リスト
    • APIキー

田畑

次に、単一の名前フィールドのみを使用することを選択します。

  • 単一名フィールドを使用：はい

バックグラウンド

モジュールに白い背景を追加します。

  • 背景色：白

レイアウト

デザインtaに移動し、次のようにレイアウト設定を変更します。

  • レイアウト：左側にボディ、右側にフォーム
  • 名前全幅：はい
  • 名全幅：はい
  • 姓の全幅：はい
  • メール全幅：はい

田畑

次に、フィールド設定のスタイルを設定します。

  • テキストの色：青＃1a1f73
  • 背景色：白#ffff
  • フォーカステキストの色：青＃1a1f73
  • フォーカスの背景色：白#ffff
  • フォント：ラト
  • 文字サイズ：
    • デスクトップ：0.7vw
    • タブレット：2.2vw
    • 電話：3.2vw
  • 文字間隔：1px
  • 丸みを帯びたコーナー：すべてのコーナーで0.2vw
  • ボーダースタイル：4辺すべて
    • 幅：2px
    • 色：青＃1a1f73

タイトルテキスト

タイトルテキストが続きます。

  • 見出しレベル：H4
  • フォント：Alegreya Sans SC
  • 重量：中
  • フォントスタイル：TT
  • 色：青＃1a1f73
  • サイズ：
    • デスクトップ：1vw
    • タブレット：4vw
    • 電話：5vw
  • 文字間隔：1px

本文

また、本文テキスト。

  • フォント：ラト
  • 色：青＃1a1f73
  • サイズ：
    • デスクトップ：0.7vw
    • タブレット：2.3vw
    • 電話：3vw

結果メッセージテキスト

結果メッセージのテキストを忘れないでください。

  • フォント：ラト
  • 色：青＃1a1f73
  • サイズ：
    • デスクトップ：0.7vw
    • タブレット：2.3vw
    • 電話：3vw

ボタン

また、ボタンのスタイルを設定します。

  • 文字サイズ：
    • デスクトップ：0.7vw
    • タブレット：2.3vw
    • 電話：3vw
  • テキストの色：白#ffffff
  • 背景色：青＃51a2ff
  • フォント：ラト

間隔

間隔を調整します。

  • 上下のパディング：4vw

国境

次に、いくつかの丸い角を追加します。

  • 丸みを帯びた角：四隅すべてにo.5vw

ボックスシャドウ

最後に、ボックスシャドウを追加します。

  • シャドウ：3番目のオプション
  • ぼかし強度：80px
  • 色：rgba（0,0,0,0.13）

プレビュー

すべての手順を完了したので、このチュートリアルの結果を最後に見てみましょう。

デスクトップ

タブレット

電話

デスクトップ

タブレット

モバイル

コメントモジュールラップです！

それでおしまい！ カスタマイズしたコメントセクションをブログ投稿テンプレートに追加しました。 これらのデザインがあなた自身のDiviテーマビルダーの作成に影響を与えることを願っています。 このチュートリアルの開始時に、両方のデザインのJSONファイルをダウンロードすることができました。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！