コンテンツにスキップ
ClickFunnels Help CenterClickFunnels Help CenterClickFunnels Help CenterCF クラシックヘルプセンター

(コレクション)ブログ投稿: ブログ投稿の表示と整理

公開日: 更新日:

ブログ 投稿 コレクション要素を使用して、視聴者がブログコンテンツを簡単に閲覧できるようにします。この機能を使用すると、複数のブログ投稿を視覚的に整理された方法で表示し、外観をカスタマイズし、タイトル、要約、公開日などの詳細を動的に取得できます。

必要条件

Section titled “必要条件”

ブログ投稿要素の追加

Section titled “ブログ投稿要素の追加”

  1. ブログ投稿を表示するページの ClickFunnels ページ エディター を開きます。

  2. 目的の行の「 要素の追加」 をクリックして、「 要素」 メニューを開きます。

  3. [ コレクション] セクションまでスクロールし、[ ブログ投稿 ] 要素を選択します。 要素の追加メニューで、コレクション カテゴリと ブログ投稿 要素を強調表示

  4. 「ブログ投稿」要素を追加すると、コンテナ内に追加する 列 の数を選択するように求められます。

  5. 投稿タイトル、画像を投稿、投稿リンクなどの動的な詳細を追加すると、ブログ投稿の設定からデータが自動的に取得され、ページが最新の状態に保たれます。次の要素を含めることができます。

    1. 投稿タイトル: ブログ投稿のタイトルが表示されます。

    2. 投稿要約: ブログ投稿の簡単な説明を追加します。

    3. 投稿リンク: ブログ投稿全体を表示するためのクリック可能なリンクを提供します。

    4. 投稿公開日: ブログ投稿が公開された日時が表示されます。

    5. 画像を投稿: ブログ投稿のアイキャッチ画像を表示します。

    6. カテゴリ: ブログ投稿に割り当てられているカテゴリを示します。

    7. ブログ投稿著者: 投稿作成者の名前が表示されます。ブログ投稿のアイテム内で使える要素：投稿タイトル、投稿要約、投稿リンク、投稿公開日、画像を投稿、カテゴリ、ブログ投稿の著者

  6. 各要素をクリックして、その設定にアクセスします。フォント、色、間隔、レイアウトを調整してページのデザインに合わせて調整し、統一感のある外観を実現します。

ブログ投稿要素のカスタマイズ

Section titled “ブログ投稿要素のカスタマイズ”

設定へのアクセス

Section titled “設定へのアクセス”

コレクション要素にカーソルを合わせると、その境界線がマゼンタで強調表示されます。その設定にアクセスするには、歯車アイコン ⚙️ をクリックするか、要素を直接クリックします。

上マージン

上マージン 設定では、現在のコンテナ(セクション、行、フレックス、要素)とそのすぐ上にあるコンテナとの間のスペースを制御できます。以前のコンテナが存在しない場合、マージンは親コンテナを基準にして適用されます。先行コンテナが追加されていない場合、Body は親になります。

デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルの上マージン値を個別に設定できます。モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。スライダーを使用するか、ピクセル (px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。

フィルター

フィルター設定では、表示する投稿を制御できます。

  • アクティブポストをフィルター: 現在表示されている投稿がブログ投稿のリストに表示されないようにするには、このオプションをオンにします。

  • カテゴリでフィルター: 選択したカテゴリに属するブログ投稿のみを表示します。このオプションをオンにしてから、リストで 1 つ以上のカテゴリを選択します。

コレクション設定 コレクション設定では、コンテナ内でグリッドアイテム(カード)を配置およびページ分割する方法を構成できます。

  • 行あたりのアイテム数: グリッドの各行に表示するアイテムの数を選択します。レイアウトは新しい行に折り返され、小さな画面に自動的に適応します。

  • ページあたりのアイテム数: コンテナ内の 1 つのページにレンダリングされるアイテムの総数を設定します。コレクションにこの数を超える場合、ClickFunnels は追加のページを作成します。

  • ページネーションを隠す: コレクションの下に表示されるページ番号を非表示にします。コレクションには ページあたりのアイテム数 で設定した数のアイテムしか表示されないため、訪問者は最初のページより後のアイテムを見ることができません。ページ番号なしですべてのアイテムを表示するには、ページあたりのアイテム数 をすべてのアイテムが収まる数 (最大 100) に設定してから、ページネーションを隠す をオンにします。

  • ページネーションアイテムの色: ページネーションアイテムのテキスト/アイコンの色(例:数字の1、2、3)。

  • ページネーションアイテムの背景色: 非アクティブなページネーションアイテムの背景色。

  • ページネーションのボーダーの色: 各ページネーションアイテムの周りのボーダーの色。

  • ページネーションアクティブアイテムの色:現在の(アクティブな)ページアイテムのテキスト/アイコンの色。

  • ページネーションアクティブアイテムの背景色: アクティブなページアイテムの背景色。

  • ページネーションアクティブボーダーの色: アクティブなページアイテムのボーダーの色。

詳細設定

コンテナ (セクション、行、列、および要素) をさらにカスタマイズするために、ClickFunnels には、スタイル、高度な CSS、アニメーション、およびレンダリング ロジックを制御できる 詳細 設定が用意されています。これらの高度な機能を専用の記事に分けて、1 か所にまとめたコンテンツが多すぎて圧倒されないようにし、ドキュメントを簡潔に保ちます。詳細については、次のリソースを参照してください。

コントロールパネル

要素コントロール パネルは、ページ エディターのすべての要素の下部に表示され、その要素の重要な設定とアクションにすばやくアクセスできます。各アイコンが表す内容は次のとおりです。
設定パネルのヘッダーにあるコード（</>）アイコンと、下部バーの可視性・すべて・デスクトップ・モバイル・目・ゴミ箱アイコン

  • ALL: 要素はすべてのデバイス (デスクトップ、タブレット、モバイル) に表示されます。

  • デスクトップアイコン:要素はデスクトップビューにのみ表示されます。

  • モバイルアイコン:要素はモバイルビューでのみ表示されます。

  • 目のアイコン: これを使用して、ページから要素を非表示にします。要素はエディターに引き続き表示されますが、訪問者には表示されません。

  • コード (</>): このコンテナのコードエディタを開き、カスタム CSS を追加してスタイルを変更できます。エディタにはコンテナの CSS IDセレクター が表示されるため、CSS をこのコンテナだけに適用できます。設定パネル上部のコードアイコンから開くか、ページ上のコンテナにカーソルを合わせてツールバーの コード をクリックします。

  • ゴミ箱アイコン: ページエディタから要素を完全に削除します。