カラム落ちしていたことに気付かず、指摘を受けてCSSを修正した話

6/8 10:30追記

先日の記事のコメ欄に

id:syofusoさん

サイドバーがカラム落ちしていますね。
CSSのソースを見たところ
デザインCSSの以下の記述がおかしいです。

との指摘がありました。

ああああありがとうございます！！！！！｡ﾟ(ﾟ´Д｀ﾟ)゜｡

こういうコメントを頂けると、勉強不足が露見して恥ずかしくもあるのですが、それよりも自身が勉強できるきっかけをいただけるので大変ありがたいです！

ということで、実際にCSSを弄ったことを記事にして最大限の感謝を！！

…とその前にsyofusoさんのブログはコチラ↓（宣伝）

カニソムリエという言葉だけで胃袋わしづかみにされましたw

いつか必ず行ってみたい！！

そもそもカラム落ちが確認できなかった問題

そもそも"カラム落ち"ってなんぞ？

で当ブログがどうなっていたかというと…

バッチリ崩れてます！(涙目)

これ、何故今の今まで気づかなかったかというと、僕が普段PCで作業する際、ウィンドウサイズを最大化することが殆ど無いんです。

ちなみに、こちらのサイトで普段作業しているウィンドウサイズを調べてみると800×600。

で実際当ブログの領域はというと、問題があったCSSを見てみると、

/*--ブログ幅調節--*/
@media screen and (min-width:1200px) {
#content-inner {
width: 1200px;
margin: 0 auto;}
#wrapper {width: 920px;
float: left;
}
}

width: 1200px

最低限CSSを弄った時点でフルスクリーンでの確認を怠らないといけませんでしたorz

初歩的なミスです、お恥ずかしい。。

改善してみた

syofusoさんがコメントで改善を提案してくださったので、今回はそのままペーストさせていただきました！

/*--ブログ幅調節--*/
@media screen and (min-width:1200px) {
#container #content {
width: 1200px;/* コンテンツ幅 */
margin: 0 auto;}
#main {
width: 820px;/* 記事幅を広げる */
float: left;
}
#box2 {
width: 300px;
}
}

ご丁寧に解説も↓

820+300+80(余白）= 1200
という関係になっています。#mainと#box2を足して#content以下になるようにしないとカラム落ちします。

これ、僕が書くこと殆どないですね(^^;;

で、ここまでの作業で実際どうなったかというと・・・

もうバッチリ！！無事なおりました！！

更に記事下アドセンスにも

過去にレスポンシブ対応した記事下のアドセンス。

コメントでは記事下アドセンスの事もご指摘を受けました。

あと記事下のダブルレクタングルのAdSenseの右側がfloat解除されていないのでコメント欄がおかしいです。
記事下のダブルレクタングルAdSenseのコードの下に

と入れればOKです。

！？

いやまて、ヒントは大いに出ている！

これは自分で調べろという試練だ！！

で調べてみるとこんな記事がヒット。

内容を見る感じだと、多分これかな？？
で、リンク先のCSSを拝借しまして、

.
clearfix:after{content: "";clear: both;display: block;}

これで僕自身が確認した感じでは今の所大丈夫かなと。

(間違ってたら是非教えてください！！)

6/8 10:30追記

ダメでした(^^;

float解除ですが <div class="adsense-right"> ~</div> この下に<div style="clear:both;"></div> を入れて下さい。

float解除の方法としては.clearfixでも良いのですが、親要素.adboxに <div class="adbox clearfix"> とclass指定しないとclearfixが効きません。

と、コメントに追記頂きました！(ホント重ねて有難うございます！！！)

加えて、ダッシュボード→コメントから全文把握できましたので併記させていただきます。

この

<div style="clear:both;"></div>

を"デザイン"→"スパナマーク"→"記事下"のアドセンスコード部分にペーストして無事作業終了！

こちらも一部追記させて頂きました↓

〆

当ブログも開始して間も無く3週間を経過します。

はてなブログに移って、「なーんだ、コピペでいけるじゃん！CSS余裕ゥー！！」とまではいかないまでも、ちゃんと確認せずにかなりの期間放置していたのは大変申し訳なかったです。

今回この記事にして戒めると共に、後日にはなりますが過去記事も順次追記・修正しつつ、もっと学んでいきたいと思います。

最後に

syofusoさん本当にありがとうございました！！