ホームページをモバイル対応にする方法
ホームページがモバイル対応していないと、Google から文句を言われるし、実際モバイル端末で閲覧したときに文字が小さくて見えません。
「ホームページ モバイル対応」などとしてググっても、css などを書くのが、大変な作業なのです、とか書かれていたり、何万円もする作業料で引き受けるなどの宣伝に遭遇したりして、立ち往生するしかありません。
だって、本格的なwordpress の記事を書くのでない単発の簡単なホームページなのに、それをモバイル対応にする方法は、ないの？
という場合どうしたいいでしょう。
うん、簡単にできます。処理は、えーっと、数行です。ここではその方法を紹介します。
まず、ビューポートを指定する、以下の行(だいだい色の部分)を追加してください。<head>～</head>の間に追加します。このビューポートを指定するための記述がないと、google search console で、「ビューポートが設定されていません」という警告を受けてしまいます。
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<meta … > を、メタタグといいます。
実質、ビューポートが設定されていなくても、以下に示す @media only screen and … の方法で、文字が小さすぎる問題を解決すれば、実質的な問題はないと思われるのですが、警告はきもちがわるいですので、上記のビューポートの設定はしておいたほうがいいと思います。
ビューポートを上記のように設定すると、今度はスマホ画面からホームページがはみ出てしまう問題が発生するため、調整のために以下の記述をします。下のだいだい色の部分を、css ファイルまたは、html ファイルの、<style type=”text/css”>～</style>の間に記述します。僕は試していませんが、.body の記述があらかじめ存在する場合には、オーバーライドの関係で、それより後ろに、以下の記述したほうがいいのかもしれません。
@media only screen and (max-device-width: 480px) {
/* スマホ用のCSS */
body {
font-size : 150% ;
zoom: 50%;
}
}
font-size はフォントの大きさ、zoom は、ページ全体の拡大率を示しています。
一般的に、スマホ対応の cssを書いて font-size や いろいろなパラメータをこうしたい(設定したい)、という場合は、上記の、@media only screen… のように記述します。
font-size や、zoom の数値は、お好みで構いません。スマホ画面での見え方を確認しながら調整するといいと思います。でも、上記の値でだいたいOKでしょう。スマホ画面でホームページがどのように表示されるかを見るためには、例えば chrome についている機能(ツール)があります。chrome ブラウザで、右上の点々々->その他のツール->デベロッパーツール から、デベロッパーツールで見え方を調べることができます。