4児パパブログ♪

プログラミングは未経験で30歳過ぎても学べる!

【初心者必見】はてなブログのスマホ表示横ずれ解消方法

はてなブログ スマホ表示 横ずれ解消

はてなブログ スマホ表示 横ずれ解消

こんにちは。

4児パパです。

最近の記事であまりエンジニアっぽいのを書いていないですね。

デザインとかをやらずに記事に集中したいのですが、

現状の物でまだまだ改善の余地があるので、SEO兼ねて少しずつ "CSS"で変更していきます。

 

 

気にはしていたが、ブログをスマホで見たときどうしても横ずれがおきていたので直してみた。 あまりデザインを触らないで、記事に集中したいが少しずつ直していこうと思います。取り急ぎ思っているのはグローバルリンクとフッターリンクかな。後は吹き出しとか作ってみようかな。出来次第シェアします

 

 

今回は少しずつですが修正した場所をシェア致します。

 

  

■目次

1.スマホ表示で横ずれ起きるのはAdsenseが原因

2.CSSでAdsenceコード修正して横ずれ解消

3.アドセンス記事内はレクタングル指定に

4.はてなブログでCSSは避けて通れない

5.ブログから資産を築ける

6.最後に

 

1.スマホ表示で横ずれ起きるのはAdsenseが原因

スマホ表示で横ずれはあまり自分自身では気にしていなかったのですが、読者目線で考えるとちょっと迷惑かなと。

 

横ずれの原因が最初はわからなかった

最初横ずれの原因がわからず、たくさんググりました。
CSSをたくさん触って、やっとたどり着いたのが、

アドセンスの広告の大きさでした。

 

レスポンシブのアドセンスの広告が大きい 

はてなブログのスマホ表示にした時に、どうしても横ずれが発生して、他のブロガーさんの記事を見ていてもちょっと横にスクロールしてしまうと動いてしまうので、あぁ自分のブログもきっとこうだな、ちょっと残念に思っていました。

 

広告が大きいからその分ずれる

広告が大きい分、横にずれてしまいます。

ページの読み込みは然りとするので、あまり気にはしなくていいかなと思っていました。

せっかく読者とアクセスが増えてきたので、少しずつ修正変更していきます。 

 

 

2.CSSでAdsenceコード修正して横ずれ解消

私のこのはてなブログのテーマは『DUDE』。

キマってくれば中々かっこいいです。

でも初心者にはお勧めしません。レスポンシブ対応では無いので。

 

 

アドセンスのコードを修正 

レスポンシブ広告のアドセンスのコードを修正していきます

 

『ダッシュボード』→『デザイン』→『スマートフォン』までアクセスしていき、

入れているレスポンシブ広告のコードを触ります。

Adsense レスポンシブ 記事内横ずれ Googleより出典

Adsense レスポンシブ 記事内横ずれ

 

通常【data-full-width-responsive="true"】

こちらに変更【data-full-width-responsive="false"】

"true"から"false"に変更する事。

幅一杯に広告を出さないでください、というコードなので、

違反でもなんでも無いですのでご安心を。

 

 

これだけで横ずれは解消されました。

 

実は横に揺れてしまう現象は、本文の記事内のみでした。

ヘッダーとフッターには影響なく変更できました。

 

CSSで色々触っていたら、ヘッダーが動いたりして大変だった為、

シンプルに解決できたのは、この方法でした。

 

 

3.アドセンス記事内はレクタングル指定に

 広告を綺麗に決めていくために、多少サイズよりも形に注目しました。

 

記事内はレクタングル指定

また同じように『ダッシュボード』→『デザイン』→『スマートフォン』までアクセスしていき、入れているレスポンシブ広告のコードを修正していきます。 

変更前:【data-ad-format="auto"】

変更後:【data-ad-format="rectangle"】

 

これに変更すると記事内の少し画面が大きなスマホは綺麗にはまっていきます。

 

画面を横にすると広告が小さくなる

ブログは大抵縦に見れると思うので、あまり気にしないと思いますが、

実際に横にした場合をみてみましょう。

ちなみに私のスマホはiPhone xs  Maxです。

iPhone xs  Max 横画面 アドセンス

iPhone xs  Max 横画面 アドセンス

 

ここはあまり気にしていないのですが、また少しずつ修正していきます。

 

 

 

4.はてなブログでCSSは避けて通れない

 ワードプレスでもCSSは触りますが、

はてなブログも結構触らないといけません。

 

はてなブログの広告は非表示に

はてなブログのProを利用しても、広告が入ってきます。

要らないので、排除していきましょう。

 

スマホでの表示の修正の仕方

 はてなブログ【スマホ表示のヘッダー】を非表示するCSS

www.papa-programing.jp

 

【スマホ表示のフッタ】を非表示するCSS【はてなブログをカスタマイズ】

www.papa-programing.jp

 

【はてなブログデザイン】スマホ画面での【はてなブログをはじめよう】非表示

www.papa-programing.jp

 

はてなブログのデザインをカスタマイズ

 

【初心者向け】はてなブログのスマホの文字の大きさを変更

www.papa-programing.jp

 

【初心者でも簡単】はてなブログのツイッター埋め込み【サイドバーとスマホに】 

www.papa-programing.jp

 

ブログ毎日更新している人は月間アーカイブを

【はてなブログの月間アーカイブ】スマホデザインでも表示

www.papa-programing.jp

 

 

 

5.ブログから資産を築ける

最近ブログ更新を毎日していて、頭の中はWeb関係だけ。

もちろん家事や育児にも専念していますが、

 

Webの世界は実は夢がある

本業から少しずつWebの世界にシフトしつつも、何事にも本気でいきます。

 

 

 Webの世界で何か一つを上達させると、実はそのおかげで稼いでいける。

それをここ数ヶ月で実感。

 

 

6.最後に

 

人生常にハード。

普通に生きていたら無理ゲーに参戦。

決してクリア出来ないゲームです。

消耗していく世界。

一生涯しかも自分の人生、生きている間。

 

それでもなお人生は、自分が諦めたいと思っても、

中々詰ませてくれない。

 

人生は実は伸びしろしかないない事に、

気付いて欲しい。