最近はWPで制作されたHPはちゃんと固定ページのエディターでHTMLソースを登録するようにしているんですが、元々WPのエディターは文字のみ入力すると自動でpタグが入ってたりする機能が備わってます。

これが意外と邪魔だったりしてたんですけど、ブログとして利用するCMSとして存在するわけであり、テキストをコンテンツとして登録するんですから、HTMLを生成する際にpタグが自動で挿入されるのはある意味嬉しい機能でもあるんですよ。

しかし、一時的に非表示したい場合には削除よりコメントアウトという方法があります。

HTMLで<!– 隠したいもの –>という感じで書くと間のものは表には表示されず、ソース側には残ります。

これをWPのエディターでも行いたいのですが、エディターはこのコメントアウトもpタグで囲っちゃうのです。

そうなると文字はないのにpタグが入ることでpに設定されているCSS分何かしらの影響が発生する恐れがあります。

function.phpというファイルに自動挿入する機能を停止する方法があるのですが、コメントアウトのみならず他のテキストにもpタグが付かなくなり、他のページにも影響が当たってしまうのでこれは避けたい。

ということで、今回はコメントアウトした際に自動でpタグ挿入されても大した影響は当たりませんよというものをCSSで設定することにしました。それを以下に記録で残します。

 

/* コメントアウト対策 */
p:empty {
  display: none
}

 

タグの後ろにemptyを付けてあげると、pタグだけ(中身がない)のソースに対してdisplayでnoneを指定して隠しちゃえってことにしました。

表示したままでpaddingやmarginを0にしたりする方法もいいんですが、残しちゃうと一応ブロック要素なので知らずに改行のような表示になったりする恐れがあるので、どうせなら隠した方が早いのかもということで。