WordPressで記事のデザインを設定する

WordPressでテーマの作成/その6

今日は、『style.css』に設定を追加して、記事のデザインを指定します。

/* 記事 */
div.post	{
	margin-bottom: 30px;	/*記事の下の間隔を30pxに指定*/
	overflow: hidden}		/*記事の回り込みを解除する指定*/

div.post h2	{
	border-top: solid 1px #aaaaaa;	/*タイトルの上に1pxのグレーの罫線を表示*/
	border-bottom: solid 1px #aaaaaa;	/*タイトルの下に1pxのグレーの罫線を表示*/
	border-left: solid 10px #0c8bcd; /*タイトルの左に10pxの青の罫線を表示*/
	font-size: 0.85em;				/*フォントサイズを0.85emに指定*/
	padding: 10px 18px;				/*上下の余白を10px、18pxに指定*/
	margin: 0}						/*マージンを0に指定*/

div.post h2 a	{color: #000000}	/*記事のリンクの色を黒に指定*/

div.post p	{
	font-size: 0.85em;	/*記事の本文の文字サイズを0.85emに指定*/
	line-height: 1.6}	/*記事の本文の行の高さを1.6倍に指定*/

div.post p.postcat	{
	text-align: right;	/*カテゴリーを右揃え*/
	margin: -10px 10px 10px 0}	/*上に-10px移動、右と下に10px余白指定*/

div.post p.postcat a	{
	font-size: smaller;		/*フォントサイズを一回り小さく*/
	background-color: #a7d043;	/*背景を緑色に指定*/
	border-radius: 2px;		/*背景を2pxの角丸で指定*/
	color: #ffffff;			/*文字色を白色にして*/
	padding: 1px 5px}		/*上下の余白1px、左右の余白5pxに指定*/

div.post p.postinfo	{
	font-size:0.6em;	/*日付の文字サイズを0.6emに指定*/
	color: #0c8bcd;			/*投稿年月日の文字色を青色に指定*/
	text-align: right;		/*右揃えに指定*/
	margin: -30px 10px 10px 0;	/*表示位置を上に30px移動、右と下に10pxの余白指定*/
	}				

/* 記事内の画像の配置設定 */
.aligncenter	{
	display: block;
	margin-left: auto;
	margin-right: auto}

.alignnone	{
	display: block;
	margin-left: auto;
	margin-right: auto}

.alignleft	{
	float: left;
	margin-right: 10px;
	margin-bottom: 10px}

.alignright	{
	float: right;
	margin-left: 10px;
	margin-bottom: 10px}

.wp-caption	{
	border: solid 1px #aaaaaa;
	text-align: center;
	padding-top: 5px}

それでは、ブラウザで確認してみます。

本日は、ここまでにします。

タグ

このページの先頭へ