フォノクラフト株式会社:作業メモや備忘録など

作業メモや備忘録など…

[wp] wordpressを使う際に必ず追記するCSSのクラス設定

without comments

既存テンプレートを使わずにゼロからテンプレートを構築した場合は デフォルトでも必要なクラス設定を入れましょう。

うちで主に必要になるのは、アップした画像の回り込みやセンター寄せ等のスタイルと、プラグイン「wp-pagenavi」用のスタイルです。

アップした画像の回り込みやセンター寄せ等のスタイル

(※marginの値は適所変更してください)

/* ================================================= */
/* wordpress UPLOAD IMG */
/* ================================================= */

img.centered {
	display: block;
	clear: both;
	margin: 0.25em auto 1.5em;
	/*margin: 10px auto;*/
	}

img.aligncenter {
	display: block;
	clear: both;
	margin: 0.25em auto 1.5em;
	/*margin: 10px auto;*/
	}
img.alignleft {
	float: left;
	clear: both;
	margin: 0.25em 1.5em 1.5em 0;
	/*margin: 0 10px 5px 0;*/
	}
img.alignright {
	float: right;
	clear: both;
	margin: 0.25em 0 1.5em 1.5em;
	/*margin: 0 0 5px 10px;*/
	}

プラグイン「wp-pagenavi」用のスタイル

(※colorやmargin/paddingの値は適所変更してください)

/* ================================================= */
/* wordpress Plugin [wp-pagenavi] */
/* ================================================= */

/*#post p{padding-bottom:20px;}*/

.navigation {
	display: block;
	text-align: center;
	margin-bottom: 30px;
	font-size:12px;
	}

.wp-pagenavi {
	clear: both;
	}

.wp-pagenavi a, .wp-pagenavi span {
	text-decoration: none;
	border:0px solid #FFFFFF;
	padding: 3px 5px;
	margin: 2px;
	}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
	color:#fff
	font-weight:bold;
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	}

.wp-pagenavi span.current {
	border:1px solid #4A872A;
	background:#4A872A;
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	color:#fff;
	}

.wp-pagenavi .pages {
	display: none;
	}
]