COS-Blog

[Read More(続きを読む)]ボタンの外観を変更する方法

更新日時 October 21, 2016

ブログ一覧ページの[Read More(続きを読む)]ボタンが目立つようにしたい場合は、ボタンの外観を変更すると効果的です。

Screen_Shot_2013-09-04_at_1.55.00_PM
  • [Read More(続きを読む)]ボタンのスタイルを指定するCSSクラスを作成します。このクラスと任意のカスタムスタイルをスタイルシートに追加します。例: 
.read-more-btn{
background: blue;
border-radius:10px;
color: white;
}
  • テンプレートビルダーを開き、ブログテンプレートを探します。ブログコンテンツのモジュールで、[Edit Listing Template(リストテンプレートを編集)]ボタンをクリックし、一覧ページのHTMLにアクセスします。

blog-listing-html.png

  • リストテンプレートのHTML内で次のコードを探します。
Read More

  • more-link」クラスを新しい「read-more-btn」クラスと置き換えます。置き換えるとコードは次のようになります。
Read More


read-more-code-1.png

  • [Publish Changes(変更を公開)]をクリックします。