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

テーマを使用してウェブサイトのコンテンツを作成する

更新日時 2020年 5月 20日

対象製品

CMS Hub  Professional, Enterprise

ウェブサイトテーマを使用すれば、プロのウェブ開発者を雇わなくても、ビジネス向けの美しくまとまりのあるレスポンシブなページ一式を作成できます。テーマとは、CMS Hub アカウントでページやブログに適用できるスタイルとテンプレートのセットのことです。

テーマとは

ウェブサイトテーマは一連のテンプレートとスタイル設定であり、これを使用すれば誰でもウェブサイト全体を作成できます。CMS Hub アカウントには、あらゆるビジネスに合わせてカスタマイズできる、HubSpot が既定で提供する各種のウェブサイトテーマが含まれています。

既定の各ウェブサイトテーマは、次のもので構成されています。

  • テンプレート:ホームページに使用できる一連のテンプレートです。ホームページ、会社概要ページ、ランディングページ、ブログなどのテンプレートがあります。
  • モジュール:所定のテーマに含まれるページテンプレートに追加してカスタマイズできる、テーマに固有の一連のモジュールです。 
  • テーマ設定:テーマのテンプレートで使用されるフォント、間隔、色などの既定の設定です。 
  • グローバルコンテンツ:テーマテンプレートには、ウェブサイトの複数のサイトで繰り返し表示されるフッターなどのグローバルコンテンツが含まれます。

チームにプロの開発者がいる場合、開発者が CMS リファレンスドキュメントに従ってカスタムテーマをデザインできます。あるいは、Solutions Partner に連絡して、ウェブサイト用のカスタムテーマを作成してもらえる開発者を見つけることもできます。 

テーマの仕組み

  • ウェブサイトの外観に一貫性を持たせるには、すべてのページに同じテーマを使用し、ページのスタイル設定をテーマ設定で一元管理します。これにより、新しく作成するページにも同じフォント、色、スタイルが使用されます。
  • 作業中にページエディター内でコンテンツとスタイルをカスタマイズすることができます。ウェブサイト開発者がテーマをどのようにデザインしたかによって、テーマごとのオプションは異なる場合があります。
  • 特定のページで固有の色またはフォントを使用する場合、ページエディター内で一部のスタイル設定を制御できます。注意する点として、ウェブサイト全体で一貫性のあるフォント、色、スタイルを使用することがベストプラクティスです。

新しいページを作成してテーマをプレビューする

ページダッシュボードから簡単にテーマをプレビューできます。

  • HubSpot アカウントで、[マーケティング] [ウェブサイト] に移動し、[ランディングページ] または [ウェブサイトページ] を選択します。
  • 右上にある [作成] をクリックし、[ランディングページ] または [ウェブサイトページ] を選択します。
  • テーマをクリックして、そのテーマに含まれるテンプレートを表示します。
  • テーマをプレビューするには、テンプレートの上にカーソルを重ねて、右上の [プレビュー] をクリックします。テーマのインタラクティブなプレビューを表示してから、コンテンツエディターに進みます。

preview%20a%20theme

このテーマテンプレートを使用してページを作成するには、右上にある [テンプレートを使用] をクリックします。新しいページに内部名を付けます。

テーマを使用してページのコンテンツを編集する

各テーマには独自のテーマモジュール一式が含まれています。これらのモジュールは水平方向の行と垂直方向の列でグループ化されています。行または列をセクションにグループ化して、ページレイアウトの構造を作成できます。

即時の画像とテキストを使用してテーマモジュールのコンテンツをカスタマイズし、美しく一貫性があるプロフェッショナルなサイトをすばやく作成できます。HubSpot のテーマテンプレートを使用しているページには、追加のモジュールタイプをドラッグ&ドロップできます。

テーマテンプレートを使用してページのコンテンツを編集する方法の詳細を確認してください。

add%20a%20common%20module%20to%20a%20page

注:ウェブ開発者にカスタムテーマを構築してもらった場合、ページエディターでレイアウトにモジュールを追加するには、テーマのページテンプレートにドラッグ&ドロップエリアが含まれていることを確認してください。

テーマテンプレートをブログに適用する

CMS Hub アカウントでブログコンテンツもホストしている場合、視覚的に一貫させるために、ブログテンプレートをウェブサイトと同じテーマに更新することをおすすめします。ブログ設定でテーマをブログに適用する方法を確認してください。

注:ブログ記事テンプレートで編集可能なモジュールは、ブログのグローバルヘッダーおよびグローバルフッターに含まれる既定のモジュールのみです。グローバルコンテンツを編集する方法の詳細を確認してください。

テーマのスタイルを編集する

ビジュアルデザインに関するベストプラクティスに従ったウェブサイトにするために、ウェブサイトのコンテンツのボタンとフォームには、テーマの標準化された色、フォント、スタイルが適用されます。

注:カスタムテーマを使用している場合、そのテーマの設定で利用可能なスタイル設定オプションは、当初そのテーマをデザインした開発者によってテーマに含められたテーマフィールドオプションに依存します。

編集作業中にページエディター内からグローバルテーマのスタイルにアクセスするには、左側の [デザイン] タブをクリックします。ここで編集したスタイルは、すべてのページとこのテーマに含まれるすべてのテーマモジュールに適用されます。テーマ設定の管理方法の詳細を確認してください。 

edit-global-theme-fonts

ウェブサイト開発者向けの機能

CMS Hub で作成されたウェブサイトには、開発者と IT チームがセキュリティとパフォーマンスの機能を活用できます。開発者は、コードアラートでウェブサイトのパフォーマンスをすばやく簡単にモニタリングできます。また、コンテンツ監査 API エンドポイントを使用して、ウェブサイトのコンテンツに加えたすべての変更が記録されたログにアクセスすることもできます。 

CMS でのウェブサイト開発と開発者向け CMS API の詳細を確認してください。

/jp/website-pages/create-website-content-using-a-theme