各業界のプロに学ぼう「本じゃ読めないアフィリエイト講座」

All About ホームページ作成ガイド 西村 文宏
All About ホームページ作成ガイド
西村 文宏 (ニシムラ フミヒロ)
2001年より、その道のプロ(専門家)が情報発信する生活総合情報サイトAll About内で、「ホームページ作成」ガイドサイトを担当。ウェブ製作に関して毎月数本の記事を連載。HTMLの記述方法から、スタイルシートやJavaScriptの活用方法、アクセス数向上テクニックなど、2011年現在までに300本近くの記事を公開している。著書として、「プロ顔負けのホームページ作成術」・「SEO・SEM使いこなしテクニック」などがあり、最近は作家デビューも果たしている。
コーポレートサイトhttp://allabout.co.jp/gm/gt/1053/
講師PR
RSSフィードを自動生成するフリーソフト「Fumy RSS & Atom Maker」が人気です!『にししふぁくとりー』
http://www.nishishi.com/

スマートフォン対応サイトの作りかたの基礎(第2回)

  • publish_advertise
2011/11/10

みなさま、こんにちは。All About ホームページ作成ガイドの西村文宏でございます。

 

前回に引き続き、スマートフォン用ウェブサイトの作り方についてご紹介いたします。

 

前回は、スマートフォン用ページを新たに作る場合に、ページ全体が勝手に縮小表示されてしまうのを回避する方法をご紹介しました。

 

今回は、PC用に作ってあるページを、大きく改修することなく、できるだけスマートフォンでも見やすくする方法をご紹介いたします。

 


◆ スマートフォンでの縮小率が低くて済むように調整する


 

PC画面よりもスマートフォン画面の方が小さいため、PCで閲覧することを前提にレイアウトされたページなら、縮小して表示しなければならない点はどうしようもありません。

 

しかし、縮小率をできるだけ低く抑えることができれば、文字が小さくなりすぎるのを防げます。

 

そうすれば、縮小表示されている状態でも、ある程度の見やすさを保つことができるでしょう。

 


◆ どれくらいまで横幅を狭めても大丈夫なのかを調べる


 

まずは、レイアウトが崩れないギリギリの狭さを調べましょう。

 

PC上のブラウザでウェブページを表示させ、ブラウザのウインドウ幅を少しずつ狭めてみて下さい。レイアウトが崩れてしまう直前まで狭めます。

 

例えば、横幅1024pxくらいで閲覧されることを想定して作成されたページでも、800pxくらいまでは狭めても問題なく閲覧できるかもしれません。もしかすると、600pxくらいまで狭めても問題ないかもしれません。とにかく、「問題なく閲覧できる最小の横幅」を調べます。

 

仮に「640pxまで狭めても大丈夫」だと分かったなら、「画面の横幅が640pxだと仮定してレンダリング(描画)してから縮小する」ように、スマートフォン用ブラウザに指示を出しましょう。

 

そうすれば、縮小率を必要最小限に抑えられるため、自動縮小によって文字サイズが小さくなりすぎるのを防ぐことができます。

 


◆最小横幅をVIEWPORTの値に指定する


 

例えば、レイアウトの崩れない最小の横幅が640pxだったなら、HTMLソース内に以下の1行を記述します。

 


<meta name=”viewport” content=”width=640″>


 

上記のようにmeta要素を記述すると、そのページは「画面の横幅が640pxだと仮定してレンダリング(描画)した結果を、スマートフォンの画面内に収まるよう縮小」されて表示されます。

 

ですから、ここで指定する値(上記では640)が小さければ小さいほど、縮小率も小さくなり、(縮小表示されている状態でも)文字はそれだけ大きくなるわけです。

 

なお、もしスマートフォン画面の横幅が640pxよりも広い場合は、全く縮小されません。

 

縮小率をゼロにできなかったとしても、縮小率を低く抑えることで、PC用ページを(改修することなく)スマートフォンでも見やすくできます。文字は、小さいよりは大きい方が読みやすいでしょうから。

 


◆ 元々横幅を固定してレイアウトを作っているページでは


 

元々固定幅でページを作っている場合には、その幅をそのまま指定します。

 

例えば、横幅800px固定でページのレイアウトを作っているなら、以下のように記述します。

 


<meta name=”viewport” content=”width=800″>


 

前回は、この「640」や「800」という数値の代わりに「device-width」という文字列を記述していました。

 

これは、「描画する横幅を、端末の実際の横幅に合わせる」という意味です。

 

なお、上記のソースを記述する場所は、前回にもご説明した通りHTMLソースのhead要素内(=「 」タグと「」タグの間)

 

ならどこでも構いません。

 

数値も含めて、すべての文字は半角文字で記述しなければならない点に注意して下さい。

 

このように、HTMLソースにたった1行のmeta要素を追記するだけで、PC用に作られたページを縮小されすぎることなくスマートフォンで表示させられるようになります。

 

「スマートフォン専用ページを作る余力はないが、既存ページをスマートフォンでも見やすく表示させたい」

 

という場合には、ぜひ試してみて下さい。

 

たった1行で済むので、とてもお手軽でおすすめです。

 


 

以上、今回の連載はここまでです。

 

最後までお付き合いいただきまして、ありがとうございました。またの機会を楽しみにしております。

 

 

 

Loading...
このエントリーをはてなブックマークに追加      mixiチェック
<<前の記事に戻る  
続編
2011.11.08
スマートフォン対応サイトの作りかたの基礎(第1回)

▲ページトップへ戻る

1CLICKアンケート!!
Loading...
1CLICKアンケート!!
アフィリエイトで稼ぐための心構え3カ条
1.「稼ぐ気持ち」を出しすぎない
稼ぎたい気持ちが全面に出ていると、ユーザーはサイトに対し良い印象を持ちません。
2.「納得できる方法」で稼ぐ
報酬額ばかりで選ばず、自分自身がお薦めできるプログラムを心が伝わるように紹介しましょう。
3.実績のある方法や考え方などを「学ぶ」
「成功者のノウハウ」、「今盛り上がっている市場は?」など、常に最新情報をキャッチし、実践できているかどうかが、アフィリエイト成功のカギ。アフィ大では、アフィリエイトで稼ぐためのお役立ち情報を数多くの成功者が発信しています。ぜひご活用ください!

▲ページトップへ戻る