Les miZenables

ブログをメモ帳と勘違いしている

HTML&CSS学習 〜サイドバーと僕〜(解決編)

サイドバーが本文から離れてしまう事象が解消しましたので、その原因と思しきことをメモしておきます。Q&A、「「役立たず!」」じゃなかった。

あらすじ

ブログのデザインが元に戻りました。当ブログのサイドバーを見てください、今は適当な場所に配置されています。

解決までの経緯

ブログのデザインが崩壊してから数週間、ブラウザの「検証」だのBoxデザインの本などを見ながら色々考えていましたが、決め手となるものが全然見つかりませんでした。色々とやりたいことがあるのに、謎の空白ができる。

この事態に対する嘆きは下です。

orikuramizen.hatenablog.com

初心に戻って、はてなブログのQ&Aを見てみました。「サイドバー」で検索。

www.hatena.ne.jp

「1. 別のデザインテーマを適用し」というところは該当しなかった。どのテーマを選んでも同様の事象が発生するというか、全く状況に変化がなかった。

一方で、「2. カスタマイズ用の....」というところ。

はてなブログで提供していないHTML、CSSJavaScriptなどを適用してカスタマイズしているブログは、それが原因で不具合が起こる可能性があります。ヘッダ、フッタ、headタグ内、サイドバーモジュールなどに任意のタグやスクリプトを入れている場合、外した状態で同様の現象が発生するか確認してください。(お問い合わせ - はてな

ここでした。

原因と対策(には程遠い)

前述の通り、HTMLとCSSの学習の意味も込めて、様々なところに手を加えていました。思い当たるところを消去しても改善がなかったのですが、一箇所だけ手を出してなかったところがありました。それが、ヘッダー。

それまで、タイトル下の部分にカクヨムの更新情報が流れているように設定してあったんですが、これが悪さをしていたみたいです。問題が解消したことにはHooray! なんですけど、一方で「更新情報を流しはじめた時にはそんな変なことになってなかったよな?」という思いもあり。ただ、今回のいじくり回しの中で、一時無効化した部分がずっと残っていたのが、余分だったのかな、と。

そう、これあくまでも「かな」なんだよな。

対策としては、無駄な改行はなくそうとか(作業中の部分を画面の真ん中に置くくせがあるので、改行しまくってしまう)、一時無効化(コメント化?)は正しく行おう、とか色々あるけれど。

果たしてそれは本当に「問題解決」か?

今回のケースで学んだことは、まず公式を見ろって視点。自分の元で起こっている問題が、世界に初めての出来事である可能性はほとんどないだろうし、HTMLやCSSJavaScriptはてなブログから学ぼうとしてる人間はそこそこいるはずだし、だったらこういう問題についても公式の記事があるはず。当たってよかった。これは今後もやってこう。ありがとうQ&A。

ただこれ、偶然解消しただけで、根本的な疑問は残ったままなんですよ。

f:id:orikuramizen:20190512210102j:plain
期待していた構造

上の図のようになるべきところが、下の図のようになっていたんです。

f:id:orikuramizen:20190512210322j:plain
壊れた構造

これ、たとえばentry-innerのところが見えない力で右に幅を取っていたために、サイドバーが押し出されたとも考えてたんですけど(というかずっとその路線で考えていた)、じゃあ逆に今はなんでこれ解決してるのって話になる。全然わからん。blog-titleは動かないものだと思ってたんで、余計謎は深まっていたんですけど、こういった一連の部分が解消していないので、この件はHooray! しきれない。

いつかわかる日がくるんだろうか。