ワードプレスにcssをあてる時の注意点(pタグに注意)

ワードプレスの扱いに慣れてくると固定ページや投稿ページに

cssをあてて色を変えたい！

javascriptで簡単な動きを加えたい！アコーディオンメニューを作りたい！

そんな欲望がでてきます。

その際に、注意しなければいけないのが

このワードプレスの投稿ページや固定ページ作成の仕様です。

<p>タグがやたらと入ってくる。

「あああ」

この「あああ」という文字。

テキストモードで

<span class="test">「あああ」</span>

こう入力しました。

投稿して出力されたサイトを開き

Chromeのデバッグモードで見ると

こうなっています。

<span>タグが<p>タグで囲われています。

ビジュアルモードで勝手に<p>タグを挿入する仕様は

ブロック要素でない<span>などについて

テキストモードにも適用されます。

例えば

<ul>
    <li class="test_list">
        <div class="test_wrap">
            ご機嫌いかがですか
        </div>
        <span>？？</span>
    </li>
</ul>

このコードは出力されるとこうなります。

<li>のなかの<span>にまた<p>タグが。

ブロック要素の中のspanでも、書き方によっては<p>タグが追加されます。

cssのセレクタだと

子セレクタ
.test>spanが効かない

Jqueryだと
$(".test").children('span');

これが効かない。

という現象が起こります。

やっかいですよね。

まあ、別の指定の仕方がいくらでもありますが・・・

ワードプレスでcssやJavascriptを使う際は

勝手に入ってくる<p>タグに注意です。

できれば、classやidを直接ふってそこに効果をかけるのがいいでしょう！

もし、動かなかったらChromeのデバッグモードなどで確認です。