YARPPの関連記事を表示するﾌﾟﾗｸﾞｲﾝを利用しておりｻﾑﾈｲﾙを表示しています｡海外のｻｲﾄのｶｽﾀﾏｲｽﾞをｿｰｽをｺﾋﾟｰをしてｻﾑﾈｲﾙで表示できるように…

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;}

現在は､ｺﾝﾃﾝﾂの幅で改行されていますけども横に表示する個数を指定して改行できれば一番いいです｡

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

＞上段のｻﾑﾈｲﾙのﾀｲﾄﾙが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>';
}
?>

さっそくご指導ありがとうございます｡海外のｻｲﾄというのもご指摘のｻｲﾄになります｡

ただ､上記のｿｰｽを張り付けるとﾚｲｱｳﾄが崩れてしまいまして残念ながら上手く動作しませんでした｡

ｻﾑﾈｲﾙの表示の高さ要素を加える分に関しては思いどおりにできました｡ありがとうございます｡

再度ご指導いただけるのでしたら現在画像を投稿するときに投稿画面でｻﾑﾈｲﾙのｱﾄﾞﾚｽをｶｽﾀﾑﾌｨｰﾙﾄﾞで指定して投稿しているのですが

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

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

＞ﾚｲｱｳﾄが崩れた

改修版

<?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などのﾊﾞｰｼﾞｮﾝ記載もお忘れなく(ﾊﾞｰｼﾞｮﾝによって対応が変わる場合も多いので…)

では､ひとまず失礼