WordPressでスマートフォンサイトの作成

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

WordPressには、wp-touchという優れたプラグインがありますが、今回は、それを使わずにスマートフォンに最適化したサイトを作ってみたいと思います。

現在作成中の『WinRoadテストサイト』を、スマートフォンでアクセスすれば、スマートフォン用の表示をするように作成したいと思います。

①『style.css』を、『reset.css』と『style.css』に分割しますので、『style.css』ファイルをコピーして『reset.css』ファイルを作成します。中身は空で構いませんので、スマートフォンの縦表示用のスタイルシート『sp320.css』と横表示用のスタイルシート『sp480.css』を作成しておきます。

②『header.php』ファイルを開き、

<link rel=”stylesheet” href=”<?php bloginfo (‘stylesheet_url’); ?>” type=”text/css” />

を下記のように変更します。これは、スクリーンサイズにより480px以下で縦表示の場合は『sp320.css』を使用し、横表示の場合は『sp480.css』のスタイルシートを使用します。481px以上は既存の『style.css』を使用します。最後の『viewport』の指定は、コンテンツの表示サイズをデバイスの幅に指定します。また、スマートフォンで縦から横になった場合自動的に倍率を変更するの防ぐために、倍率変更を禁止します。

<link rel=”stylesheet” media=”only screen and (max-device-width:480px) and (orientation:portrait)” href=”<?php bloginfo(‘template_url’);?>/sp320.css” type=”text/css” />
<link rel=”stylesheet” media=”only screen and (max-device-width:480px) and (orientation:landscape)” href=”<?php bloginfo(‘template_url’);?>/sp480.css” type=”text/css” />
<link rel=”stylesheet” media=”screen and (min-device-width:481px)” href=”<?php bloginfo(‘stylesheet_url’);?>” type=”text/css” />
<meta name=”viewport” id=”smartphone” content=”width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0″>

③『header.php』の下記の箇所

<div id=”image”>
<img src=”<?php header_image(); ?>”
alt=”*” width=”<?php echo HEADER_IMAGE_WIDTH; ?>”
height=”<?php echo HEADER_IMAGE_HEIGHT; ?>” /></div>

を下記のように変更します。

<div id=”image”>
<img src=”<?php header_image(); ?>” alt=”*” />
</div>

これは、ここ『header.php』で画像サイズを指定せずにCSSで指定するための手続きです。

リセット用のスタイルシート

⑤それでは、、『style.css』を分割します。前半の『ブラウザ固有のCSSをリセット』の箇所のみを『reset.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; }

パソコン用のスタイルシート

⑥『style.css』を下記のように変更します。結構いろいろなところを変更しましたので、全コードを記載しておきます。

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

/*初期化用*/
@import "reset.css";

/* 基本 */
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}			/*リンクを設定した画像周りの罫線を削除*/

/* コンテナ */
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.5em;	/*サイト名のフォントサイズを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#nav	{font-size: 0.75em;		/*文字サイズを0.75emに指定*/
	height: 30px;				/*バーの高さを30pxに指定*/
	background-color: #ffffff;	/*背景色を白色に指定*/
	border: solid 1px #aaaaaa;	/*バーの周りに1pxのグレーの罫線を表示*/
	margin-bottom: 8px}			/*バーの下の余白を8pxに指定*/

div#nav ul	{margin: 0;			/*ulの周りの余白を削除*/
	padding: 0}

div#nav li	{list-style-type: none;	/*リストマークを削除*/
	float: left}					/*リンクを横並びに指定*/

div#nav li a	{display: block;	/*リンクをブロック要素として表示*/
	width: 150px;					/*リンクの横幅を150pxに指定*/
	line-height: 30px;				/*リンクの高さを30pxに指定*/
	border-right: solid 1px #aaaaaa;	/*リンクの区切りを1pxのグレー線に指定*/
	color: #000000;					/*リンクの文字色を黒色に指定*/
	text-align: center}				/*リンクの文字を中央揃えに指定*/

div#nav li a:hover	{background-color:#00F;	/*リンクにカーソルを重ねたときの背景色を青色に指定*/
	color:#FFFFFF}					/*リンクの文字色を白色に指定*/

/* サイドバー */
div#sidebar	{
	width: 300px;		/*サイドバーの横幅を300pxに指定*/
	float: right}		/*右側配置に指定*/

