WordPressワードプレス、新着情報の表示法

質問

「ホームページビルダー１７」にて、ホームページを作成しています。

ワードプレス側の「hpbダッシュボード」にて、ニュースなど作成、
作成後は、それら記事が、ホームページのＴＯＰページ、半分下のエリアの「新着情報」に、
日付とタイトルが記載されるようにしています。

１つ目（最も最新の記事）の日付・ニュースタイトルは、左寄りに記載されますが、
２つ目以降の日付・ニュースタイトルは、中央になります。

理想としましては、掲載された、全ての日付・ニュースタイトルが左寄りに、
頭がそろうようにしたいのですが、プラグインなどの問題なのでしょうか？

現状を上手く言葉に出来ず申し訳ありません。

もし、お分かりの方がいらっしゃいましたら、回答をいただけたらと思います。

回答No.2

tkmojo · ベストアンサー

恐らく、これに近いソースになっているのだと予想します。

【html】
<dl class="news">
<dt>2013年10月30日</dt>
<dd>メディア掲載のお知らせ</dd>
<dt>2013年10月29日</dt>
<dd>ホームページを立ち上げました</dd>
</dl>

【css】
.news dt{
float:left;
width:100px;
}

.news dd{
padding:0 0 10px 100px;
margin-bottom:10px;
border-bottom:solid 1px #CCC;
}

2列目は中央に寄っているのではなく、上の段の日付部分が折り返されているのでdtの縦がddよりも長くなり、floatの自然な機能として上のdtの右側に回り込んでいるだけです。
これはdtにclearを入れる事によって簡単に解決します。

また、ddに入れている下線（borderでも背景画像でも同じ）はあくまでddの範囲の一番下に表示されますので、
この記述方法だと、dtの方がddよりも縦が長くなると、日付の文字と下線がかぶってしまいます。
これに関しては、上記のclearだけでは解決しません。

dtの折り返しを防ぐには単純に幅を広げればいいかと言うとそうではなく、閲覧者の環境によって文字サイズや文字幅は様々ですので、見ている方によっては崩れます。
どの環境でも崩れず作るには、dtのwidthとddのpadding-leftの数値をpxではなくemで指定するとよいです。
em文字サイズによって変わる相対的な指定ですので、文字サイズが大きくなるとemの幅も大きくなり、環境によって2行になるような事はありません。

お礼

返事が遅くなりまして、
申し訳ありませんでした。

ホームページビルダーのサポートセンターと、こちらの両方で、
解決を模索しておりました。

結果的には、サポートセンターの方での
解決が出来ました。

今回のtkmojoのアドバイスは、
今後に活かされそうです。
ありがとうございました。

回答No.1

ORUKA1951

記事が長いと問題が表れないと思います。それでしたらfloatを解除していないだけです。
記事がひと段落しかなければ、その要素に:after擬似要素について{display:block;content:"";clear:left}ですむはずです。

お礼

ありがとうございました。
回答を参考に、トライしてみます。