Divi Builder Plugin Documentation

How to add, configure and customize the Divi blog module.

Divi ではブログもモジュールで、「ブログ」はウェブサイトのどこにでも、さまざまな形式で配置することが可能です。 ブログモジュールとサイドバーモジュールを組み合わせて、クラシックなブログデザインを作成することができます。 1 列、2 列、3 列のブログはすべて、ブログとサイドバーモジュールを使用して構築できます。

このモジュールのライブデモを見る

How To Add A Blog Module To Your Page

ブログにモジュールを追加する前に、まずDigi Builderに飛び込んでみる必要があります。 Diviのテーマがあなたのウェブサイトにインストールされると、新しいページを作成するたびに、ポストエディタの上にUse Divi Builderボタンが表示されるようになります。 このボタンをクリックすると、Divi Builderが有効になり、Divi Builderのすべてのモジュールにアクセスできるようになります。 次に、Use Visual Builderボタンをクリックすると、ビジュアルモードでビルダーが起動します。 WordPressダッシュボードにログインしていれば、フロントエンドでWebサイトを閲覧しているときにも[Use Visual Builder]ボタンをクリックできます。

ビジュアルビルダーに入ったら、灰色のプラスボタンをクリックして、新しいモジュールをページに追加することができます。 新しいモジュールは、Rows の内部にのみ追加できます。 新しいページを始める場合、最初に行を追加することを忘れないでください。 Diviの行とセクション要素の使い方については、素晴らしいチュートリアルがあります。

モジュール一覧の中からブログモジュールを探し、それをクリックしてページに追加してください。 モジュール一覧は検索可能なので、「blog」と入力してエンターキーをクリックすると、自動的に blog モジュールを見つけて追加することもできます! モジュールが追加されると、モジュールのオプションのリストが表示されます。 これらのオプションは、3つの主要なグループに分かれています。

使用例。 右サイドバーのある専門セクションにグリッド レイアウトの Blog モジュールを追加する

この例では、Blog モジュールをブログ ページに追加します。 このブログページには、全幅のヘッダーがあり、その下に検索モジュールがあります。 検索モジュールの下に、左側にブログモジュール、右側にサイドバーセクションを持つ専門セクションを追加してみます。 右側のサイドバーには、最近の投稿ウィジェット、メール オプチン モジュール、および人物モジュールがあります。

以下は、例のページがどのように見えるかです。

ブログ モジュールは、特殊セクションの左側にグリッド レイアウトになっていることに注意してください。

始めましょう。

ビジュアルビルダーを使用して、次のレイアウトで専門セクションを追加します:

あなたは、左側に1列または2列行を追加するように求められます。

次に、Blogモジュールを行に追加します。

Blog Settingsを次のように更新します:

コンテンツオプション

投稿数:6
Read More Button: ON
Show Pagination: NO
Grid Tile Background Color: #ffffff

デザインオプション

レイアウト。 グリッド
ドロップシャドウを使用。 ON
オーバーレイ アイコンの色。 #ffffff
Hover Overlay Color: rgba(224,153,0,0.51)
Header Font.Font(ヘッダーフォント): ON
Hover Overlay Color: Rgba(224,153,0,0.51) デフォルト
ヘッダーのフォントサイズ:21px
ヘッダーの文字色。 ヘッダーの文字間隔:#333333
ヘッダーの文字間隔:#333333 1px
Header Line Height: 1.2em
Use Border: YES
ボーダーカラー。 #f0f0f0
ボーダー幅:1px
ボーダースタイル。 Solid

Advanced Options

Custom CSS (Read More Button):

Read More ボタン用の高度な Custom CSS は、デザインによく合うカスタム感を作成します。

専門セクションレイアウトの右サイドバーセクションに、最近の投稿ウィジェットで引っ張ってくるサイドバー モジュールを追加する必要があります。 その下に、メールオプチンモジュールを追加する必要があります。

以上です!

ブログコンテンツのオプション

コンテンツタブ内には、テキスト、イメージ、アイコンなど、モジュールのすべてのコンテンツ要素を見つけることができます。

Posts Number

表示したい投稿数を定義します。

投稿フィードに含めたいカテゴリーを選択します。

Included Categories

フィードに含めたいカテゴリを選択します。

Meta Date Format

ブログ投稿に表示したい日付形式をここで定義します。 デフォルトのレイアウトはM j, Y形式(2014年1月6日)です。その他のオプションについては、日付形式に関するWordPress Codexを参照してください。

