こんにちは。
4児パパです。
最近の記事であまりエンジニアっぽいのを書いていないですね。
デザインとかをやらずに記事に集中したいのですが、
現状の物でまだまだ改善の余地があるので、SEO兼ねて少しずつ ”CSS”で変更していきます。
気にはしていたが、ブログをスマホで見たときどうしても横ずれがおきていたので直してみた。
あまりデザインを触らないで、記事に集中したいが少しずつ直していこうと思います。取り急ぎ思っているのはグローバルリンクとフッターリンクかな。後は吹き出しとか作ってみようかな。出来次第シェアします— ４児パパ (@ARTS_papa) 2019年8月1日
気にはしていたが、ブログをスマホで見たときどうしても横ずれがおきていたので直してみた。 あまりデザインを触らないで、記事に集中したいが少しずつ直していこうと思います。取り急ぎ思っているのはグローバルリンクとフッターリンクかな。後は吹き出しとか作ってみようかな。出来次第シェアします
今回は少しずつですが修正した場所をシェア致します。
■目次
１.スマホ表示で横ずれ起きるのはAdsenseが原因
スマホ表示で横ずれはあまり自分自身では気にしていなかったのですが、読者目線で考えるとちょっと迷惑かなと。
横ずれの原因が最初はわからなかった
最初横ずれの原因がわからず、たくさんググりました。
CSSをたくさん触って、やっとたどり着いたのが、
アドセンスの広告の大きさでした。
レスポンシブのアドセンスの広告が大きい
はてなブログのスマホ表示にした時に、どうしても横ずれが発生して、他のブロガーさんの記事を見ていてもちょっと横にスクロールしてしまうと動いてしまうので、あぁ自分のブログもきっとこうだな、ちょっと残念に思っていました。
広告が大きいからその分ずれる
広告が大きい分、横にずれてしまいます。
ページの読み込みは然りとするので、あまり気にはしなくていいかなと思っていました。
せっかく読者とアクセスが増えてきたので、少しずつ修正変更していきます。
2.CSSでAdsenceコード修正して横ずれ解消
私のこのはてなブログのテーマは『DUDE』。
キマってくれば中々かっこいいです。
でも初心者にはお勧めしません。レスポンシブ対応では無いので。
アドセンスのコードを修正
レスポンシブ広告のアドセンスのコードを修正していきます
『ダッシュボード』→『デザイン』→『スマートフォン』までアクセスしていき、
入れているレスポンシブ広告のコードを触ります。
通常【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です。
ここはあまり気にしていないのですが、また少しずつ修正していきます。
4.はてなブログでCSSは避けて通れない
ワードプレスでもCSSは触りますが、
はてなブログも結構触らないといけません。
はてなブログの広告は非表示に
はてなブログのProを利用しても、広告が入ってきます。
要らないので、排除していきましょう。
スマホでの表示の修正の仕方
【スマホ表示のフッタ】を非表示するCSS【はてなブログをカスタマイズ】
【はてなブログデザイン】スマホ画面での【はてなブログをはじめよう】非表示
はてなブログのデザインをカスタマイズ
【初心者でも簡単】はてなブログのツイッター埋め込み【サイドバーとスマホに】
ブログ毎日更新している人は月間アーカイブを
5.ブログから資産を築ける
最近ブログ更新を毎日していて、頭の中はWeb関係だけ。
もちろん家事や育児にも専念していますが、
Webの世界は実は夢がある
本業から少しずつWebの世界にシフトしつつも、何事にも本気でいきます。
プログラミングをやりながらブログもやり始めると、かなり資産性が高いスキルが学べる！
・Webデザイン
・Webライティング
・Webマーケティング
・SNSマーケティング
・本気でプログラミングだと、サーバーサイド言語自分自身のスキルなので、職には困らないのでは。
— ４児パパ (@ARTS_papa) 2019年8月2日
Webの世界で何か一つを上達させると、実はそのおかげで稼いでいける。
それをここ数ヶ月で実感。
6.最後に
次女の幼児てんかんの脳波検査の為13時前から病院に居ます。恐らく17時過ぎまでかかる為検査を待っている間、山口さん@Ericactive811 の本を読んでいます。フリーランスとしての働き方を参考にしたかっただけなのに、人柄にも魅入ってしまった。これからも応援させて頂きます😊リード文は大好き♪ pic.twitter.com/a6SxBtGDeC
— ４児パパ (@ARTS_papa) 2019年8月2日
人生常にハード。
普通に生きていたら無理ゲーに参戦。
決してクリア出来ないゲームです。
消耗していく世界。
一生涯しかも自分の人生、生きている間。
それでもなお人生は、自分が諦めたいと思っても、
中々詰ませてくれない。
人生は実は伸びしろしかないない事に、
気付いて欲しい。
hitoさんは、本当に豊富な知識にあるれているのですね。勉強になります。
読者にさせていただきます。
これからもよろしくお願いします。