Diviでブログページのコンテンツを整理するための5つのヒント

ブログページのコンテンツは、さまざまな方法で整理できます。 ブログページなので、ほとんどのコンテンツは最近のブログ投稿のフィードで構成されます。 このコンテンツを整理する方法を知ることは、単調さを解消し、よりユニークなブログページデザインへの扉を開くための素晴らしい方法です。

このチュートリアルでは、Diviでブログページのコンテンツを整理するための5つの役立つヒントを紹介します。これは、次のことを学ぶのに役立ちます。

1. 2列のレイアウトを作成する方法
2. スティッキーポストの使い方
3. ポストオフセットの使用方法
4. 複数のブログモジュールを使用してブログ投稿のカスタムレイアウトを作成する方法
5. カテゴリ別に最近の投稿を表示する方法

スニークピーク

Diviでブログページのコンテンツを整理するいくつかの方法を見てみましょう。

2列レイアウトの使用

メインのブログフィードの上にある注目の投稿セクション

メインのブログフィードの上にある全幅の投稿スライダー

独自のレイアウトとデザインのための複数のブログモジュールの使用

カテゴリ別の最近の投稿を特集

始めるために必要なもの

まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。

このチュートリアルでは、2番目のテーマビルダーパックのカテゴリページテンプレートを使用します。 これを使用してフォローする場合は、パックをダウンロードし、移植性オプションを使用してdivi-theme-builder-pack-2-category-page-template.jsonファイルをテーマビルダーにインポートします。

デフォルトでは、インポートされたテンプレートは「すべてのカテゴリページ」に割り当てられます。 テンプレート設定を開き、ブログに割り当てます。

これで、テンプレート内でブログページのコンテンツを整理するプロセスを開始する準備が整いました。 開始するには、テンプレートの本文領域にある編集アイコンをクリックします。

これで、レイアウトエディタを使用してレイアウトを変更できます。

Diviでブログページテンプレートを整理するための5つのヒント

このテンプレートには、現在のページの投稿（デスクトップでは3列）を表示する1列の行にあるブログモジュールがあります。 これは、ブログおよびアーカイブページテンプレートの標準設定です。 ただし、投稿を表示するためにこの標準レイアウトを維持する必要はありません。 ここでは、Diviでブログページのコンテンツを整理するための役立つヒントをいくつか紹介します。

＃12列のレイアウトを作成する

ブログモジュール（グリッドレイアウトに設定されている場合）は、モジュールが1列の行に追加された場合（テンプレートの場合と同様）、3列の構造で投稿を表示します。

投稿を2列のレイアウトで表示するようにレイアウトを変更する場合は、次のことができます。

まず、行の列レイアウトを3分の2、3分の1のレイアウトに変更します。 これにより、行の左側の列の2つの列にブログ投稿が表示されます。

次に、列1（ブログモジュールを含むもの）の設定を開き、次のカスタムCSSをメイン要素に追加します。

width: 100% !important;

これにより、列が行の幅全体に広がります。

これで、右側の列を非表示にするだけです。 列2（空の設定）の設定を開き、すべてのデバイスで列の表示を無効にします。

必要に応じて、デスクトップで3列ではなく2列でブログページのコンテンツを整理できるようになりました。

＃2スティッキーポストを使用する

あなたがWordPressに精通しているなら、あなたはすでにこれについて知っているかもしれません。 Divi（またはWordPress）で作成された各投稿は、スティッキーにすることができます。 投稿をスティッキーにすると、最後に公開された投稿の前であっても、ブログページのブログフィードの最前面に投稿が自動的に表示されます。 これは、視聴者が見たい（または見たい）とわかっている投稿を特集するのに最適な方法です。

投稿をスティッキーにするには、Diviで投稿を編集し、右側のサイドバーの[ブログの上部に貼り付ける]オプションをオンにします。

バックエンドですべての投稿を表示すると、スティックを作成する各投稿に「スティッキー」というラベルが付けられます。

これで、ブログページにアクセスすると、スティッキー投稿がブログ投稿フィードの先頭にジャンプしていることがわかります。

注：ブログモジュールで投稿オフセットを使用すると、スティッキー投稿が期待どおりに機能しない場合があります。 たとえば、投稿オフセットが3の3つの投稿を表示するようにブログモジュールを設定した場合、スティッキー投稿は3つの投稿の前（およびそれに加えて）も表示されます。

次のヒントに進む前に、粘着性のある投稿を取り除くことをお勧めします。

＃3投稿オフセットを使用してブログページのコンテンツを個別のセクションに整理する

各ブログモジュールには、投稿オフェスト番号を入力するオプションがあります。 これは、ブログフィードを表示する前に、特定の数の最近のブログ投稿をスキップするようにブログモジュールに指示します。 このオプションは、複数のブログモジュールを使用して投稿を表示することにより、ブログページのレイアウトを少し混乱させたい場合に便利です。 これにより、各ブログモジュールを異なる方法で設計できるため、レイアウトの設計の柔軟性が高まります。

投稿オフセットを使用した個別のブログモジュールで最新の投稿を特集

テンプレートレイアウトでブログページのコンテンツを整理する1つの方法は、ページの上部に注目のブログ投稿セクションを追加することです。 これは、トップ3の最新の投稿を独自の方法で強調表示する方法です。 これがそれを行うためです。

レイアウトに新しい通常のセクションを追加します。

次に、1列の行を追加します。

テンプレートに付属のブログモジュールをコピーして、新しい行に貼り付けます。

ブログの設定を次のように更新します。

