[WordPress] 「続きを読む」をCSSでボタン化する



WordPressの続きを読むをCSSでボタン化する方法を紹介します。

「続きを読む」をCSSでボタン化

公式テンプレートTwenty Sixteenを例にして説明します。style.cssの最下部に以下のコードを追記します。

a.more-link{
	width: 120px;
	padding: 10px;
	color: #fff;
	background: #8cccdb;
	text-align: center;
	display: block;
	margin-top: 1.75em;

	/* 角を少し丸くする */
	border-radius: 3px;
	-webkit-border-radius: 3px; /* Safari, Chrome用 */
	-moz-border-radius: 3px; /* Firefox用 */
}
/* ホバー時にボタンを薄くする */
a.more-link:hover{
	background:#bfe8ef;
}

7-8行目は、キーワードで記事を検索した時に、文章が途中で途切れてpタグが閉じられずに「続きを読む」のボタンが文章の横に続くことがあり、そのレイアウトが崩れるのを防ぐためのものです。

Sample

続きを読む

さいごに

数値や色は好みに合わせて調整してください。

スポンサードリンク

関連記事