デザインそのまま。5分でできたワードプレスのスマホ対応

この記事は約 4 分で読めます。

iPhone 4 - Twitter © by William Hook

これまで私は、ワードプレスのスマホ対策として、WPtouchの無料版を使っていました。
導入も簡単で、見た目もかっこ良いのでなかなか気に入ってはいたのですが、せっかく自分で作ったPC版のデザインが反映されないのはちょっと残念に思っていました。

そんな折、メタタグの設定とCSSの設定でできる方法を知りさっそく試してみた所、思いのほか簡単に、しかもPC版のデザインそのままでスマホ対応ができました。

私と同じような不満を持っている方がいるかもしれないと思い、簡単ですが私が実施した手順をご紹介します。

大まかな手順としては
———–
1.各ページのメタタグに viewport の設定を行う
2.CSSに 回り込み(float) や 横幅指定(width:**px) を解除する設定を行う
———–
と、たった2ステップです。
回り込みのイメージ
こんな具合に各要素の横幅がスマホに合った幅になり、メニュー要素がコンテンツ要素の下に表示されるようになります。

では具体的な手順をご紹介します。

【1.各ページのメタタグに viewport の設定を行う】
メタタグに下記を追加します。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />

これは、viewport という設定で、
スマートフォンでの可視領域や拡大・縮小などの設定をすることができます。
width=device-width
という設定を行い、可視領域の横幅にデバイスの横幅を指定しています。
それ以外の属性の設定については、Googleなどで「meta viewport」などのKWで検索してみてください。

【2.CSSに 回り込み(float) や 横幅指定(width:**px) を解除する設定を行う】
スタイルシートに「特定のウィンドウ幅以下だった場合に適用する」条件を追加して、
その条件に合致する場合のみ有効な定義を記述します。
私は750px以下の場合にスマホ用デザインになるように設定しました。

@media screen and (max-width:750px) {

	#wrapper {
		padding: 5px;}

	#access .menu-header, div.menu, #colophon, #branding, #main, #wrapper, #container , #primary, #secondary  {
		margin: 0 auto;
		width: 100%;
		float: none;
		overflow: hidden;}

	.fLeft, .fRight {
		float:none;}

	#fbComment, .adsTxt {
		display:none;}
}

私のワードプレス(このブログ)は、「twentyten」というデフォルトのテーマに少し手を加えてあります。

#branding, #main, #wrapper, #container , #primary, #secondary など、横幅を固定pxで指定されているid、classの横幅を100%とし、floatを使って回り込み指定している箇所を全て解除しています。

また、横幅の広い画像があった場合などは、overflow: hiddenとして強引に表示しない設定にしています。

おまけとして、
各エントリータイトル(h1タグ)の上に設置しているGoogle adsense のテキスト広告と、エントリ下部に設置しているfacebookのコメントプラグインに関しては、横幅の再指定ができないので、スマホ経由の場合(ウィンドウサイズが750px以下の場合)は、display:noneとして非表示にしています。

ポイントはこの3つの定義。
width:100%
float:none
overflow:hidden;
これらをどの要素に適用するかは、皆さんそれぞれ異なるかと思いますので、ご自身の環境に合わせて試してみてください。

こちらもあわせてどうそ
いかがでしたか?参考になりましたでしょうか?



野崎 雷太 の紹介

世田谷区桜丘で規模は小さく、夢は大きく、ネット企業をやっています。主にWEBで自社サービス提供したりWEB系・アプリ系システム開発をしたりしています。 夫婦とヨチヨチ歩きの男の子の3人家族。 息子と一緒にプラレールで遊ぶのが大好き。 このブログでは、自分自身が感動したり、解決できたりして「知ってよかった」と思った話題をコツコツアップしています。いつか誰かの役に立てられたらいいなぁ、と思いつつ。
カテゴリー: コーディング   パーマリンク