ブログ

2016年5月24日 23時40分23秒 (Tue)

ブログのスマホ対応! 代表的な問題点と、見やすくするための解決策

レイアウト崩れをチェックする方法から、その解決策まで教えます! ブログ・ホームページのスマホ対応って、中々に大変ですよねぇ。みなさん、ちゃんとやってます?

というわけで、今回は「スマホ対応」について自分の経験と対策を書いてみたいと思います。

目次
・スマホ対応は面倒だけどやろう!
・PCでスマホの画面を確認する方法
・文章のレイアウトが崩れる
・画像が縦に伸びる
・全体のレイアウトが変わってる


スマホ対応って面倒!
だけど、やりましょう!


PCとスマホで画面の見え方が違う、それが問題の原因なんですよね〜。PCだけで更新作業をやってる人は、ついついスマホのことを忘れがちです。逆にスマホで更新作業してる人には無縁の話なんでしょうが……

しかし、スマホからの訪問者も非常に重要です! 例えば、このブログもスマホから見ていただいてる人の方が多いですしね〜。みなさん、スマホ対応はちゃんとやりましょう!

そのためには、自分のブログをスマホで見るのが1番です。自分で自分のブログをチェックしてみるべし。

中には「スマホなんて持ってないけど……」って人もいるかも知れまんが、ご安心を。PCでスマホの画面を再現する方法があるんです! 


PCで、スマホ画面を再現

@右上のメニューボタンをクリック。ブラウザの種類によって、見た目が違うので注意!
img_20160525-010611.png
Aその他のツールから、デベロッパーツール・開発者用ツール・検証などを探す。ブラウザの種類によって、名前が違うので注意!
img_20160525-010622.png
Bさらに、スマホ画面表示・エミュレーションなどを探してクリック。ブラウザによって違いがあるので(以下略
img_20160525-010814.png

お分かりいただけるでしょうか? 左の部分に、スマホで見た時の画面が再現されていますよね! これでPCしか持ってなくても、自分のブログ・サイトをスマホ画面で確認できます。色々と見え方をチェックしてみましょう!

……まぁ、ここまで書いておいてあれなんですが、大手のブログサービスは勝手にスマホ対応している場合が多いようです。それなら特に何もしなくてOK

しかし、レイアウトが崩れているような対応しましょう! 以下に代表的な問題点と解決策を書いていくので、参考にしてください。


@文章の見た目が崩れる!

PCではきれいに見えていた文章も、スマホでは見にくい場合があります。改行の位置がズレるんですよね。例文を書くと

この頃、すごく暑くなってきたと思いませんか?
まだまだ5月なのに夜が寝苦しいと感じています……
このまま気温が上がっていくならば、7月8月にはどうなってしまうのか?


PCだと↑のように見えていたような文章が、スマホだと

この頃、すごく暑くなってきたと思い
ませんか?
まだまだ5月なのに夜が寝苦しいと感
じています……
このまま気温が上がっていくならば、
7月8月にはどうなってしまうのか?


このようになってしまいます。文章がぶつ切りになって読みにくいですよねぇ。これに対する解決策は、1つの段落は改行せずに続けて書くようにすることです。

この頃、すごく暑くなってきたと思いませんか? まだまだ5月なのに夜が寝苦しいと感じています……このまま気温が上がっていくならば、7月8月にはどうなってしまうのか?

このように改行をせずに書くことで、ぶつ切りになるのを防ぐことができます。また、スマホの画面はPCより小さいので文字は大きめにしておいた方が親切でしょう。


A画像が縦に伸びる!

PCだと正しい形の画像が、スマホだと縦に伸びてる! ってことも多いですよね。

img_20160525-224738.png
↓縦に伸びてる!
img_20160525-224751.png

これを解決するには、画像を右クリックしてプロパティの高度な設定から height: auto;を設定すればOKです。

img_20160525-225139.png

画像を使うときは、忘れずにheight(=高さ)をautoに設定しておきましょう。


B全体のレイアウトが
変わってる!


文章や画像だけでなく、ページ全体のレイアウトが変わってしまう場合も。例えば、私がこの記事を書いている「簡単無料ホームページ」では↓のように表示されます。

PC
img_20160525-230457.png

スマホ
img_20160525-230511.png

プロフィール・最新記事などが1番下になり、訪問者の方に見てもらいにくくなってます。しかし、このようなレイアウトの変更は根本的な解決はできません。

簡単なテクニックで防止できるものではないのです。根本的な解決にはブログサービスの変更などが必要になってくるでしょう。

対処療法になってしまいますが、内部リンクの整理・両方のレイアウトに対応できるブログづくりを地道に調整するしかありません。例えば、私は最新記事への内部リンクを増やしました。最初に書いたように、自分のブログをスマホで見てみると変化がわかるので対応していきましょう。

最後に、今までのまとめです。
@自分のブログをスマホの表示で確認しよう!A文章は、1つの段落の中で改行しないようにB画像は height: auto;の設定をC全体のレイアウトは地道に調整するしかない

長い記事になってしまいましたが、参考になれば幸いです〜

おすすめの関連記事
ブログのアクセスが少ない理由
フォロワーを増やす意外な方法
人気ブログランキング攻略法
1日100PVを超えてきた!
 

目次に戻る




この記事にコメントを書く










表示されている文字を入力してください
認証コード

プロフィール

プロフィール画像
名前
評論家気取り
性別 
血液型 
想像におまかせします(血液型による違いなんて、迷信ですよ!)
趣味
趣味は読書とネットサーフィン、ゲーム少々
好きな作家は星新一
後は空想にふけったりもしています
特技
ぼんやり時間を過ごすこと
一人でいること
色々なアイディアを練る事(ただし、実行はしません!)
想像力をふくらませること
職業
自由人
座右の銘
終わり良ければ全て良し

明日できる事を今日するな
このホームページのテーマ
「想像力」! 想像力がテーマです!
ブログで紹介しているものごとは想像力の源
イラスト・加工写真は想像力の産物
このホームページは、こんな人にオススメ!(のはず)
・想像力を高めたい
・何かを想像するのが好き
・サブカル関係の作品を作っている
・ゲーム、アニメ、漫画、ラノベなどが好き
・その他の分野であっても、何かを創作している