• 投稿数：3
• 続きを表示ボタン：いいえ
• カテゴリを表示：いいえ
• コメント数を表示：いいえ
• 抜粋を表示：いいえ
• ページ付けを表示：いいえ

ページの上部に最新の3つの投稿が表示されます。

次に、元のブログモジュールに投稿オフセット番号を追加して、すでに上に表示されている最初の3つの投稿をスキップする必要があります。

元のブログモジュールのブログ設定を開き、以下を更新します。

• ポストオフセット番号：3

これで、ブログフィードは投稿＃4から始まります。

ページ上部の注目セクションを目立たせるために、背景のグラデーションを追加できます。

これがどのように見えるかの例です。

メインのブログフィードの上に全幅の投稿スライダーを追加する

上記の特集セクションと同様に、ブログページの上部に全幅の投稿スライダーを追加することで、ブログ投稿のコンテンツを整理することもできます。 これはブログページで人気のあるデザインであり、投稿オフセットのあるブログモジュールと組み合わせて使用​​できます。

これがその方法です。

まず、レイアウトに全幅セクションを追加します。

次に、全幅のポストスライダーモジュールをセクションに追加します。

次に、次の設定を更新します。

• 現在のページへの投稿：はい
• 投稿数：3

次に、次のようにレイアウトに一致するように投稿スライダーのデザインを更新します。

• タイトルフォント：ラト
• タイトルフォントの太さ：太字
• タイトルテキストサイズ：40px
• 本文サイズ：16px
• ボタンのテキストサイズ：14px
• ボタンのテキストの色：＃ff0071
• ボタンの背景色：#ffffff
• ボタンの境界線の幅：0px
• ボタンフォント：ラト
• ボタンのフォントの太さ：太字
• ボタンのフォントスタイル：TT

ブログモジュールのメインフィードに、投稿スライダーの3つの投稿に対応するために、投稿オフセット番号が3に設定されていることを確認してください。

次に、結果を確認します。

これまでのところよさそうだ。

次に、この次のヒントで、別のブログモジュールを使用するというアイデアをさらに一歩進めましょう。

＃4それぞれが単一の投稿を持つ複数のブログモジュールの追加

テンプレートレイアウトにブログモジュールを1つ追加するだけで停止する必要はありません。 実際、必要な数のブログモジュールを使用できます。 1枚のブログ投稿カードに独自のデザインを与えるために、ブログモジュールごとに1つの投稿のみを表示するように選択することもできます。 次に、投稿オフセットを使用して、ブログ投稿を動的に表示する完全にユニークなレイアウトを作成できます。

これがその方法です。

まず、メインのブログモジュールを含む行の上に新しい1/2列の行を追加します。

以下の元のブログモジュールをコピーして、新しい行の左側の列に貼り付けます。 次に、以下を更新します。

• 投稿数：1
• ポストオフセット番号：0
• ページ付けを表示：いいえ

次に、作成したブログモジュールをコピーして、複製を右側の列に貼り付けます。

次に、以下を更新します。

• ポストオフセット番号：1
• 注目の画像を表示：いいえ
• コメント数を表示：いいえ
• 抜粋を表示：いいえ

左の列の最初の番号をスキップするには、必ず投稿オフセット番号を1に設定してください。

次に、別のブログモジュールを作成し、投稿オフセット数を毎回1ずつ増やして、このプロセスを続行します。

右の列にブログモジュールを複製します。

次に、ポストオフセット番号を2に変更します。

ブログモジュールをもう一度複製し、投稿オフセット番号を3に変更します。

これで、各ブログモジュールのデザインを個別にカスタマイズする自由が得られます。 たとえば、それぞれに異なる背景色を追加できます。

結果は次のとおりです。

以下のメインのブログフィードを保持する場合は、上の行の4つの投稿に対応するために、投稿のオフセット番号を4に更新してください。

テーマビルダーのカテゴリページテンプレートの一部で、これと同じ手法が使用されていることも確認できます。 同じ概念を使用してカテゴリページテンプレートを作成する方法についてのチュートリアルを確認してください。

＃5ブログページにカテゴリ別に最近の投稿を表示する

ブログページテンプレートのメインのブログフィードに加えて、最近の投稿をカテゴリ別に表示することもできます。 これは、レイアウトを少し分割し、同時にさまざまなカテゴリを強調表示することで、ブログページのコンテンツを整理するための優れた方法です。

これがその方法です。

まず、メインのブログモジュールを含む行の下に新しい1列の行を追加します。

次に、ブログの設定を次のように更新します。

• 現在のページへの投稿：いいえ
• 投稿タイプ：投稿
• 投稿数：3
• 含まれるカテゴリ：ビジネス（または独自のカテゴリ）

これにより、ビジネスカテゴリの最新の3つの投稿が表示されます。

次に、ブログモジュールの上に対応するカテゴリタイトルのテキストモジュールを追加します。

そして、ちょうどそのように、ブログページに注目のカテゴリセクションがあります。これは、ブログページのコンテンツを整理するための優れた方法です。

それぞれが独自のデザインを持つ複数の注目カテゴリセクションを追加することもできます。

これらの注目のカテゴリセクションは、ブログページテンプレートの下部にうまく収まります。

最終的な考え

これらのヒントは、ブログページのコンテンツをあらゆる種類の独自の方法で整理するのに役立ちます。 また、これらの同じヒントは、ブログモジュールを使用してコンテンツを表示する他の多くの種類のテンプレート（カテゴリ/アーカイブページテンプレートなど）でも機能します。 これらのヒントを自由に調べて、次のプロジェクトで使用してください。

コメントでお返事をお待ちしております。

乾杯！