ブログ一覧ページの [続きを読む] ボタンの外観をカスタマイズすることで、ボタンを見立たせることができます。ボタンのデザイン をカスタマイズしたり、[続きを読む] のテキストを編集 したりする方法について説明します。
[続きを読む] ボタンの外観をカスタマイズする
[続きを読む] ボタンの見た目をカスタマイズするには、[続きを読む] ボタンのスタイルを保持する 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>
- [変更を公開] をクリックします。
[続きを読む] ボタンのテキストを編集する
ブログのリスティングページで各ブログ記事のプレビューが表示され、それぞれに対して、ブログ記事全体を開くための [続きを読む] リンクが表示されます。[続きを読む] のテキストを別の言語またはフレーズに変更するには、ブログのテンプレートを編集する必要があります。
- {{ local.navDesignManager }}
- ファインダーで、ブログテンプレートの名前をクリックします。
- テンプレートに移動したら、ブログコンテンツモジュールをクリックします。[編集] タブの下のインスペクターで、[リスティングテンプレートを編集] をクリックします。
- 55行目前後で次のコードを探します:
<a class="more-link" href="{{ content.absolute_url }}">続きを読む</a> - [続きを読む]を編集して、ブログリスティングページの各投稿プレビューに表示されるテキストをカスタマイズします。
- [変更を公開] をクリックします。