人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile


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

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

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

1304345706
●拡大する


●質問者: dejavu888i
●カテゴリ:ウェブ制作
✍キーワード:background border DDD margin OL
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● うぃんど
●200ポイント

>上段のサムネイルのタイトルが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>';
}
?>
◎質問者からの返答

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

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

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

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

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

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


2 ● うぃんど
●300ポイント ベストアンサー

>レイアウトが崩れた

改修版

<?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などのバージョン記載もお忘れなく(バージョンによって対応が変わる場合も多いので…)

では、ひとまず失礼

◎質問者からの返答

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