ブログ投稿テンプレートにフルハイトの固定サイドバーを含める方法

公開: 2020-07-09

ブログ投稿にサイドバーを追加するかどうかは、完全にあなた次第です。一部のブロガーは、サイドバーをまったく使用しないことを選択します。このチュートリアルは、サイドバーの使用を好むが、少し違った外観にしたい方を対象としています。通常、サイドバーは静的に配置されますが、投稿の内容が長い場合は、読者がサイドバーを表示するために上にスクロールする必要があることを意味します。

このブログ投稿テンプレートのデザインでは、投稿コンテンツを下にスクロールしている間、所定の位置にとどまるフルハイトの固定サイドバーを作成しました。チュートリアルを再作成するときは、ブラウザ内で2つのタブを開いたままにします。1つはテーマビルダー用で、もう1つはブログ投稿のプレビュー用です。このように、あなたはあなたが行くにつれて変化を見ることができます。

始めましょう！

プレビュー

始める前に、フルハイトの固定サイドバーを見てみましょう。

デスクトップ

固定サイドバー

モバイル

固定サイドバー

フルハイトの固定サイドバーテンプレートを無料でダウンロード

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

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

無料でダウンロード

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

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

サイドバーウィジェットを作成する

フルハイトの固定サイドバーテンプレートを使用する前に、カスタムサイドバーウィジェットを作成します。後で、これをテンプレート内のサイドバーに含めます。

ウィジェットビルダーを開く

「外観」をクリックし、「ウィジェット」を選択します。

サイドバーウィジェットに要素を追加する

「最近の投稿」要素と「カテゴリ」要素をサイドバーウィジェットにドラッグします。

ウィジェットの要素設定を調整する

最近の投稿を3つだけ表示し、タイトルを追加することを選択します。カテゴリウィジェットにもタイトルを追加し、完了したら両方のボックスで[保存]をクリックすることを忘れないでください。

最近の投稿タイトル：続きを読む：
カテゴリタイトル：閲覧

固定サイドバー

2.テーマビルダーを使い始める

テーマビルダーを開く/新しいテンプレートを追加する

固定されたフルハイトサイドバーテンプレートの再作成を開始する時が来ました！まず、テーマビルダーを開き、新しいテンプレートを追加します。

テンプレート設定を設定する

テンプレート設定で、[すべてのブログ投稿]を選択します。特定のカテゴリまたはタグにテンプレートを使用する場合は、それに応じてテンプレート設定を変更します。

カスタムボディを追加

次に、[カスタムボディの追加]をクリックします。

固定サイドバー

[カスタムボディの構築]を選択します

このテンプレートを最初から再作成するので、先に進んで「カスタムボディの構築」を選択します。

ゼロから構築

ビジュアルビルダーに入ったら、もう一度最初からビルドするオプションを選択します。

フルハイトの固定サイドバーを使用してテンプレートを再作成する

セクション設定

バックグラウンド

テンプレートエディタ内の既存のセクションを開き、グラデーションの背景を追加します。

背景グラデーション
- 色1：白#ffffff
- カラー2：ライトグレー#eaeaea

間隔

パディングも追加します。

トップパディング：55px

新しい行を追加

カラム構造

次に、3 / 4〜1 / 4列構造の行を追加します。

固定サイドバー

サイジング

次のように行のサイズを調整します。

カスタムガター幅：2
幅：
- デスクトップとタブレット：90％
- 電話番号：100％
最大幅：
- デスクトップ：1920px
最小高さ：100vh

列1の設定

間隔

モジュールを追加する前に、列の設定を調整してください。最初に列1。

左右のパディング
- タブレット：2％
- 電話番号：8％

列2の設定

バックグラウンド

次に、列2に背景色を追加します。

背景色：白#ffffff

間隔

間隔も含めてください。

左右のパディング
- デスクトップ：3％
- タブレットと電話：14％

国境

次に、列の角を丸くします。

丸い角
- タブレットとデスクトップ：15px

カスタムCSS

[詳細設定]タブに移動し、CSSコード行をメイン要素に追加します。これは、デスクトップにフルハイトのサイドバーを作成するのに役立ちます。

主な要素
- 最小の高さ：100％

min-height: 100%;

固定サイドバー

ポジション

最後になりましたが、固定サイドバー効果を作成するには、列に固定位置を追加します。

ポジション
- デスクトップ：修正済み
- タブレットと電話：デフォルト
場所：右上

固定サイドバー

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

要素

モジュールを追加する時が来ました！列1の最初の投稿タイトルモジュールから始めて、タイトルのみを有効にします。

タイトルを表示：はい

固定サイドバー

動的背景画像

次に、背景設定に移動し、注目の画像を動的な背景画像として使用します。

固定サイドバー

タイトルテキスト

タイトルテキスト設定のスタイルを設定します。

タイトルフォント：Bai Jamjuree
タイトルフォントスタイル：大文字
タイトルテキストの色：＃e98074
タイトルテキストサイズ：
- デスクトップ：45px
- タブレット：35px
- 電話番号：25px
タイトル文字の間隔：3px
タイトルラインの高さ：1.3em

固定サイドバー

間隔

次に、カスタムの上部と下部のパディングを追加します。

トップパディング：20％
ボトムパディング：20％

固定サイドバー

国境

いくつかの丸い角も含めます。

すべてのコーナー：15px

固定サイドバー

タイトルCSS

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

background-color: rgba(255,255,255,0.56);
padding-top: 2%;
padding-bottom: 2%;

固定サイドバー

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

要素

次に、別の投稿タイトルモジュールを追加します。次の要素を選択します。

メタ
著者
投稿カテゴリ

メタテキスト

デザインタブを開き、メタテキストのスタイルを設定します。

フォント：Bai Jamjuree
重量：中
色：グレー＃8e8d8a
サイズ
- デスクトップ：20px
- タブレットと電話：15px
文字間隔：2px

サイジング

サイズも調整します。

幅：90％
モジュールの配置：中央

固定サイドバー

間隔

このモジュールの設定を少し間隔を空けて完了します。

トップパディング：15px

固定サイドバー

投稿コンテンツモジュールの追加

バックグラウンド

次に、背景が白の投稿コンテンツモジュールを追加します。

背景色：白#ffffff

文章

次に、本文のスタイルを設定します。

フォント：ラト
色：グレー＃8e8d8a
サイズ：16px

見出しテキスト

すべての見出しテキストスタイルのスタイルを設定して続行します。

H1
- フォント：Bai Jamjuree
- 重量：中
- 色：コーラル＃e98074
- サイズ
  - デスクトップ：45px
  - タブレット：33px
  - 電話番号：30px
- 文字間隔：1px
H2
- フォント：Bai Jamjuree
- 重量：中
- 色：コーラル＃e98074
- サイズ
  - デスクトップ：35px
  - タブレットと電話：25px
- 文字間隔：1px
H3
- フォント：Bai Jamjuree
- 重量：レギュラー
- カラー：ダークグレー＃606060
- サイズ
  - デスクトップ：25px
  - タブレットと電話：22px
- 文字間隔：1px
H4
- フォント：Bai Jamjuree
- 重量：レギュラー
- カラー：ダークグレー＃606060
- サイズ
  - デスクトップ：22px
  - タブレット：20px
  - 電話番号：18px
- 文字間隔：1px
H5
- フォント：Bai Jamjuree
- 重量：中
- カラー：ダークグレー＃606060
- サイズ：16px
- 文字間隔：1px
H6
- フォント：Bai Jamjuree
- 重量：レギュラー
- カラー：ダークグレー＃606060
- サイズ：16px
- 文字間隔：1px