「続きを読む」ボタンのデザインをカスタマイズ

公開日 2014/06/21 更新日 2014/11/22

WordPressの醍醐味の一つ？であるだろうカスタマイズに着手しました。
巷ではSTINGERが有名らしいので、大して迷わず採用しました。
今日からSTINGERをベースに少しずつデザインを作っていこうかなと思っています。

Information

この記事はSTINGER v3用のカスタマイズです。STINGER v5では続きを読むボタンが無くなっており、この記事は適用されません。こちらの記事でv5での違いをまとめましたので、良かったらこちらもご覧ください。

最初の公開時から記事の内容を変更してます。詳細は末尾の変更暦に記載してます。

早速ですが、本日はエントリー一覧ページに並ぶ各エントリーの最後にある「続きを読む」ボタンのデザインをカスタマイズします。

Contents

1 やりたいこと
2 変更方法
3 最後に
4 変更暦
- 4.1 2014/9/20変更点の補足

やりたいこと

CSS BUTTONS WITH PSEUDO-ELEMENTS
このサイトで紹介されているCSSボタンを参考に…と言うか丸パクリします。

変更方法

WordPress管理画面 > 外観 > テーマ編集画面
を開いて「スタイルシート(style.css)」へ次のように変更します。

:
//★ここから[削除]
//.more-link {
//	font-size: 14px;
//	color: #5484C8;
//	text-decoration: underline;
//}
:
//★ここから[削除]
//.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:hover {
//	color: #FFF;
//	text-decoration: none;
//	background-color: #FFAAAA;
//	color: #FFF;
//	text-align: center;
//	display: block;
//}
:
//★ここから[削除]
//#container #wrap #wrap-in #main .post .sumbox02 #topnews div dl dd .basui .motto a {
//	font-weight: normal;
//	text-decoration: none;
//	font-size: 12px;
//	color: #666666;
//}
//#container #wrap #wrap-in #main .post .entry .entry-content .motto .more-link {
//	font-size: 12px;
//}
//#container #wrap #wrap-in #side #topnews .motto a {
//	font-size: 12px;
//}
//#container #wrap #wrap-in #main .post .sumbox02 #topnews div dl dd .basui .motto a:hover {
//	color: #FFF;
//}
:
//★ここから[削除]
//.post .sumbox02 #topnews div dl dd .motto {
//	font-size: 12px;
//	color: #666;
//}
//#main .post .sumbox02 #topnews div dl dd .motto a {
//	color: #666;
//}
:
#topnews div dl dd a {
	color: #1a1a1a;
	text-decoration: none;
}
//★ここから[追加]
#topnews div dl dd .motto a {
	color: #FFF;
}
#topnews div dl dd .motto a:active {
	color:#156785;
}
#topnews div dl dd .motto a:hover {
	color:#fff;
}
#topnews div dl dd .motto a:hover:active {
	color:#156785;
}
:
//★ここから[追加]
.motto {
	float: right;
	margin-bottom: 40px;
}
.motto a {
	background-color:#3bb3e0;
	padding:10px;
	position:relative;
	font-size:12px;
	text-decoration:none;
	color:#fff;
	background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
	background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
	background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0, rgb(44,160,202)),
	color-stop(1, rgb(62,184,229))
	);
	-webkit-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785;
	-moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785;
	-o-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785;
	box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
}
.motto a::before {
	color:#fff;
	background-color:#072239;
	content:"";
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	padding-left:2px;
	padding-right:2px;
	padding-bottom:4px;
	left:-2px;
	top:5px;
	z-index:-1;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-o-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: 0px 1px 0px #fff;
	-moz-box-shadow: 0px 1px 0px #fff;
	-o-box-shadow: 0px 1px 0px #fff;
	box-shadow: 0px 1px 0px #fff;
}
.motto a:active {
	color:#156785;
	text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
	background:rgb(44,160,202);
	-webkit-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
	-moz-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
	-o-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
	box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
	top:7px;
}
.motto a:active::before {
	top:-2px;
}
.motto a:hover {
	color:#fff;
}
.motto a:hover:active {
	color:#156785;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

//★ここから[削除]

//.more-link {

// font-size: 14px;

// color: #5484C8;

// text-decoration: underline;

//}

//★ここから[削除]

//.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:hover {

// color: #FFF;

// text-decoration: none;

// background-color: #FFAAAA;

// color: #FFF;

// text-align: center;

// display: block;

//}

//★ここから[削除]

//#container #wrap #wrap-in #main .post .sumbox02 #topnews div dl dd .basui .motto a {

// font-weight: normal;

// text-decoration: none;

// font-size: 12px;

// color: #666666;

//}

//#container #wrap #wrap-in #main .post .entry .entry-content .motto .more-link {

// font-size: 12px;

//}

//#container #wrap #wrap-in #side #topnews .motto a {

// font-size: 12px;

//}

//#container #wrap #wrap-in #main .post .sumbox02 #topnews div dl dd .basui .motto a:hover {

// color: #FFF;

//}

//★ここから[削除]

//.post .sumbox02 #topnews div dl dd .motto {

// font-size: 12px;

// color: #666;

//}

//#main .post .sumbox02 #topnews div dl dd .motto a {

// color: #666;

//}

#topnews div dl dd a {

color: #1a1a1a;

text-decoration: none;

}

