皆様こんばんは。ドコえもんです。
前回までは過去を振り返る記録でしたが、本日は「ほぼ」リアルタイムな記事となります!!
前回が12月末のお話なのに飛びすぎじゃね?というツッコミはやめましょう。
~先日~
アクセス数を増やすのであればスマホ対策は欠かせない、というような記事を読みましたので、遅ればせながら自分のサイトをスマホで見てみたら・・・
文字も画像も全体的に小さっ!!文字が変な所で改行されてる!?
調べてみると、PCサイトをそのままスマホで見ると、文章の右側に結構な空白が出来てしまうということで、私が何かしらを間違ったわけではなかったようです。
これ、なんと文字の背景に透明な画像を入れてやれば解決するとのこと。cssに
p , li { background-image:○○○;} ※○○○は透明な画像ファイル名(サイズは1pxでOK)
を追加してやれば・・・あら不思議!簡単に直ってしまいました。
これでぼくのサイトはスマホ対策バッチリだぜ!とか思って安心しきっていましたが、あるサイトの記事に、Googleが提供している「モバイルフレンドリーテスト 」をやればスマホ対策が出来ているかどうかが分かるとの情報があるではありませんか。
どれどれ、試してみるかいなということでアドレスを入力してGo!
・・・・・・フレンドリーじゃない!?
文字が小さいだのリンクが近すぎるだの罵詈雑言の嵐。。。まぁ確かにその通りよね(笑)
というわけでモバイルと仲良くなるために調査開始!
結果、ページのスタイル(レイアウト)を指定しているCSSファイルにメディアクエリを活用すれば解決するとのこと。ふーん、そっか。なるほどねー。メディクリね。はいはい。
なにそれ(どーん)
それからしばらく奮闘しまして昨日ようやくモバイルと仲良くなれたのですが、そのお話は次回に続きます。。。