div#sidebar ul	{
	margin: 0;			/*メニュー周りの余白を削除*/
	padding: 0;
	list-style-type: none}	/*リストマークを削除*/

div#sidebar .widget	{margin-bottom: 20px}	/*メニューの間隔を20pxに指定*/

div#sidebar h2	{
	font-size: 0.75em;	/*見出しの文字サイズを0.75emに指定*/
	color: #ffffff;		/*見出しの文字色を白色に指定*/
	background-color: #0c8bcd;	/*背景色を青色に指定*/
	border-radius: 3px;	/*背景を3pxの角丸に指定*/
	padding: 2px 10px;	/*バーの内側の上下余白を2px、左右余白を10pxに指定*/
	margin: 0}			/*周りの余白を削除*/

div#sidebar li li	{
	font-size: 0.7em;	/*リンクの文字サイズを0.7emに指定*/
	border-bottom: dotted 1px #aaaaaa;	/*リンクの下に1pxのグレー点線を挿入*/
	margin: 0}			/*リンク周りの余白を削除*/

div#sidebar li li a	{
	color: #000000;		/*リンクの文字色を黒に指定*/
	display: block;		/*リンクをブロック要素として指定*/
	padding: 5px 10px}	/*上下の間隔を5px、左右の間隔を10pxに指定*/

div#sidebar li li a:hover	{
	background-color: #f7e29e}	/*リンクを重ねたときの背景色をオレンジ色に指定*/

/* カレンダー */
#wp-calendar	{
	font-size:0.85em;	/*カレンダーの文字サイズを0.85emに指定*/
	margin:auto;		/*中央に配置*/
	margin-top:20px;	/*上部余白を20pxに指定*/
	margin-bottom:-30px;/*下部余白を-30pxに指定*/
	width : 80%;		/*横幅を80%に指定*/
	text-align:center;}	/*日付文字を中央に配置*/

/* フッター */
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}			/*周りの余白を削除*/

/* 記事 */
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の余白指定*/
	margin: 0;		/*周りのマージン削除*/
	}				

/* 記事内の画像の配置設定 */
.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}

/* ページネーション */
p.pagenation	{
	font-size: 0.7em;	/*リンクの文字サイズを0.7emに指定*/
	overflow: hidden}	/*コンテンツの回り込み禁止*/

span.oldpage	{
	float: left}	/*古い記事のリンクを左揃え*/

span.newpage	{
	float: right}	/*新しい記事のリンクを右揃え*/

/* コンテンツ */
div#content	{
	width: 600px;	/*コンテンツの横幅を600pxに指定*/
	float: left}	/*コンテンツを左側に配置*/

スマートフォン縦用のスタイルシート

⑦スマートフォン縦用のスタイルシートを作成します。『sp320.css』ファイルに下記のように記載します。スタイルシートの性質上、あとから読み込んだセレクタが優先されますので、いったん『style.css』でセットしていても、あとから読み込んだこのファイルで上書きすることができます。

@charset "UTF-8";
/*
Theme Name: WinRoad徒然草
Theme URI: http://w.builwing.info/
Description: smartphone縦表示のためのCSS
Author: nakada
Author URI: http://w.builwing.info/
Version: 1.0
General comments/License Free.
*/

/*初期化用*/
@import "reset.css";

/*基本設定用*/
@import "style.css";

/* コンテナ */
div#container	{
	width:300px;		/*コンテナの幅を300pxに指定*/
	}			

/* ヘッダー */
div#header h1	{
	font-size: 1.2em;	/*サイト名のフォントサイズを1.2emに指定*/
	}					

div#header p#desc	{
	font-size: 0.7em;		/*サイトの説明の文字サイズを0.7emに指定*/
		}			

/* ナビゲーションバー */
div#nav	{
	-webkit-border-radius:8px;
	border-radius:8px;
	background-color:#09F;
	background:-webkit-gradient(linear,left top,left bottom,from(#66ccff),to(#000099));
	font-size: 0.7em;	/*文字サイズを0.7emに指定*/
	height: 30px;		/*バーの高さを30pxに指定*/
	overflow: auto;		/*はみ出した文字の表示方法*/
	}			

div#nav li a	{
	color:#FFFFFF;		/*リンクの文字色を白色に指定*/
	font-weight: bold;	/*リンク文字を太字に指定*/
	width: 60px;		/*リンクの横幅を60pxに指定*/
	line-height: 30px;	/*リンクの高さを30pxに指定*/
	}				

