Diviのテーマビルダーを使用してブログ投稿テンプレートの画面を分割する方法

公開: 2020-08-23

ウェブサイトを作成するときは、ブログページとブログ投稿を含める可能性が高くなります。 もちろん、ブログ戦略の最も重要な部分は、高品質のブログ投稿コンテンツを作成することですが、そのすべてのデザイン部分は、戦略の成功にも大きな役割を果たします。 Diviを使用してWebサイトを作成する場合、動的コンテンツを含む投稿テンプレートを作成することにより、ブログ投稿がDiviテーマビルダー内でどのように表示されるかを合理化できます。 プロセスをスピードアップするのに役立つブログ投稿テンプレートをブログで一貫して共有してきましたが、特に分割画面のブログ投稿を作成したい場合は、この投稿を気に入るはずです。 その方法を段階的に説明し、テンプレートのJSONファイルを無料でダウンロードすることもできます。

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

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。

デスクトップ

分割画面のブログ投稿テンプレート

モバイル

分割画面のブログ投稿テンプレート

分割画面のブログ投稿テンプレートを無料でダウンロード

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

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

無料でダウンロード

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

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

1. Diviテーマビルダーに移動し、新しい投稿テンプレートを追加します

Diviテーマビルダーに移動し、新しいテンプレートを追加します

まず、Diviテーマビルダーに移動します。 そこに到達したら、新しいテンプレートを追加します。

分割画面のブログ投稿テンプレート

すべての投稿でテンプレートを使用する

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

  • 使用：すべての投稿

分割画面のブログ投稿テンプレート

テンプレート本体の作成を開始します

そして、テンプレート本体の作成を開始します。

分割画面のブログ投稿テンプレート

2.ブログ投稿テンプレート本文を作成します

セクション設定

間隔

テンプレートエディタに入ると、セクションが表示されます。 その設定を開き、[デザイン]タブに移動して、デフォルトの上下のパディングをすべて削除します。

  • トップパディング：0px
  • ボトムパディング：0px

分割画面のブログ投稿テンプレート

新しい行を追加

カラム構造

次の列構造を使用して、新しい行を追加して続行します。

分割画面のブログ投稿テンプレート

サイジング

モジュールをまだ追加せずに、行設定を開き、次のようにサイズ設定を変更します。

  • カスタムガター幅を使用：はい
  • 側溝幅：1
  • 列の高さを等しくする：はい
  • 幅：100％
  • 最大幅：100％
  • 最小の高さ：100vh（デスクトップ）、自動（タブレットと電話）
  • 最大高さ：100vh（デスクトップ）、なし（タブレットと電話）

分割画面のブログ投稿テンプレート

間隔

次に、デフォルトの上下のパディングをすべて削除します。

  • トップパディング：0px
  • ボトムパディング：0px

分割画面のブログ投稿テンプレート

オーバーフロー

そして、行のオーバーフローを非表示に設定します。

  • 水平オーバーフロー：非表示
  • 垂直オーバーフロー：非表示

分割画面のブログ投稿テンプレート

列1の設定

グラデーションの背景

次に、列1の設定を開き、グラデーションの背景を追加します。

  • 色1：rgba（255,255,255,0）
  • 色2：＃000000
  • グラデーションタイプ：線形
  • 背景画像の上にグラデーションを配置：はい

分割画面のブログ投稿テンプレート

分割画面のブログ投稿テンプレート

背景画像

次の列の背景画像として、動的な注目画像を使用しています。

  • 背景画像：注目の画像

分割画面のブログ投稿テンプレート

列2の設定

間隔

次に、列2の設定を開き、間隔の設定にいくつかのカスタムパディング値を追加します。

  • トップパディング：8％
  • ボトムパディング：8％
  • 左パディング：8％
  • 右パディング：8％

分割画面のブログ投稿テンプレート

分割画面のブログ投稿テンプレート

オーバーフロー

投稿コンテンツとコメントボックスが表示される2番目の列をスクロールできるようにするために、表示設定の垂直方向のオーバーフローを変更します。

  • 垂直オーバーフロー：スクロール（デスクトップ）、表示（タブレットと電話）

分割画面のブログ投稿テンプレート

投稿タイトルモジュールを列1に追加

要素

1列目の投稿タイトルモジュールから始めて、モジュールを追加します。要素設定で注目画像オプションを無効にします。

  • 注目の画像を表示：いいえ

分割画面のブログ投稿テンプレート

タイトルテキスト設定

[デザイン]タブに移動し、それに応じてH1テキスト設定を変更します。

  • タイトル見出しレベル：H1
  • タイトルフォント：Work Sans
  • タイトルフォントの太さ：太字
  • タイトルテキストの色：#ffffff
  • タイトルテキストサイズ：60px（デスクトップ）、45px（タブレット）、35px（電話）
  • タイトル文字の間隔：-1px
  • タイトルラインの高さ：1.2em

分割画面のブログ投稿テンプレート

メタテキス​​ト設定

次に、メタテキス​​ト設定を変更します。

  • メタフォント：Work Sans
  • メタフォントスタイル：大文字
  • メタテキス​​トの色：#eaeaea
  • メタ文字の間隔：2px

分割画面のブログ投稿テンプレート

サイジング

次に、さまざまな画面サイズで幅を変更します。

  • 幅：81％（デスクトップ）、100％（タブレットと電話）

分割画面のブログ投稿テンプレート

間隔