//★ここから[追加]

#topnews div dl dd .motto a {

color: #FFF;

}

#topnews div dl dd .motto a:active {

color:#156785;

}

#topnews div dl dd .motto a:hover {

color:#fff;

}

#topnews div dl dd .motto a:hover:active {

color:#156785;

}

//★ここから[追加]

.motto {

float: right;

margin-bottom: 40px;

}

.motto a {

background-color:#3bb3e0;

padding:10px;

position:relative;

font-size:12px;

text-decoration:none;

color:#fff;

background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);

background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);

background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);

background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);

background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);

background-image: -webkit-gradient(

linear,

left bottom,

left top,

color-stop(0, rgb(44,160,202)),

color-stop(1, rgb(62,184,229))

);

-webkit-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785;

-moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785;

-o-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785;

box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

-o-border-radius: 5px;

border-radius: 5px;

}

.motto a::before {

color:#fff;

background-color:#072239;

content:"";

display:block;

position:absolute;

width:100%;

height:100%;

padding-left:2px;

padding-right:2px;

padding-bottom:4px;

left:-2px;

top:5px;

z-index:-1;

-webkit-border-radius: 6px;

-moz-border-radius: 6px;

-o-border-radius: 6px;

border-radius: 6px;

-webkit-box-shadow: 0px 1px 0px #fff;

-moz-box-shadow: 0px 1px 0px #fff;

-o-box-shadow: 0px 1px 0px #fff;

box-shadow: 0px 1px 0px #fff;

}

.motto a:active {

color:#156785;

text-shadow: 0px 1px 1px rgba(255,255,255,0.3);

background:rgb(44,160,202);

-webkit-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;

-moz-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;

-o-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;

box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;

top:7px;

}

.motto a:active::before {

top:-2px;

}

.motto a:hover {

color:#fff;

}

.motto a:hover:active {

color:#156785;

}

これを保存してあげて、サイトを更新すればボタンの形状が立体的なものになっているかと思います。

最後に

もともとボタンデザインといえば、いつもならBootstrapのお手軽感が好きで
今回もBootstrapで行こうとしてましたが、どうもSTINGERテンプレートとの相性が悪いようで
Bootstrapを組み込もうとすると体裁が崩れてしまいました。

そのため、自力でCSSを使ったボタンデザインに切り替えることになったというのが背景にありました。
不慣れということもあり、やり方の模索に手間を取ってしまいましたが、結果として
困ったときはまずインターネット検索という基本動作に従って、無事便利なCSSデザインを見つけることが出来ました。

変更暦

2014/6/21 初版
2014/9/20 phpファイルへの変更は廃止、「関連記事」のスタイルが正しくなかったので修正。
2014/9/29 STINGER v5では「続きを読む」ボタンがなくなったため、本記事は廃止とします。

2014/9/20変更点の補足

phpファイルの次の修正は廃止してSTINGERオリジナルのタグ表記に戻しました。

<!-- 変更前 -->
<p class="motto"><a class="more-link" href="<?php the_permalink() ?>">続きを見る</a></p>
<!-- 変更後 -->
<div class="button_box"><a class="button" href="<?php the_permalink() ?>">続きを見る</a></div>