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

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

更新日時 2022年 3月 1日

対象製品

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

  • コンテンツエディターの右上にある「公開」または「更新」をクリックして、変更を本番に反映させます。 
Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.