気ままに趣味旅行

面白いコト「拡がる/拡げる」

実践で学ぶHTML/CSS -CSSがうまく反映されない理由について1

どうも。

 

最近、HTML/CSS中級編についてまとめてます。色々と調べものをしていて分かったことがありますので、まとめます。

今回は、はてなブログCSSを設定した場合の不具合についてです。

さて先日、以下の記事を書きました。最後の方で書きましたが、CSSを設定した場合に次のような不具合が起こってました。

前回の状態を見てもらうとおかしさが分かるかと思います。
hiroakies.hatenablog.com

 

ずっと「これなんで起こるのかな~?」と疑問でした。が、下のように、なんとかうまいことデザインできました。スクショの写真の大きさが異なるのは許してください(笑)

f:id:hiroakies4463:20181121205717j:plain

f:id:hiroakies4463:20181121205513j:plain

f:id:hiroakies4463:20181121210116j:plain

これ直すの中々大変でした。。

問題はいくつかありましたが、特に、floatを設定した場合の「次のセクションの巻き込み」が問題でした。 

これについて解説していきたいと思います。中々難しいところですので、もし間違っていればご指摘くださると幸いです。

 

と、その前に…

まず基礎的な話として次のことを押さえてください。

はてなブログでスタイルを変更しようと思えば、デベロッパーツールを使って、以下の2点を確認しなければいけません。

①自分が適用しているデザインテーマ(@importで読み込んでいるテーマ。初めから「{}デザインCSS」に書かれてあるコード)にどんなCSSが書かれてあるのか。

②あらかじめ用意されてあるはてなブログのHTMLヘッダやボディ、フッタはそもそもどんな構成になっているのか。

こちらサルワカさんのブログです。非常に参考になりますので、一読をおすすめします。

saruwakakun.com

では、こちらで確認していきましょう。

f:id:hiroakies4463:20181121220046j:plain

f:id:hiroakies4463:20181122003858j:plain

ここをみて、どのブロックにどんなidが設定されているのか。また、どんなclassが設定されているのか確認してください。どんな構成になっているのか把握しましょう。CSSも確認してください。

指定したい箇所のidやclassが分かれば、セレクタで指定してデザインを変更することが可能です。

もし、指定したものがうまく反映されてないのでは?と思ったら以下の記事を参考にしてみてください。


また、@importのCSSファイルを読み込むこともできます。 自分のはてなブログドメイン名(私の場合はhiroakies.hatenablog.comです)の後に「@import"/css/theme/life/life.css";」の"/css/theme/life/life.css"部分を貼り付けて検索すると、自分が@importしているCSSのコードを調べることができます。

f:id:hiroakies4463:20181122015411j:plain

https://hiroakies.hatenablog.com/css/theme/life/life.css

ここからコードをコピーしてデザインCSS欄に貼り付けて編集するという手もあります。

この他にも自分でCSSファイル(ファイル名.css)を作成してドロップボックスにファイルを保存し、それをheadに読み込むなどの方法があるらしいですので、またいろいろ分かり次第まとめます。

 

 

次回は本題のfloatの回り込みについて詳しく説明します。

 

別件ですが、私前々から、CSSをいじって、デフォルトで表示されているグーグルの広告なくせないのかな…と密かに期待してたんですけれど、下の記事を見つけました。

mametanuki.hateblo.jp

結論から言うと、どうやら、CSSをいじって広告を非表示するとサイト利用の規約違反になるみたいです。なので、有料プランに加入して非表示にするしかないみたいですね。夢ついえたり。

 

ではまた。