WordPress テーマ「ストーク（STORK）」のおすすめのカスタマイズ方法

WordPress テーマ「ストーク（STORK）」をカスタマイズしてえな！

ブロガーの間で人気のワードプレステーマとして知られるWordPressテーマ「ストーク」。

こちらはOPENCAGE（オープンケージ）さんが作っている WordPressテーマの1つ。

僕も気に入っていて、いくつかのサイトで採用させてもらっていて、機能だけでなく見栄えもおしゃれなので大変満足しています。

しかしながら、このストークと呼ばれるテーマをデフォルトの状態で使うのはちょっと気がひける。。

デフォルトで使うとまず他のブロガーたちと被ってしまいますし、自分の好みには合っていないデザインや機能もあるので、

ある程度カスタマイズして使うようにしています。

ストーク（STORK）のおすすめのカスタマイズ方法

人によって色々なカスタマイズの方法があると思いますが、僕は次のようにカスタマイズをするようにしています。

カスタマイズする際は元ファイルの内容をバックアップ取っておきましょう。特にphpファイルの編集は一歩間違うとWordPressが機能しなくなってしまうので注意です

アイキャッチ画像を非表示にする

まず記事の冒頭のアイキャッチ画像を非表示にするようにしています。

確かにアイキャッチ画像があった方が、記事を読む前に内容をイメージしやすく、読者にとって嬉しいかもしれません。

しかしながら、アイキャッチ画像を記事中に表示していると、次のようなデメリットがあります。

アイキャッチ画像を記事ごとに毎回必ず作らなければならない
記事を読み込むスピードが遅くなる

そのため、僕は記事ごとにアイキャッチ画像を設定するものの、記事中にはアイキャッチ画像を表示しないようにしています。

このように設定したいときは、個別記事のPHP ファイルに当たる single.phpのこの部分を削除してやるといいですね。

<?php if ( has_post_thumbnail() && !get_option( 'post_options_eyecatch' ) ) :?>
<figure class="eyecatch">
<?php the_post_thumbnail(); ?>
</figure>
<?php endif; ?>

<?php if ( has_post_thumbnail() && !get_option( 'post_options_eyecatch' ) ) :?>

<?php the_post_thumbnail(); ?>

</figure>

<?php endif; ?>

リストを太字にする

僕は個人的に箇条書きの文字は太字でコントラストをつけたい派です。

箇条書きを記事の中でアクセントとして使っているので、普通の段落の文字とは区別するようなデザインを好んでいます。

ストークのデフォルトデザインでは、箇条書きの文字も段落の文字と同じ太さになっているので、若干見づらい。。。

そのため、僕はリストの箇条書きの2種類（ul とolのli要素）の文字のフォントスタイルをボールドに設定しています。

CSS で書くと次のような感じですね↓

.entry-content ol li{
  font-weight: bold;
}


.entry-content ul li{
  font-weight: bold;
}

.entry-content ol li{

font-weight: bold;

}

.entry-content ul li{

font-weight: bold;

}

こいつをstyle.cssの一番下に追加しておきます。

冒頭の SNS シェアを削除

またアイキャッチ画像に加えて、記事の冒頭に SNS のシェアボタンがデフォルトで用意されています。

デフォルトのデザインでは SNS のシェアボタンは、

記事の冒頭
記事の終わり

の2箇所にあるので、1記事あたりに2箇所シェアボタンが設置されています。

僕の記事は残念ながらあまりシェアされないので、冒頭のシェアボタンは意味がないと考えております笑

まあ、記事下にシェアボタンあればいいっしょ、っていう。

ということで、ぼくがおすすめなカスタマイズは冒頭の SNS ボタンは削除するスタイル。

single.phpの冒頭の

<?php if ( !get_option( 'sns_options_hide' ) ) : ?>
<?php get_template_part( 'parts_sns_short' ); ?>
<?php endif; ?>

<?php if ( !get_option( 'sns_options_hide' ) ) : ?>

<?php get_template_part( 'parts_sns_short' ); ?>

<?php endif; ?>

という記述を削除してやれば SNS ボタンは消えると思います。

カエレバ・ヨメレバのデザイン

これはむちゃくちゃ個人的な事なんですが、アフィリエイト Amazon や楽天のアフィリエイトリンクを貼る時はカエレバ・ヨメレバというツールを使っています。

FREE SWORDER

物販アフィリエイトに便利！カエレバの使い方

https://freesworder.net/kaereba/

