WordPressのスタイルシートの基本設定

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

今日は、前回作成したヘッダーとフッターにCSSを適用してみたいと思います。『style.css』ファイルを開き、まず最初にこのテーマの説明を記述します。

@charset "UTF-8";
/*
Theme Name: WinRoad徒然草
Theme URI: http://w.builwing.info/
Description: 新規作成のためのテーマ
Author: nakada
Author URI: http://w.builwing.info/
Version: 1.0
General comments/License Free.
*/

ブラウザ固有のCSSのリセット

次に、ブラウザ固有のCSSをリセットします。

/*------------------------------------------------------------
ブラウザ固有のCSSをリセット
-------------------------------------------------------------*/

body,div,ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,p,blockquote{
	margin: 0;
	padding: 0;
}

address,caption,cite,code,dfn,h1,h2,h3,h4,var{
	font-style: normal;
	font-weight: normal;
}

h1,h2,h3,h4,h5,h6,small{
	font-size: 100%;
	font-weight: normal;
}

fieldset,img,abbr{ border: 0; }
caption{ text-align: left; }
q:before,q:after{ content: ''; }
a{ text-decoration: none; }
img{
	border: none;
	vertical-align: bottom;
}

input,
textarea,
select{
	font-size: 1em;
}

/*WordPress対策*/
span textarea,span input{ vertical-align: bottom!important; }

/*Firefox対策*/
html{
	overflow: scroll;
	overflow: -moz-scrollbars-vertical;
	overflow-x: scroll;
}

body,x:-moz-broken { margin-left:-1px; }

文字とリンクの基本設定

次に、ページ全体の文字とリンクの基本設定をします。

/* 基本 */
body	{font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif}

a		{text-decoration:none;	/*リンク部分の下線を削除*/
		color:#09F}				/*リンク部分の色を水色に変更*/
a img	{border:none}			/*リンクを設定した画像周りの罫線を削除*/

表示サイズの指定

サイト全体の横幅とヘッダーとフッターのデザインを指定します。iphoneでは、画面の横幅が980ピクセルとして処理されますので、スマートフォンで表示してもバランスよく表示できるように、920ピクセルとします。

/* コンテナ */
div#container	{width: 920px;	/*コンテナ部分を920pxに指定*/
				margin: auto}	/*コンテナ部分を中央に配置*/

/* ヘッダー */
div#header	{font-family:Verdana, Geneva, sans-serif;	/*ヘッダーのフォント指定*/
			margin-bottom: 20px}	/*ヘッダーの下の余白を20pxに指定*/

div#header h1	{font-size: 2.0em;	/*サイト名のフォントサイズを2.5emに指定*/
				margin: 0}			/*サイト名の周りの余白を削除*/

div#header h1 a	{color:#00F}		/*サイト名のリンク色を青に指定*/

div#header p#desc	{font-size: 1em;/*サイトの説明の文字サイズを1emに指定*/
				text-align:right;	/*サイトの説明を右揃えに指定*/
				font-weight: bold;	/*サイトの説明を太字に指定*/
				color: #999999;		/*サイトの説明の文字色をグレーに指定*/
				margin: 0 0 5px}	/*余白を削除、下のみ5pxに指定*/

/* フッター */
div#footer	{border-top: solid 1px #aaaaaa;	/*フッターの上部に1pxのグレーの罫線を挿入*/
			padding: 6px 0;			/*罫線の下の余白を6pxに指定*/
			clear: both}			/*フッターの回り込み禁止指定*/

div#footer p	{font-size: 0.75em;	/*コピーライトの文字サイズを0.75emに指定*/
				font-style: normal;	/*斜体を解除*/
	font-family: Verdana, sans-serif;	/*フォントの指定*/
				margin: 0}			/*周りの余白を削除*/

それでは、ブラウザで確認してみます。下記のようになりました。

本日は以上です。

タグ

このページの先頭へ