• 締切済み

<ul>タグを使うと勝手に<p>タグになる

どなたか教えてください・・ワードプレスでサイトを作っています。 <ul>などのリストタグを使うと、その前にある文章が<p></p>でくくられてしまいます。 <br />にしても、リストタグを使うとそうなってしまうのですがどうすればいいでしょうか。 なぜ、勝手にタグが書き換えられてしまうのか知りたいのです。 これはもうワードプレスのシステムの問題で自動的にそうなってしまうのでしょうか・・そのへんのことはよくわからないのですが。この質問をするにあたって何をお伝えすればいいのかわからないので、疑問な点ありましたら聞いてください。追記いたします。 <p>タグは行送りの間隔が広いのでデザイン的に見映えが悪くなり、使いたくないのです。 テーブルを使うなどするしかないんでしょうか? 表とかはあまり使うなと先輩にいわれているので、できればこの問題を解決できればうれしいです。よろしくおねがいいたします。

みんなの回答

回答No.4

peapeapeaさんの言う通りですね。。 CSSファイルでの調整が一番早くて正しいやり方だと思われます。

matsuki-_-
質問者

お礼

そのようですね。かなり苦手なので頭がショートしそうですがcssファイルでの調整が確実みたいですね。goalmaniaさんもありがとうございます。うれしかったです

回答No.3

通りすがりですが、wordpress使いとしてひとこと。 ブログ内の文章は基本的にp要素でくくられる必要がありますし(div要素内に直接文章を書くべきではない)、p要素の中に他のブロック要素を含めてはいけないというルールもあります。 従って、wordpressが <p>テキスト</p> <ul> <li>リスト</li> <li>リスト</li> </ul> <p>テキスト</p> のように直してくれるのは正しいのだと私は思います。  > <p>タグは行送りの間隔が広いのでデザイン的に見映えが悪くなり、使いたくないのです。 ということであれば、記事内のp要素のmarginをCSSファイルで調整すればよいのではないかと思います。

参考URL:
http://bakera.jp/ref/html/element/p
matsuki-_-
質問者

お礼

なるほど!!根本的なことに気づきませんでした。 cssに p { margin: 0;} を追加してみたらpの問題は解決いたしました。 p要素についての参考URLもありがとうございます。勉強になりました。 でもリストタグを使うとまだ空行が・・・これもcssで<ul>にmargin:0って命令することができるんでしょうか?ちょっといまごちゃごちゃしてて試す余力がない・・ので明日確認してみます。ありがとうございます。

回答No.2

ダミーテキスト<br /> <ul> <li>ダミーテキスト</li> <li>ダミーテキスト</li> <li>ダミーテキスト</li> </ul> ダミーテキスト<br /> もしくは ダミーテキスト<br /><ul> <li>ダミーテキスト</li> <li>ダミーテキスト</li> <li>ダミーテキスト</li> </ul> ダミーテキスト<br /> 気にはなりますがこれで解決する場合があります。。

matsuki-_-
質問者

補足

二回も書き込んでくださってありがとうございます。 でも残念ながら解決できませんでした。。

回答No.1

管理画面の投稿する箇所にulやliのボタンとかはついていないでしょうか。 投稿エリアに直接書き込んでもソースは <p> <ul> <li>ダミーテキスト</li> <li>ダミーテキスト</li> <li>ダミーテキスト</li> </ul> </p> となり表示は下記のようになるということでしょうか? <ul> <li>ダミーテキスト</li> <li>ダミーテキスト</li> <li>ダミーテキスト</li> </ul>

matsuki-_-
質問者

補足

ご質問ありがとうございます。リストにするボタンはついています。 投稿エリアで普通に改行すると</P>になってしまうので、細かく設定したいときはHTML編集画面に直接タグを入力しています。 いま私の状況は ダミーテキスト <br /> <ul> <li>ダミーテキスト</li> <li>ダミーテキスト</li> <li>ダミーテキスト</li> </ul> ダミーテキスト<br /> と入力しても、 <p>ダミーテキスト </p> <ul> <li>ダミーテキスト</li> <li>ダミーテキスト</li> <li>ダミーテキスト</li> </ul> ダミーテキスト<br /> というふうに、リストタグを入れた前方の文章だけ<p>タグになってしまうということです。