ブログテーマページのカスタマイズ

  • 公開日 Nov 4, 2025
  • 1 分で読めます
Prev Next

ClickFunnels のブログ テーマ ページを使用すると、訪問者にブログがどのように表示されるかを構造化できます。これらのテンプレート ページはテーマの一部であり、ブログ コンテンツのプレゼンテーションを強化するための動的な要素が含まれています。以下では、さまざまなブログ テーマ ページと、エディターを使用してそれらをカスタマイズする方法について説明します。

必要条件

  1. アクティブなClickFunnelsアカウント

  2. The Site & Blog app added to the workspace

ブログのテーマページを理解する

ClickFunnelsでワークスペースを作成すると、事前に構成されたブログページを含むデフォルトのテーマが付属します。これらのテーマ ページはブログの基盤として機能し、ブログ コンテンツを動的に表示するように設計されています。主な詳細は次のとおりです。

  • テーマの一部: ブログページは、ワークスペースのアクティブなテーマの一部です。テーマは、ブログを含むサイトの全体的なデザインとレイアウトを定義します。

  • カスタマイズ可能なテンプレート: これらのページは事前にデザインされていますが、コンテンツ、レイアウト、スタイルを完全にカスタマイズしてブランドに合わせて行うことができます。

  • 動的機能: ブログ ページは動的要素を利用して、ブログ投稿、カテゴリ、その他の関連コンテンツを自動的に表示します。

テーマに含まれる主なブログページは次のとおりです。

  1. ブログホームページ: ブログのメインランディングページ。

  2. ブログ投稿ページ: 個々のブログ投稿を表示します。

  3. ブログカテゴリページ: カテゴリ別にフィルタリングされたブログ投稿を一覧表示します。

  4. ブログカテゴリコレクションページ: 使用可能なすべてのブログカテゴリを表示します。

ブログのテーマページへのアクセス

ClickFunnels の サイトとブログ アプリから直接ブログ テーマ ページにアクセスして編集できます。次の手順を実行します:

  1. ワークスペースの左側のメニューにある サイトとブログ アプリに移動します。

  2. [ 概要 ] をクリックすると、ブログ投稿やページなど、サイトの概要が表示されます。

  3. [ サイトの編集 ] を選択して、テーマ ページにアクセスします。

  4. 「サイトテーマページ」セクションでブログページを見つけます。これには、 ブログ ホーム、 ブログ投稿、 ブログ カテゴリ、 ブログ カテゴリ コレクション ページが含まれます。

  5. ページ名をクリックすると、ページエディタで開きます。コンテンツに必要な編集を行った後、「 保存」 をクリックして変更を適用してください。

ブログホームページ

ブログのホームページは、ブログのメインランディングページです。訪問者は、ブログのメイン URL にアクセスすると、このページが表示されます。ブログ ホームページの訪問者には、ブログのコンテンツの包括的な概要が表示されます。これも:

  1. 利用可能なブログのリスト: コレクション 要素を使用して 、最近または注目のブログ投稿を動的に表示します。

  2. ブログカテゴリの概要: カテゴリを目立つように表示し、ユーザーがトピックや興味ごとに投稿を探索できるようにします。

動的ブログコレクション要素の追加

  • ブログ投稿コレクション要素: この要素を使用して、動的に更新されるブログ投稿の整理されたリストを表示します。ブログ投稿コレクション要素の詳細については 、記事(Collections) Blog Posts: Display and Organize Your Blog Postsを参照してください。

  • ブログ カテゴリ コレクション要素: この要素を追加してブログ カテゴリを特集し、ユーザーがコンテンツを効果的にナビゲートできるようにします。ブログカテゴリコレクション要素の詳細については 、記事(Collections) Blog Categories: Display Blog Categoriesを参照してください。

これらの動的な要素により、定期的な手動更新を必要とせずに、ブログ ホームページが最新かつ視覚的に魅力的な状態に保たれます。

ブログ投稿ページ

ブログ投稿ページは、誰かが特定のブログ投稿をクリックすると表示されます。選択した投稿のコンテンツを表示するように動的に更新されます。

動的ブログ要素の使用

ブログコンテンツを動的に表示するには、次の ブログ投稿の詳細要素を使用できます。

  • タイトル： ブログ投稿のタイトルを表示します。

  • 概要： ブログ投稿からの簡単な説明または抜粋を表示します。

  • 公開日: 投稿の公開日を自動的に入力します。

  • 画像： 投稿に関連付けられたメイン画像を追加します。

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

  • ブログ投稿の著者: 該当する場合は、投稿の作成者を一覧表示します。

これらの要素により、ブログ投稿ページが選択した投稿のコンテンツに動的に適応し、訪問者にシームレスなエクスペリエンスを提供します。

