Diviを使用してブログ投稿テンプレートのスティッキーサイドバーを作成する方法

どんな種類のウェブサイトを作成するときでも、たまにそのウェブサイトでブログを書きたいと思う可能性が高いです。 すべてのブログ投稿をリスト形式で表示するブログページが必要なだけでなく、作成した新しいブログ投稿に自動的に割り当てることができるブログ投稿テンプレートが必要になります。 Diviのテーマビルダーを使用してブログ投稿テンプレートを設計するのは非常に簡単です。 そして今、Diviの新しいスティッキーオプションを使用すると、サイドバーのスティッキーをすぐにオフにすることもできます！ 今日のチュートリアルでは、その方法を正確に説明し、ブログ投稿テンプレートのJSONファイルも無料でダウンロードできるようになります。

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

プレビュー

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

デスクトップ

モバイル

スティッキーサイドバーブログ投稿テンプレートを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

https://youtu.be/8hTA3ogf3ZQ

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

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

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

まず、Divi Theme Builderに移動し、新しいテンプレートを追加します。

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

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

• 使用：すべての投稿

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

次に、投稿テンプレートのカスタム本文の作成を開始します。

2.ブログ投稿本文の作成を開始します（右側のサイドバー）

セクション＃1設定

グラデーションの背景

テンプレートエディタに入ると、デザインの作成を開始できます。 テンプレートの上部にあるセクションを開き、グラデーションの背景を適用します。

• 色1：＃8995ff
• 色2：＃6163b5
• グラデーション方向：150度

間隔

セクションの[デザイン]タブに移動し、デフォルトの上下のパディングをすべて削除します。

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

新しい行を追加

カラム構造

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

背景色

モジュールをまだ追加せずに、行設定を開いて背景色を適用します。

• 背景色：＃8995ff

サイジング

行の[デザイン]タブに移動し、それに応じてサイズ設定を変更します。

• カスタムガター幅を使用：はい
• 側溝幅：1

間隔

次に、左右のパディングを追加します。

• 左パディング：3％
• 右パディング：3％

国境

次に、境界線の設定にいくつかの丸い角を含めます。

• すべてのコーナー：20px

ボックスシャドウ

ボックスシャドウも適用します。

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

変換翻訳

それに応じて変換変換設定を変更して、行設定を完了します。

• 右：50px

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

動的コンテンツ

最初のテキストモジュールを列1に追加し、次の動的コンテンツを選択します。

• 動的コンテンツ：投稿カテゴリ

テキスト設定

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

• テキストフォント：Alata
• テキストの色：#ffffff
• テキストサイズ：1rem
• テキスト文字の間隔：1px
• テキスト行の高さ：2em

リンクテキスト設定

リンクテキストの色も変更します。

• リンクテキストの色：#ffffff

テキストモジュールのクローンを2回作成し、残りの列に重複を配置します

最初のテキストモジュールを完了したら、モジュール全体を2回複製し、行の残りの2つの列に複製を配置できます。

動的コンテンツの変更

複製のそれぞれの動的コンテンツを変更します。

• 最初の複製：公開後の日付

• 2番目の重複：コメント投稿数
• 後：コメント
• コメントエリアへのリンク：はい

セクション＃2を追加

間隔

前のセクションのすぐ下に別のセクションを追加します。 セクション設定を開き、次の上部と下部のパディング値を適用します。

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

新しい行を追加

カラム構造

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

サイジング

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

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

間隔

次に、いくつかのカスタムマージン値を追加します。

• トップマージン：100px
• 下マージン：
  • デスクトップ：100px
  • タブレットと電話：50px

列1の設定

間隔

次に、列1の設定を開き、左右にパディングを適用します。

• 左パディング：5％
• 右パディング：5％

列2の設定

背景色

列2の設定に移動し、白い背景色を適用します。

• 背景色：#ffffff

間隔

いくつかのカスタムパディング値も含めます。

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

国境

次に、境界線の設定に移動し、次の設定を適用します。

• すべてのコーナー：20px
• トップボーダー：
  • 上部の境界線の幅：
    • デスクトップ：0px
    • タブレットと電話：5px
  • トップボーダーカラー：＃8995ff
• 左の境界線：
  • 左ボーダー幅：
    • デスクトップ：5px
    • タブレットと電話：0px
  • 左ボーダーカラー：＃8995ff

