スマホで見ると横揺れが起きていました。
スマホからキャプチャーしたので画像が大きくて申し訳ないですが、実際の動作はこのように、ほんの数ミリ程度だけ横に動いてしまう状態でした。
まえおき
このブログ(urakatahero”B”log)は【はてなブログ】の【デフォルトテーマ(Smooth)】を、自分なりにカスタムして使用していますので、同じはてなブロガーでも、横揺れなどの症状がない方もおられると思いますが、同じような状態に悩んでいる方の参考になればと思い記します。
私自身もスマホで閲覧するときに、横に動かさないように注意する必要があり、なんだかストレスを感じてしまう状態だったのでずっと気になっていました。
決して放置していたわけではありませんが、私はCSSなどのプログラムに明るくないため、原因を探る事自体が困難で、かなりの時間をかけてしまいました。
途中、投げ出しているので、結果的には判明から治すまでおそらく2カ月ほどかかりました…。
しかし、本日ついに、なんとか横揺れを起こさないようにできました。
レスポンシブ・スマホ・横揺れ・グラグラ・ガタガタ などと検索すると多くの場合は、Googleアドセンスの広告のサイズが320pxでスマホ画面のサイズが～略～と言うサイトがたくさん検索結果に出るのですが、私のブログが横揺れする原因は、アドセンスのサイズや余白などが原因ではありませんでした。
横揺れの原因を探った方法。
はてなブログのダッシュボード➡デザイン➡カスタマイズ➡デザインＣＳＳの順にクリックして、以下のＣＳＳを入れます。
body * {
outline: red 1px solid;
}
このcssを保存して、スマホでブログを表示すると、ブログ内のそれぞれが構成されている要素(セクター)全てを赤枠で囲みます。
これではみ出している部分を探していくのですが、レスポンシブモードでは編集画面でスマートフォンのプレビューができないので、実際に手持ちのスマホでブログを表示させる必要があります。
そのため、やや時間がかかってしまい、この作業をしている間にブログを見てくれていた2-30人の方々は、とても驚いたと思います。ご迷惑をおかけしました。
ということですので、このブログ記事の為のキャプチャーを含むすべての作業を高速で行わなくてはなりません。
グーグルアドセンスがはみ出てるのか？
悪さしていたのはこの子でした
TOPページの記事一覧の末尾に”次のページ”というリンクがあるのですが、これはPagerと言ってここを押すことで遡った一覧が現れると言う仕組みです。
ちなみに”はてなブログ”の場合は【前のページへ】が用意されておらず、【次のページへ】のみが表示されるのですが、おそらくスマホには最初からバックキーが押しやすいところに搭載されているので、読者に無駄なリソースを使用させない為と思われます。
なんせ挙動が同じですから。
なにはともあれ、はみ出ている部分がわかったので、今度ははみ出している原因を突き止めなくてはなりません。
原因を突き止めたので修正します
しかし、どこを探しても【次のページ】に関する部分が見つかりませんでした。
そこでその部分そのものをカスタマイズする事にしたのですが、そこの部分は”Pager”と呼ばれる部分なのですが、私自身にはどうする事もできませんでしたので、以下の記事のCSSを参考にして、無事に横揺れを収める事に成功しました。
/* トップページやカテゴリーページのリンクの幅 */
.pager a[href*="page="] {
width: 25%;
}引用元：はてなブログの個別記事のページャをカスタマイズ - simadzu’blog
🧔『simadzu’blogさん、ありがとうございました。』
このCSSをそのままコピペすると、以下のようになりました。
もう１点直す場所があります。
先ほど直したのはトップページとアーカイブページなので、次に個別記事をなおさないといけません。個別記事とは、今ご覧いただいている記事になります。
キャプチャーするよりも実際に下にズズズっと移動してもらって確認してもらった方が、画像を読み込んでもらう必要がないのでお手数ですが、ズズズっと移動してください。
ええ！？見つからない？
そうなんです、私は記事毎の記事下部のPagerをまるごと消しました。
というのも、このブログは雑記ですから、前の記事も後の記事も、無関係な記事になる事が多いのです。
であれば、関連記事を読んでもらった方が良いなぁと思って、記事毎のPagerをまるごと消しました。
TOPページやアーカイブページは、ページの移動が行えないと意味がないので、消すわけにはいかなかったのです。
記事内のPagerを消すためのCSSは以下です。
/* 記事内のページャーを非表示にする */
.page-entry .pager {
display:none;
}
非表示にしたくない方は、 width: 80%; などと記載すればよいと思いますが、記事のタイトルの文字数が多くなるとはみ出る気がします。
そのあたりのカスタマイズなどは、別途調べてください～。
記事の締め
結論として、ようやくスマホで見た時に横揺れが起こらなくなりました。
一般に言われているアドセンスのサイズや記事のブログのタイトルの問題ではなく、まさかあんなところが原因だとは思いませんでしたね…。
なにはともあれ、これで読者さんが少しでも快適に、余計なストレスなく読み進めてもらえると思うとほっとできます。
今回使用したCSSは以下の２点です。
/* トップページやカテゴリーページのリンクの幅 */
.pager a[href*="page="] {
width: 25%;
}
/* 記事内のページャーを非表示にする */
.page-entry .pager {
display:none;
}
こういう状態になっているのは私だけな気がしますが、同じ状態の方は、今回の記事を是非参考にして、モバイルフレンドリーなはてなブログにしてください！
今週のお題というか、ずっと課題で、長い宿題でした。
関連するはてなブログの記事はこちら
●ブログのデザインを大幅にカスタムし、スマホ向けに特化させたらPVが少し増えました。 - urakatahero”B”log
●はてなブログを使用してSNSまとめサービスを雰囲気で再現する方法 - urakatahero”B”log
