Diviのブログモジュールの使い方

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

Diviのブログモジュールとは？

ブログモジュールでは、記事を一覧にして表示することができます。

コンテンツ設定

コンテンツ

• 投稿タイプ：表示したい記事の種類を選択します。「投稿」と「固定ページ」、「メディア」、「案件」、「商品」の5種類あります。
• 投稿数：1つのモジュール内で表示する記事の数を設定します。
• 含まれるカテゴリー：一覧に表示する記事のカテゴリーをチェックを入れて選択します。
• 日付形式：日付の表記を記入します。デフォルトでは、海外の表記になってしまうので、「Y年Mj日」にしておくと良いです。
• コンテンツの長さ：「抜粋を表示」と「内容を表示」の2種類ありますが、基本的には抜粋の文章を表示した方が良いのかなと思います。
• 抜粋投稿を使用する：記事編集画面にある「抜粋」に記入してある文章が表示されます。
• 抜粋の長さ：抜粋文章を何文字まで表示可能にするかを記入します。
• ポストオフセット番号：記事を

要素

• 注目画像を表示：「はい」にすると、記事に設定しているサムネイル画像を表示することができます。
• 「もっと見込む」ボタンを表示：「はい」にすると、記事を読むためのボタンを表示することができます。
• 投稿者を表示する：「はい」にすると、記事の執筆者が表示されます。
• 日付を表示する：「はい」にすると、記事の投稿日が表示されます。
• カテゴリーを表示する：「はい」にすると、記事のカテゴリー名が表示されます。
• ショーのコメントの数：「はい」にすると、コメントの数が表示されます。
• 抜粋を表示：抜粋文章を表示するかどうかを設定します。
• ページネーションを表示：過去の記事一覧などをみるためにページを移動するための

デザイン設定

レイアウト

レイアウトでは、記事の表示の仕方を選択します。「フルワイド」と「グリッド」という2種類があります。

「フルワイド」は、記事がモジュールの横幅いっぱいに表示されます。

一方、「グリッド」の場合は、横にカードのようにして表示されます。

オーバーレイ

• 注目画像オーバーレイ：「オン」にすると、マウスカーソルを置いた時に、画像にオーバーレイを表示することができます。
• オーバーレイアイコン色：オーバーレイ時（マウスカーソルを画像に置いた時）のアイコンの色を設定します。
• オーバーレイの背景色：オーバーレイの背景色を設定します。
• オーバーレイアイコン：オーバーレイで表示するアイコンを選択します。

オーバーレイにはアイコンと背景を設定しますが、上の画像の位置になります。

画像

• 画像 角丸長方形：画像の角の丸みを調節します。
• 画像 ボーダースタイル：画像ボーダーを付ける場合、そのタイプをこちらから選択します。
• 画像 ボーダー幅：設定したボーダーの幅をここで調節します。
• 画像 ボーダーカラー：画像に追加したボーダーの色を設定します。
• 画像 ボーダースタイル：ボーダーのタイプをドロップダウンから選択します。
• 画像とビデオ：画像に付けるシャドーを選択します。

テキスト

• 文字列の揃え：ブログモジュールに表示される全てのテキストの整列を設定します。
• テキストの色：記事タイトルと「執筆者」というテキスト、投稿日のテキストの色を「明るい」色にするか、「暗い」色にするか選択します。
• 文字サイズ：全てのテキストの反映されるテキストシャドーの設定をします。

タイトル・ボディ・メタ情報・もっと読む・ページネーションを表示テキスト

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

最後はテキストの項目になります。「タイトルテキスト」、「ボディテキスト」、「メタ情報テキスト」、「もっと読むテキスト」、「ページネーションを表示テキスト」の5つの設定がありますが、ほぼ同じ使い方になるので、1つにまとめてしまいました。異なる部分は上で記載しています。