メインコンテンツにスキップ
お客さまへの大切なお知らせ:膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。
Landing Pages

HubSpotページでフレキシブルカラムを使用する

更新日時 2021年 8月 19日

対象製品

Marketing Hub Professional, Enterprise
CMS Hub Professional, Enterprise
Marketing Hub Basic(旧製品)

フレキシブルカラムは、コンテンツエディターでモジュールを追加して再配置するのをサポートする、ページのセクションです。コンテンツエディターで使用するには、まずフレキシブルカラムをページのテンプレートに追加する必要があります。

フレキシブルカラムはスマートコンテンツをサポートしておらず、ブログでは使用できません。

テンプレートにフレキシブルカラムを追加する

フレキシブルカラムがページテンプレートに追加されると、コンテンツエディターのそのページのセクション内でモジュールを追加、削除、または再配置できますテンプレートのフレキシブルカラムに追加されたモジュールは、既定でコンテンツエディターに表示されます。

:テンプレートのフレキシブルカラムに追加されたモジュールは、そのテンプレートを使用している新しいページにのみ表示されます。モジュールはコンテンツエディターから既存のページに追加できます。 

  • HubSpotアカウントにて、[マーケティング] > [ファイルとテンプレート] > [デザインツール]の順に進みます。
  • ファインダー内で、レイアウトエディターで開くテンプレートをクリックします。 
  • インスペクターで、[+追加]タブをクリックします。
  • 検索バーにフレキシブルカラムを入力し、レキシブル カラム モジュールをクリックしてテンプレートにドラッグします。 
  • [+追加]タブで、フレキシブルカラムに追加するモジュールをクリックし、テンプレートのフレキシブルカラムにドラッグします。 

フレキシブルカラムの分割

コンテンツエディターでフレキシブルカラムを編集する

フレキシブルカラムを使用するテンプレートで新しいページを作成したら、コンテンツエディターでそれらのフレキシブルカラムの構造とコンテンツをカスタマイズできます。

  • HubSpotアカウントにて、[マーケティング] > [ウェブサイト] > [ウェブサイトページ]の順に進みます。
  • ページの上にカーソルを重ねて[編集]をクリックします。
  • コンテンツエディターでフレキシブルカラムにモジュールを追加するには、サイドバーエディターでモジュールをクリックし、フレキシブルカラムにドラッグします。

flexible%20columns%20add%20module

:フレキシブルカラムを使用するページのエリアにのみモジュールを追加できます。 

  • フレキシブルカラムでモジュールを削除するには、モジュールの上にカーソルを置き、delete削除アイコンをクリックします。
  • モジュールのレイアウトを再配置するには、次の手順を実行します。
    • フレキシブルカラムの任意のモジュールにカーソルを置き、 flexColumn フレキシブル カラム アイコンをクリックします。
    • モジュールの上部にある4つの矢印アイコンをクリックし、フレキシブルカラム内の位置にドラッグします。 
    • モジュールを再配置したら、[レイアウトモードを終了]をクリックします。

rearrange-modules-in-a-flexible-column

  • 右上の[公開]または[更新]をクリックします。