1304345706

YARPPの関連記事を表示するプラグインを利用しておりサムネイルを表示しています。
海外のサイトのカスタマイズをソースをコピーをしてサムネイルで表示できるようになったのですが、サムネイルが4個表示されると下段に次のサムネイルが表示されるのですが、上段のサムネイルのタイトルが2行になると下段にまわったサムネイルの位置が添付画像のようにずれてしまいます。
これを上段のサムネイルのタイトルが2行になっても画像の位置がずれないようにしたいのですが、CSSに詳しくないのでCSSをご指導いただければと思っております。
現在のCSSを張り付けておきます。
ol.related-posts {clear:both; text-align:center; margin:10px 0px 0px 0px; padding:0 ;}
ol.related-posts li{width:120px; float:left; display:inline; margin:10px 15px 10px 0; padding: 0;}
ol.related-posts img{clear:both; padding:5px; background:#F7F7F7; border:1px solid #DDD;}
ol.related-posts a{clear:both; display:block; border:none; text-decoration:none;}
ol.related-posts li{font-size:10px;}

現在は、コンテンツの幅で改行されていますけども横に表示する個数を指定して改行できれば一番いいです。

あつかましいお願いと思いますが、宜しくお願い申し上げます。

回答の条件
  • 1人2回まで
  • 13歳以上
  • 登録:2011/05/02 23:15:09
  • 終了:2011/05/03 12:11:53

ベストアンサー

id:windofjuly No.2

うぃんど回答回数2625ベストアンサー獲得回数11492011/05/03 11:13:26

ポイント300pt

>レイアウトが崩れた

 

改修版

<?php
    // original
    // http://ja-jp.facebook.com/note.php?note_id=101349730674
?>

<h4 class="meta">Related Posts</h4>

<?php
if ($related_query->have_posts()) {
    $maxColumn = 4;
    $nowColumn = 0;
    $default_thumbnail = 'default-image.jpg';
    echo '<ol class="related-posts">';
    while ($related_query->have_posts()) {
        $related_query->the_post();
        $related_thumbnail = get_post_meta($post->ID, "thumbnail_url", $single = true);
        if ($nowColumn < $maxColumn) {
            echo '<li>';
            $nowColumn++;
        } else {
            echo '<li style="clear:both">';
            $nowColumn = 1;
        }
        echo '<a href="' . the_permalink() . '" rel="bookmark">';
        if ($related_thumbnail != "") {
            echo '<img src="' . $related_thumbnail . '" alt="' . the_title() . '" />';
        } else {
            echo '<img src="' . $default_thumbnail . '" alt="' . the_title() . '" />';
        }
        echo the_title() . '</a>';
        echo '</li>';
    }
    echo '</ol>';
    echo '<div class="clear"></div>'
} else {
    echo '<p>No related posts found</p>';
}
?>

 

YAPPPは導入していないため上記動作未確認ですが結果は下記と同じような具合になるはずです

<html>
<head>
    <style>
        ol.related-posts li{width:120px; height:120px; float:left; display:inline; margin:10px 15px 10px 0; padding: 0; font-size:10px;}
    </style>
</head>
<body>
    <ol class="related-posts">
    <li>あ1</li>
    <li>あ2</li>
    <li>あ3</li>
    <li>あ4</li>
    <li style="clear:both">い1</li>
    <li>い2</li>
    <li>い3</li>
    <li>い4</li>
    <li style="clear:both">う1</li>
    </ol>
</body>
</html>

 

>画像を投稿するときに投稿画面でサムネイルのアドレスをカスタムフィールドで指定して投稿

画像のアドレスとサムネイル画像のアドレスに一定の関係性があればWordPressの記事投稿部分を改造することで対応可能だと思いますが、結果的に同様の効能となる「投稿サムネイル(WordPress2.9)/アイキャッチ画像(WordPress3.x)」という機能について学ばれることを推奨しておきます

 

いまさらですが「コメント・トラックバックを表示する」にチェックを入れておいていただければ、ちょっとしたやりとりも出来て便利ですよ

それと…次回からで結構ですがWordPressなどのバージョン記載もお忘れなく(バージョンによって対応が変わる場合も多いので…)

 

では、ひとまず失礼

id:dejavu888i

再三にわたりどうもありがとうございました。このはてなの人文検索という質問は、今回が始めてしたもので要領がまだ、わかっておりません。次回からは、コメントトラックバックを表示にチェックを入れることにいたします。色々ありがとうございました。ほんまに助かりました。

また、質問することもあるかと思いますのでその際は、宜しくお願いいたします。

2011/05/03 12:09:30

その他の回答(1件)

id:windofjuly No.1

うぃんど回答回数2625ベストアンサー獲得回数11492011/05/03 00:22:48

ポイント200pt

>上段のサムネイルのタイトルが2行になっても画像の位置がずれないようにしたい

 

高さ要素を加えるくらいでしょうか

ol.related-posts li{width:120px; height:???px; float:left; display:inline; margin:10px 15px 10px 0; padding: 0;}

 

>海外のサイトのカスタマイズをソースをコピーをしてサムネイルで表示できるようになった

>サムネイルが4個表示されると下段に次のサムネイルが表示される

 

下記あたりを参考になさったのかな?……っと勝手に想像して改造してみました

http://ja-jp.facebook.com/note.php?note_id=101349730674

大幅に改造しているように見えますが、単純にliタグ4つ毎にbrタグを入れてるだけだったりします。動作未検証です

<?php
    // original
    // http://ja-jp.facebook.com/note.php?note_id=101349730674
?>

<h4 class="meta">Related Posts</h4>

<?php
if ($related_query->have_posts()) {
    $maxColumn = 4;
    $nowColumn = 1;
    $default_thumbnail = 'default-image.jpg';
    echo '<ol class="related-posts">';
    while ($related_query->have_posts()) {
        $related_query->the_post();
        $related_thumbnail = get_post_meta($post->ID, "thumbnail_url", $single = true);
        echo '<li>';
        echo '<a href="' . the_permalink() . '" rel="bookmark">';
        if ($related_thumbnail != "") {
            echo '<img src="' . $related_thumbnail . '" alt="' . the_title() . '" />';
        } else {
            echo '<img src="' . $default_thumbnail . '" alt="' . the_title() . '" />';
        }
        echo the_title() . '</a>';
        echo '</li>';
        if ($nowColumn < $maxColumn) {
            $nowColumn++;
        } else {
            echo '<br />';
            $nowColumn = 1;
        }
    }
    echo '</ol>';
    echo '<div class="clear"></div>'
} else {
    echo '<p>No related posts found</p>';
}
?>
id:dejavu888i

さっそくご指導ありがとうございます。海外のサイトというのもご指摘のサイトになります。

ただ、上記のソースを張り付けるとレイアウトが崩れてしまいまして残念ながら上手く動作しませんでした。

サムネイルの表示の高さ要素を加える分に関しては思いどおりにできました。ありがとうございます。

再度ご指導いただけるのでしたら現在画像を投稿するときに投稿画面でサムネイルのアドレスをカスタムフィールドで指定して投稿しているのですが

これを自動でできないものかと思っております。もし可能でしたらお願いできますでしょうか?

無理難題もお願いして申し訳ありませんが宜しくお願いします。

2011/05/03 09:33:20
id:windofjuly No.2

うぃんど回答回数2625ベストアンサー獲得回数11492011/05/03 11:13:26ここでベストアンサー

ポイント300pt

>レイアウトが崩れた

 

改修版

<?php
    // original
    // http://ja-jp.facebook.com/note.php?note_id=101349730674
?>

<h4 class="meta">Related Posts</h4>

<?php
if ($related_query->have_posts()) {
    $maxColumn = 4;
    $nowColumn = 0;
    $default_thumbnail = 'default-image.jpg';
    echo '<ol class="related-posts">';
    while ($related_query->have_posts()) {
        $related_query->the_post();
        $related_thumbnail = get_post_meta($post->ID, "thumbnail_url", $single = true);
        if ($nowColumn < $maxColumn) {
            echo '<li>';
            $nowColumn++;
        } else {
            echo '<li style="clear:both">';
            $nowColumn = 1;
        }
        echo '<a href="' . the_permalink() . '" rel="bookmark">';
        if ($related_thumbnail != "") {
            echo '<img src="' . $related_thumbnail . '" alt="' . the_title() . '" />';
        } else {
            echo '<img src="' . $default_thumbnail . '" alt="' . the_title() . '" />';
        }
        echo the_title() . '</a>';
        echo '</li>';
    }
    echo '</ol>';
    echo '<div class="clear"></div>'
} else {
    echo '<p>No related posts found</p>';
}
?>

 

YAPPPは導入していないため上記動作未確認ですが結果は下記と同じような具合になるはずです

<html>
<head>
    <style>
        ol.related-posts li{width:120px; height:120px; float:left; display:inline; margin:10px 15px 10px 0; padding: 0; font-size:10px;}
    </style>
</head>
<body>
    <ol class="related-posts">
    <li>あ1</li>
    <li>あ2</li>
    <li>あ3</li>
    <li>あ4</li>
    <li style="clear:both">い1</li>
    <li>い2</li>
    <li>い3</li>
    <li>い4</li>
    <li style="clear:both">う1</li>
    </ol>
</body>
</html>

 

>画像を投稿するときに投稿画面でサムネイルのアドレスをカスタムフィールドで指定して投稿

画像のアドレスとサムネイル画像のアドレスに一定の関係性があればWordPressの記事投稿部分を改造することで対応可能だと思いますが、結果的に同様の効能となる「投稿サムネイル(WordPress2.9)/アイキャッチ画像(WordPress3.x)」という機能について学ばれることを推奨しておきます

 

いまさらですが「コメント・トラックバックを表示する」にチェックを入れておいていただければ、ちょっとしたやりとりも出来て便利ですよ

それと…次回からで結構ですがWordPressなどのバージョン記載もお忘れなく(バージョンによって対応が変わる場合も多いので…)

 

では、ひとまず失礼

id:dejavu888i

再三にわたりどうもありがとうございました。このはてなの人文検索という質問は、今回が始めてしたもので要領がまだ、わかっておりません。次回からは、コメントトラックバックを表示にチェックを入れることにいたします。色々ありがとうございました。ほんまに助かりました。

また、質問することもあるかと思いますのでその際は、宜しくお願いいたします。

2011/05/03 12:09:30

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません