気ままにアクアリウム

*

15.「もっと見る」ボタンを変更する。

      2014/06/02 6:40 pm    0

  • 「続きを読む」「記事を読む」「もっと見る」ボタンは右端の方が押しやすいと思い、変更しています。

「もっと見る」ボタンを変更する方法

(1)スタイルシート(style.css)に追記する。

①ボタンの位置を右端へ移動する。

②ボタンの角を丸くする。

③ボタンの色を変える。

.motto a {
	color: #FFF;
	text-decoration: none;
	background-color: #f3f3f3; /* ③ */
	width: 90px;
	color: #666666;
	text-align: center;
	display: block;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 5px;
	font-weight: normal;
}

.motto a {
	color: #FFF;
	text-decoration: none;
	background-color: #009C9E; /* ③ */
	width: 90px;
	color: #666666;
	text-align: center;
	display: block;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 5px;
	font-weight: normal;
	float: right;              /* ① */
	border-radius: 5px;        /* ② */
}

④カーソルを置いた際のボタンの色を変える。

.motto a:hover {
	color: #FFF;
	text-decoration: none;
	background-color: #FFAAAA; /* ④ */
	color: #FFF;
	text-align: center;
	display: block;
}

.motto a:hover {
	color: #FFF;
	text-decoration: none;
	background-color: #CF0; /* ④ */
	color: #FFF;
	text-align: center;
	display: block;
}

※color,background-color は#RGB指定(#CF0)や直接指定(royalblue)が可能です。好みの色等はRGB関連サイトでご確認ください。

以上です!

 

 - Stinger3 , , , , , ,

Shares