ボックスシャドウ

次のボックスシャドウを適用して、列の設定を完了します。

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

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

H1動的コンテンツ

列1のテキストモジュールから始めて、モジュールを追加します。次の動的コンテンツを選択します。

• 動的コンテンツ：投稿/アーカイブタイトル
• 前：<H1>
• 後：</ H1>

H1テキスト設定

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

• 見出しフォント：Alata
• 見出しのテキストサイズ：
  • デスクトップ：4.8rem
  • タブレット：3.2rem
  • 電話番号：2.3rem
• 見出し文字の間隔：-2px

間隔

カスタムの上下マージンも追加します。

• トップマージン：50px
• 下マージン：100px

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

コンテンツボックスを空のままにします

別のテキストモジュールを列1に追加し、コンテンツボックスを空のままにします。

動的背景画像

代わりに、テキストモジュールを使用して、投稿の動的な注目画像を背景画像として紹介しています。

• 動的背景画像：注目の画像
• 背景画像サイズ：カバー

間隔

モジュールの[デザイン]タブに移動し、次のパディング値を適用します。

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

国境

次に、境界線の設定に移動し、いくつかの丸い角を追加します。

• すべてのコーナー：20px

ボックスシャドウ

次のボックスシャドウ設定を適用して、モジュール設定を完了します。

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

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

本文の設定

投稿テンプレートに必要な次のモジュールは、投稿コンテンツモジュールです。 このモジュールは、動的なブログ投稿コンテンツを表します。 モジュールの[デザイン]タブに移動し、次のようにテキスト設定を変更します。

• テキストフォント：Lato
• テキストサイズ：1.1rem
• テキスト行の高さ：2.3em

見出しテキストの設定

見出しのフォントも変更します。

• 見出しフォント：Alata

間隔

そして、デフォルトの下マージンを削除します。

• 下マージン：0px

CSSクラス

最後になりましたが、[詳細設定]タブに移動して、次のCSSクラスを適用します。

• CSSクラス：blog-post-content

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

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

投稿コンテンツモジュールに割り当てたCSSクラスを使用して、見出しと段落の間にスペースを追加しています。 投稿コンテンツモジュールのすぐ下にコードモジュールを追加し、モジュール内に次のCSSコードを配置します。

<style>
.blog-post-content p,
.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に追加

レイアウト

次の列に進みます。 そこで、サイドバーモジュールを追加します。 モジュールのデザインタブに移動し、境界線セパレータを非表示にします。

• ボーダーセパレーターを表示：いいえ

タイトルテキスト設定

次にタイトルフォントを変更します。

• タイトルフォント：Alata

本文の設定

ボディフォントと一緒に。

• ボディフォント：ラト

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

コンテンツを追加する

サイドバーモジュールのすぐ下に、Eメールオプチンモジュールを追加します。 選択したコピーをいくつか追加します。

アカウントを追加する

次にメールアカウントをリンクします。

背景色を削除する

次に、背景色を削除します。

フィールド設定

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

• フィールドフォント：ラト

• ボックスシャドウ：最初のオプション
• 影の色：rgba（0,0,0,0.06）

テキスト設定

テキスト設定でもテキストの色を変更しています。

• テキストの色：暗い

タイトルテキスト設定

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

• タイトル見出しレベル：H3
• タイトルフォント：Alata
• タイトルテキストサイズ：1.5rem

ボタンの設定

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

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：20px
• ボタンのテキストの色：#ffffff
• グラデーションカラー1：＃8995ff
• グラデーションカラー2：＃6163b5
• グラデーションタイプ：線形
• グラデーション方向：150度
• ボタンの境界線の幅：0px

• ボタンの境界線半径：5px
• ボタンフォント：ラト

間隔

そして、間隔設定のデフォルトのパディング値を削除して、モジュール設定を完了します。

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

セクション＃3を追加

グラデーションの背景

次の最後のセクションに進みます。 次のグラデーションの背景を追加します。

• 色1：＃8995ff
• 色2：＃6163b5
• グラデーションタイプ：線形
• グラデーション方向：150度

間隔

セクションの[デザイン]タブに移動し、デフォルトの上部パディングを削除します。

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

新しい行を追加

カラム構造

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

背景色

モジュールをまだ追加せずに、行設定を開いて背景色を適用します。

