urakatahero“B”log

【日刊情報系体験型雑記】

\人気のカテゴリはこちら/
[#メダカ] [#シャグ] [#ブログノウハウ]
[#ジャイロX] [#DIY] [#麻婆豆腐]
[#旅行記]

アクセスカウンター アクセスカウンター


【朗報】レスポンシブ化されたスマホ版はてなブログの横揺れの原因を突き止めてCSSを使って直した方法。


記事本文軽量化の為
はてなスターやコメントは、
このエントリーをはてなブックマークに追加からお願いします🙇‍♂

PVアクセスランキング にほんブログ村

スマートフォンを掲げて大喜びする群衆(AI画)

ちなみにデフォルトテーマ(Smooth)です。

 

スマホで見ると横揺れが起きていました。

スマホ画面で見ていると、ブログが横に数px程動いてしまっている状態(実際の状況をキャプチャーしたアニメーションGIF)

無意味にスライドする状態でした。

スマホからキャプチャーしたので画像が大きくて申し訳ないですが、実際の動作はこのように、ほんの数ミリ程度だけ横に動いてしまう状態でした。

まえおき

このブログ(urakatahero”B”log)は【はてなブログ】の【デフォルトテーマ(Smooth)】を、自分なりにカスタムして使用していますので、同じはてなブロガーでも、横揺れなどの症状がない方もおられると思いますが、同じような状態に悩んでいる方の参考になればと思い記します。

私自身もスマホで閲覧するときに、横に動かさないように注意する必要があり、なんだかストレスを感じてしまう状態だったのでずっと気になっていました。

決して放置していたわけではありませんが、私はCSSなどのプログラムに明るくないため、原因を探る事自体が困難で、かなりの時間をかけてしまいました。

途中、投げ出しているので、結果的には判明から治すまでおそらく2カ月ほどかかりました…。

しかし、本日ついに、なんとか横揺れを起こさないようにできました。

レスポンシブ・スマホ・横揺れ・グラグラ・ガタガタ などと検索すると多くの場合は、Googleアドセンスの広告のサイズが320pxでスマホ画面のサイズが~略~と言うサイトがたくさん検索結果に出るのですが、私のブログが横揺れする原因は、アドセンスのサイズや余白などが原因ではありませんでした。

横揺れの原因を探った方法。

はてなブログのダッシュボード➡デザイン➡カスタマイズ➡デザインCSSの順にクリックして、以下のCSSを入れます。

body * {
  outline: red 1px solid;
}

このcssを保存して、スマホでブログを表示すると、ブログ内のそれぞれが構成されている要素(セクター)の全てが赤枠で囲まれます。

CSSを用いて赤枠のアウトラインを使用してデバッグしている最中の画面

赤枠で囲まれます

これではみ出している部分を探していくのですが、レスポンシブモードでは編集画面でスマートフォンのプレビューができないので、実際に手持ちのスマホでブログを表示させる必要があります。

そのため、やや時間がかかってしまい、この作業をしている間にブログを見てくれていた方々はとても驚いたと思います。ご迷惑をおかけしました。

ということですので、このブログ記事の為のキャプチャーを含むすべての作業を高速で行わなくてはなりません。

グーグルアドセンスがはみ出てるのか?

Googleアドセンスの広告バナーはブログにジャストフィットしているので、グーグルアドセンスが原因ではないことがわかりました

ジャストフィットしてました
悪さしていたのはこの子でした

Pagerがはみ出ていたせいでスマホ版のブログがガタガタと横に動いていたことが判明しました。実際にハミ出ている様子がわかるキャプチャー画像

Pagerがやらかしてました

TOPページの記事一覧の末尾に”次のページ”というリンクがあるのですが、これはPagerと言ってここを押すことで遡った一覧が現れると言う仕組みです。

ちなみに”はてなブログ”の場合は【前のページへ】が用意されておらず、【次のページへ】のみが表示されるのですが、おそらくスマホには最初からバックキーが押しやすいところに搭載されているので、読者に無駄なリソースを使用させない為と思われます。

なんせ挙動が同じですから。

なにはともあれ、はみ出ている部分がわかったので、今度ははみ出している原因を突き止めなくてはなりません。

原因を突き止めたので修正します

どこを探しても【次のページ】に関する部分が見つかりませんでしたので、その部分そのものをカスタマイズする事にしたのですが、そこの部分は”Pager”と呼ばれる部分なのですが、私自身にはどうする事もできませんでしたので、以下の記事のCSSを参考にして、無事に横揺れを収める事に成功しました。

/* トップページやカテゴリーページのリンクの幅 */
.pager a[href*="page="] {
    width: 25%;
}

引用元:はてなブログの個別記事のページャをカスタマイズ - simadzu’blog
🧔『simadzu’blogさん、ありがとうございました。』

このCSSをそのままコピペすると、以下のようになりました。

Pagerの背景セクターが画面の範囲内に収まっている状態のキャプチャー画像

トップページやアーカイブページが治りました

もう1点直す場所があります。

先ほど直したのはトップページとアーカイブページなので、次に個別記事をなおさないといけません。個別記事とは、今ご覧いただいている記事になります。

キャプチャーするよりも実際に下にズズズっと移動してもらって確認してもらった方が、画像を読み込んでもらう必要がないのでお手数ですが、ズズズっと移動してください。

 

ええ!?見つからない?

 

そうなんです、私は記事毎の記事下部のPagerをまるごと消しました。

というのも、このブログは雑記ですから、前の記事も後の記事も、無関係な記事になる事が多いのです。

であれば、関連記事を読んでもらった方が良いなぁと思って、記事毎のPagerをまるごと消しました。

TOPページやアーカイブページは、ページの移動が行えないと意味がないので、消すわけにはいかなかったのです。

記事内のPagerを消すためのCSSは以下です。

 

/* 記事内のページャーを非表示にする */
.page-entry .pager {
    display:none;
}

 

非表示にしたくない方は、 width: 80%; などと記載すればよいと思いますが、記事のタイトルの文字数が多くなるとはみ出る気がします。

そのあたりのカスタマイズなどは、別途調べてください~。

記事の締め

結論として、ようやくスマホで見た時に横揺れが起こらなくなりました。

一般に言われているアドセンスのサイズや記事のブログのタイトルの問題ではなく、まさかあんなところが原因だとは思いませんでしたね…。

なにはともあれ、これで読者さんが少しでも快適に、余計なストレスなく読み進めてもらえると思うとほっとできます。

今回使用したCSSは以下の2点です。

 

/* トップページやカテゴリーページのリンクの幅 */
.pager a[href*="page="] {
    width: 25%;
}

/* 記事内のページャーを非表示にする */
.page-entry .pager {
    display:none;
}

 

こういう状態になっているのは私だけな気がしますが、同じ状態の方は、今回の記事を是非参考にして、モバイルフレンドリーなはてなブログにしてください!

今週のお題というか、ずっと課題で、長い宿題でした。

 

【追記・はてな無料版にもどしたらガタツキが復活】

PRO版から無料版に戻した為、はてなブログによるADが表示されるようになっているのですが、記事の終了セクタの下のサイドバーの一番上部分にある”はてなブログによるAD”がはみ出ているせいでページががたつくようになってしまいました。

この部分に関しては無料ユーザーではどうにもできないので、運営に直してもらう必要がありますが、PROにして広告を非表示にした方が早そうです。

私はしばらく様子見をします。気づいてくれると良いのですが…。

 

\言及ありがとうございます/

こちらの方がはてなのADの件についての結論を出してくれましたので、是非飛んでください。

Smoothは見やすいので私も気に入っているのですが、しかし、昨今の読者さんはスマホ民が多い為、PCやタブレットでの閲覧者は少ないので、あまり恩恵がないのですよね…。

 

 

関連するはてなブログの記事はこちら

 

ブログのデザインを大幅にカスタムし、スマホ向けに特化させたらPVが少し増えました。 - urakatahero”B”log

はてなブログを使用してSNSまとめサービスを雰囲気で再現する方法 - urakatahero”B”log

無料版はてなブログでリダイレクトをさせずに記事一覧っぽく見せる方法 - urakatahero”B”log

1カ月間だけはてなブログPROになってみることにしました。 - urakatahero”B”log


{please follow me}
Twitter=X Instagram youtubeThreads楽天Room
お問合せ免責事項
・レビュー依頼
・コラボ依頼
・メディアへの出稿
・その他
お問合せからお願いします。
内容によりますが、
基本的には3日以内にご返信しています。
各記事へのコメントなどは、
ブクマコメントにて承っています。