コンテンツ

フルコンテンツを表示すると、インデックスページで投稿が切り捨てられません。

Offset Number

何記事分オフセットさせるかを選択します。

Show Featured Image

このオプションでは、ブログモジュールにサムネイル画像を表示するかどうかを選択できます。

Read More Button

ここで、抜粋の後に「続きを読む」リンクを表示するかどうかを定義できます。

Show Author

各ブログ記事の著者を、記事タイトルの下の記事メタ領域内で表示するかどうかを選択します。

Show Date

各記事の作成日を記事タイトル下の記事メタエリアに表示するかどうかを選択します。

Show Categories

記事タイトル下の記事メタエリアに記事カテゴリを表示するかどうかを選択します。

Show Comment Count

Show Pagination

このフィードにページ送りを表示するかどうかを選択します。 ページ送りを有効にするには、WP Page Navi プラグインをインストールする必要があります。

Admin Label

これは、ビルダーのモジュールのラベルをわかりやすいように変更するものです。 Visual Builder で WireFrame ビューを使用している場合、これらのラベルは Divi Builder インターフェイスのモジュールブロック内に表示されます。

Blog Design Options

デザインタブ内には、フォント、色、サイズ、間隔などのモジュールのすべてのスタイルオプションがあります。 これは、あなたのモジュールの外観を変更するために使用するタブです。

Layout

グリッドまたはフル幅レイアウトでブログ記事を表示するように選択できます。

Featured Image Overlay

If enabled, the visitors hovers over the featured image of an post.

Overlay Icon Color

ここで、オーバーレイ アイコンのカスタム色を定義できます。

Hover Overlay Color

ここで、オーバーレイのカスタム色を定義できます。

Hover Icon Picker

ここでオーバーレイのカスタム アイコンを定義できます。

Text Color

あなたのブログが明るい背景に配置されている場合、テキストの色は「暗い」に設定する必要があります。

ヘッダーフォント

ドロップダウンメニューから希望のフォントを選択することで、ヘッダーテキストのフォントを変更することができます。 Diviには、Google Fontsによって提供される数十種類の素晴らしいフォントが付属しています。 デフォルトでは、DiviはあなたのページのすべてのテキストにOpen Sansフォントを使用します。 また、太字、斜体、大文字、下線オプションを使用して、テキストのスタイルをカスタマイズすることもできます。 範囲スライダーをドラッグしてテキストのサイズを増減するか、スライダーの右側にある入力フィールドに希望のテキスト サイズ値を直接入力することができます。 入力フィールドはさまざまな測定単位をサポートしているので、サイズ値の後に「px」または「em」を入力して、単位タイプを変更できます。 ヘッダーテキストの色を変更したい場合は、このオプションを使用してカラーピッカーから希望の色を選択します。

Header Letter Spacing

文字間隔は、各文字間のスペースに影響を及ぼします。 ヘッダーテキストの各文字の間隔を広げたい場合は、範囲スライダーで間隔を調整するか、スライダーの右側の入力フィールドに希望の間隔サイズを入力してください。

Header Line Height

Line height affects the space between each line of your header text If you want to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider.入力フィールドは異なる単位をサポートしており、サイズの値の後に「px」または「em」を入力してその単位タイプを変更することが可能です。 入力フィールドは異なる測定単位をサポートしています。つまり、サイズの値の後に「px」または「em」を入力して、その単位タイプを変更することができます。 Diviには、Google Fontsによって提供される数十の素晴らしいフォントが付属しています。 デフォルトでは、ページ上のすべてのテキストにOpen Sansフォントが使用されます。 また、太字、斜体、大文字、下線オプションを使用して、テキストのスタイルをカスタマイズすることができます。

本文のフォントサイズ

ここで、本文テキストのサイズを調整することができます。 範囲スライダーをドラッグしてテキストのサイズを増減するか、スライダーの右側にある入力フィールドに希望のテキスト サイズの値を直接入力することができます。 入力フィールドはさまざまな測定単位をサポートしているので、サイズ値の後に「px」または「em」を入力すると、単位を変更できます。

Body Text Color

デフォルトでは、Divi のすべてのテキスト色は白または濃いグレーとして表示されます。

Body Letter Spacing

Letter spacingは、各文字の間隔を指定します。 本文の各文字の間隔を広げたい場合は、範囲スライダーで調整するか、スライダーの右側の入力フィールドに希望の間隔を入力してください。

