Diviの投稿スライダーモジュールを使用してブログ投稿ティッカーを作成する方法

ブログ投稿ティッカーは、ブログ投稿（最近、関連など）をWebサイトに動的に表示するための便利なツールです。 あなたはそれをWordPressブログ投稿のニュースティッカーと考えることができます。

今日は、Diviの投稿スライダーモジュールを使用してブログ投稿ティッカーを作成する方法を紹介します。 ニュースティッカーと同様に、これから作成するブログ投稿ティッカーは、Diviの投稿スライダーモジュールの簡略化されたコンパクトなバージョンになります。 また、投稿スライダーモジュールには、さまざまな方法で投稿を表示する機能が組み込まれているため、どこでも使用できます。 ホームページで最近の投稿を表示するための投稿ティッカーとして使用することも、ブログ投稿テンプレートのヘッダーで使用して現在のカテゴリに関連する投稿を表示することもできます。

Diviでブログ投稿ティッカーを作成する方法を示した後、Diviライブラリに保存してDiviBuilderのブログ投稿テンプレートのヘッダーに追加する方法も示します。

始めましょう！

スニークピーク

このチュートリアルで作成するブログ投稿のティッカーを簡単に見てみましょう。

ポストティッカーが電話のディスプレイにうまくスタックする方法は次のとおりです。

ブログ投稿テンプレートのヘッダーにも関連する投稿を表示するために投稿ティッカーを追加する方法を示します。

レイアウトとテンプレートを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

レイアウトをDiviライブラリにインポートします

セクションレイアウトをDiviライブラリにインポートするには、Diviライブラリに移動します。

[インポート]ボタンをクリックします。

移植性ポップアップで、[インポート]タブを選択し、コンピューターからダウンロードファイルを選択します。 これは、「ブログ投稿ティッカーレイアウト（Diviライブラリ）」という名前のフォルダー内のJSONファイルになります。

次に、インポートボタンをクリックします。

完了すると、セクションレイアウトがDiviBuilderで使用できるようになります。

ヘッダーテンプレートをDiviテーマビルダーにインポートします

ヘッダーに投稿ティッカーが追加されたブログ投稿テンプレートをインポートする場合は、Divi> ThemeBuilderに移動する必要があります。

次に、ページの右上にある移植性アイコンを使用して、JSONファイルをインポートします。 「投稿ティッカー付きブログ投稿ヘッダーテンプレート（テーマビルダー）」というフォルダー内のファイルになります。

チュートリアルに取り掛かりましょう。

始めるために必要なもの

開始するには、次のことを行う必要があります。

1. まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
2. WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
3. 「最初から構築」オプションを選択します。

その後、Diviでデザインを開始するための空白のキャンバスが作成されます。

Diviでブログ投稿ティッカーを作成する

行の作成

まず、セクション内に1列の行を作成しましょう。

行設定

次に、行の設計設定を次のように更新します。

• 側溝幅：1
• パディング：0px上、0px下

テキストモジュールを使用したポストティッカータイトルの作成

行が配置されたので、テキストモジュールを行に追加して、ポストティッカータイトルを作成します。

タイトルテキストと背景

本文を更新して「最近の投稿：」を読んでください。

次に、背景色を更新します。

• 背景色：＃333333

デザイン設定

[デザイン]タブで、テキストスタイルを次のように更新します。

• テキストフォント：ポピンズ
• テキストフォントの太さ：半太字
• テキストフォントスタイル：TT
• テキストテキストの色：rgba（255,255,255,0.7）
• テキスト文字の間隔：1px
• テキスト行の高さ：40px
• テキストの配置：中央

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

これで、ポストティッカータイトルが処理されます。 それでは、ポストティッカーの作成を始めましょう。

ブログ投稿スライダーモジュールを使用したブログ投稿ティッカーの作成

ブログの投稿ティッカーを作成するには、投稿スライダーモジュールを使用してから、デザインを単純化して非常にコンパクトにします。

テキストモジュールの下に投稿スライダーモジュールを追加します。

スライダーコンテンツの投稿

[コンテンツ]タブで、投稿数、含まれるカテゴリ、およびそれらの方法や順序を選択できます。 この例では、デフォルトを維持し、スライダーに最新の投稿を表示させます。

投稿の抜粋を非表示にするには、必ず以下を更新してください。

• 投稿の抜粋を使用する：いいえ
• 抜粋長さ：0

投稿スライダーの要素と背景

実際、スライダーに表示したいのは、投稿のタイトルとスライドの矢印だけです。 要素オプショングループの下で、矢印以外のすべてを非表示にします。

• コントロールの表示：いいえ
• 続きを表示ボタン：いいえ
• 投稿メタを表示：いいえ

各スライドの背景として注目の画像を表示するオプションを保持します。 ただし、バックアップの場合は、必ず次の背景色を追加してください。

• 背景色：#eeeeee

ポストスライダーのデザイン設定

オーバーレイと矢印のスタイル

[デザイン]タブで、背景オーバーレイと矢印の色を次のように更新します。

• 背景オーバーレイを使用する：はい
• 背景オーバーレイの色：rgba（248,248,248,0.9）
• 矢印の色：#ffffff（デスクトップ）、＃ef51f7（ホバー）

タイトルテキスト

次に、タイトルのテキストスタイルを次のように更新します。

