僕は、はてなブログで使っていたデザインがしっくりきていませんでした。
本日は思い切ってブログデザインを変更しました。
しかし、ここで一つ問題が起こりました。
スマホにレスポンシブせずに、画面が横揺れしまくっていたのです。
これは、スマートフォンファーストの時代には最悪の状態です。
ユーザビリテイィーがことごとく悪くなってしまい、途中離脱が起こることは目に見えています。
パソコンと格闘して原因をつかさどることができたので、もし悩んでいる人がいたらチェックしてください。
この記事の目次
そもそも何のデザインを選んだのか？
はてなブログのテーマストアで一番人気のBrooklynを選びました。他にも良さそうな奴がたくさんあるので、変更を考えている方はチェックしてみてください。
どのようなデザインか気になる方は見に来てください。
原因として考えられるのは2つ
1,アドセンスのレスポンシブができているか？
グーグルアドセンスの横幅のサイズが長すぎると、PCのサイズのままスマホにレスポンシブされるので、横揺れが発生してしまいます。一度チェックしてください。
2,はてなブログの2つの条件を満たしているか？
- Media queries（メディアクエリ）などを使用して、どのデバイスから閲覧しても適切な見た目になるよう、デザインテーマのCSSを調整する
- テーマのCSSの先頭に
Responsive: yesという行を含んだコメントを挿入する
例えば、Evergreenテーマでは下記のようなコメントを記述しています。なお、コメントにはテーマ作者などの情報をこのように含めるのもよいでしょう。
/* Theme: evergreen Author: Hatena Blog Team Description: 1カラムで文章を書くことに集中できるテーマです Responsive: yes */
引用サイト:はてなブログテーマ制作の手引き – はてなブログ ヘルプ
僕の場合は、テーマをBrooklyを使っているので以下となります。
/*
Theme:6653586347155924442
Author: Hatena Blog Team
Description:
1カラムで文章を書くことに集中できるテーマです
Responsive: yes
*/
Themeの名称は、テーマをインストールした後CSSデザインの場所に初めに書かれているので、そこでわかると思います。
Google Insightsは知っていますか？
こちらは、あなたのWebページで何か問題が起こっていないかを調べるサイトです。
(もちろん無料です)
問題の具体例としては
1,Webページの読み込みが遅い
2,横揺れがする
が挙げられます。
Google Insightsを使うことによって、どのページ？どのCSS？どのJavascript?に原因があるかを調べてくれます。
他にも参考になるサイト
その人によって原因は違うと思います。他にも参考になるサイトを上げておきます。
コメントを残す