- 2015-3-18
- web html css
ども！
先日Google先生から「検索結果の順位にサイトのスマホ対応が影響を与えますよ」というアナウンスがありましたね。
4月21日にこのスマホ対応を考慮した検索順位に変動がある、ということなので急いでスマホ対応をしなくてはいけません。
わたしも急いでサイトのレスポンシブ化を行っているところです。昔作ったサイトはスマホに対応してなかったり、買ったテンプレートやWordpressのテーマもスマホに対応して無かったりで色々と大変です。
今日の記事は、既にサイトを運営していて、しかもスマホ対応していなくて急いでレスポンシブ化をやりたい方が対象です。
サイトのレスポンシブ対応をパパッとやっちゃおう
てことで、CSSやHTMLが苦手な人、よくわからない人のために、いつものようにやっつけ仕事手っ取り早く結果を出す方法をお伝えしたいと思います。
というか皆さんそれぞれ異なったサイト構成、テーマを使っていると思いますので、レスポンシブ対応のヒントを書いていきますので自分のサイトに読み替えて応用して貰いたいです。
CSSやHTMLの構文をイチから勉強しなおしていては間に合いません。てことで応急処置しっかりGoogle先生に「モバイルフレンドリーです」と評価を頂けるサイトに変えるべく、レスポンシブ化を行っていきましょう。
私自身も構文の専門家ではありませんので正しいかどうかはわかりませんが、Google先生からOKが出てるので大丈夫だと思っています。
ちなみにモバイルフレンドリーテストサイトはこちら。ここに自分のサイトURLを入力してOKであれば問題なしです。
https://www.google.com/webmasters/tools/mobile-friendly/
自分も色々試してみたのですが、やり方は２つありますので好きな方でチャレンジしてください。
サイトのレスポンシブ化の方法その１
PC用のCSSファイルと、モバイル用のCSSファイルを用意する方法。
Step1.
今まで使ってたCSSファイルはPC用に使いますので、それを複製してモバイル用のCSSファイルを作ります。ファイル名は「mobile.css」とかにしておきます。
Step2.
PC用のCSSファイル（仮にstyle.css）を開いて、横幅641以上の画面の場合に読み込まれるCSSとします。
１行目に以下のコードを記述。
@media screen and (min-width: 641px){
ファイルの最後に
}
を追加して、全体を囲ってあげます。下図参照。
Step3.
次に、モバイル用のCSSファイル（mobile.css）を開いて、横幅640以下の画面の場合に読み込まれるCSSとする。
１行目に以下のコードを記述。
@media screen and (max-width:640px){
ファイルの最後に
}
を追加して、全体を囲ってあげます。下図参照。最後 } で閉じるのを忘れないように。
Step4.
HTMLファイル（index.html）を開いて、次の１文を追加。追加する位置はmetaタグが書いてある付近でOK。
<meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=1.0, minimum-scale=1.0">
これは画面表示がスマホの画面幅に合わせる、という指示（だったと思う。うろおぼえ）
Step5.
Step4に引き続きHTMLファイルに、モバイル用CSSファイルも読み込むように次の１文を追加。（mobile.cssの部分は相対パスをちゃんと自分の環境に読み替えてね。）追加する位置はPC用CSSを読み込む一文の下あたりでOK。
<link rel="stylesheet" href="mobile.css" type="text/css" >
Step4とStep5はindex.html以外の全てのHTMLファイルにやる必要あり。
ここまでが前準備となります。
Step6.
ここからモバイル用CSSの編集作業に入ります。index.htmlをブラウザで画面幅を狭くしてプレビューしながらmobile.cssを編集していきます。
ここからはヒントです。皆さんの環境で異なるので最終的には画面を見ながら調整してください。
修正する箇所はだいたいwidthと書いてある部分です。widthで幅が指定されているとモバイルの画面幅を突き抜けてしまいますので、その部分を修正すればOKというわけです。
スマホのブラウザの横幅の最小は320pxなのでwidthの幅指定が320px以上になってる部分は100%指定にするといい感じになる事が多いでしょう。
たとえば、以下のようなコードがあれば
#container,#top,#header{
width: 900px;
}
次のように書き換えるという事です。
#container,#top,#header{
width: 100%;
}
◆ヒント１ 画像の横幅が突き抜ける場合の対処その①
HTMLファイルで、
<div id="headerin"><img src="./images/header.jpg" /></div>
のようにdivタグの中にimgがある場合は、
CSSファイルで
#headerin img {width:100%;}
とやるとうまくいく場合がある。
◆ヒント２ 画像の横幅が突き抜ける場合その②
コンテンツ内の画像幅はCSSファイルに
img {max-width:100%;}
としてやると、画面幅より大きい画像は画面幅ピッタリに、画面幅より小さい画像はそのままのサイズで表示される
◆ヒント３ 画像の横幅が突き抜ける場合その③
CSSファイル内で、IDやclassのバックグラウンドとして画像が設定されてる場合は
#headerin {
background: url("./img/header.png") no-repeat;
}
↓
#headerin {
background: url("./img/header.png") no-repeat;
background-size:100%;
}
としてやるとうまくいく場合がある。
◆ヒント４ なぜか画面幅よりも広がる場合は
CSSファイル内で、padding や marginで横の距離が設定されていないかチェック。
paddingで横からの距離を設定していると突き抜ける事があるので0にしてやるとよい。（ブラウザ見ながら該当箇所を適宜修正）
◆ヒント５ 画像の縦サイズは
height:auto;
とすると、うまく収まる場合がある。
とまぁこんな感じでうまくいくはずです。
てことで、今日は以上です！もう１個方法があるんですけど後日にします。まずは方法その１で仕組みを理解しながらやっていくといいと思います。
あとがき
いかがでしょうか。自分はHTML構文をよくわからないのにサイトを作ってきた人間なので（おい）、レスポンシブ対応をするのにスピーディに実現する方法を探してここに行き着きました（笑）たぶんこれでスマホの画面幅にあわせた十分なサイトができるはずですよ！
それからブラウザでチェックしながらCSSのどの箇所を修正するかを精査するには、FirefoxかChromeで該当htmlファイルを開いて右クリックから「要素を調査」「要素を検証」の機能を使うと修正箇所を探しやすいはずです。
今日の内容は多少はHTMLを知ってる人向け、な内容になってしまいましたけど、これぐらいの理解でレスポンシブ化できるぐらい簡単にできると思います。
