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

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

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

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

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

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

  • ウェブサイトページ：HubSpotアカウントにて、［マーケティング］ > ［ウェブサイト］ > ［ウェブサイトページ］の順に進みます。
  • ランディングページ：HubSpotアカウントにて、［マーケティング］ > ［ランディングページ］の順に進みます。

• 右上の[Create]ドロップダウンメニューをクリックし、[Website]ページまたは[Landing]ページを選択します。 

• テンプレート選択画面では、 アクティブなテーマのテンプレートがページの上部に表示 され、その他のテンプレートは下部の[ その他のテンプレート ]セクションに表示されます。 テンプレートをクリックします。アクティブなテーマを選択していない場合は、テーマを選択するか、[テンプレートに スキップ]をクリックして既存のテンプレート を選択します。
• 選択したテンプレートでページを作成するには、右上の[このテンプレートを  選択]をクリックします。モバイルまたはデスクトップでのページプレビューを行うには、［プレビュー］をクリックします。 

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

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

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

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

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

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

タイポグラフィー

• 本文テキスト：ページ本文のフォントや、フォントサイズ、フォントカラーをカスタマイズします：
  • ［本文テキスト］ドロップダウンメニューをクリックし、フォントを選択します。

• • 矢印キーをクリックしてフォントサイズを調整します。
  • カラーピッカーをクリックして、フォントの色を選択します。カスタム色を設定するには、［詳細］タブをクリックし、16進数の値を入力します。 
• 見出し：モジュールに見出しがある場合、そのフォントと色をカスタマイズします。
  • ［見出し］ドロップダウンメニューをクリックし、フォントを選択します。
  • カラーピッカーをクリックして、フォントの色を選択します。カスタム色を設定するには、［詳細］タブをクリックし、16進数の値を入力します。 
• リンクテキスト：ページ上のリンクに適用するフォントや色をカスタマイズします。
  • ［リンクテキスト］ドロップダウンメニューをクリックし、フォントを選択します。
  • カラーピッカーをクリックして、リンクの色を選択します。カスタム色を設定するには、［詳細］タブをクリックし、16進数の値を入力します。 
  • ドロップダウンメニューをクリックし、リンクテキストに適用するスタイルを選択します。

• • マウスポインターをリンクに合わせたとき、クリックしているとき、訪問済みのときのリンクの色と透明度をカスタマイズします。
    
    • マウスポインターをリンクに合わせた時の色：カラーピッカーをクリックして、訪問者がリンクにマウスポインターを合わせた際の、リンクの色を選択します。色の透明度を変更するには、テキストフィールドにパーセンテージ値を入力します。 

• • • アクティブリンクの色：カラーピッカーをクリックし、リンクがクリックされたときのリンクの色を選択します。色の透明度を変更するには、テキストフィールドにパーセンテージ値を入力します。 

• • • 訪問済みリンクの色：カラーピッカーをクリックし、訪問者がすでにリンクをクリックしたときのリンクの色を選択します。色の透明度を変更するには、テキストフィールドにパーセンテージ値を入力します。 

フォームとボタン

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

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

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

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