ブログの [続きを読む] ボタンをカスタマイズする
更新日時 2020年 10月 19日
ブログ一覧ページの [続きを読む] ボタンの外観を変更すると、このボタンをスタンドアウトする場合に大変便利です。ボタンのデザインをカスタマイズしたり、[続きを読む] のテキストを編集したりする方法について説明します。
注: [続きを読む] ボタンの外観を編集するには、HTML に関する基本的な知識が必要です。カスタムデザインの作業に伴うサポートについては、デザインフォーラムで HubSpot デザイナーにお問い合わせください。
[続きを読む] ボタンの外観をカスタマイズする
[続きを読む] ボタンのルックアンドフィールをカスタマイズするには、[続きを読む] ボタンのスタイルを保持する CSS クラスを作成します。このクラスと任意のカスタムスタイルをスタイルシートに追加します。以下にスタイルの例を示します。
.read-more-btn{ background: blue; border-radius:10px; color: white; }
カスタムクラスを [続きを読む] ボタンに追加するには、次のようにします。
- ブログテンプレートに移動します。
- インスペクターでブログコンテンツモジュールをクリックしてそれを選択し、[記事テンプレート] セクションの下で [リスティングテンプレートを編集] をクリックして、リスティングページ HTML にアクセスします。
- リスティングテンプレート HTML で以下のコードを見つけます。
<a class="more-link" href="{{content.absolute_url}}">続きを読む</a
more-link
クラスを、新しいread-more-btn
クラスによって置換します。コードは次のようになります。
<a class="read-more-btn" href="{{content.absolute_url}}">続きを読む</a>
- [変更を公開] をクリックします。
[続きを読む] ボタンのテキストを編集する
ブログのリスティングページで各ブログ記事のプレビューが表示され、それぞれに対して、ブログ記事全体を開くための [続きを読む] リンクが表示されます。[続きを読む] のテキストを別の言語またはフレーズに変更するには、ブログのテンプレートを編集する必要があります。
- HubSpotアカウントにて、[マーケティング] > [ファイルとテンプレート] > [デザインツール]の順に進みます。
- ファインダーで、ブログテンプレートの名前をクリックします。
- テンプレートに移動したら、ブログコンテンツモジュールをクリックします。[編集] タブの下のインスペクターで、[リスティングテンプレートを編集] をクリックします。
- 行 55 の前後で次のコードを探します:
<a class="more-link" href="{{ content.absolute_url }}">続きを読む</a>
- [続きを読む]を編集して、ブログリストのページの各投稿プレビューに表示されるこのテキストをカスタマイズします。
- [変更を公開] をクリックします。
関連記事
-
HubSpotコンテンツに動画を追加する
HubSpot動画は、リッチ テキスト モジュール内のページ、ブログ記事、およびナレッジベース記事上のコンテンツに追加できます。HubSpot動画は、ドラッグ&ドロップ ページ エディターとドラッグ&ドロップ...
ナレッジベース -
非公開コンテンツにアクセスするためのメンバー登録を必須にする
公開権限を持つユーザーは、HubSpot上でホスティングされている特定のページ、ブログ記事、ナレッジベースの記事に、アクセス可能なコンタクトを指定できます。閲覧用のパスワード登録が必要な特定のコンテンツに、特定の...
ナレッジベース -
複数のサブドメインでコンテンツをホスティングする
複数のサブドメインで HubSpot コンテンツをホストする機能は、HubSpot サブスクリプションによります。 注:wwwサブドメインを接続するには、CMS Hubの契約が必要です。 Marketing Hub...
ナレッジベース