物販アフィリエイトに便利なカエレバを使ってみようどうも、Linです。西日を、受けてきました。 WordPressなどでブログを運営していると、ECサイトで購入した商品をアフィリエイトで紹介したい・・・・！という瞬間があるでしょう。Amazonの商品だけならば「Ama...

そのツールを使ってリンクを貼る時にお洒落に見えるようなデザインを予めストークにカスタマイズするようにしていますよ。

僕は次のCSS コードを追加でstyle.cssに書いてますね、下の方に。

/*=================================================================================
	カエレバ・ヨメレバ・トマレバ
=================================================================================*/
 
.cstmreba {
	width:98%;
	height:auto;
	margin:36px auto;
	font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Helvetica, Meiryo, sans-serif;
	line-height: 1.5;
	word-wrap: break-word;
	box-sizing: border-box;
	display: block;
}
.cstmreba a {
	transition: 0.8s ;
	color:#285EFF; /* テキストリンクカラー */
}
.cstmreba a:hover {
	color:#FFCA28; /* テキストリンクカラー(マウスオーバー時) */
}
.cstmreba .booklink-box,
.cstmreba .kaerebalink-box,
.cstmreba .tomarebalink-box {
	width: 100%;
	background-color: #fafafa; /* 全体の背景カラー */
	overflow: hidden;
	border-radius: 0px;
	box-sizing: border-box;
	padding: 12px 8px;
	box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
}
/* サムネイル画像ボックス */
.cstmreba .booklink-image,
.cstmreba .kaerebalink-image,
.cstmreba .tomarebalink-image {
	width:150px;
	float:left;
	margin:0 14px 0 0;
	text-align: center;
	background: #fff;
}
.cstmreba .booklink-image a,
.cstmreba .kaerebalink-image a,
.cstmreba .tomarebalink-image a {
	width:100%;
	display:block;
}
.cstmreba .booklink-image a img,
.cstmreba .kaerebalink-image a img,
.cstmreba .tomarebalink-image a img {
	margin:0 ;
	padding: 0;
	text-align:center;
	background: #fff;
}
.cstmreba .booklink-info,.cstmreba .kaerebalink-info,.cstmreba .tomarebalink-info {
	overflow:hidden;
	line-height:170%;
	color: #333;
}
/* infoボックス内リンク下線非表示 */
.cstmreba .booklink-info a,
.cstmreba .kaerebalink-info a,
.cstmreba .tomarebalink-info a {
	text-decoration: none;
}
/* 作品・商品・ホテル名 リンク */
.cstmreba .booklink-name>a,
.cstmreba .kaerebalink-name>a,
.cstmreba .tomarebalink-name>a {
	border-bottom: 1px solid ;
	font-size:16px;
}
/* タイトル下にPタグ自動挿入された際の余白を小さく */
.cstmreba .kaerebalink-name p,
.cstmreba .booklink-name p,
.cstmreba .tomarebalink-name p {
    margin: 0;
}
/* powered by */
.cstmreba .booklink-powered-date,
.cstmreba .kaerebalink-powered-date,
.cstmreba .tomarebalink-powered-date {
	font-size:10px;
	line-height:150%;
}
.cstmreba .booklink-powered-date a,
.cstmreba .kaerebalink-powered-date a,
.cstmreba .tomarebalink-powered-date a {
	color:#333;
	border-bottom: none ;
}
.cstmreba .booklink-powered-date a:hover,
.cstmreba .kaerebalink-powered-date a:hover,
.cstmreba .tomarebalink-powered-date a:hover {
	color:#333;
	border-bottom: 1px solid #333 ;
}
/* 著者・住所 */
.cstmreba .booklink-detail,.cstmreba .kaerebalink-detail,.cstmreba .tomarebalink-address {
	font-size:12px;
}
.cstmreba .kaerebalink-link1 div img,.cstmreba .booklink-link2 div img,.cstmreba .tomarebalink-link1 div img {
	display:none !important;
}
.cstmreba .kaerebalink-link1, .cstmreba .booklink-link2,.cstmreba .tomarebalink-link1 {
	display: inline-block;
	width: 100%;
	margin-top: 5px;
}
.cstmreba .booklink-link2>div,
.cstmreba .kaerebalink-link1>div,
.cstmreba .tomarebalink-link1>div {
	float:left;
	width:24%;
	min-width:128px;
	margin:0.5%;
}
/***** ボタンデザインここから ******/
.cstmreba .booklink-link2 a,
.cstmreba .kaerebalink-link1 a,
.cstmreba .tomarebalink-link1 a {
	width: 100%;
	display: inline-block;
	text-align: center;
	box-sizing: border-box;
	margin: 1px 0;
	padding:3% 0.5%;
	border-radius: 8px;
	font-size: 13px;
	font-weight: bold;
	line-height: 180%;
	color: #fff;
	box-shadow: 0px 2px 4px 0 rgba(0,0,0,.26);
}
/* トマレバ */
.cstmreba .tomarebalink-link1 .shoplinkrakuten a {background: #76ae25; border: 2px solid #76ae25; }/* 楽天トラベル */
.cstmreba .tomarebalink-link1 .shoplinkjalan a { background: #ff7a15; border: 2px solid #ff7a15;}/* じゃらん */
.cstmreba .tomarebalink-link1 .shoplinkjtb a { background: #c81528; border: 2px solid #c81528;}/* JTB */
.cstmreba .tomarebalink-link1 .shoplinkknt a { background: #0b499d; border: 2px solid #0b499d;}/* KNT */
.cstmreba .tomarebalink-link1 .shoplinkikyu a { background: #bf9500; border: 2px solid #bf9500;}/* 一休 */
.cstmreba .tomarebalink-link1 .shoplinkrurubu a { background: #000066; border: 2px solid #000066;}/* るるぶ */
.cstmreba .tomarebalink-link1 .shoplinkyahoo a { background: #ff0033; border: 2px solid #ff0033;}/* Yahoo!トラベル */
.cstmreba .tomarebalink-link1 .shoplinkhis a { background: #004bb0; border: 2px solid #004bb0;}/*** HIS ***/
/* カエレバ */
.cstmreba .kaerebalink-link1 .shoplinkyahoo a {background:#ff0033; border:2px solid #ff0033; letter-spacing:normal;} /* Yahoo!ショッピング */
.cstmreba .kaerebalink-link1 .shoplinkbellemaison a { background:#84be24 ; border: 2px solid #84be24;}	/* ベルメゾン */
.cstmreba .kaerebalink-link1 .shoplinkcecile a { background:#8d124b; border: 2px solid #8d124b;} /* セシール */
.cstmreba .kaerebalink-link1 .shoplinkkakakucom a {background:#314995; border: 2px solid #314995;} /* 価格コム */
/* ヨメレバ */
.cstmreba .booklink-link2 .shoplinkkindle a { background:#007dcd; border: 2px solid #007dcd;} /* Kindle */
.cstmreba .booklink-link2 .shoplinkrakukobo a { background:#bf0000; border: 2px solid #bf0000;} /* 楽天kobo */
.cstmreba .booklink-link2  .shoplinkbk1 a { background:#0085cd; border: 2px solid #0085cd;} /* honto */
.cstmreba .booklink-link2 .shoplinkehon a { background:#2a2c6d; border: 2px solid #2a2c6d;} /* ehon */
.cstmreba .booklink-link2 .shoplinkkino a { background:#003e92; border: 2px solid #003e92;} /* 紀伊國屋書店 */
.cstmreba .booklink-link2 .shoplinktoshokan a { background:#333333; border: 2px solid #333333;} /* 図書館 */
/* カエレバ・ヨメレバ共通 */
.cstmreba .kaerebalink-link1 .shoplinkamazon a,
.cstmreba .booklink-link2 .shoplinkamazon a {
	background:#FF9901;
	border: 2px solid #ff9901;
} /* Amazon */
.cstmreba .kaerebalink-link1 .shoplinkrakuten a,
.cstmreba .booklink-link2 .shoplinkrakuten a {
	background: #bf0000;
	border: 2px solid #bf0000;
} /* 楽天 */
.cstmreba .kaerebalink-link1 .shoplinkseven a,
.cstmreba .booklink-link2 .shoplinkseven a {
	background:#225496;
	border: 2px solid #225496;
} /* 7net */
/****** ボタンカラー ここまで *****/
 
/***** ボタンデザイン　マウスオーバー時ここから *****/
.cstmreba .booklink-link2 a:hover,
.cstmreba .kaerebalink-link1 a:hover,
.cstmreba .tomarebalink-link1 a:hover {
	background: #fff;
}
/* トマレバ */
.cstmreba .tomarebalink-link1 .shoplinkrakuten a:hover { color: #76ae25; }/* 楽天トラベル */
.cstmreba .tomarebalink-link1 .shoplinkjalan a:hover { color: #ff7a15; }/* じゃらん */
.cstmreba .tomarebalink-link1 .shoplinkjtb a:hover { color: #c81528; }/* JTB */
.cstmreba .tomarebalink-link1 .shoplinkknt a:hover { color: #0b499d; }/* KNT */
.cstmreba .tomarebalink-link1 .shoplinkikyu a:hover { color: #bf9500; }/* 一休 */
.cstmreba .tomarebalink-link1 .shoplinkrurubu a:hover { color: #000066; }/* るるぶ */
.cstmreba .tomarebalink-link1 .shoplinkyahoo a:hover { color: #ff0033; }/* Yahoo!トラベル */
.cstmreba .tomarebalink-link1 .shoplinkhis a:hover { color: #004bb0; }/*** HIS ***/
/* カエレバ */
.cstmreba .kaerebalink-link1 .shoplinkyahoo a:hover {color:#ff0033;} /* Yahoo!ショッピング */
.cstmreba .kaerebalink-link1 .shoplinkbellemaison a:hover { color:#84be24 ; }	/* ベルメゾン */
.cstmreba .kaerebalink-link1 .shoplinkcecile a:hover { color:#8d124b; } /* セシール */
.cstmreba .kaerebalink-link1 .shoplinkkakakucom a:hover {color:#314995;} /* 価格コム */
/* ヨメレバ */
.cstmreba .booklink-link2 .shoplinkkindle a:hover { color:#007dcd;} /* Kindle */
.cstmreba .booklink-link2 .shoplinkrakukobo a:hover { color:#bf0000; } /* 楽天kobo */
.cstmreba .booklink-link2 .shoplinkbk1 a:hover { color:#0085cd; } /* honto */
.cstmreba .booklink-link2 .shoplinkehon a:hover { color:#2a2c6d; } /* ehon */
.cstmreba .booklink-link2 .shoplinkkino a:hover { color:#003e92; } /* 紀伊國屋書店 */
.cstmreba .booklink-link2 .shoplinktoshokan a:hover { color:#333333; } /* 図書館 */
/* カエレバ・ヨメレバ共通 */
.cstmreba .kaerebalink-link1 .shoplinkamazon a:hover,
.cstmreba .booklink-link2 .shoplinkamazon a:hover {
	color:#FF9901; } /* Amazon */
.cstmreba .kaerebalink-link1 .shoplinkrakuten a:hover,
.cstmreba .booklink-link2 .shoplinkrakuten a:hover {
	color: #bf0000; } /* 楽天 */
.cstmreba .kaerebalink-link1 .shoplinkseven a:hover,
.cstmreba .booklink-link2 .shoplinkseven a:hover {
	color:#225496;} /* 7net */
/***** ボタンデザイン　マウスオーバー時ここまで *****/
.cstmreba .booklink-footer {
	clear:both;
}
 
/*****  解像度768px以下のスタイル *****/
@media screen and (max-width:768px){
	.cstmreba .booklink-image,
	.cstmreba .kaerebalink-image,
	.cstmreba .tomarebalink-image {
		width:100%;
		float:none;
	}
	.cstmreba .booklink-link2>div,
	.cstmreba .kaerebalink-link1>div,
	.cstmreba .tomarebalink-link1>div {
		width: 32.33%;
		margin: 0.5%;
	}
	.cstmreba .booklink-info,
	.cstmreba .kaerebalink-info,
	.cstmreba .tomarebalink-info {
	  text-align:center;
	  padding-bottom: 1px;
	}
}
 
/*****  解像度480px以下のスタイル *****/
@media screen and (max-width:480px){
	.cstmreba .booklink-link2>div,
	.cstmreba .kaerebalink-link1>div,
	.cstmreba .tomarebalink-link1>div {
		width: 49%;
		margin: 0.5%;
	}
}

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

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

/*=================================================================================

カエレバ・ヨメレバ・トマレバ

=================================================================================*/

.cstmreba {

width:98%;

height:auto;

margin:36px auto;

font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Helvetica, Meiryo, sans-serif;

line-height: 1.5;

word-wrap: break-word;

box-sizing: border-box;

display: block;

}

.cstmreba a {

transition: 0.8s ;

color:#285EFF; /* テキストリンクカラー */

}

.cstmreba a:hover {

color:#FFCA28; /* テキストリンクカラー(マウスオーバー時) */

}

.cstmreba .booklink-box,

.cstmreba .kaerebalink-box,

.cstmreba .tomarebalink-box {

width: 100%;

background-color: #fafafa; /* 全体の背景カラー */

overflow: hidden;

border-radius: 0px;

box-sizing: border-box;

padding: 12px 8px;

box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);

}

/* サムネイル画像ボックス */

.cstmreba .booklink-image,

.cstmreba .kaerebalink-image,

.cstmreba .tomarebalink-image {

width:150px;

float:left;

margin:0 14px 0 0;

text-align: center;

background: #fff;

}

.cstmreba .booklink-image a,

.cstmreba .kaerebalink-image a,

.cstmreba .tomarebalink-image a {

width:100%;

display:block;

}

.cstmreba .booklink-image a img,

.cstmreba .kaerebalink-image a img,

.cstmreba .tomarebalink-image a img {

margin:0 ;

padding: 0;

text-align:center;

background: #fff;

}

.cstmreba .booklink-info,.cstmreba .kaerebalink-info,.cstmreba .tomarebalink-info {

overflow:hidden;

line-height:170%;

color: #333;

}

/* infoボックス内リンク下線非表示 */

.cstmreba .booklink-info a,

.cstmreba .kaerebalink-info a,

.cstmreba .tomarebalink-info a {

text-decoration: none;

}

/* 作品・商品・ホテル名リンク */

.cstmreba .booklink-name>a,

.cstmreba .kaerebalink-name>a,

.cstmreba .tomarebalink-name>a {

border-bottom: 1px solid ;

font-size:16px;

}

/* タイトル下にPタグ自動挿入された際の余白を小さく */

.cstmreba .kaerebalink-name p,

.cstmreba .booklink-name p,

.cstmreba .tomarebalink-name p {

margin: 0;

}

/* powered by */

.cstmreba .booklink-powered-date,

.cstmreba .kaerebalink-powered-date,

.cstmreba .tomarebalink-powered-date {

font-size:10px;

line-height:150%;

}

.cstmreba .booklink-powered-date a,

.cstmreba .kaerebalink-powered-date a,

.cstmreba .tomarebalink-powered-date a {

color:#333;

border-bottom: none ;

}

.cstmreba .booklink-powered-date a:hover,

.cstmreba .kaerebalink-powered-date a:hover,

.cstmreba .tomarebalink-powered-date a:hover {

color:#333;

border-bottom: 1px solid #333 ;

}

/* 著者・住所 */

.cstmreba .booklink-detail,.cstmreba .kaerebalink-detail,.cstmreba .tomarebalink-address {

font-size:12px;

}

.cstmreba .kaerebalink-link1 div img,.cstmreba .booklink-link2 div img,.cstmreba .tomarebalink-link1 div img {

display:none !important;

}

.cstmreba .kaerebalink-link1, .cstmreba .booklink-link2,.cstmreba .tomarebalink-link1 {

display: inline-block;

width: 100%;

margin-top: 5px;

}

.cstmreba .booklink-link2>div,

.cstmreba .kaerebalink-link1>div,

.cstmreba .tomarebalink-link1>div {

float:left;

width:24%;

min-width:128px;

margin:0.5%;

}

/***** ボタンデザインここから ******/

.cstmreba .booklink-link2 a,

.cstmreba .kaerebalink-link1 a,

.cstmreba .tomarebalink-link1 a {

width: 100%;

display: inline-block;

text-align: center;

box-sizing: border-box;

margin: 1px 0;

padding:3% 0.5%;

border-radius: 8px;

font-size: 13px;

font-weight: bold;

line-height: 180%;

color: #fff;

box-shadow: 0px 2px 4px 0 rgba(0,0,0,.26);

}

/* トマレバ */

.cstmreba .tomarebalink-link1 .shoplinkrakuten a {background: #76ae25; border: 2px solid #76ae25; }/* 楽天トラベル */

.cstmreba .tomarebalink-link1 .shoplinkjalan a { background: #ff7a15; border: 2px solid #ff7a15;}/* じゃらん */

.cstmreba .tomarebalink-link1 .shoplinkjtb a { background: #c81528; border: 2px solid #c81528;}/* JTB */

.cstmreba .tomarebalink-link1 .shoplinkknt a { background: #0b499d; border: 2px solid #0b499d;}/* KNT */

.cstmreba .tomarebalink-link1 .shoplinkikyu a { background: #bf9500; border: 2px solid #bf9500;}/* 一休 */

.cstmreba .tomarebalink-link1 .shoplinkrurubu a { background: #000066; border: 2px solid #000066;}/* るるぶ */

.cstmreba .tomarebalink-link1 .shoplinkyahoo a { background: #ff0033; border: 2px solid #ff0033;}/* Yahoo!トラベル */

.cstmreba .tomarebalink-link1 .shoplinkhis a { background: #004bb0; border: 2px solid #004bb0;}/*** HIS ***/

/* カエレバ */

.cstmreba .kaerebalink-link1 .shoplinkyahoo a {background:#ff0033; border:2px solid #ff0033; letter-spacing:normal;} /* Yahoo!ショッピング */

.cstmreba .kaerebalink-link1 .shoplinkbellemaison a { background:#84be24 ; border: 2px solid #84be24;} /* ベルメゾン */

.cstmreba .kaerebalink-link1 .shoplinkcecile a { background:#8d124b; border: 2px solid #8d124b;} /* セシール */

.cstmreba .kaerebalink-link1 .shoplinkkakakucom a {background:#314995; border: 2px solid #314995;} /* 価格コム */

/* ヨメレバ */

.cstmreba .booklink-link2 .shoplinkkindle a { background:#007dcd; border: 2px solid #007dcd;} /* Kindle */

.cstmreba .booklink-link2 .shoplinkrakukobo a { background:#bf0000; border: 2px solid #bf0000;} /* 楽天kobo */

.cstmreba .booklink-link2 .shoplinkbk1 a { background:#0085cd; border: 2px solid #0085cd;} /* honto */

.cstmreba .booklink-link2 .shoplinkehon a { background:#2a2c6d; border: 2px solid #2a2c6d;} /* ehon */

.cstmreba .booklink-link2 .shoplinkkino a { background:#003e92; border: 2px solid #003e92;} /* 紀伊國屋書店 */

.cstmreba .booklink-link2 .shoplinktoshokan a { background:#333333; border: 2px solid #333333;} /* 図書館 */

/* カエレバ・ヨメレバ共通 */

.cstmreba .kaerebalink-link1 .shoplinkamazon a,

.cstmreba .booklink-link2 .shoplinkamazon a {

background:#FF9901;

border: 2px solid #ff9901;

} /* Amazon */

.cstmreba .kaerebalink-link1 .shoplinkrakuten a,

.cstmreba .booklink-link2 .shoplinkrakuten a {

background: #bf0000;

border: 2px solid #bf0000;

} /* 楽天 */

.cstmreba .kaerebalink-link1 .shoplinkseven a,

.cstmreba .booklink-link2 .shoplinkseven a {

background:#225496;

border: 2px solid #225496;

} /* 7net */

/****** ボタンカラーここまで *****/

/***** ボタンデザイン　マウスオーバー時ここから *****/

.cstmreba .booklink-link2 a:hover,

.cstmreba .kaerebalink-link1 a:hover,

.cstmreba .tomarebalink-link1 a:hover {

background: #fff;

}

/* トマレバ */

.cstmreba .tomarebalink-link1 .shoplinkrakuten a:hover { color: #76ae25; }/* 楽天トラベル */

.cstmreba .tomarebalink-link1 .shoplinkjalan a:hover { color: #ff7a15; }/* じゃらん */

.cstmreba .tomarebalink-link1 .shoplinkjtb a:hover { color: #c81528; }/* JTB */

.cstmreba .tomarebalink-link1 .shoplinkknt a:hover { color: #0b499d; }/* KNT */

.cstmreba .tomarebalink-link1 .shoplinkikyu a:hover { color: #bf9500; }/* 一休 */

.cstmreba .tomarebalink-link1 .shoplinkrurubu a:hover { color: #000066; }/* るるぶ */

.cstmreba .tomarebalink-link1 .shoplinkyahoo a:hover { color: #ff0033; }/* Yahoo!トラベル */

.cstmreba .tomarebalink-link1 .shoplinkhis a:hover { color: #004bb0; }/*** HIS ***/

/* カエレバ */

.cstmreba .kaerebalink-link1 .shoplinkyahoo a:hover {color:#ff0033;} /* Yahoo!ショッピング */

.cstmreba .kaerebalink-link1 .shoplinkbellemaison a:hover { color:#84be24 ; } /* ベルメゾン */

.cstmreba .kaerebalink-link1 .shoplinkcecile a:hover { color:#8d124b; } /* セシール */

.cstmreba .kaerebalink-link1 .shoplinkkakakucom a:hover {color:#314995;} /* 価格コム */

/* ヨメレバ */

.cstmreba .booklink-link2 .shoplinkkindle a:hover { color:#007dcd;} /* Kindle */

.cstmreba .booklink-link2 .shoplinkrakukobo a:hover { color:#bf0000; } /* 楽天kobo */

.cstmreba .booklink-link2 .shoplinkbk1 a:hover { color:#0085cd; } /* honto */

.cstmreba .booklink-link2 .shoplinkehon a:hover { color:#2a2c6d; } /* ehon */

.cstmreba .booklink-link2 .shoplinkkino a:hover { color:#003e92; } /* 紀伊國屋書店 */

.cstmreba .booklink-link2 .shoplinktoshokan a:hover { color:#333333; } /* 図書館 */

/* カエレバ・ヨメレバ共通 */

.cstmreba .kaerebalink-link1 .shoplinkamazon a:hover,

.cstmreba .booklink-link2 .shoplinkamazon a:hover {

color:#FF9901; } /* Amazon */

.cstmreba .kaerebalink-link1 .shoplinkrakuten a:hover,

.cstmreba .booklink-link2 .shoplinkrakuten a:hover {

color: #bf0000; } /* 楽天 */

.cstmreba .kaerebalink-link1 .shoplinkseven a:hover,

.cstmreba .booklink-link2 .shoplinkseven a:hover {

color:#225496;} /* 7net */

/***** ボタンデザイン　マウスオーバー時ここまで *****/

.cstmreba .booklink-footer {

clear:both;

}

/***** 解像度768px以下のスタイル *****/

@media screen and (max-width:768px){

.cstmreba .booklink-image,

.cstmreba .kaerebalink-image,

.cstmreba .tomarebalink-image {

width:100%;

float:none;

}

.cstmreba .booklink-link2>div,

.cstmreba .kaerebalink-link1>div,

.cstmreba .tomarebalink-link1>div {

width: 32.33%;

margin: 0.5%;

}

.cstmreba .booklink-info,

.cstmreba .kaerebalink-info,

.cstmreba .tomarebalink-info {

text-align:center;

padding-bottom: 1px;

}

/***** 解像度480px以下のスタイル *****/

@media screen and (max-width:480px){

.cstmreba .booklink-link2>div,

.cstmreba .kaerebalink-link1>div,

.cstmreba .tomarebalink-link1>div {

width: 49%;

margin: 0.5%;

}

コメントフォームをカスタマイズ

また、僕はコメントフォームをカスタマイズしています。

デフォルトのコメントフォームでは記入項目が

名前
メールアドレス
URL
コメント内容

となっていて若干記入項目が多く、読者の方からするとコメントをするハードルがちょっと高い。

そのため、僕はコメントをするための記入項目を減らして

名前
コメント内容

という2つに絞っているので、そんなにコメントされることがないんですが、コメントしやすい雰囲気を作り出すようにしています。

ということで、ぼくはfunctions.phpに次のような記述を追加しています。

// 子テーマのstyle.cssを後から読み込む
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('style')
    );
}
 
 
//コメントからEmailとウェブサイトを削除
function my_comment_form_remove($arg) {
$arg['email'] = '';
$arg['url'] = '';
return $arg;
 }
 add_filter('comment_form_default_fields', 'my_comment_form_remove');

// 子テーマのstyle.cssを後から読み込む

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() {

wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css' );

wp_enqueue_style( 'child-style',

get_stylesheet_directory_uri() . '/style.css',

array('style')

);

}

//コメントからEmailとウェブサイトを削除

function my_comment_form_remove($arg) {

$arg['email'] = '';

$arg['url'] = '';

return $arg;

}

add_filter('comment_form_default_fields', 'my_comment_form_remove');

詳しくはこちらの「WordPressのコメントフォームのカスタマイズ方法」を読んでみてくださいね。

FREE SWORDER

【WordPress使い方】コメント欄のフォームを思うがままにカスタマイズする方法

https://freesworder.net/wordpress-comment-form/

WordPressサイトのコメント欄のフォームをカスタマイズしたい！どうも、Linです。雲を睨んでみました。 WordPressサイトを運営していると、時々、コメント欄をカスタマイズしたくなる瞬間があるかと思います。ぼく自身、いくつかのWordPressのサイトを運営して...

著者情報を記事真下に移動する

あとストークで残念なのが、

著者情報が記事終了ポイントからちょっと離れて掲載されてしまっているという点です。

そのため、著者情報を確認する前に離脱してしまう読者が増えてしまう恐れもあります。

そこで、ぼくは記事コンテンツの直後に著者情報を表示させるようにしていますよ。

single.phpの、

<?php get_template_part( 'parts_singlefoot' ); ?>

1	<?php get_template_part( 'parts_singlefoot' ); ?>

を

<?php if ( !get_option( 'sns_options_hide' ) ) : ?>
<div class="sharewrap wow animated fadeIn" data-wow-delay="0.5s">
<?php if ( get_option( 'sns_options_text' ) ) : ?>
<h3><?php echo get_option( 'sns_options_text' ); ?></h3>
<?php endif; ?>
<?php get_template_part( 'parts_sns' ); ?>
</div>
<?php endif; ?>

<?php if ( !get_option( 'sns_options_hide' ) ) : ?>

<?php if ( get_option( 'sns_options_text' ) ) : ?>

<?php endif; ?>

<?php get_template_part( 'parts_sns' ); ?>

</div>

<?php endif; ?>

の直後に記載してあるといいですよ。

そして、あとはparts-singlefoot.phpの編集。authorboxというクラスのdiv要素を冒頭に持っていきます。

うん、こんな感じ。

前後の記事のリンク廃止

あとはぼくは個人的にブログ記事の更新の順番なんてどうでもいいと思っているので、

その記事の前後に投稿された記事へのリンクを廃止しています笑

こいつもさっきでてきたparts-singlefoot.phpのファイルを編集していきます。

<div class="np-post">
<div class="navigation">
<div class="prev np-post-list">
<?php $nextpost = get_adjacent_post(false, '', false); if ($nextpost) : ?>
<a href="<?php echo get_permalink($nextpost->ID); ?>" class="cf">
<figure class="eyecatch"><?php echo get_the_post_thumbnail($nextpost->ID,'thumbnail'); ?></figure>
<span class="ttl"><?php echo esc_attr($nextpost->post_title); ?></span>
</a>
<?php else:?>
<div class="home_link">
<a href="<?php echo esc_url(home_url()); ?>"><figure class="eyecatch"><i class="fa fa-home"></i></figure><span class="ttl">トップページへ</span></a>
</div>
<?php endif; ?>
</div>

<div class="next np-post-list">
<?php $prevpost = get_adjacent_post(false, '', true); if ($prevpost) : ?>
<a href="<?php echo get_permalink($prevpost->ID); ?>" class="cf">
<span class="ttl"><?php echo esc_attr($prevpost->post_title); ?></span>
<figure class="eyecatch"><?php echo get_the_post_thumbnail($prevpost->ID,'thumbnail'); ?></figure>
</a>
<?php else:?>
<div class="home_link">
<a href="<?php echo esc_url(home_url()); ?>"><span class="ttl">トップページへ</span><figure class="eyecatch"><i class="fa fa-home"></i></figure></a>
</div>
<?php endif; ?>
</div>
</div>
</div>

<?php $nextpost = get_adjacent_post(false, '', false); if ($nextpost) : ?>

<a href="<?php echo get_permalink($nextpost->ID); ?>" class="cf">

<figure class="eyecatch"><?php echo get_the_post_thumbnail($nextpost->ID,'thumbnail'); ?></figure>

<span class="ttl"><?php echo esc_attr($nextpost->post_title); ?></span>

</a>

<?php else:?>

<a href="<?php echo esc_url(home_url()); ?>"><figure class="eyecatch"><i class="fa fa-home"></i></figure><span class="ttl">トップページへ</span></a>

</div>

<?php endif; ?>

</div>

<?php $prevpost = get_adjacent_post(false, '', true); if ($prevpost) : ?>

<a href="<?php echo get_permalink($prevpost->ID); ?>" class="cf">

<span class="ttl"><?php echo esc_attr($prevpost->post_title); ?></span>

<figure class="eyecatch"><?php echo get_the_post_thumbnail($prevpost->ID,'thumbnail'); ?></figure>

</a>

<?php else:?>

<a href="<?php echo esc_url(home_url()); ?>"><span class="ttl">トップページへ</span><figure class="eyecatch"><i class="fa fa-home"></i></figure></a>

</div>

<?php endif; ?>

</div>

という記述をごっそり削除というかコメントアウトして完了です。

補足情報のデザイン

後は補足情報のデザインですね。

こちらは詳しくはこちらの記事を参考にしていただきたいのですが、このデザインを加えておくと、

記事中に普通の段落とは異なるデザインを持つ要素

を加えられます。

これにより、視覚的にわかりやすい記事を作ることができます。

具体的に言うと僕は

補足情報（infoマーク）
背景がグレー

という2つの CSS 情報を加えますね。

.information{
  background-color: #F4F3EB;
  padding: 20px 20px 20px 72px;
  border-radius: 4px;
  position: relative;
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
}
 
.information::before

{
  font-family: "FontAwesome";
  font-size: 50px;
  position: absolute;
  top: 30px;
  left: 13px;
  color: #EAE3B4;
}
 
.information::before{
  content: '\f05a';
}

.gray{
padding: 16px;  background-color: #f7f7f7; margin-top: 30px; margin-bottom: 30px;
 
}