-
ID:L1cl/m さんの質問

Wordpressでの質問です。

下記をブラウザで表示すると
上段のPタグと下段のPタグの間に変に余白がついてしまいます。
解決方法はございませんか?

<p><a href="#"><?php the_post_thumbnail(’ranksize’); ?></a></p>
<p><?php the_content(); ?></p>

みんなの回答 6 件

ID:y2aYMM さんの回答

P 要素は段落を表すもので、見やすくなるために自動で上下に空白が出来るのが仕様です。
これは CSS の仕様で WordPress は関係ありません。
どうしても P 要素を使って空白を無くしたい場合はスタイルシートにて margin:0; を指定すればいいでしょう。

ですが、この用法は間違っています。
結論から言うと、この場合は div 要素で囲むのが正しい、ということになります。

先ほど言いましたが、P 要素は一段落ごとに囲むのが正しいです。
WordPress では改行する度に P 要素で囲むという仕様があり( P 要素内で改行させたい場合は shift+enter で <br /> が挿入されます)、P 要素で P 要素を囲むことになります。

P 要素の中に P 要素を入れてしまうと、全体の囲みが消えて、囲んだ意味がなくなってしまいます。
どうなるか、参考にリンクを付けました。

<DIV>タグと<P>タグ

http://www.eonet.ne.jp/~nga/html/div&p.html
ID:CuR.nz

やさしすぎw .

ID:y2aYMM さんの回答

あ、すみません、一つ書き漏れていました。
<?php the_content(); ?> が編集画面で入力した文章を書きだすタグですが、その中で更に勝手に P 要素が設定される、ということです。
そして、サムネイルを段落を表す P 要素で囲むのは、おかしいんじゃないか? とも思います。

<div><a href="#"><?php the_post_thumbnail('ranksize'); ?></a></div> 
<div><?php the_content(); ?></div> 
か、 
<div><p><a href="#"><?php the_post_thumbnail('ranksize'); ?></a></p>   
<?php the_content(); ?></div> 
のどちらを選ぶかは好みです。
ID:7OjvfJ

ご丁寧な対応ありがとうございます。
どうやらアイキャッチのサイズ設定に問題があるようです。。

ID:12xAup さんの回答

imgタグの親要素にvertical-align: bottom;かな?

ID:7OjvfJ さんの回答

解決いたしました。コメントいただきました
<div><a href="#"><?php the_post_thumbnail(’ranksize’); ?></a></div>
<div><?php the_content(); ?></div>

で設定したところ、下の余白も消えました。ありがとうございます。

ただWordpressの仕様か、反映されるのに少し時間がかかったのですが、
これは一般的なことでしょうか?
それともサーバーの問題でしょうか?

続けてのご質問しつれいします。。。。

ID:6TtumP

wordpressはテンプレートファイルを変更すれば、普通はすぐに反映されます。
反映されないとしたら、キャッシュ関係のプラグインの影響が考えられるかな。

ponnao.com/?p=8219

サーバー(wordpress)側は問題なくても、ブラウザ側がキャッシュを使って反映されない場合もあります。でもhtmlはリロードすればブラウザ側のキャッシュを使わず、変更した新しいファイルを参照すると思います。画像やcssやjavascriptとかは場合によってはブラウザのキャッシュがしつこく残る場合があります。

ID:7GOLQg さんの回答

申し訳ないけど、このレベルでよくPHPやworedpressを触れるなと思います。
まずはサーバーサイドとHTMLの違いを勉強なされてはどうでしょうか?

ID:aNegnL

最初の2行は余計だろ。

ID:eIzQdt

全文やんw

ID:7OjvfJ さんの回答

回答ありがとうございます。そうですよね。。
自分でも無謀なことかなと思います。
このまま触るとあぶないですよね。。
ご指摘ありがとうございます。

勉強してみます。

最終更新日:2013-03-14 (3,798 views)

関連するトピックス

ページ上部に戻る