ブログ運営

【はてなブログ】吹き出しのCSSが反映・表示されない人へ!解決法!!

【2019/09/08追記】この記事ははてなブログ時代に書いたものを当ブログに移転した記事です!

かっこいいブログって、吹き出しを使って会話してるじゃないですか、

てばぺん
てばぺん
こんなやつ!!

あれ私もやってみたい!!

だけども一筋縄ではいかず2時間ほど格闘することになりました…

ということで張り付けたCSSが表示されない問題を解決したところについて、記事にしていきます!!

導入

偉大なる開発者様のブログ

www.notitle-weblog.com

導入方法の解説記事

mulife.hatenablog.com

設定方法は上の2つのブログ様を参考にしました。

設定まで書くと冗長になるので、そこまでは丸投げしておきます。

設定したのに吹き出しが反映されない…?

さあ、設定してみよう!!

じゃあCSSを貼り付けて…

f:id:tebasaki-penguin:20190617123154p:plain

吹き出しにしたい文のHTMLにclassを書き足して…

f:id:tebasaki-penguin:20190622212453j:plain

これで完成!!

さあ、 どうなってるかな!?

プレビューみてみよーー!

f:id:tebasaki-penguin:20190622213755j:plain

 反映されてねぇぇーーー!!!

いや、もしかしたら打ち間違えたのかもしれない。

CSSをコピペし間違えたのかもしれない。

もう一度やり直してみよう!

これでカンぺキ!!

さあどうだ!?

f:id:tebasaki-penguin:20190622213755j:plain

 反映されてねぇぇーーー!!!

解決法は『CSSの並び順』だった

こういうときはGoogle先生に聞くのが一番です。

とりあえず必死にググる。

素晴らしい記事が!!!

www.kataseumi.com

(めちゃくちゃ助かりました。ありがとうございます!)

CSSでは「並び順」が適応するかしないかに影響します。

簡単に言うと、

適応範囲が重複したときは一番上にかいてるやつから適応するよ!!

というルールです。(厳密にはこの説明はいろいろと間違っています。)

今回の事例を見ていきましょう。

吹き出しのCSSにはこのような文面が入っています。

@media screen and (max-width: 620px) {@media screen and (max-width: 620px) { .entry-content .l-fuki,

つまり、

以下のCSSはwidth620px以下の画面で適応するよ!!

一方で、私はスマホ版のヘッダー画像の表示を調整するCSSを使っていました。

/* スマホ用ヘッダ画像調整 */
@media (max-width:480px) {
#blog-title {
height: 100px!important;
}
#blog-title #blog-title-inner {
background-size: cover!important;
height: 100px!important;
}
}

@media screen and (max-width: ~という記述が重複していますね。

ヘッダー画像のCSSでは(max-width:480pxなので、

以下のCSSは480pxまでの画面に適応するよ!!

本来ならば画面の大きい順に記述されるべきところが、

480px以下の画面に適応するよ!!の後に吹き出しのCSSが記述されていたため、吹き出しのCSSがうまく機能しなくなってしまっていました。

ということはどうすればいいのか?

解決策は簡単です。

吹き出しのCSSをできるだけ上に記述して下さい。

f:id:tebasaki-penguin:20190622221603p:plain

さあ、うまくいったかな?

f:id:tebasaki-penguin:20190622221927j:plain

表示できてるーーーー!!!

こんなテキトーな方法でいいのかはHTMLとCSSに詳しくないためわかりませんが、

とりあえずのところはこの方法で表示することができたのでヨシとします。

もっとCSSに詳しい方、より正しい記述方法があったらコメント欄とかで教えて下さい!

それでは!

吹き出しを活用して、よりよいブログライフを!!

てばぺん
てばぺん
じゃあね~

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です