ウェブサイトテーマを使用してページのコンテンツを編集する

テーマとは、CMS Hub アカウントでページやブログに適用できるスタイルとテンプレートのセットのことです。テーマの既定のスタイルは、グローバルテーマ設定で設定したフォント、色、間隔、スタイルに基づきます。テーマにテーマモジュールを追加したり、テーマに含まれる任意のテーマモジュールを削除、再配列したりできます。テーマモジュールはスマートコンテンツとパーソナライズをサポートしています。

新しいページを作成する際は、検索エンジンがウェブサイトの内容を把握できるよう、明確なコンテンツ戦略を確立することが重要です。SEO ツールでトピックをセットアップし、エディター内で SEO に向けてページを最適化する方法を確認してください。HubSpot アカデミーにアクセスして、HubSpot の CMS でページのコンテンツを作成して編集する方法に関する動画をご覧ください。

新規ページを作成する

テーマテンプレートを使用して新しいページを作成するには、次の手順に従います。

• HubSpotアカウントにて、［マーケティング］ > ［ウェブサイト］ > ［ウェブサイトページ］の順に進みます。
• 右上にある [作成] をクリックし、[ウェブサイトページ] を選択します。
• テーマをクリックして、そのテーマに含まれているテンプレートを表示します。
• テーマテンプレートをプレビューするには、テンプレートの上にカーソルを重ねて、右上にある [プレビュー] をクリックします。テーマのインタラクティブプレビューが表示されます。このプレビューでページのテーマを選択するか、元のページに戻って他のテンプレートをプレビューします。
• 右上にある [テンプレートを使用] をクリックします。
• 表示されるダイアログボックスに、内部ページ名を入力します。この名前はウェブサイト訪問者には表示されません。

注：この内部ページ名に加え、ページを公開する前にページ設定でページのタイトルを設定する必要があります。

ページのコンテンツを編集する

テーマテンプレートを構成するモジュールは、水平方向の行または垂直方向の列にグループ化できます。モジュール、行、または列を要素のセクションにグループ化すると、ページエディターで要約されて表示されます。

ページ上のほとんどのモジュールは、コンテンツエディター内で直接編集できます。モジュールのタイプによっては、左側のパネルでコンテンツをさらにカスタマイズしなければならない場合もあります。

モジュール内のコンテンツをカスタマイズするには、モジュールの上にカーソルを重ねて、目的のアクションのアイコンをクリックします。

• edit 編集：ページ上のモジュールのコンテンツをインラインで直接編集するか、左側のパネルで編集します。ほとんどのテキストはコンテンツエディター内で編集できます。左側のパネルの [オプション] タブでは、すべてのタイプのモジュールを編集できます。モジュールコンテンツの編集方法の詳細を確認してください。
• styles スタイル：左側の [スタイル] パネル内で、このモジュールで利用可能なスタイルを管理します。ほとんどのモジュールスタイルは [スタイル] タブで管理できますが、テーマに固有のスタイルオプションは [オプション] タブ内で使用可能になります。
• clonduplicate 複製：ページ上にこのモジュールのコピーを作成します。
• delete 削除：このモジュールをページから削除します。

テーマにはグローバルコンテンツを含めることができます。グローバルコンテンツは、ページエディターで直接編集できます。グローバルコンテンツの例は、一般的にはサイト全体で同じ要素を繰り返し表示する、ページのヘッダーまたはフッターです。ページのヘッダーとフッターのコンテンツはページエディター内で管理しますが、ヘッダーとフッターのスタイルはテーマの設定で管理します。

ページエディターで作業を進める間、変更は自動的に保存されます。編集作業中に、以前に保存したバージョンのページを確認して復元することもできます。エディターでモジュールをカスタマイズする方法の詳細を確認してください。

ページにモジュールを追加する

テーマテンプレートに含まれるモジュールに加え、左側のパネルではその他のテーマモジュールと共通モジュールが利用可能になります。新しいモジュールをページ上の所定の位置にドラッグ＆ドロップして、別の要素を追加することができます。こうすることで、コンテンツに応じて簡単にページのデザインを調整できます。

