Wordpressでの質問です。
下記をブラウザで表示すると上段のPタグと下段のPタグの間に変に余白がついてしまいます。解決方法はございませんか?
<p><a href="#"><?php the_post_thumbnail(’ranksize’); ?></a></p><p><?php the_content(); ?></p>
P 要素は段落を表すもので、見やすくなるために自動で上下に空白が出来るのが仕様です。これは CSS の仕様で WordPress は関係ありません。どうしても P 要素を使って空白を無くしたい場合はスタイルシートにて margin:0; を指定すればいいでしょう。
ですが、この用法は間違っています。結論から言うと、この場合は div 要素で囲むのが正しい、ということになります。
先ほど言いましたが、P 要素は一段落ごとに囲むのが正しいです。WordPress では改行する度に P 要素で囲むという仕様があり( P 要素内で改行させたい場合は shift+enter で <br /> が挿入されます)、P 要素で P 要素を囲むことになります。
P 要素の中に P 要素を入れてしまうと、全体の囲みが消えて、囲んだ意味がなくなってしまいます。どうなるか、参考にリンクを付けました。
やさしすぎw .
あ、すみません、一つ書き漏れていました。<?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> のどちらを選ぶかは好みです。
ご丁寧な対応ありがとうございます。どうやらアイキャッチのサイズ設定に問題があるようです。。
imgタグの親要素にvertical-align: bottom;かな?
解決いたしました。コメントいただきました<div><a href="#"><?php the_post_thumbnail(’ranksize’); ?></a></div><div><?php the_content(); ?></div>
で設定したところ、下の余白も消えました。ありがとうございます。
ただWordpressの仕様か、反映されるのに少し時間がかかったのですが、これは一般的なことでしょうか?それともサーバーの問題でしょうか?
続けてのご質問しつれいします。。。。
wordpressはテンプレートファイルを変更すれば、普通はすぐに反映されます。反映されないとしたら、キャッシュ関係のプラグインの影響が考えられるかな。
ponnao.com/?p=8219
サーバー(wordpress)側は問題なくても、ブラウザ側がキャッシュを使って反映されない場合もあります。でもhtmlはリロードすればブラウザ側のキャッシュを使わず、変更した新しいファイルを参照すると思います。画像やcssやjavascriptとかは場合によってはブラウザのキャッシュがしつこく残る場合があります。
申し訳ないけど、このレベルでよくPHPやworedpressを触れるなと思います。まずはサーバーサイドとHTMLの違いを勉強なされてはどうでしょうか?
最初の2行は余計だろ。
全文やんw
回答ありがとうございます。そうですよね。。自分でも無謀なことかなと思います。このまま触るとあぶないですよね。。ご指摘ありがとうございます。
勉強してみます。
みんなの回答 6 件
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あ、すみません、一つ書き漏れていました。
<?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>
のどちらを選ぶかは好みです。
imgタグの親要素にvertical-align: bottom;かな?
解決いたしました。コメントいただきました
<div><a href="#"><?php the_post_thumbnail(’ranksize’); ?></a></div>
<div><?php the_content(); ?></div>
で設定したところ、下の余白も消えました。ありがとうございます。
ただWordpressの仕様か、反映されるのに少し時間がかかったのですが、
これは一般的なことでしょうか?
それともサーバーの問題でしょうか?
続けてのご質問しつれいします。。。。
申し訳ないけど、このレベルでよくPHPやworedpressを触れるなと思います。
まずはサーバーサイドとHTMLの違いを勉強なされてはどうでしょうか?
回答ありがとうございます。そうですよね。。
自分でも無謀なことかなと思います。
このまま触るとあぶないですよね。。
ご指摘ありがとうございます。
勉強してみます。
関連するトピックス