当サイトで利用しているSEOに強いWordPressのテンプレート『賢威』のバージョン7(スタンダード版)で、記事タイトルまわりの修正をした事例をご紹介します。

修正前と修正後のイメージ

修正前の状況

  • 記事タイトルの下に点線を入れていた
  • 記事タイトルの上下の余白がちょっと多い
  • 本文との高さがもう少しほしいくらいの短さ
  • スマホだと随所に無駄な高さがあった

修正前と修正後のCSS(スタイルシート)

当サイトの場合では賢威の子テーマで運用しているため、子テーマディレクトリの「base.css」と「rwd.css」を修正しています。

子テーマディレクトリの「base.css」

.section-title

修正前

.section-title {
	font-size: 1.45em !important;
	line-height: 1.45em !important;
	font-weight: bold !important;
}

修正後

.section-title {
	font-size: 1.45em !important;
	line-height: 1.45em !important;
	font-weight: bold !important;
	margin-bottom:0px !important;
}

.time-cat-tag-box

修正前

.time-cat-tag-box{
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #999;
	line-height: 1.25em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

修正後

.time-cat-tag-box{
	line-height: 1.25em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

.sns

修正前

.sns{
	margin:0 auto;
	text-align:center;
}

修正後

.sns{
	margin:0 auto 10px auto;
	text-align:center;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #999;
}

子テーマディレクトリの「rwd.css」

.sns

修正前

/*--------------------------------------------------------
解像度1200px以下
--------------------------------------------------------*/
@media
only screen and (max-width : 1200px){

.sns{
	margin:0 auto;
	text-align:center;
}

}

修正後

/*--------------------------------------------------------
解像度1200px以下
--------------------------------------------------------*/
@media
only screen and (max-width : 1200px){

.sns{
	margin:0 auto 10px auto;
	text-align:center;
	padding-bottom:10px;
}

}

本文側にCSSを追加

/*--------------------------------------------------------
解像度1200px以下
--------------------------------------------------------*/
@media
only screen and (max-width : 1200px){

/*--------------------------------------------------------
main-body
--------------------------------------------------------*/
.main-body{
	margin-top:-50px;
}

.section-title{
	padding-bottom:0px !important;
}

.breadcrumbs{
	margin-top:50px;
	margin-bottom:-20px;
}

}