Diviで無料の両面サイドバーブログ投稿テンプレートをダウンロードする

サイドバーは長い間使用されてきましたが、それでもWeb全体で頻繁に使用されています。 これらは、実際の投稿コンテンツである主な焦点を無視することなく、推奨投稿や電子メールオプチンフォームなど、投稿に関連するさまざまな要素を表示するのに役立ちます。 現在、Diviのテーマビルダーがあれば、ブログ投稿テンプレートを作成する方法はたくさんあります。 このチュートリアルでは、投稿テンプレートに両面サイドバーを追加する方法を示します。 JSONファイルも無料でダウンロードできます！

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

プレビュー

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

デスクトップ

モバイル

私たちのYoutubeチャンネルを購読する

ブログ投稿テンプレートを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

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

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

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

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

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

• 使用：すべての投稿

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

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

2.ブログ投稿本文の作成を開始します

新しいセクションを追加

背景色

Divi Theme Builderに入ると、セクションが表示されます。 そのセクションを開き、背景色を変更します。

• 背景色：＃f4f4f4

間隔

さまざまな画面サイズでセクションの間隔の値も変更します。

• トップパディング：50px（デスクトップ）、20px（タブレット）、10px（電話）
• 下部のパディング：50px（デスクトップ）、20px（タブレット）、10px（電話）

新しい行を追加

カラム構造

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

サイジング

モジュールをまだ追加せずに、行設定を開き、それに応じてサイズ設定を変更します。

• カスタムガター幅を使用：はい
• 側溝幅：2
• 幅：100％
• 最大幅：95％

間隔

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

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

列2

背景色

次に、列2の設定を開き、背景色を白に変更します。

• 背景色：#ffffff

ボックスシャドウ

列にもボックスシャドウを追加します。

• ボックスシャドウブラー強度：80px
• ボックスシャドウスプレッド強度：-21px
• 影の色：rgba（0,0,0,0.08）

列2に画像モジュールを追加します

動的コンテンツ

モジュールの追加を開始する時が来ました！ 2番目の列では、画像モジュールから始めて、ブログ投稿自体に関連するすべてのモジュールを配置します。 注目の画像の動的コンテンツを使用します。

• 画像：注目の画像

サイジング

次に、モジュールの[デザイン]タブに移動し、イメージモジュールに全幅を強制します。

• 全幅を強制：はい

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

要素

2番目のモジュールである投稿タイトルモジュールに移ります。 要素の設定で注目の画像を無効にします。

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

タイトルテキスト設定

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

• タイトルフォント：Oxygen
• タイトルテキストサイズ：2vw（デスクトップ）、4vw（タブレット）、6vw（電話）
• タイトルラインの高さ：1.2em

メタテキス​​ト設定

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

• メタフォント：Open Sans
• メタテキス​​トの色：＃ffc023
• メタテキス​​トサイズ：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）

間隔

間隔の値も変更します。

• トップマージン：100px
• 左マージン：4vw
• 右マージン：4vw

タイトルCSS

そして、[詳細設定]タブのタイトルのCSS要素に下マージンを追加して、モジュールの設定を完了します。

margin-bottom: 20px;

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

テキスト設定

次のモジュールは、動的なブログ投稿コンテンツをすべて含む投稿コンテンツモジュールです。 それに応じてモジュールのテキスト設定を変更します。

• テキストフォント：Open Sans
• テキストサイズ：0.9vw（デスクトップ）、1.8vw（タブレット）、3vw（電話）
• テキスト行の高さ：2.2em

見出しテキストの設定

次に、見出しのテキスト設定にもいくつか変更を加えます。

• 見出しフォント：酸素
• H2テキストサイズ：1.5vw（デスクトップ）、3vw（タブレット）、4vw（電話）
• H3、H4、H5、H6テキストサイズ：1.3vw（デスクトップ）、2.5vw（タブレット）、3.5vw（電話）

間隔

いくつかのカスタムマージンとパディング値も使用しています。

• 左マージン：4vw
• 右マージン：4vw
• トップパディング：50px
• ボトムパディング：100px

CSSクラス

CSSクラスを追加して、モジュールの設定を完了します。 このチュートリアルの次のパートでは、このCSSクラスを使用して、タイトルと段落にスペースを追加します。

• ポストコンテンツ間隔

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

CSSコードを挿入

この投稿の前のステップで述べたように、いくつかのカスタムCSSを使用して、見出しと段落の間にスペースを追加します。 このために、2列目にコードモジュールを使用します。CSSコードの次の行を挿入します。

<style>

.post-content-spacing h2,
.post-content-spacing h3,
.post-content-spacing h4,
.post-content-spacing h5,
.post-content-spacing h6 {
margin-top: 50px;
margin-bottom: 50px;
}

.post-content-spacing p {
margin-top: 20px;
margin-bottom: 20px;
}