• 背景色：＃8995ff

サイジング

行の[デザイン]タブに移動し、次のようにサイズ設定を変更します。

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

間隔

それに応じてパディング値を変更します。

• トップパディング：100px
• ボトムパディング：100px
• 左パディング：5％
• 右パディング：5％

国境

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

• すべてのコーナー：20px

ボックスシャドウ

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

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

変換翻訳

そして、次の変換変換値を適用して、行の設定を完了します。

• 右：-100px

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

フィールド設定

行に必要な唯一のモジュールはコメントモジュールです。 モジュールのデザインタブに移動し、フィールドのスタイルを設定します。

• フィールド背景色：rgba（255,255,255,0.09）
• フィールドテキストの色：#ffffff
• フィールドフォント：ラト

• フィールドの丸みを帯びたコーナー：10px（すべてのコーナー）
• フィールド下部境界線幅：5px
• フィールド下の境界線の色：#ffffff

• フィールドボックスシャドウ：最初のオプション
• 影の色：rgba（0,0,0,0.06）

画像設定

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

• 画像の丸みを帯びた角：100px（すべての角）

テキスト設定

次に、テキスト設定でテキストの色を変更します。

• テキストの色：明るい

コメント数テキスト設定

コメント数のテキスト設定も変更しています。

• コメントカウント見出しレベル：H2
• コメントカウントフォント：Alata
• コメント数テキストサイズ：2rem
• コメントカウント行の高さ：1.4em

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

フォームのタイトルテキスト設定とともに。

• フォームタイトルの見出しレベル：H3
• フォームタイトルフォント：Alata

メタテキス​​ト設定

次に、メタテキス​​トの設定。

• メタフォント：Alata
• メタテキス​​トサイズ：1.2rem

コメントテキスト設定

コメントテキストの設定も変更します。

• コメントフォント：Lato
• コメントテキストサイズ：1.1rem
• コメント行の高さ：2em

ボタンの設定

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

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

• ボタンの文字間隔：1px
• ボタンフォント：ラト

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

コメント本文CSS

最後になりましたが、[詳細設定]タブのコメント本文に次のCSSコード行を適用して、モジュール設定を完了します。

margin-top: 50px;

3.サイドバーカラムにスティッキー効果を適用します

サイドバー列を開く

ブログ投稿テンプレートのデザインが完了したので、Diviのスティッキーオプションを使用してサイドバーの列をスティッキーにします。 列2の設定を開きます。

スティッキー効果を適用する

列の[詳細設定]タブに移動し、次のスティッキー設定を適用します。

• スティッキーポジション：
  • デスクトップ：トップに固執
  • タブレットと電話：粘着しないでください
• スティッキーの下限：行
• 周囲の粘着要素からのオフセット：はい
• トランジションのデフォルトスタイルとスティッキースタイル：はい

4.サイドバーを左側に配置します

サイドバーの列を列1の上にドラッグします

代わりに、テンプレートの左側にサイドバーを配置する場合は、行の設定を開き、2番目の列を一番上にドラッグします。

サイドバーの列の境界線を変更する

サイドバーを含む列を開き、それに応じて境界線の設定を変更します。

• 右ボーダー幅：
  • デスクトップ：5px
  • タブレットと電話：0px
• 右ボーダーカラー：＃8995ff
• 左ボーダー幅：なし

必要に応じて列を逆に適用します

ブログ投稿テンプレートの左側にあるスティッキーサイドバーを使用する場合は、小さい画面サイズで投稿コンテンツの下にサイドバーを配置することをお勧めします。 これを実現するには、Diviの列のスタック順序を逆にする方法について、このDiviチュートリアル内の2番目のアプローチを使用できます。

プレビュー

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

デスクトップ

モバイル

最終的な考え

この投稿では、Diviのテーマビルダーを使用して作成したブログ投稿テンプレートのデザインを最大限に活用する方法を紹介しました。 具体的には、Diviのスティッキーオプションによって可能になるスティッキーサイドバーを含める方法を段階的に説明しました。 スティッキーサイドバーは、訪問者が投稿コンテンツを読んでいる間、訪問者をフォローします。これにより、訪問者は、関連する投稿、電子メールオプション、またはスティッキーサイドバーに配置することを決定したその他のものを見ることができます。 テンプレートJSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

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