次に、レスポンシブパディング値をいくつか追加します。

  • トップパディング：8％（タブレットと電話のみ）
  • ボトムパディング：8％（タブレットと電話のみ）
  • 左パディング：7％（タブレット）、8％（電話）
  • 右パディング：7％（タブレット）、8％（電話）

分割画面のブログ投稿テンプレート

ポジション

そして、次のように位置設定を変更して、モジュール設定を完了します。

  • 位置：絶対（デスクトップ）、デフォルト（タブレットと電話）
  • 場所：下部中央
  • 垂直オフセット：10％

分割画面のブログ投稿テンプレート

投稿コンテンツモジュールを列2に追加

次の列に進みます。 そこで、最初に必要なモジュールは投稿コンテンツモジュールです。 このモジュールは、投稿コンテンツを動的に表示します。

分割画面のブログ投稿テンプレート

見出しテキストの設定

モジュールの見出しテキスト設定にいくつかの変更を加えます。

  • 見出しフォント：Work Sans
  • 見出しフォントの太さ：半太字
  • 見出しのテキストサイズ：
    • H2：40px
    • H3：30px
    • H4：25px
    • H5：16px
    • H6：14px
  • 見出し文字の間隔：-1px（H2、H3、H4）

分割画面のブログ投稿テンプレート

CSSクラス

そして、CSSクラスを追加します。 このチュートリアルの次のステップでは、このCSSクラスを使用して、見出しと段落の間にスペースを生成します。

  • CSSクラス：blog-post-content

分割画面のブログ投稿テンプレート

列2にコードモジュールを追加する

段落と見出しの間のスペースにCSSコードを追加する

投稿コンテンツモジュールのすぐ下にコードモジュールを追加し、CSSコードの次の行を追加して、見出しと段落の間にスペースを生成します。 

<style>
.blog-post-content h1,
.blog-post-content h2,
.blog-post-content h3,
.blog-post-content h4,
.blog-post-content h5,
.blog-post-content h6
{
margin-top: 20px;
margin-bottom: 20px;
}
</style>

分割画面のブログ投稿テンプレート

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

フィールド設定

このチュートリアルを完了するために列2で必要な次の最後のモジュールは、コメントモジュールです。 それに応じてモジュールのフィールド設定を変更します。

  • フィールドの背景色：#ffffff
  • フィールドテキストの色：＃000000
  • フィールドトップパディング：30px
  • フィールド下部パディング：30px
  • フィールド左パディング：30px
  • フィールド右パディング：30px
  • フィールドフォント：Work Sans

分割画面のブログ投稿テンプレート

  • フィールドフォントスタイル：大文字
  • フィールドテキストサイズ：15px
  • フィールドの文字間隔：3px
  • フィールドの丸みを帯びたコーナー：10px（すべてのコーナー）

分割画面のブログ投稿テンプレート

  • フィールドボックスシャドウブラー強度：30px
  • フィールドボックスの影の色：rgba（0,0,0,0.06）

分割画面のブログ投稿テンプレート

コメント数テキスト設定

次に、コメント数のテキスト設定を変更します。

  • コメントカウントフォント：Work Sans
  • コメントカウントフォントの太さ：太字

分割画面のブログ投稿テンプレート

フォームタイトルのテキスト設定

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

  • フォームタイトルの見出しレベル：H3
  • フォームタイトルフォント：Work Sans
  • フォームタイトルフォントの太さ：半太字

分割画面のブログ投稿テンプレート

メタテキス​​ト設定

次に、メタテキス​​トの設定にいくつかの変更を加えます。

  • メタフォント：Work Sans
  • メタフォントの太さ：半太字
  • メタテキス​​トの色：＃000000

分割画面のブログ投稿テンプレート

ボタンの設定

次に、それに応じてボタンのスタイルを設定します。

  • ボタンにカスタムスタイルを使用する：はい
  • ボタンのテキストサイズ：16px
  • ボタンのテキストの色：#ffffff
  • ボタンの背景色：＃000000
  • ボタンの境界線の幅：0px
  • ボタンの境界線半径：100px

分割画面のブログ投稿テンプレート

  • ボタンの文字間隔：2px
  • ボタンフォント：Work Sans
  • ボタンのフォントスタイル：大文字

分割画面のブログ投稿テンプレート

  • ボタントップパディング：2％
  • ボタン下部のパディング：2％
  • 左下パディング：5％
  • ボタン右パディング：5％

分割画面のブログ投稿テンプレート

間隔

トップマージンも追加します。

  • トップマージン：15％

分割画面のブログ投稿テンプレート

コメント本文CSS

そして、[詳細設定]タブのモジュールのコメント本文にCSSコードを1行追加して、モジュールの設定を完了します。 

margin-top: 50px

分割画面のブログ投稿テンプレート

3.テーマビルダーの変更を保存して結果を表示する

ブログ投稿テンプレートが完成したので、あとはすべてのDivi Theme Builderの変更を保存し、ブログ投稿で結果を表示するだけです。

分割画面のブログ投稿テンプレート

分割画面のブログ投稿テンプレート

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。

デスクトップ

分割画面のブログ投稿テンプレート

モバイル

分割画面のブログ投稿テンプレート

最終的な考え

この投稿では、DiviWebサイトのブログ投稿テンプレートを作成するための別のアプローチを紹介しました。 具体的には、Diviのテーマビルダーと動的コンテンツを使用して、分割画面のブログ投稿テンプレートデザインを作成する方法を示しました。 プロセスを段階的にガイドし、無料でダウンロードできるJSONファイルを追加しました。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。