</style>

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

コンテンツを追加する

サイドバー要素の追加を開始する時が来ました！ 必要なモジュールを追加できます。 3列目のEmailOptinモジュールから始めます。選択したコピーを使用してください。

メールアカウント

メールアカウントをモジュールにリンクして続行します。

田畑

次に、フィールド設定で名前フィールドを無効にします。

• 名前フィールドを表示：いいえ

背景色

それに応じて背景色を変更します。

• 背景色：＃ffc023

フィールド設定

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

• フィールドフォント：Open Sans
• フィールドテキストサイズ：0.8vw（デスクトップ）、1.8vw（タブレット）、3vw（電話）

タイトルテキスト設定

タイトルテキストの設定にもいくつか変更を加えます。

• タイトルフォント：Oxygen
• タイトルフォントの太さ：太字
• タイトルテキストサイズ：1vw（デスクトップ）、3vw（タブレット）、5vw（電話）
• タイトルラインの高さ：1.5em

ボタンの設定

ボタンのスタイルを設定して続行します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：0.9vw（デスクトップ）、1.8vw（タブレット）、3vw（電話）
• ボタンのテキストの色：＃ffc023
• ボタンの背景色：＃f4f4f4
• ボタンの境界線の幅：0px

• ボタンの境界線半径：0px
• ボタンフォント：酸素

• ボタントップパディング：15px
• ボタン下部のパディング：15px

ボックスシャドウ

そして、微妙なボックスシャドウを追加してモジュール設定を完了します。

• ボックスシャドウブラー強度：80px
• ボックスシャドウスプレッド強度：-21px
• 影の色：rgba（0,0,0,0.08）

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

選択したソーシャルネットワークを追加する

列3で必要な次のモジュールは、ソーシャルメディアフォローモジュールです。 お好みのソーシャルネットワークをいくつか追加します。

ソーシャルネットワークスタイルを個別にリセットする

各ソーシャルネットワークのアイテムスタイルを個別にリセットして続行します。

アイコン設定

次に、一般的なモジュール設定に戻り、アイコンの色を変更します。

• アイコンの色：＃ffc023

ブログモジュールを列1に追加

要素

列1で追加するモジュールは、ブログモジュールのみです。 要素の設定で作成者を無効にします。

• 作者を表示：いいえ

レイアウト

次に、モジュールの[デザイン]タブに移動して、レイアウトを変更します。

• レイアウト：グリッド

タイトルテキスト設定

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

• タイトルフォント：Oxygen
• タイトルフォントの太さ：太字
• タイトルテキストサイズ：1vw（デスクトップ）、3vw（タブレット）、5vw（電話）
• タイトルラインの高さ：1.5em

本文の設定

本文の設定にも変更を加えます。

• ボディフォント：Open Sans
• 本文のサイズ：0.7vw（デスクトップ）、1.8vw（タブレット）、3vw（電話）
• ボディラインの高さ：2.2em

メタテキス​​ト設定

次に、それに応じてメタテキス​​ト設定のスタイルを設定します。

• メタフォント：Open Sans
• メタテキス​​トの色：＃ffc023
• メタテキス​​トサイズ：0.8vw（デスクトップ）、1.8vw（タブレット）、3vw（電話）

国境

モジュールのデフォルトの境界線も削除します。

• グリッドレイアウトの境界線の幅：0px

ボックスシャドウ

そして、微妙なボックスシャドウを使用します。

• ボックスシャドウブラー強度：80px
• ボックスシャドウスプレッド強度：-21px
• 影の色：rgba（0,0,0,0.08）

可視性

ここで、誰かがデスクトップで投稿を表示しているときに、列1にブログモジュールが表示されるようにします。 ただし、画面サイズが小さい場合は、投稿コンテンツを最初に表示する必要があります。 そのため、タブレットと電話ではモジュール全体を非表示にします。

ブログモジュールのクローンを作成し、列3に複製を配置します

次に、ブログモジュールのクローンを作成し、複製を3番目の列に配置します。

可視性の変更

このモジュールを小さいデバイスの列3にのみ表示する必要があるため、デスクトップでモジュール全体を非表示にします。

3.すべてのテーマビルダーの変更とプレビュー結果を保存します

ブログ投稿テンプレートが完成したら（コメントモジュールも追加してください！）、テーマビルダーの変更をすべて保存して、Webサイトで結果を表示できます。

プレビュー

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

デスクトップ

モバイル

最終的な考え

この投稿では、Diviのテーマビルダーを使用してブログ投稿テンプレートに両面サイドバーを追加する方法を示しました。 さらに、レイアウトのJSONファイルを無料で共有しているので、将来のプロジェクトで必要になった場合に備えて、レイアウトを近くに置いておくことができます。 ご不明な点がございましたら、下のコメント欄にコメントを残してください。

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