>上段のサムネイルのタイトルが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などのバージョン記載もお忘れなく(バージョンによって対応が変わる場合も多いので…)
では、ひとまず失礼
再三にわたりどうもありがとうございました。このはてなの人文検索という質問は、今回が始めてしたもので要領がまだ、わかっておりません。次回からは、コメントトラックバックを表示にチェックを入れることにいたします。色々ありがとうございました。ほんまに助かりました。
また、質問することもあるかと思いますのでその際は、宜しくお願いいたします。