ヨス(@yossense)です。今現在、Google検索では「スマホ対応」がされているかどうかは超重要になりました。PCの検索順位はスマホでの検索順位が適応されています。そのためにはスマホ対応がしっかりとされていないとダメです。今回はブログのスマホ対応がテーマです。海外SEO情報ブログヨス私がブログのスマホでの表示対応で最低限やっていることをまとめたいと思います!スマホ対応で困った6つのこと今回は私がスマホ対応のために最低限やっている6つを紹介するのですが、分かりやすいように「問題点」を見出しにして紹介しますね。スマホで見たら画像がはみ出す?!まずはこちらの比較画像をご覧ください。これは画像サイズがパソコンのままになっているんですね。大きいのではみ出しています。これをスマホで見た時は自動で上画像の右側のように縮小してほしいんです。CSSの<img>に以下のコードを加えるだけでOKです。追記:「height:auto;」を入れ忘れていたので、追記しました。これがないと<img>タグに直接高さ指定をしている場合に画像がびよーんと伸びてしまいます。動画や地図がはみ出すYouTubeやGoogleマップをブログに埋め込んだときに、画面からはみ出していませんか?ほら、YouTubeのこういうやつですよー。YouTubeの動画埋め込みがはみ出しているあと、Googleマップがはみ出しているのもよく見ますね。Googleマップの埋め込み地図がはみ出しているこれも簡単に直ります。}画像の横に文字がキューってなってるさて次です。;」の指定で、文字を右側に回りこませているんですよね。PC画面のように横幅が広ければ問題ないのですが、スマホだと画像の横に文字を回りこませるには無理があります。この「float」の回り込み指定を解除するだけです。パソコンで見た時は、そのままにしておきたいので、ここではメディアクエリを使いましょう。}上記のメディアクエリの記述内に、調整したいCSSを入れ、下記のように合体です。}}余白とか空きすぎなんだけど......あとは微調整ですねー。どのページもきっと「width」「padding」「margin」などを駆使して、パソコンで見た時にキレイに見えるようにコードを書いている思います。それをスマホで見ても同じようにはいかないんですねー。この例を見てください。メディアクエリで「スマホ用」のCSSを読み込んでいるけっこう違いますね。1見出し(h2タグ)の調整まずはこちらの「見出し」を見てください。オレンジ色の帯の部分です。AFTER)この例の場合、文字が大きすぎるのと、文字周りのスペースを取り過ぎだと思います。メディアクエリで、横幅が480pxになると、「文字を少し小さくしたり、文字周りの余白を減らすCSS」を読み込ませます。文字の大きさを小さくしました。上下の余白を少し減らしました。今度は最も文章に使われている<p>タグ。これは一番読みやすさに関わるので重要です。AFTER)上の「BEFORE」を見て私が気になったのは、両サイドのスキマ、文字の大きさ、余白(マージン)、行間です。実はこのままでも読みにくくないのですが、私のブログ記事のように長い文章の場合、スマホでは横一列の文字数を多めにしないと、長くなりすぎるんですよ(笑)。これもメディアクエリを使います。}}変更したのはこちらの点。両サイドの空間を減らすために文字の横一列の幅を広げました。文字の大きさを小さくしました。左右は自動指定(auto)です。文字下のマージン以外はゼロで。<ul>とか<table>なども、同じような要領で「メディアクエリ」の中に追加していけばOKです。これも余裕で直せるんですねー。スマホ横向き→文字が大きい・右下:スマホ横向き→文字の大きさが調度良い)以下のコードを<body>のCSSに入れるだけ。}これだけで直ります。うまくいかないときは「!important」を入れてみてください。}これでもうまくいかない時は、<head>内にある「viewport」を以下のようにしてみてください。く煮ブログスクロールで横がグラグラするスマホでタテにスクロールさせていると、左右にグラグラするサイトってありますよね。これも粗療法ですが、一発で直せる方法があります。;」を入れるだけなんですね。;」は、はみ出した部分を強引に隠して見えなくするという意味です。自分のサイトのURLを入れてチェックしてみてくださいね。mobile-friendly.(このページはスマホ対応できてるやん!)」と言われました。今回は最低限やっておいた方がいい、レスポンシブデザインについてでした。Google云々より、今回紹介したものはユーザーにとって見やすくする方法なのでぜひやってみてください。それにしても、こういうレスポンシブデザインとかWEBについて学ぶのって独学では時間がかかりますよね。今ならオンラインで学べるスクールもあります。」という超ターゲットを絞ったコースがあります。このコースがオススメな理由は、今現在運営しているサイトをリニューアルすることがゴールであること。学生なら10万円以下で今のサイトのリニューアルができ、さらに技術が身につくという一石二鳥なコースです。プロにお願いするとものすごく制作費がかかるので長い目でみると、今学ぶことはかなり合理的です。https://techacademy.jp/webrenewal-programパートナーこの記事、おもしろかったわ。CSSのカテゴリ」にあるきん、そっち見てや。この記事が気に入ったらいいねしよう!最新記事をお届けします。オレンジメールプロフィールTwitterFacebook香川県在住。ブログで飯食っているプロブロガー(月間125万PV達成)のヨスです。効率化オタクが講じて、KADOKAWAから書籍も出版しました。英語学習メディア「英語びより」編集長。ブログを本気で書く人のためのオンラインサロン「ヨッセンスクール」を運営。夫婦別姓を実行してて、何度か新聞からも取材を受けてます。ジェンダーや言語学の話になるとうるさい人です。iPadを使い倒してます。