賢威7でサイドバー(サブコンテンツ)にある「最近の投稿」のスタイルを調整した事例をご紹介します。

どのような点をスタイル調整したのか?

賢威7のデフォルトのスタイルは全体的に要素が大きめ、余白も大きめとなっているため、サイト全体のデザインに合わせて「スリム化」しました。

  • 見出しの文字や余白を小さくして背景をつけた
  • 記事のサムネイル画像を小さくして、記事タイトルも文字を小さく、余白を小さくした
  • 記事タイトルと記事タイトルの間の余白を詰めた

CSSの修正

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

「base.css」の修正

/*--------------------------------------------------------
サブコンテンツ、サイドバー
--------------------------------------------------------*/
.section-in{
	padding-right: 0px !important;
	padding-left: 0px !important;
}

.section-in h3.section-title{
	margin-right: 0px !important;
	margin-left: 0px !important;
	background: rgba(0, 0, 0, 0) url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVQImWO4evXqfwZkAAA19AN/FhPClgAAAABJRU5ErkJggg==") repeat scroll 0 0;
	font-size: 1em !important;
	border-bottom-style: none !important;
	padding: 6px 10px !important;
	line-height: 1.25em !important;
}

.link-menu-image .link-menu-image-thumb img{
	max-width:80px !important;
}

.link-menu-image li{
	padding-bottom:10px !important;
	margin-bottom:10px !important;
}

.link-menu-image .post-title{
	padding:0px !important;
	font-size:0.9em;
}

.link-menu-image .post-title a{
	text-decoration: none;
}

.link-menu-image .post-title .post-date{
	font-size: 0.8em;
	color: #666;
}

「rwd.css」の修正

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

/*--------------------------------------------------------
サイドバー
--------------------------------------------------------*/
.section-in{
	padding-right: 12px !important;
	padding-left: 12px !important;
}

}

賢威7のデフォルトスタイルでは、スマホ画面の両サイドの余白が15pxとなっていますが、15ピクセルも余白はいらないと考え、上記のように、12ピクセルに変更しています。