健康、投資や生活に役立つ「人生戦略ノート」ブログ

人生の戦略を実戦して楽しく生きるブログです。健康や投資に筋トレなどいろいろな情報を楽しくお届けします。

MENU

「タイトル上にあった謎の隙間の原因とタイトル下に出る隙間を消す方法」



スポンサーリンク

タイトル画像の上に隙間があり、なぜこのような隙間があるのか分からないけどとりあえず隙間を消そうしました。いろいろポチポチしていると全く変わりません。昨日はPCに触る時間があまりにない中でこの隙間をすぐ倒すかを必死にアプローチをしていました。
結果、全く分からず敗北をしました。ただ、何が原因かが分かってきたのでその原因の特定と解決方法とタイトルの隙間を消す方法をかなり検索して勉強になったのでそのサイト達を紹介したいと思います。(備忘録用)

謎の隙間との戦い

画像の隙間を消す方法,画像の隙間を倒すぶっぶちゃん

私自身、かなり検索したのとたいして問題じゃないと簡単に終わると想定してました。しかしこの隙間怪獣「クウハーク」はかなりしぶとい生物でした。何をしても全く反応がなくヘッダー画像を上げても反応せず、paddingやmarginでも全く反応しませんでした。この「クウハーク」は無敵のパワーで私の邪魔したいがためだけの存在で、今日も朝からかなり悩みました。ただ闇雲にしても埒が明かない。 その「クウハーク」の中身は一体何のなのか調べてやろうと思いました。

「クウハーク」の中身を調べるには

f:id:Barrgan:20150526164909p:plain
この「クウハーク」何をしても反応しないということは見えない中身があると思いました。この中身は一体どうやって調べたらいいか・・・・。今更新が出来ていないGOOGLEのBLOGERで海外のテンプレを導入した際、レイアウトが崩れまくって、どの部分が影響しているのかを確認するために使っていたものがあります。

Chromeの要素検証

Ctrl+Shift+Iボタンか右クリックしてNを押すか一番したの要素検証をクリックすればたどり着きます。その要素検証で「クウハーク」の中身を調べてみました。

「クウハークの正体」と存在している場所

要素検証で見ると「google_ads~~~~」と記載されている部分がありました。

Barrgan
誰ですか???あたなは!!!!!

タイトル画像の上にあるのでヘッダーかなと思って、デザイン→設定→カスタマイズでヘッダー部分を見ても記載されていませんでした。そもそも置いた覚えが全くありません。そもそもヘッダーで見てもタイトル下にしかコードを記載するとこがないので、それ以上上ってどこだろうと必死に探した結果、head何に謎のコードがアドセンスコードが記載されていました。自分が初期の頃貼ったのか分かりませんし、アドンセスで何を貼っるために自分で付けている名前のどれにもあたりませんでしたが多分自分で貼ったのだろうとは思います。ドラクエで全く使わなかった「ニフラム」を連呼しながらhead内のコード消去しました。

結果

f:id:Barrgan:20150526173146p:plain

タイトル画像の隙間を消す方法

はてなブログで下に隙間が出来てしまった時は

to-torinos.hatenablog.com

akiueo.hatenablog.com

mayoi-inu.hatenablog.jp

ホームページ作る際、タイトルの余白設定について

今コード一から入力して作るより、テンプレから簡単にホームーページが作れると思いますが、基礎はしっかりしておくべきだと勝手に思っています。

8cmp.blog.fc2.com

allabout.co.jp

感想

こだわりが強く、タイトル画像の上にある空白が気になりすぎてそれ以外のことは考えられませんでした。特にモバイルのタイトル上に謎の空白が出来ているのが気になっていました。他の方のブログを見るとタイトルの上に空白なんてそうそうなく、なぜ自分だけこんな空白があるのか分からない状態から今日やっと解決が出来て良かったと思います。分からない分からないで行動をしないのではなく、しっかり原因を突き止めて解決が出来て素晴らしい!!!という前向きさを忘れず、人生楽しみたいと思います。

© 2017 人生戦略ノート