• タイトルフォント：ポピンズ
• タイトルフォントの太さ：中
• タイトルテキストの配置：左
• タイトルテキストの色：＃333333
• タイトルテキストの色（ホバー）：＃ef51f7
• タイトルテキストサイズ：16px（デスクトップ）、14px（電話）
• タイトル行の高さ：40px
• タイトルテキストシャドウ：スクリーンショットを参照
• タイトルテキスト影の色：透明

間隔

投稿スライダーを右側に配置できるように、投稿ティッカータイトルテキストモジュール用のスペースを確保する必要があります。 これを行うには、以下を更新します。

• マージン：左175px（デスクトップとタブレット）、左0px（電話）
• パディング：上0px、下0px、左0px、右0px

自動アニメーション

投稿スライダーには、自動アニメーションを追加するための組み込みオプションがあります。 これにより、スライドの矢印をクリックせずに投稿を表示するために必要なティッカー機能が提供されます。

次のように自動アニメーションを追加します。

• 自動アニメーション：オン
• 自動アニメーション速度：3500

速度を自由に増減して、最適と思われる速度にします。

高度なスタイリング

CSSクラスとカスタムCSS

この時点で、ポストスライダーはほとんどの部分で機能しているポストティッカーです。 ただし、デザインをクリーンアップするために追加できる高度な調整がいくつかあります。

まず、次のようにカスタムCSSクラスを追加します。

• CSSクラス：et-post-ticker

投稿のタイトルがスライダー/ティッカー内の1行にとどまり、省略記号でオーバーフローを非表示にするには、次のCSSをスライドのタイトルに追加します。

padding-bottom:0px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

スライド矢印にボタンの感触を与えるには、次のCSSをスライド矢印に追加します。

height: 40px;
width: 40px;
line-height:40px;
font-size: 28px;
text-align: center;
margin-top:-20px;
background:#333;

スライド矢印を配置するためのコードモジュールを備えた追加のCSS

この時点で、スライド矢印のデフォルト機能はホバー時にのみ表示され、矢印の配置はスライドの右側と左側にあります。 ユーザーエクスペリエンスを向上させ、ポストティッカーのようにするために、矢印を常に表示し、スライダーの右側に配置することができます。

これを行うには、投稿スライダーの下に新しいコードモジュールを追加します。

次に、次のCSSを貼り付けて、必要なスタイルタグでラップしていることを確認します。

.et-post-ticker.et_pb_slider:hover .et-pb-arrow-prev,
.et-post-ticker .et-pb-arrow-prev {
  right: 40px !important;
  opacity: 1 !important;
  left: auto !important;
}
.et-post-ticker.et_pb_slider:hover .et-pb-arrow-next,
.et-post-ticker .et-pb-arrow-next {
  right: 0px !important;
  opacity: 1 !important;
}
.et-post-ticker .et_pb_slide {
  padding: 0 84px 0 3% !important;
}

最終結果

これがライブページの最終結果です。

ポストティッカーがタイトルテキストのオーバーフローをどのように処理するかに注目してください。

そして、これがポストティッカーが電話のディスプレイにうまく積み重なる方法です。

ブログ投稿テンプレートのヘッダーに投稿ティッカーを追加する

この投稿ティッカーの明らかな使用例の1つは、ブログ投稿テンプレートの実際のヘッダーに最近の投稿を表示することです。 これがあなたがそれをする方法です。

行をDiviライブラリに保存する

まず、ポストティッカーを構成する要素を含む行をDiviライブラリに保存します。 これを行うには、行の3つのドットのアイコンをクリックし、[ライブラリに保存]を選択します。 次に、レイアウトに名前を付けて、[ライブラリに保存]ボタンをクリックします。

ヘッダーテンプレートへのポストティッカー行の追加

カスタムヘッダーを編集する

行がライブラリに保存されたら、カスタムヘッダーに追加する準備ができています。 この例では、テンプレートが「すべての投稿」に割り当てられていることを確認してください。 次に、クリックして、そのテンプレートのカスタムヘッダーを編集します。

ライブラリから行（ティッカー後）を挿入

ヘッダーレイアウトエディターで、ポストティッカーを表示する場所をクリックして新しい行を追加します。

Inser Rowモーダルで、[ライブラリから追加]タブを選択します。 以前にライブラリに保存したブログ投稿のティッカー行を見つけて選択します。

これで、ポストティッカーがヘッダーに表示されます。

現在のカテゴリの関連記事を紹介する

この投稿ティッカーはブログ投稿にのみ表示されるため、現在のカテゴリに関連する投稿のみを表示するように選択できます。

まず、テキストモジュールのタイトルテキストを「関連記事：」に更新する必要があります。

次に、投稿スライダーの設定を開きます。 [含まれるカテゴリ]で、[現在のカテゴリ]オプションを選択します。

これで、各ブログ投稿のヘッダーに、現在のカテゴリ別に関連する投稿を表示する投稿ティッカーが表示されます。

ブログ投稿テンプレートの結果

これが実際の自動アニメーションです。

ナビゲーション矢印をクリックして、次の投稿と前の投稿にジャンプする方法は次のとおりです。 投稿のタイトルをクリックすると、その投稿に移動します。

そして、これがタブレットと電話でどのように見えるかです。

最終的な考え

学習したように、Diviのスライダーモジュールの設計を簡素化し、ナビゲーション矢印にいくつかのカスタム調整を加えることで、ブログ投稿のティッカーを簡単に作成できます。 また、投稿スライダーに組み込まれているすべてのオプションを使用して、いつでも簡単にスタイルを調整できることを忘れないでください。 うまくいけば、これはそこにいるすべてのブロガーやWeb開発者にとって役立つでしょう。

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

乾杯！