パンくずリストナビゲーションの追加

ナビゲーションを強化するために、パンくずリストナビゲーション要素を追加できます。この機能は、ユーザーがブログのホームページから特定のカテゴリ、そして投稿自体へのパスを追跡するのに役立ちます。

パンくずリストナビゲーションの設定方法の詳細については、Breadcrumbs: Enhance User Navigation with Dynamic Pathsの記事を参照してください 。

ブログカテゴリページ

ブログカテゴリページは、訪問者がカテゴリを選択すると表示されます。そのカテゴリに関連付けられているすべてのブログ投稿を動的に表示します。

カテゴリページにブログ投稿を表示する:

  • 選択したカテゴリ内で利用可能なすべてのブログ投稿を表示するには、Blog Posts Collection要素を追加する必要があります 。この要素を使用すると、ブログ投稿情報を自動入力できる動的なブログ要素を使用してグリッドレイアウトを作成できます。

  • ブログ投稿コレクション要素を追加すると、次の 投稿 要素を表示するように構成できます。

    • 名前： ブログ投稿のタイトルを表示します。

    • 概要： ブログ投稿の簡単な説明または抜粋を表示します。

    • リンク： ブログ投稿全体へのクリック可能なリンクを追加します。

    • 公開日: ブログ投稿が公開された日付が表示されます。

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

    • カテゴリ： ブログ投稿に関連付けられているカテゴリを示します。

    • ブログ投稿の著者: 該当する場合は、投稿の作成者を一覧表示します。

ブログカテゴリコレクションページ

ブログカテゴリコレクションページには、すべてのブログカテゴリのリストが表示され、訪問者は関心のあるトピックを参照できます。

すべてのカテゴリの表示

  • 使用可能なすべてのブログカテゴリを動的に表示するには、まず [ブログカテゴリコレクション ] 要素を追加します。この要素は、カテゴリの構造化されたレイアウトを作成するのに役立ちます。

  • Blog Categories Collection 要素を追加した後、次の Blog Categories 要素を含めて構成できます。

    • 名前： 各ブログカテゴリの名前が表示されます。

    • リンク： 関連する投稿がリストされている各カテゴリのページにクリック可能なリンクを追加します。

ブログテーマページ設定

ブログ テーマ ページ設定を使用すると、メタデータ、URL、詳細オプションなどの重要な側面を微調整できます。以下は、利用可能な設定の説明です。

ページ設定へのアクセス

  1. ワークスペースから、左側のメニューにある サイトとブログ アプリに移動します。

  2. [ 概要] を選択します。

  3. 右上隅の [サイトの編集 ] をクリックします。

  4. [サイト テーマ ページ] で、[ブログ ページ] にカーソルを合わせます。一度に1ページずつ。

  5. 歯 車 ⚙️ アイコンをクリックして、ページ設定にアクセスします。

ページ名と説明

  • ページ名: これは、ワークスペース内のページの内部名です。ページを識別するのに役立ちますが、訪問者には表示されません。

  • 説明: 参照用にページの簡単な説明を入力します。

SEOと共有

  • ページタイトル: このタイトルは、検索エンジンの結果とブラウザーのタブに表示されます。

  • ページの説明: 簡潔な説明 (最大 160 文字) を追加して、検索エンジン向けのブログ ページの内容を要約します。

  • ページ URL: ブログ ページの URL パス ( /blog, /blog-categories など) をカスタマイズします。

  • 検索エンジンのインデックス: このページを検索エンジンの結果に表示する場合は、このオプションを有効にします。有効にすると、Google、Bing などの検索エンジンがページを見つけることができます。

  • 画像の共有: ページ リンクがソーシャル メディアで共有されたときに表示される画像をアップロードします。

  • ファビコン画像: ブラウザタブに表示される小さなアイコン (通常は 16x16 または 32x32 ピクセル) を追加します。

詳細設定

  • スタイル: サイトの既定のスタイルと異なる場合は、ページの特定のスタイルを選択します。それ以外の場合は、「デフォルトスタイルを使用」に設定したままにします。 スタイルガイドを作成するには、[ワークスペース設定] > [スタイル] に移動し 、スタイルプロパティを定義してスタイルガイドを保存します。 作成したら、ここのドロップダウンメニューからスタイルガイドを選択して、サイトのホームページに適用できます。

  • サイトナビゲーションに追加: ページを「サイトページ」として分類し、[ サイトページ] メニューに表示する場合は、このオプションを有効にします。無効にすると、ページはスタンドアロンのランディングページとして作成され、[サイトページ]メニューには表示されません。

これらの設定を構成したら、[ ページの更新] をクリックして変更を適用します。

関連記事