千客万來! かんたん携帯サイト作成講座 本文へジャンプ




せっかく作った携帯サイト、今流行りのスマートフォンでもキレイに見えるようにしたいですよね。でも作成した携帯サイトをスマートフォンで見ると、文字がとっても小さくなってしまってしまいます。

…ということで、作成した携帯サイトをスマートフォンでもキレイに見えるにしちゃいましょう!

スマートフォン用にviewport(metaタグ)を設定します。

作成したサイトのHTMLソースにviewportっていうmetaタグを設定(追加)するだけで、スマートフォンでもサイトがキレイに見えるようになるんです。

そんなに難しくないので是非挑戦してみましょう!!

ではその方法をお教えいたします。

                                                                
viewprt(metaタグ)の設定

作成した携帯サイトの全てのページ(HTMLファイル)にviewportの設定をします。

ここでは下記のviewportの設定を行います。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes,">

・width=device-width:画面に表示される領域の設定。この場合デバイスの横幅に合わせることになります。

・initial-scale: ページが最初に読み込まれた時の拡大率。

・user-scalable: ユーザーに拡大縮小を許可するか、 yes か noで指定。

☆viewportについて詳しく調べたい方は、検索エンジンで「viewport」で検索してみてくださいね!
お好みに応じて設定する属性を追加したり、数値を変更してみてください。


■各ページをホームページ・ビルダーで開いて、「HTMLソース」タブをクリックしてHTMLソースを開きます。

他のmetaタグと同じ場所(HEAD部分)に下記viewportの記述を行います。(下図赤枠をご参照ください。)
(下記のviewportの記述をコピーしてHTMLソースに貼り付けると簡単です。)
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes,">



編集したページを上書き保存します。全てのHTMLファイルに同じようにviewportの記述を行い、MSCを使ってファイルの転送を行います。

【ポイント】
サイトに画像ファイルがある場合、画像の横幅を、多くのスマートフォンを縦に持った場合の画面の横幅、320px以下にするとキレイに表示されます。(ホームページ・ビルダーで、画像を右クリックすると「属性の変更」から画像の横幅、縦幅を変更できます。)


以上でviewportの設定が終わりました。



これで、あなたの携帯サイトににアクセスをすると、携帯電話からでもスマートフォンからでも、サイトがキレイに表示されます。


簡単ですので、ぜひお試しくださいね!
 


ではまた!



前へ


他のページへのリンク

1.携帯サイト変換サービス「MSC」の申し込みをする
2.ホームページ・ビルダー14以降で携帯サイトを作成する@
3.作成したサイトをMSCに転送する
4.転送した結果を確認する
5.実際に携帯端末で見てみよう!
6.ホームページ・ビルダー14以降で携帯サイトを作成するA
7.携帯版のGoogleマップを貼り付ける
8.パソコンと共通のURLを設定する(独自ドメインをお持ちの方向け)
9.スマートフォンでもサイトをキレイに表示する

トップへ戻る


(c)Ubiquitous Business Technology, Inc.