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

スターターテンプレートを使用してページを作成する

更新日時 2022年 8月 12日

対象製品

すべての製品とプラン

スターターテンプレートを使用してシンプルなウェブサイトまたはランディングページを作成できます。この記事では、スターターテンプレートを使用して新しいページを作成し、ページのデザインをカスタマイズしてからページを公開する方法を説明します。 

注:スターターテンプレートは、スマートコンテンツ、カスタムモジュール、パーソナライズ、リッチ テキスト モジュール内のソースコードへのアクセス、パスワード保護されたページ、およびテンプレートスワッピングやヘッダーHTMLへのアクセスなどの高度なオプションをサポートしていません


スターターテンプレートを使用してページを作成する

スターターテンプレートを使用して新しいランディングページを作成するには:

  • コンテンツを開きます。

    • ウェブサイトページ:HubSpotアカウントにて、[マーケティング] > [ウェブサイト] > [ウェブサイトページ]の順に進みます。
    • ランディングページ:HubSpotアカウントにて、[マーケティング] > [ランディングページ]の順に進みます。
  • 右上の[Create]ドロップダウンメニューをクリックし、[Website]ページまたは[Landing]ページを選択します。 
  • テンプレート選択画面では、 アクティブなテーマのテンプレートがページの上部に表示 され、その他のテンプレートは下部の[ その他のテンプレート ]セクションに表示されます。 テンプレートをクリックします。アクティブなテーマを選択していない場合は、テーマを選択するか、[テンプレートに スキップ]をクリックして既存のテンプレート を選択します。
  • 選択したテンプレートでページを作成するには、右上の[このテンプレートを  選択]をクリックします。モバイルまたはデスクトップでのページプレビューを行うには、[プレビュー]をクリックします。 

select-a-template-to-create-page

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

スターターテンプレートには、モジュールと呼ばれるウェブサイトコンテンツのブロックが含まれています。これらのモジュールを、横の行または縦の列に配置できます。

行と列は要素のセクションにグループ化できます。要素をグループ化すると、背景スタイルをページの全体に適用できます。これらの要素をドラッグ&ドロップしてページのレイアウトを再調整することもできます。ドラッグ&ドロップエリアでページコンテンツを編集する方法の詳細をご確認ください。

モバイルデバイスでページの外観をカスタマイズするには、サイドバーエディターで mobile ediモバイル用編集アイコンをクリックします。

編集-モバイル-ページのバージョン

フォント、色、およびボタンをカスタマイズする

スターターテンプレートの既定のスタイルをカスタマイズするには、サイドバーエディターの[テーマ]タブをクリックします。ページの特定の行、列、またはセクションの背景色または画像をカスタマイズすることもできます。

編集-テーマ-スターター内のオプション-テンプレート

 

タイポグラフィー

[タイポグラフィー]セクションで、ページの本文および見出しに適用されているフォントとフォントスタイルを編集します。すべてのGoogleフォントに対応しています。
  • 本文テキスト:ページ本文のフォントや、フォントサイズ、フォントカラーをカスタマイズします:
    • [本文テキスト]ドロップダウンメニューをクリックし、フォントを選択します。
    • 矢印キーをクリックしてフォントサイズを調整します。
    • カラーピッカーをクリックして、フォントのを選択します。カスタム色を設定するには、[詳細]タブをクリックし、16進数の値を入力します。 
  • 見出し:モジュールに見出しがある場合、そのフォントと色をカスタマイズします。
    • [見出し]ドロップダウンメニューをクリックし、フォントを選択します。
    • カラーピッカーをクリックして、フォントの色を選択します。カスタム色を設定するには、[詳細]タブをクリックし、16進数の値を入力します。 
  • リンクテキスト:ページ上のリンクに適用するフォントや色をカスタマイズします。
    • [リンクテキスト]ドロップダウンメニューをクリックし、フォントを選択します。
    • カラーピッカーをクリックして、リンクのを選択します。カスタム色を設定するには、[詳細]タブをクリックし、16進数の値を入力します。 
    • ドロップダウンメニューをクリックし、リンクテキストに適用するスタイルを選択します。
    • マウスポインターをリンクに合わせたとき、クリックしているとき、訪問済みのときのリンクの色と透明度をカスタマイズします。
      • マウスポインターをリンクに合わせた時の色:カラーピッカーをクリックして、訪問者がリンクにマウスポインターを合わせた際の、リンクを選択します。色の透明度を変更するには、テキストフィールドにパーセンテージ値を入力します。 
      • アクティブリンクの色:カラーピッカーをクリックし、リンクがクリックされたときのリンクを選択します。色の透明度を変更するには、テキストフィールドにパーセンテージ値を入力します。 
      • 訪問済みリンクの色:カラーピッカーをクリックし、訪問者がすでにリンクをクリックしたときのリンクを選択します。色の透明度を変更するには、テキストフィールドにパーセンテージ値を入力します。 

edit-link-text

フォームとボタン

[Forms and buttons(フォームとボタン)]セクションで、シンプルなボタンとフォーム送信ボタンがページ上でスタイル設定される方法をカスタマイズします。
  • ボタンの背景色:ボタンの背景色に適用する色をカスタマイズします。
    • 16進数値を入力するか、カラーピッカーをクリックしてを選択します。 
    • ボタンの背景色の透明度を設定するには、フィールドにパーセンテージ値を入力します。 
  • ボタンテキストの色:ページ上のボタンのテキストに適用する色をカスタマイズします。
    • 16進数の値を入力するかカラーピッカーをクリックしてテキストの色を選択します。
    • ボタンの背景色の透明度を設定するには、フィールドにパーセンテージ値を入力します。 
  • ボタンの角の半径:ページのボタンを丸くするか四角くするかの度合いをカスタマイズします。 
    • フィールドにを入力するか、スライダーをクリックして新しい位置にドラッグします。 
    • 入力値が大きいほど、ページ上のボタンの角が丸みを帯びることになります。入力値が0の場合、ボタンは長方形になります。

注意: HubSpotは、[デザイン]タブの設定に基づいて、一貫した色、フォント、スタイルを維持することをお勧めします。左側のパネルの[オプション]タブでそれぞれのモジュールの既定のスタイルを上書きできます。


ページをプレビューして公開する

ページを公開する前に、右上にある[プレビュー]をクリックして、ページがデスクトップまたはモバイルデバイス上でどのように表示されるかをテストします。ページプレビューで問題がないことを確認したら、右上にある[公開]をクリックします。 

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.