/* サイドバー */
div#sidebar	{
	font-size:0.7em;	/*文字サイズを0.7emに指定*/
	width: 300px;		/*サイドバーの横幅を300pxに指定*/
	margin:auto;		/*中央に配置*/
	}		

div#sidebar .widget	{
	margin-bottom: 30px;	/*メニューの間隔を30pxに指定*/
	}	

div#sidebar h2	{
	font-size: 0.8em;	/*見出しの文字サイズを0.8emに指定*/
	}

div#sidebar li li	{
	font-size: 0.8em;	/*リンクの文字サイズを0.8emに指定*/
	}

/* カレンダー */
#wp-calendar	{
	font-size:0.9em;	/*文字サイズを0.9emに指定*/
	}

/* フッター */
div#footer p	{
	font-size: 0.6em;	/*コピーライトの文字サイズを0.6emに指定*/
	}

/* 記事 */
div.post	{
	margin-bottom: 20px;	/*記事の下の間隔を20pxに指定*/
	}

div.post h2	{
	font-size: 0.8em;		/*フォントサイズを0.8emに指定*/
	}

div.post p	{
	font-size: 0.8em;	/*記事の本文の文字サイズを0.8emに指定*/
	}

div.post p.postcat a	{
	font-size:0.8em;	/*フォントサイズを0.8emに指定*/
	padding:1px 5px;		/*上下の余白1px、左右の余白5pxに指定*/
	margin:10px 0 0 0;
}

div.post p.postinfo	{
	font-size:0.7em;	/*日付の文字サイズを0.7emに指定*/
	margin: -42px 10px 25px 0	/*表示位置を上に42px移動、右と下に10pxの余白指定*/
	}				

/* 記事内の画像の配置設定 */
.aligncenter	{
	zoom:50%;		/*画像サイズを50%に指定*/
	}

.alignnone	{
	zoom:50%;		/*画像サイズを50%に指定*/
	}

.alignleft	{
	zoom:50%;		/*画像サイズを50%に指定*/
	}

.alignright	{
	zoom:50%;		/*画像サイズを50%に指定*/
	}

.wp-caption	{
	zoom:50%;		/*画像サイズを50%に指定*/
	}

/* ページネーション */
p.pagenation	{
	font-size: 0.6em;	/*リンクの文字サイズを0.6emに指定*/
	margin-bottom: 10px;	/*下の間隔を10pxに指定*/
	}

/* コンテンツ */
div#content	{
	width: 300px;	/*コンテンツの横幅を300pxに指定*/
}	

/* ヘッダー画像サイズの処理 */
div#image	{
	display:block;
	float:auto;
	zoom:33%;	/*画像サイズを33%に指定*/
	}

スマートフォン横用のスタイルシート

⑧スマートフォン横用のスタイルシートを作成します。『sp480.css』ファイルに下記のコードを入力します。

@charset "UTF-8";
/*
Theme Name: WinRoad徒然草
Theme URI: http://w.builwing.info/
Description: smartphone横表示のためのCSS
Author: nakada
Author URI: http://w.builwing.info/
Version: 1.0
General comments/License Free.
*/

/*初期化用*/
@import "reset.css";

/*基本設定用*/
@import "style.css";

/* コンテナ */
div#container	{
	width:460px;		/*コンテナの幅を460pxに指定*/
	}			

/* ヘッダー */
div#header h1	{
	font-size: 1.5em;	/*サイト名のフォントサイズを1.5emに指定*/
	}					

div#header p#desc	{
	font-size: 0.8em;		/*サイトの説明の文字サイズを0.8emに指定*/
		}			

/* ナビゲーションバー */
div#nav	{
	-webkit-border-radius:8px;
	border-radius:8px;
	background-color:#09F;
	background:-webkit-gradient(linear,left top,left bottom,from(#66ccff),to(#000099));
	font-size: 0.7em;	/*文字サイズを0.7emに指定*/
	height: 40px;		/*バーの高さを40pxに指定*/
	overflow: auto;		/*はみ出した文字の表示方法*/
	}			

div#nav li a	{
	color:#FFFFFF;		/*リンクの文字色を白色に指定*/
	font-weight: bold;	/*リンク文字を太字に指定*/
	width: 90px;		/*リンクの横幅を90pxに指定*/
	line-height: 40px;	/*リンクの高さを40pxに指定*/
	}				

