
どなたか教えてください・・ワードプレスでサイトを作っています。
<ul>などのリストタグを使うと、その前にある文章が<p></p>でくくられてしまいます。
<br />にしても、リストタグを使うとそうなってしまうのですがどうすればいいでしょうか。
なぜ、勝手にタグが書き換えられてしまうのか知りたいのです。
これはもうワードプレスのシステムの問題で自動的にそうなってしまうのでしょうか・・そのへんのことはよくわからないのですが。この質問をするにあたって何をお伝えすればいいのかわからないので、疑問な点ありましたら聞いてください。追記いたします。
<p>タグは行送りの間隔が広いのでデザイン的に見映えが悪くなり、使いたくないのです。
テーブルを使うなどするしかないんでしょうか?
表とかはあまり使うなと先輩にいわれているので、できればこの問題を解決できればうれしいです。よろしくおねがいいたします。
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
なるほど!!根本的なことに気づきませんでした。
cssに
p { margin: 0;}
を追加してみたらpの問題は解決いたしました。
p要素についての参考URLもありがとうございます。勉強になりました。
でもリストタグを使うとまだ空行が・・・これもcssで<ul>にmargin:0って命令することができるんでしょうか?ちょっといまごちゃごちゃしてて試す余力がない・・ので明日確認してみます。ありがとうございます。
No.4
- 回答日時:
peapeapeaさんの言う通りですね。
。CSSファイルでの調整が一番早くて正しいやり方だと思われます。
そのようですね。かなり苦手なので頭がショートしそうですがcssファイルでの調整が確実みたいですね。goalmaniaさんもありがとうございます。うれしかったです
No.2
- 回答日時:
ダミーテキスト<br />
<ul>
<li>ダミーテキスト</li>
<li>ダミーテキスト</li>
<li>ダミーテキスト</li>
</ul>
ダミーテキスト<br />
もしくは
ダミーテキスト<br /><ul>
<li>ダミーテキスト</li>
<li>ダミーテキスト</li>
<li>ダミーテキスト</li>
</ul>
ダミーテキスト<br />
気にはなりますがこれで解決する場合があります。。
No.1
- 回答日時:
管理画面の投稿する箇所にulやliのボタンとかはついていないでしょうか。
投稿エリアに直接書き込んでもソースは
<p>
<ul>
<li>ダミーテキスト</li>
<li>ダミーテキスト</li>
<li>ダミーテキスト</li>
</ul>
</p>
となり表示は下記のようになるということでしょうか?
<ul>
<li>ダミーテキスト</li>
<li>ダミーテキスト</li>
<li>ダミーテキスト</li>
</ul>
この回答への補足
ご質問ありがとうございます。リストにするボタンはついています。
投稿エリアで普通に改行すると</P>になってしまうので、細かく設定したいときはHTML編集画面に直接タグを入力しています。
いま私の状況は
ダミーテキスト
<br />
<ul>
<li>ダミーテキスト</li>
<li>ダミーテキスト</li>
<li>ダミーテキスト</li>
</ul>
ダミーテキスト<br />
と入力しても、
<p>ダミーテキスト
</p>
<ul>
<li>ダミーテキスト</li>
<li>ダミーテキスト</li>
<li>ダミーテキスト</li>
</ul>
ダミーテキスト<br />
というふうに、リストタグを入れた前方の文章だけ<p>タグになってしまうということです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ulタグやliタグの中でbrタグ...
-
CSS質問:大手サイトを見ると何...
-
ホームページビルダーで同じ行...
-
画像にリンクを張ると画像がず...
-
html <ul></ul>の並びで一行空...
-
<ul>タグを使うと勝手に<p>...
-
【至急】ul li 行間調整ができ...
-
css 横並びのナビゲーションバ...
-
1画像内に複数リンクを設定!...
-
ポップアップメニューを表のよ...
-
html/cssの、navを2段にする...
-
UL OL タグのインデントについて
-
リストマーカーをボックス内に...
-
<table>の高さ固定。情報増加時...
-
レスポンシブWebデザインでリン...
-
divタグ内のコンテンツが重なっ...
-
複数行にまたがる括弧を表示し...
-
htmlの文字が縦書きになる
-
個別にリンクの色を変える方法
-
ボタンをセル内一杯に表示させ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
liタグの中に<p>タグやら<dl>を...
-
ulタグやliタグの中でbrタグ...
-
divタグ内のコンテンツが重なっ...
-
html/cssの、navを2段にする...
-
list-style-type部分だけ大きく...
-
複数行にまたがる括弧を表示し...
-
html <li>の中の文字一部に色を...
-
ページを開いているときのリン...
-
番号付きリスト(<Ol><Li>・・...
-
リストを2つに分割して、それぞ...
-
リストの左余白の削除方法
-
html <ul></ul>の並びで一行空...
-
<ul><li></li></ul>にするメリ...
-
<li>タグの数が増えすぎたので...
-
htmlの<ol>タグで、数字などを...
-
css 横並びのナビゲーションバ...
-
<li>で改行する横並びのメニュー
-
ページ内リンク!?のしかた
-
イメージマップと画像のスライ...
おすすめ情報