サポート » 使い方全般 » サムネイル付き記事一覧で記事毎の間隔を開けるか罫線など入れたい。

  • na2

    (@besignco)


    こんにちは。トップページにサムネイル付きで最新記事を表示させるべく、

    <div class="box4">
    <h4><img src="<?php bloginfo('template_directory');?>/images/heading11.png" alt="見出し大1" width="715"
    height="33" /></h4>
    
    <?php $posts = get_posts('numberposts=10'); ?>
    <?php foreach($posts as $post): ?>
    
    <div class="list">
    <a href="<?php the_permalink(); ?>">
    <?php the_post_thumbnail(array(80,80), array('class' => 'left')); ?></a>
    <a href="<?php the_permalink(); ?>">
    <?php the_title(); ?></a>
    </div>
    
    <?php
    echo mb_substr($post->post_content,0,200).'...'; ?>
    <a href="<?php the_permalink(); ?>" >more</a>
    
    <?php endforeach; ?>
    </div>

    と記述しているのですが、どうも記事毎の間隔が全く開いておらず、10個分の最新記事がまとまって1つの文章のように、区切りがなくつながって表示されてしまっています。
    これを記事毎に少し間隔を開けたり、罫線や線の画像など挟んで、1つ1つの記事を区切りたいのですが、<div class=”list”>の中のマージンを取るような方法が思いつかず、こちらでお聞きする次第です。どのようにすればよいでしょうか。
    よろしくお願いいたします。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • えっと、投稿カテゴリ間違ってますよ。管理人にお願いして移動してもらいましょう!

    で、ただ区切り線を入れたいなら<?php endforeach; ?>の前に<hr />って入れればいい感じ?
    べ、別にhrじゃなくてもimgで線の画像置いてもいいんだからね!

    na2

    (@besignco)

    できました。(*´д`*)
    すみませんでした。適切なカテゴリーに管理人様にお願いして移動してもらいます。

    それと、ついでに教えていただきたいんですが、各記事毎の間に罫線を入れることはできたのですが、200字ずつ抜き出している記事の上下にマージンをつけたい場合は、どこに指定すればよろしいのでしょうか。よろしくお願いします。

    na2

    (@besignco)

    追記です。

    教えていただいた通り「<?php endforeach; ?>の前に」罫線的なimgとを置いてみたのですが、IEで見ると記事と記事の間に、imgが入っているのですが、Firefoxで見ると2つ目の記事の「タイトル」と「本文」の間にimgが入ってしまっています。(2つ目の記事のタイトルが1つ目の記事の枠の中に入ってしまっている状態です)

    それと、現在テストで記事を2つ投稿してあるのですが、この方法ですと、一番下の記事に、外枠<div class=”box4″>の枠線と、imgの線が2本になってしまいます。対処方法を教えていただけないでしょうか。よろしくお願いいたします。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • トピック「サムネイル付き記事一覧で記事毎の間隔を開けるか罫線など入れたい。」には新たに返信することはできません。