行の高さ

行の高さは、本文の各行の間のスペースに影響します。各行の間のスペースを増やしたい場合は、範囲スライダーでスペースを調整するか、スライダーの右側にある入力フィールドに希望のスペーシングサイズを入力してください。 入力フィールドは異なる測定単位をサポートしています。つまり、サイズの値の後に「px」または「em」を入力して、その単位タイプを変更することができます。 Diviには、Google Fontsによって提供される数十の素晴らしいフォントが付属しています。 デフォルトでは、DiviはあなたのページのすべてのテキストにOpen Sansフォントを使用します。 また、太字、斜体、大文字、下線オプションを使用して、テキストのスタイルをカスタマイズすることができます。

メタフォントサイズ

ここで、メタテキストのサイズを調整することができます。 範囲スライダーをドラッグしてテキストのサイズを増減するか、スライダーの右側にある入力フィールドに希望のテキスト サイズ値を直接入力することができます。 入力フィールドは異なる測定単位をサポートしているので、サイズ値の後に「px」または「em」を入力して、その単位タイプを変更できます。

Meta Text Color

デフォルトでは、Divi のすべてのテキスト色は白または濃いグレーとして表示されます。 メタテキストの色を変更したい場合は、このオプションを使用してカラーピッカーから希望の色を選択します。

Meta Letter Spacing

文字間隔は、各文字間のスペースに影響します。 メタ テキストの各文字の間隔を広げたい場合は、範囲スライダーで間隔を調整するか、スライダーの右側にある入力フィールドに希望の間隔サイズを入力します。 入力フィールドは異なる測定単位をサポートしています。つまり、サイズ値の後に「px」または「em」を入力して、その単位タイプを変更できます。

Meta Line Height

Line height affects the space between each line of your meta text それぞれの行間のスペースを大きくしたい場合、レンジスライダーでスペースを調整するか、スライダーの右にある入力フィールドに希望のスペースサイズを入力します。 入力フィールドは異なる測定単位をサポートしています。つまり、サイズの値の後に「px」または「em」を入力して、その単位タイプを変更することができます。

Border Color

このオプションは、ボーダーの色に影響を与えます。

Border Width

デフォルトでは、ボーダーは1ピクセルの幅を持っています。 この値は、範囲スライダをドラッグするか、スライダの右側にある入力フィールドにカスタム値を入力することで増やすことができます。 つまり、デフォルトの単位「px」を、em、vh、vw などの他の単位に変更できます。

境界線のスタイル

Border は、次の 8 つの異なるスタイルをサポートします: 実線、ドット、破線、ダブル、グルーブ、リッジ、インセット、アウトセット。

Blog 詳細オプション

詳細タブでは、カスタム CSS や HTML 属性など、経験豊富な Web デザイナーが便利だと思うようなオプションを見つけることができます。 ここでは、モジュールの多くの要素のいずれかにカスタム CSS を適用することができます。 また、モジュールにカスタム CSS クラスと ID を適用し、子テーマの style.css ファイル内でモジュールをカスタマイズするために使用できます。

CSS ID

このモジュールに使用する任意の CSS ID を入力します。 ID は、カスタム CSS スタイルを作成したり、ページの特定のセクションへのリンクを作成するために使用できます。

CSS Class

このモジュールに使用するオプションの CSS クラスを入力します。 CSSクラスは、カスタムCSSスタイリングを作成するために使用することができます。 スペースで区切って、複数のクラスを追加することができます。 これらのクラスは、Divi 子テーマ、または Divi テーマオプションまたは Divi Builder ページ設定を使用してページまたはウェブサイトに追加するカスタム CSS 内で使用できます。

カスタム CSS

カスタム CSS は、モジュールおよびモジュールの内部要素のいずれかに適用することも可能です。 カスタム CSS セクション内には、各要素に直接カスタム CSS を追加できるテキストフィールドがあります。 これらの設定に入力されたCSSは、すでにスタイルタグでラップされているので、セミコロンで区切られたCSSルールを入力するだけでよいのです。

Visibility

このオプションにより、モジュールが表示されるデバイスを制御できます。 タブレット、スマートフォン、またはデスクトップコンピューターで個別にモジュールを無効にすることを選択できます。 これは、異なるデバイスで異なるモジュールを使用したい場合、またはページから特定の要素を排除してモバイル デザインを簡素化したい場合に便利です

コメントを残す

メールアドレスが公開されることはありません。