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

2017/12/26

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




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



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



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



その前に。たいていは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>」を検索してください。