ページレイアウトを編集する

ページ上で既存のモジュールを再配置するには、モジュール、列、行、またはセクションの上にカーソルを重ね、左側に表示される青いハンドルをクリックします。これで、コンテンツをページ上の新しい位置にドラッグ＆ドロップできるようになります。レイアウトでコンテンツが配置される場所は、青いラインで示されます。

場合によっては、行、列、セクションからモジュールを削除して、空のプレースホルダーを残すこともできます。このモジュールを新しいモジュールで置き換えれば、ページ構造の一貫性を維持できます。モジュールをレイアウトから完全に除外するには、行または列の上にカーソルを重ねて矢印をクリックし、 eletedelete 削除アイコンを選択します。

ページレイアウトでモジュールを追加、編集する際にページ上の要素の幅を調整するには、列の間の垂直方向の区切りをクリックし、ドラッグして幅を調整します。

スタイルを管理する

テーマテンプレートには一貫性のあるスタイル、色、間隔が含まれています。使用しているテーマやテーマの作成方法によっては、ページエディター内でカスタマイズできるテーマスタイルもあります。注意する点として、ウェブサイト全体で一貫性のあるフォント、色、スタイルを使用することがベストプラクティスです。ページヘッダー、ページフッター、フォームのタイトルなどの一部のスタイルは、テーマのグローバル設定でのみ管理できます。

ページの行、列、セクションをスタイル設定する

ページのすべての行、列、またはセクションにわたってスタイルを適用できます。これらの要素のスタイルにアクセスするには、次の手順に従います。

• 行、列、またはセクションの上にカーソルを重ねて強調表示し、その要素のツールバーを有効にします。
• ドロップダウン矢印をクリックし、[[要素] をスタイル設定] を選択します。
• 左側のパネルで、要素の間隔、幅、色を調整します。一部の行またはセクションには、背景画像を追加できます。

モジュールをスタイル設定する

ほとんどの場合、モジュール、行、列のスタイルは、左側のパネルにある [スタイル] タブで管理します。一部のテーマでは、左側のパネルにある [オプション] タブ内に追加のスタイルオプションがあります。

• 編集オプションにアクセスには、モジュールを直接クリックします。
• 左側のパネルで [スタイル] タブをクリックします。
• このモジュールに使用できるスタイルを展開します。 

• 編集する対象のスタイルが表示されない場合は、[オプション] タブをクリックして、テーマ内で利用可能なスタイルオプションを調べます。
  • 追加のスタイルオプションが使用できる場合は、左側の [オプション] タブの下部に表示されます。
  • [スタイルオプション] オプションをクリックすると、このモジュールのコンテンツに使用できる他のオプションにアクセスできます。ここで行った変更はこのページにのみ適用されます。

注：ページ上の要素のモジュールまたはセクションに使用できるスタイルオプションは、使用しているテーマやテーマのデザイン方法によって異なります。

テーマのスタイル設定にアクセスする

編集作業中にページエディター内からグローバルテーマ設定にアクセスするには、左側のパネルで [デザイン] タブをクリックします。[テーマ設定を編集] をクリックすると、テーマの設定にアクセスできます。

注：ここで行ったテーマの設定変更は、このテーマを使用するすべてのページとブログに適用されます。

ページ設定を編集する

公開する前に、[設定] タブをクリックして、ページタイトル、URL、言語、メタディスクリプションをカスタマイズします。ページを公開するには、ページタイトルが必要です。

ページタイトルとメタディスクリプションは検索エンジンの結果に表示されます。

ページを公開する

ページを公開する前に、右上にある [プレビュー] をクリックして、ページがモバイルデバイス上でどのように表示されるかをテストします。ページプレビューで、パーソナライズやスマートコンテンツが訪問者にどのように表示されるかをテストできます。

ページプレビューで問題がないことを確認したら、右上にある [公開] をクリックします。