新着記事一覧の改行のレイアウト

  • tankichi

    (@tankichi)


    14年、 11ヶ月前

    質問させていただきます。

    トップページなどに新着記事一覧を表示しているですが、
    タイトルが長くなってしまったときに自動で改行してくれるのですが、
    レイアウトで困っています。

    例として画像を貼ります↓
    http://blog-imgs-38.fc2.com/w/e/t/wetz/ex.jpg

    画像のようにタイトルが2行にわたる場合、日付とタイトルを
    独立して表示して欲しいときにはどうやって組めば
    よいのでしょうか？

    ちなみにループは下記のように記述しています。

    <?php
$lastposts = get_posts('numberposts=5');
foreach($lastposts as $post) :
    setup_postdata($post);
 ?>
<li>
<?php the_time('Y年m月d日'); ?>&nbsp;&nbsp;| &nbsp;&nbsp;
<a href="<?php the_permalink(); ?>" id="post-<?php the_ID(); ?>">
<?php the_title(); ?></a>
</li>
<?php endforeach; ?>

    どうかご教授宜しくお願いします。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • LVP8

    (@lvp8)

    14年、 11ヶ月前

    日付に span なののマークアップを追加した場合の例。

    <li>
<span><?php the_time('Y年m月d日'); ?>&nbsp;&nbsp;| &nbsp;&nbsp;</span>
<a href="<?php the_permalink(); ?>" id="post-<?php the_ID(); ?>">
<?php the_title(); ?></a>
</li>

    li {
    position:relative;
    padding:100px; //日付の横幅やタイトルとのマージンで調整
    }
    li span {
    position:absolute;
    left:0; top:0;
    }

    他には、

    <dl>
<dt>日付</dt>
<dd>タイトル</dd>
</dl>

    として、float:left; を使い dt と dd を横並びに配置させるなどが思いつきます。

    LVP8

    (@lvp8)

    14年、 11ヶ月前

    訂正：padding:100px; 部分は padding-left:100px; の誤りです。

    li {
    position:relative;
    padding-left:100px; //日付の横幅やタイトルとのマージンで調整
    }
    li span {
    position:absolute;
    left:0; top:0;
    }

    トピック投稿者 tankichi

    (@tankichi)

    14年、 11ヶ月前

    LVP8さん大変わかりやすい説明有難うございます。
    とても助かりました。
    参考にしながらやってみたいと思います。

    また報告をこちらでいたします。

    トピック投稿者 tankichi

    (@tankichi)

    14年、 11ヶ月前

    LVP8さん報告が遅くなり申し訳ありません。

    dlタグでもliタグでもできました。
    発想の問題のようですね＾＾；

    アンダーラインの関係でtableを使って
    同じように組もうかと思っています。

    大変良い勉強になりました。
    ありがとうございます。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「新着記事一覧の改行のレイアウト」には新たに返信することはできません。