ブログの掲載ページを編集する
更新日時 2023年 6月 22日
以下の 製品でご利用いただけます(別途記載されている場合を除きます)。
|
ブログ一覧ページは、ブログの記事をすべて表示するページである。HubSpotでは、コンテンツエディターのドラッグ&ドロップツールで編集できるブログ一覧ページもあれば、デザインマネージャーでHTML + HubLの編集が必要なページもあります(Marketing Hub Professional or Enterprise or CMSHub Professional or Enterpriseのみ)。
注意:ドラッグ・アンド・ドロップの掲載ページを削除するには、関連付けされているブログを削除する必要があります。
ドラッグ・アンド・ドロップによる掲載ページの作成と編集
コンテンツエディターでは、ブログの記事をすべて表示するブログリストページを作成することができます。テーマを使用する、またはドラッグ&ドロップエリアを持つリスティングページのみ、コンテンツエディターでのモジュールの追加や移動に対応しています。
既存のブログリストページをコンテンツエディターで編集に最適化する
新規に作成されたブログは、ブログリストページのコンテンツエディターでの編集に自動的に対応します。古いブログの場合は、ブログの設定でこの編集体験を選ぶことができます:
- HubSpotアカウントにて、メインのナビゲーションバーに表示される設定アイコンsettingsをクリックします。
- 左サイドバーのメニューから、「ウェブサイト> ブログ」に移動します。
- 複数のブログをお持ちの場合は、「修正するブログを選択」ドロップダウンメニューをクリックし、ブログを選択します。
- テンプレート」タブに移動します。
- ブログ一覧セクションで、新しい編集エクスペリエンスを試してみるをクリックします。
- ダイアログボックスで[続ける]をクリックします。
- コンテンツエディターで、ドラッグ&ドロップ編集ツールを使って、ブログリストページを編集します。
-
変更を反映させるには、右上の「更新」をクリックし、ダイアログボックスの「更新」をクリックします。
コンテンツエディターでブログ一覧ページを編集する
コンテンツエディターで編集をオプトインしたブログリストページは、ブログダッシュボードからアクセスすることができます:
- HubSpotアカウントにて、[マーケティング]>[ウェブサイト]>[ブログ]の順に進みます。
- 左上の「ブログ記事」ドロップダウンメニューをクリックし、「ブログリストページ」を選択します。
- ブログで絞り込むには、表の上部にあるブログのドロップダウンメニューをクリックし、フィルタリングに含めたい各ブログの横にあるチェックボックスを選択します。

- 新しいブログリストページを作成するには、右上の「作成」をクリックします。ダイアログボックスで、[ブログを選択]ドロップダウンメニューをクリックしてブログを選択し、[一覧ページの作成]をクリックします。
ご注意:各ブログは1つのブログ・リスティング・ページしか持つことができません。すでにブログの一覧ページがある場合、そのブログの新しい一覧ページを作成することはできません。
- 既存のブログリストページを編集するには、そのページにカーソルを合わせ、編集をクリックします。多言語のブログリストページにアクセスするには、主要なブログリストページの横にある下矢印をクリックします。downCarat下矢印をクリックすると、主要なブログリストページにアクセスできます。
- コンテンツエディターで、ドラッグ&ドロップ編集ツールを使って、ブログリストページを編集します。
- 表示されるモジュールは、お使いのテンプレートによって異なります。一般的なモジュールとしては、以下のようなものがあります:
- ブログタグフィルター:ブログ記事をタグで絞り込みします。
-
- ブログのページネーション:ブログの異なるページ間で訪問者を移動させるテキストを設定します。
- 掲載ページの設定を編集するには、ファイルメニューをクリックし、ページ設定を選択します。次に、ダイアログボックスでリスティングページの設定を編集します:
- HubSpotでのページ名の付け方を変更するには、ページ名を内部ページ名フィールドに入力します。この名前は訪問者には表示されない。
- ブログの公開名は、ページタイトルフィールドに表示されます。この名前は、ブログ設定のページタイトルフィールドで変更できます。
- 掲載ページのURLは、ページURLフィールドに表示されます。この名前は、ブログ設定のブログルートURLフィールドで変更できます。
- Meta descriptionフィールドには、検索結果でページタイトルの下に表示される、リスティングページのコンテンツの説明を入力します。
- ソーシャルシェアリング用の特集画像をリスティングページに追加するには、左サイドバーメニューのFeaturedimageタブをクリックします。Enabled featured imageスイッチをクリックしてオンに切り替え、Uploadをクリックしてブラウザーから画像を追加するか、Browse imagesをクリックしてfiles toolから画像を追加します。
- リスティングページのヘッドまたはフッターHTMLに追加のコードを追加するには、左サイドバーメニューの[Advanced]タブをクリックします。Head HTMLまたはFooter HTMLフィールドに、コード・スニペットを入力します。
-
変更を反映させるには、右上のUpdateをクリックし、ダイアログボックスのUpdate nowをクリックします。
掲載ページのテンプレートを変更する
- HubSpotアカウントにて、[マーケティング]>[ウェブサイト]>[ブログ]の順に進みます。
- 左上の「ブログ記事」ドロップダウンメニューをクリックし、「ブログリストページ」を選択します。
- ブログリストページにカーソルを合わせ、[編集]をクリックします。多言語のブログリストページにアクセスするには、主要なブログリストページの横にある下矢印をクリックします。downCarat下矢印をクリックすると、主要なブログリストページにアクセスできます。
- コンテンツエディターで、ファイルメニューをクリックし、ページ設定を選択します。
- ダイアログ・ボックスで、左サイドバーのTemplateをクリックする。
- テンプレート」セクションで、「別のテンプレートを使用する」をクリックします。
- テンプレート選択画面で、左サイドバーメニューのAll of your templatesをクリックし、テンプレートをクリックします。
- テンプレートのプレビュー画面で、右上の「テンプレートを使用する」をクリックします。
- コンテンツエディターで、テンプレートに何らかの変更を加える。
- 変更を反映させるには、右上のUpdateをクリックし、ダイアログボックスのUpdate nowをクリックします。
コード化されたブログ一覧ページのテンプレートを編集する
Marketing Hub Professional or Enterprise or CMS Hub Professional or Enterprise,では、HTML/HubL マークアップを使用するコード化されたブログ一覧ページテンプレートを作成できます。掲載ページのテンプレートには、レイアウトエディタでのモジュール編集をサポートするものもあれば、完全にコード化されたものもあります。
- HubSpotアカウントにて、メインのナビゲーションバーに表示される設定アイコンsettingsをクリックします。
- 左サイドバーのメニューから、「ウェブサイト> ブログ」に移動します。
- 複数のブログをお持ちの場合は、「修正するブログを選択」ドロップダウンメニューをクリックし、ブログを選択します。
- [テンプレート]タブをクリックします。
- ブログ一覧セクションで、アクションドロップダウンメニューをクリックし、編集を選択する。

- デザインマネージャーのレイアウトエディターで、モジュールをクリックし、右の列でそのオプションを編集します。
- 掲載テンプレートのブログ・コンテンツ・モジュールを編集するには、ブログ・コンテンツモジュールをクリックし、右列の掲載テンプレートの編集をクリックします。

- モジュールエディターで、リスティングテンプレートを編集します。HubLを使ってブログリストのテンプレートを編集する方法については、開発者向けドキュメントで詳しく説明しています。
- 右上で、Publish changesをクリックし、変更をライブにします。