ブログをスマートフォンで見たら字がすごく小さくなる [ブログ]
私はPCは全く素人です。
もちろんCSSとかhtmlとかさっぱり。
デフォルトの機能でさえ使いきれていないです。
でも！！
ブログがスマートフォンで表示されたときにあまりにも見づらい時があるので何とかしたい。
と思っていました。
記事によっては、砂みたいな小さな字になることがあるのです。
こんなの、自分だって読まんわ。
よくわからないまま、60記事を越えてきました。
記事が増えてくると、後で直すのはすごく大変そうです。
今のうちなら何とかなります。
いろんな人のブログを見てみるといろんなことが書いてありましたが、
参考にさせてもらったのは、この方のブログのこの記事。
はるのたわごと～経理マンの転職
【私のブログの進化論 ～ソネットブログ第二次レスポンシブデザイン化計画】
同じSonetブログで、はるさんも手探りでスマホ最適化を進めていたのでわかりやすかったです。
ありがとうございました。
おかげで原因がいくつかわかりました。
自分のブログがスマートフォンで表示されると字が小さくなる原因
①リンクのURLをそのまま貼っていた。
つながった英文の記述は途中で改行してくれません。
なので、長いURLは画面内にそれを収めるように自動調整されて、砂みたいな小さな字になる。
②横幅の広い画像が貼ってある。
sonetブログでは、画像を貼ると、ほぼwidth="350" height="231"近辺に調整して貼ってくれます。
ＰＣとスマホの表示のちょうど間をとってこの値なのかなと思います。
バナーの様な横長の画像があると、さきほどのURL原文ままと一緒で、横長の画像の幅に自動調整されてしまい砂みたいな小さな字になります。
③記事下のアドセンスを336×280のレクタングル（大）広告にしていた。
レクタングルは、スマホの場合300×250のレクタングル（中）がぴったりのようです。
レクタングル（大）だと、横幅がレクタングル（大）の幅に自動調整されて、フォントが小さくなるようです。
レクタングル（大）広告は、画像の350幅より幅は小さいのだけど、どうもひっかかっている感じです。
日本語テキストだけの記事でも、字が小さくなってましたから。
スポンサーリンク
対策をしてみました
①リンクのURLをそのまま貼っていた。
これは、すべて、関連記事はこちらとか、【スポニチ】という感じで文字リンクにしました。
これです。
これさえ、最初はよくわかってなかったです。
リンクさせたい日本語を選択して、その後、このボタンをクリックしてURLを貼りつけます。
何回かやるとわかりました。
②横幅の広い画像が貼ってある。
画像を貼りつけたときの表示 タグっていうのかな。
width="480" height="233"
を縦横比が変わらないように縮小します。
7割縮小するとこれぐらい。 width="336" height="186"
これを書きこみました。
③記事下のアドセンスを336×280のレクタングル（大）広告にしていた。
アドセンスをレスポンシブに変更しました。
変更するとここで問題発生！
スマホ表示は、レクタングル(中)がぴったり表示されたのですが、
PC側の広告が、バナーになってしまいました。
またまた検索です。
「メモトラ」 九荻 新（くおぎ あらた）さん
Google AdSenseのレスポンシブ広告で形状を指定する方法
ありがとうございました～。
コードの中の下記を書き換えました。
data-ad-format="auto"
“auto”を”rectangle”に
ちなみに
レクタングルがよければ、data-ad-format=”rectangle”
縦長がよければ、data-ad-format=”vertical”
横長がよければ、data-ad-format=”horizontal”
だそうです。
アドセンスの規約にも違反してないとのことです。
感謝。
とりあえず…
全ての記事を手直ししました。
記事数少ないですからね。
とりあえず、スマホ表示させたときに、砂みたいな小さな字や、横スクロールが必要なことはなくなりました。
自分的には、すごーく頑張りました。
スポンサーリンク
タグ：レスポンシブ
コメント 0