/* サイドバー */
div#sidebar	{
	font-size:0.7em;	/*文字サイズを0.7emに指定*/
	width: 460px;		/*サイドバーの横幅を460pxに指定*/
	margin:auto;		/*中央に配置*/
	}		

div#sidebar .widget	{
	margin-bottom: 30px;	/*メニューの間隔を30pxに指定*/
	}	

div#sidebar h2	{
	font-size: 0.8em;	/*見出しの文字サイズを0.8emに指定*/
	}

div#sidebar li li	{
	font-size: 0.8em;	/*リンクの文字サイズを0.8emに指定*/
	}

/* カレンダー */
#wp-calendar	{
	font-size:0.9em;	/*文字サイズを0.9emに指定*/
	}

/* フッター */
div#footer p	{
	font-size: 0.7em;	/*コピーライトの文字サイズを0.7emに指定*/
	}

/* 記事 */
div.post	{
	margin-bottom: 20px;	/*記事の下の間隔を20pxに指定*/
	}

div.post h2	{
	font-size: 0.8em;		/*フォントサイズを0.8emに指定*/
	}

div.post p	{
	font-size: 0.8em;	/*記事の本文の文字サイズを0.8emに指定*/
	}

div.post p.postcat a	{
	font-size:0.8em;	/*フォントサイズを0.8emに指定*/
	padding:1px 5px;		/*上下の余白1px、左右の余白5pxに指定*/
	margin:10px 0 0 0;
}

div.post p.postinfo	{
	font-size:0.6em;	/*日付の文字サイズを0.6emに指定*/
	margin: -52px 10px 25px 0	/*表示位置を上に52px移動、右と下に10pxの余白指定*/
	}				

/* 記事内の画像の配置設定 */
.aligncenter	{
	zoom:75%;		/*画像サイズを75%に指定*/
	}

.alignnone	{
	zoom:75%;		/*画像サイズを75%に指定*/
	}

.alignleft	{
	zoom:75%;		/*画像サイズを75%に指定*/
	}

.alignright	{
	zoom:75%;		/*画像サイズを75%に指定*/
	}

.wp-caption	{
	zoom:75%;		/*画像サイズを75%に指定*/
	}

/* ページネーション */
p.pagenation	{
	font-size: 0.8em;	/*リンクの文字サイズを0.8emに指定*/
	margin-bottom: 10px;	/*下の間隔を10pxに指定*/
	}

/* コンテンツ */
div#content	{
	width: 460px;	/*コンテンツの横幅を460pxに指定*/
	}	

/* ヘッダー画像サイズの処理 */
div#image	{
	display:block;
	float:auto;
	zoom:50%;	/*画像サイズを50%に指定*/
	}

スタイルシートの解説

スタイルシートには、細かく説明が記載されていますので、あまり説明の必要がないのかなと思いましたが、一応説明をしておきます。

まず、表示幅の設定です。現状のスマートフォンは表示幅320pxサイズがメインですので、両サイドに20pxの余裕を持たせて、コンテナ部分の表示幅を300pxに指定しました。ナビゲーションバーの表示文字は現状のままだとはみ出してしまいますので、『overflow:auto』指定ではみ出さないようにしました。

次は、画像の処理です。PC用のスタイルシートでは、920pxですが、スマートフォン用のコンテナ部分のサイズは300pxに設定していますので、ヘッダー画像サイズを『zoom:33%』でpc用の33%サイズに指定しています。記事内の画像は、コンテンツ部分の600pxが300pxになっていますので、『zoom:50%』に指定しました。

横用のスタイルシート『sp480.css』も上記の設定に準じて、画像の%指定や、文字フォントの大きさを指定しています。ユーザーによる倍率を禁止していますので、横にした場合、文字サイズを大きくして読みやすく設定しています。

それでは、いつものようにデバイスセントラルで表示してみます。

下の方にスクロールしてみます。

横でも表示してみます。

皆さん、どうでしょうか。自分でテーマを作成してみるとかなり面白いですし、WordPressの勉強にもなりますよ。自分自身でCSSファイルを弄くって好きなサイトを作成して下さい。

次回からは、このテーマをさらにカスタマイズしてきたいと思います。本日は以上です。

このエントリーを含むはてなブックマーク Buzzurlにブックマーク livedoorクリップ Yahoo!ブックマークに登録

トラックバック&コメント

この投稿のトラックバックURL:

コメントをどうぞ

このページの先頭へ