ワードプレスの扱いに慣れてくると固定ページや投稿ページに
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のデバッグモードなどで確認です。