【トール】『続きを読む』ボタンのデザインを変える

このサイトのデザインを気に入ってくださった方がいたら嬉しいです。

このブログは、有料テーマ【トール】を、カスタマイズしています!

カスタマイズするためのCSSをご紹介しています。コードや設定を変更するときは、バックアップをとって、自己責任で行ってくださいね

『続きを読む』ボタンのCSS

記事の一覧ページで表示されている「続きを読む」ボタンは、表示または非表示を選ぶことができます。

そして、このボタンは、CSSを追加してデザインの変更をすることもできます。

デザインの一例をご紹介します。

お好みに調整してお使いください。

/*続きを読むボタン*/
.btn__link.btn__link-normal {
	background:#ffffff;/*ボタン色*/
	border-radius:15px;/*ボタンの丸み*/
	border:#58a9ef solid 1px;/*ボタン枠の色*/
	color: #58a9ef;/*文字色*/
	font-weight:bold;/*文字の太さ*/
	padding: 10px 15px 10px 15px;/*ボタン内側の上下左右の余白*/
}

/*「続きを読む」の後ろについてくる記号を消す*/
.btn__link.btn__link-normal::before {
	content: none; /* 記号を消す */
}

/*モバイルのときのボタン内の余白*/
@media only screen and (max-width: 768px) { 
	.btn__link.btn__link-normal {
		padding: 8px 13px 8px 13px;
	}
}

/*続きを読むボタンのホバー*/
.btn a:hover{
	background:#58a9ef;/*ボタン色*/
	color:#fff;/*文字色*/
	font-weight:bold;/*文字の太さ*/
}

「続きを読む」は別の言葉やアイコンにも変更できます。本来ならワードプレスのfunctionファイルに追記するところですが、【トール】だと変更が簡単ですね。

別の言葉への変更方法は、ワードプレスのダッシュボードメニューから、【外観】→【カスタマイズ】→【アーカイブページ設定】→【記事一覧リスト設定】→【続きを読むのボタン表記を変更・・・】から行えます。