# 【Tips】ブログの「続きを読む」ボタンをカスタマイズする方法

**URL:** <https://community.hubspot.com/t/tips/32093>\
**Category:** Tips, Tricks & Best Practices\
**Tags:** professional, enterprise\
**Created:** [February 22, 2021, 1:10pm UTC](https://community.hubspot.com/t/tips/32093 "2021-02-22T13:10:40Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![vrneuman](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/vrneuman/32/5740_2.png) [@vrneuman](https://community.hubspot.com/u/vrneuman)\
**Post date:** [February 22, 2021, 1:10pm UTC](https://community.hubspot.com/t/tips/32093/1 "2021-02-22T13:10:40Z")

</div>

ブログ一覧ページの _[続きを読む]_ ボタンの外観をカスタマイズすることで、ボタンを見立たせることができます。ボタンのデザイン をカスタマイズしたり、_[続きを読む]_ のテキストを編集 したりする方法について説明します。

### [続きを読む] ボタンの外観をカスタマイズする

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

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

```

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

- [ブログテンプレート](https://knowledge.hubspot.com/jp/cos-blog/how-can-i-edit-my-blog-template)に移動します
- [インスペクター](https://knowledge.hubspot.com/jp/cos-general/use-the-inspector-to-style-your-template)で **ブログコンテンツモジュール** をクリックしてそれを選択し、_[記事テンプレート]_ セクションの下で **[リスティングテンプレートを編集]** をクリックして、リスティングページ 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>`

- **[変更を公開]** をクリックします。

### [続きを読む] ボタンのテキストを編集する

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

- {{ local.navDesignManager }}
- ファインダーで、ブログテンプレートの **名前** をクリックします。
- テンプレートに移動したら、 **ブログコンテンツ** モジュールをクリックします。_[編集]_ タブの下の[インスペクター](https://knowledge.hubspot.com/jp/cos-general/use-the-inspector-to-style-your-template)で、**[リスティングテンプレートを編集]** をクリックします。

 ![blog-content-listing-template.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/b/2/b277a85f8c4d795c82c15d9efefb6a8985f0fddd.png)

- 55行目前後で次のコードを探します:  
` <a class="more-link" href="{{ content.absolute_url }}">続きを読む</a>`
- _**[続きを読む]**_を編集して、ブログリスティングページの各投稿プレビューに表示されるテキストをカスタマイズします。
- **[変更を公開]** をクリックします。