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

ブログの [続きを読む] ボタンをカスタマイズする

更新日時 2020年 10月 19日

ブログ一覧ページの [続きを読む] ボタンの外観を変更すると、このボタンをスタンドアウトする場合に大変便利です。ボタンのデザインをカスタマイズしたり、[続きを読む] のテキストを編集したりする方法について説明します。

注: [続きを読む] ボタンの外観を編集するには、HTML に関する基本的な知識が必要です。カスタムデザインの作業に伴うサポートについては、デザインフォーラムで HubSpot デザイナーにお問い合わせください。

[続きを読む] ボタンのルックアンドフィールをカスタマイズするには、[続きを読む] ボタンのスタイルを保持する CSS クラスを作成します。このクラスと任意のカスタムスタイルをスタイルシートに追加します。以下にスタイルの例を示します。

.read-more-btn{
background: blue;
border-radius:10px;
color: white;
}

カスタムクラスを [続きを読む] ボタンに追加するには、次のようにします。

ブログテンプレートに移動します。
インスペクターでブログコンテンツモジュールをクリックしてそれを選択し、[記事テンプレート] セクションの下で [リスティングテンプレートを編集] をクリックして、リスティングページ HTML にアクセスします。

<a class="more-link" href="{{content.absolute_url}}">続きを読む</a

<a class="read-more-btn" href="{{content.absolute_url}}">続きを読む</a>

ブログのリスティングページで各ブログ記事のプレビューが表示され、それぞれに対して、ブログ記事全体を開くための [続きを読む] リンクが表示されます。[続きを読む] のテキストを別の言語またはフレーズに変更するには、ブログのテンプレートを編集する必要があります。

HubSpotアカウントにて、［マーケティング］ > ［ファイルとテンプレート］ > ［デザインツール］の順に進みます。
ファインダーで、ブログテンプレートの名前をクリックします。
テンプレートに移動したら、ブログコンテンツモジュールをクリックします。[編集] タブの下のインスペクターで、[リスティングテンプレートを編集] をクリックします。

行 55 の前後で次のコードを探します:

 <a class="more-link" href="{{ content.absolute_url }}">続きを読む</a>