ブログのアクセスデバイスを確認してレスポンシブWebデザインにしてみたよ

ブログ運営

このブログは8割がモバイルからのアクセスやねー

けどモバイルから見たらパソコンでカスタマイズしたところズレとる!

それはレスポンシブ対応せないかんね!

両方しっくりくるレイアウト考えよ・・

とりとん
とりとん

ちょっとその前にレスポンシブって何よー?

そもそもレスポンシブという単語は「反応が良いさま」という意味がありますが、Webでいうレスポンシブとは『レスポンシブWebデザイン』のことです。

レスポンシブWebデザインとは、様々な規格の画面サイズでも綺麗なレイアウトでWebページを表示させるデザインのこと

ブログの記事はパソコン・モバイル・タブレットなど様々なデバイスからのアクセスがあるので、しっかりとレスポンシブ対応する必要があります!

CSSで3つブレイクポイントを作ってレスポンシブ対応させる方法はこちらからどうぞ⬇️

各デバイスからのアクセス数

当ブログはモバイルからのアクセスが8割占めていて、残りがパソコンとタブレットというデータになっていました。

ちなみに、どのデバイスでよくアクセスされているかは、Googleアナリティクスで確認することができます。

まずは、Googleアナリティクスにログイン。

ホームから下に進んでいくと、『もっとも使われているデバイスは?』という円グラフが出てきます。

『モバイルのサマリー』をタップすると、デバイス別のユーザー数や直帰率などの詳細も見ることができますよ。

レスポンシブ対応が必要な箇所

WordPressはデフォルトでレスポンシブWebデザインになっていますが、任意でカスタマイズしている箇所は同時にレスポンシブデザインにする必要があります。

例えば、当ブログのトップページのメニューアイコンは・・

ねぇ、モバイル版だけスライドにするとかできる?

できるよー

カタカタッ(CSSを書く)

こんな感じ?

んーなんか微妙やなぁ、やっぱ2列の方がいいかも・・

はいはーい

カタカタッ(CSSを書く)

こう?

んーいや、やっぱり最初のに戻してロゴサイズをー・・

・・はいよ

カタカタッ(CSSを書く)

いいですかね・・

と、なかなかしっくりくるサイズ感にならず、いろんなパターンで試みてやっと・・って感じでしたw

テーマエディターのCSSでカスタマイズできるよ〜

CSSでスクロールバーのカスタマイズをする方法はこちらからどうぞ⬇️

レイアウトの確認方法

WordPressはデフォルトでレスポンシブWebデザインになっているとは言いつつも、モバイルとパソコンのではブロックの表示のされ方や改行箇所などが異なってきます。

WordPressのアカウントでログインすれば、編集画面の下の方に『レスポンシブテスト』というところがあるので、ここをタップすると様々な画面サイズでの表示を確認できます。

もしいくつかデバイスを持っている場合は、実際に見て確認してみてくださいね。

そっちの方が確実なのでw

とりとん
とりとん

最後まで読んでいただきありがとうございました!

次回のブログ運営日記は、ブログのオリジナリティやカテゴリー選定について書いたのでよかったら読んでみてください〜

コメント

タイトルとURLをコピーしました