はてなブログでスマホ画面の横揺れに悩んだので、いくつか紹介します。

f:id:Taketake:20161115183134p:plain

 

僕は、はてなブログで使っていたデザインがしっくりきていませんでした。

本日は思い切ってブログデザインを変更しました。

しかし、ここで一つ問題が起こりました。

スマホにレスポンシブせずに、画面が横揺れしまくっていたのです。

これは、スマートフォンファーストの時代には最悪の状態です。

ユーザビリテイィーがことごとく悪くなってしまい、途中離脱が起こることは目に見えています。

パソコンと格闘して原因をつかさどることができたので、もし悩んでいる人がいたらチェックしてください。

 

そもそも何のデザインを選んだのか?

はてなブログのテーマストアで一番人気のBrooklynを選びました。他にも良さそうな奴がたくさんあるので、変更を考えている方はチェックしてみてください。

Brooklyn – テーマ ストア

 

どのようなデザインか気になる方は見に来てください。

たっけのメモ

 

原因として考えられるのは2つ

1,アドセンスのレスポンシブができているか?

グーグルアドセンスの横幅のサイズが長すぎると、PCのサイズのままスマホにレスポンシブされるので、横揺れが発生してしまいます。一度チェックしてください。

2,はてなブログの2つの条件を満たしているか?

 

  1. Media queries(メディアクエリ)などを使用して、どのデバイスから閲覧しても適切な見た目になるよう、デザインテーマのCSSを調整する
  2. テーマの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は知っていますか?

PageSpeed Insights

こちらは、あなたのWebページで何か問題が起こっていないかを調べるサイトです。

(もちろん無料です)

問題の具体例としては

1,Webページの読み込みが遅い

2,横揺れがする

が挙げられます。

Google Insightsを使うことによって、どのページ?どのCSS?どのJavascript?に原因があるかを調べてくれます。

 

他にも参考になるサイト

その人によって原因は違うと思います。他にも参考になるサイトを上げておきます。

 

boxlife.net

yossense.com

 

 

早稲田の留年生。 #バーテンダー #ブロガー シナリオ 脚本なども書いてます。写真も撮ってます。映画作りたいです。連絡はtaketake.12326@gmail.comへ
スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です