【blogger】「コピペでOK」のCSSが効かない場合の対処法

2017/12/26

【blogger】「コピペでOK」のCSSが効かない場合の対処法

2017/12/26 ume

見出しやテキストの装飾で、他サイトからいただいたCSSが自分のblogでうまく反映しないことがあります。

私はサルワカさんのテキスト装飾をお借りしています。見出しやボックスデザインが豊富で、基本的にコピペのみで問題なく動作します。

ただ、bloggerならではの「仕様」のせいで、サルワカさんのCSSが効かない場合がありましたので、対処法をご紹介します。

たいていはCSSの記述ミスです

CSSが効かない時、まずはサルワカさんのサイトで紹介されている「CSSが効かない・反映されないときの対処法まとめ」をご覧ください。

｝（波かっこ）の閉じ忘れや、；（セミコロン）の付け忘れ、値を書き換えた時に、プロパティとの間にある：（コロン）を間違って消してしまったり、；（セミコロン）にしてしまったり…というのは、かなりの確率でやりがちです。

それでも解消しない場合

これはBloggerのみの問題なので、サルワカさんの対処法にも書いていないことなのですが、CSSの中に<p>タグに関する記述がないかを確認してみてください。

<p>タグとは、「段落」を指定するためのタグで、文章のひとかたまりを表します。

Bloggerではこの<p>タグは使えません。

全く使えないわけではなく、常にHTMLモードで編集する分には問題ないようです。とはいえ、あまり現実的ではないですね。

HTMLモードで<p>タグの入ったソースをコピペして、編集モードに戻すと、<p>タグは消滅してしまいます。

当然、CSSで<p>タグの装飾を指定しても、HTMLの<p>タグがなくなってしまえば、反映されないのです。

<p>の代わりに<div>を使いましょう

対処法は、<p>タグの代わりに<div>タグを使うことです。

例として、サルワカさんのボックスデザイン「29. タイトルを横いっぱいに広げた場合」のHTMLとCSSを見てみます。

HTML

<div class="box29">
<div class="box-title">ここにタイトル</div>
<p>ここに文章</p>
</div>

CSS

.box29 {
margin: 2em 0;
background: #dcefff;
}
.box29 .box-title { font-size: 1.2em;
background: #5fb3f5;
padding: 4px;
text-align: center;
color: #FFF;
font-weight: bold;
letter-spacing: 0.05em;
}
.box29 p {
padding: 15px 20px;
margin: 0;
}

このままblogに貼り付けるとどうなるか…というと。

<p>タグのpadding（内側の余白）が効かない

そこで、以下のように書き換えます。

HTML

<div class="box29">
<div class="box-title">ここにタイトル</div>
<div class="text29">ここに文章</div>
</div>

CSS

.box29 {
margin: 2em 0;
background: #dcefff;
}
.box29 .box-title {
font-size: 1.2em;
background: #5fb3f5;
padding: 4px;
text-align: center;
color: #FFF;
font-weight: bold;
letter-spacing: 0.05em;
}
.box29 .text29 {
padding: 15px 20px;
margin: 0;
}

解決！

クラス名はお好みでどうぞ。

ちなみに<p>タグにクラス名をつけてあげるだけで、勝手に<div>タグに変わりますよ。

いかがでしたか？

私は最初、<p>タグが消滅していることに気付かず、原因が分からなくて困りました。

書き込んだCSSを再編集したい時は、「テーマ」→「HTMLの編集」を開きます。
CSSは<b:skin>---</b:skin>の中に入っています。検索ボックスで「</b:skin>」を検索してください。