古着衛門ツイッタープレゼント企画 開催中!!

埼玉県伊奈町の激安古着屋「古着衛門」です。

現在、古着衛門プレゼント企画 開催中!!
詳しくは、固定ツイートを参照。
どしどしご応募ください。

ご応募方法は、フォロー&固定ツイートをRT
たくさんのご応募待ってまーーーす。

古着衛門Twitterへ

ビューポートの指定(HPのモバイル対応)

ホームページ関連日々の出来事
ホームページ関連
SELECT by 古着衛門

SELECT by 古着衛門

古着衛門のホームページは自作なんです。

最近、スマホから閲覧される方が多いようで、

『文字が小さくて見えない!!』

なんて、ハズキルーペの渡辺謙さんのように言う人がいるんですよね、、、。

きちんとモバイル対応のホームページを作ってしまいたいのは山々なのですが、私のやる気がなかなか起きないので、起きるまで待っている状態です。

そこで、スマホ画面にて当社ホームページを確認してみました。

見てみるとスマホ画面の幅にホームページ横幅がすべて入っている状態で、全体が遠目から見えている状態。

おのおの拡大してくれればいいのですが、それがめんどくさい人がいるらしいので応急処置で改善してみたいと思います。

とりあえず、はじめから大きな表示にすればいいんでしょ?

と、言うことで、『ビューポート』をホームページのHTMLソースに<metaタグ>を差し込むことで指定しようと思います。

この方法は、<metaタグ> を作ることさえできれば 、ホームページのHTMLソース の中に入れ込んであげるだけなので簡単です。

<metaタグ> を作るのに詳しい解説のあるサイトがあったので参考に載せておきますね。
https://www.tagindex.com/html5/page/meta_viewport.html

そして、できあがったのが下の<metaタグ> です。

——————————————————————————————

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

——————————————————————————————

作った <metaタグ> をホームページすべてのページに差し込みます。

差込の位置は、ページの HTMLソースを開くと、上のほうに<head>と</head> に囲まれた文たちがあると思います。

そこには、その他 <metaタグ> もありますので、すぐにわかると思います。

それらと同様に並べて記載するだけでOKです。

それでは、うまくできているか私のスマホの画面で確認してみましょう。

<metaタグ> を追加した前後のスマホ表示画面の比較が次の画像になります。

どちらが正解かわからないですが、とりあえずやってみました。

評価をいただけたら幸いです。

最後に、、、

このビューポートタグはモバイル端末閲覧用のタグなので、パソコン画面上での表示に影響はありません。

また、ホームページのブログだけは、最近リニューアルしたので完全にモバイル対応しています。

タイトルとURLをコピーしました