1333460290 YARPPを使ってサムネイル表示していますが、以前に解答者様にご指導頂いて設置出来た次第です。


関連記事もサムネイルも問題なく表示されるのですが、記事のタイトルを半角英数字で記入するとサムネイルの画像のタイトルが添付画像のように右側に回り込んでしまいます。
これを解消したいのですが、お願いできますでしょうか?
サムネイルを表示する部分のCSSは下記のようになっています。
再三ご指導ばかりお願いして申し訳ありませんが、また宜しくお願いいたします。

ol.related-posts {clear:both; text-align:left; margin:10px 0px 0px 0px; padding:0px;}
ol.related-posts li{width:120px; height:120px;float:left; display:inline; margint:10px 15px 10px 0; padding:0 15px 50px 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人5回まで
  • 13歳以上
  • 登録:2012/04/03 22:38:15
  • 終了:2012/04/04 17:26:15

ベストアンサー

id:rouge_2008 No.1

rouge_2008回答回数593ベストアンサー獲得回数3502012/04/04 14:49:44

ポイント100pt

タイトルの前で改行を出力します。

        echo '<a href="'. get_permalink() . '" rel="bookmark" title="' . get_the_title() . '">';
        if ($related_thumbnail != "") {
            echo '<img src="' . $related_thumbnail . '" alt="' . get_the_title() . '" />';
        } else {
            echo '<img src="' . $default_thumbnail . '" alt="' . get_the_title() . '" />';
        }
        echo '<br />' . get_the_title() . '</a>'; // この行を変更



あるいはタイトルを<p>など、ブロック要素で囲んで出力するようにしても大丈夫です。

        if ($related_thumbnail != "") {
            // 次の行以降を変更
            echo '<img src="' . $related_thumbnail . '" alt="' . get_the_title() . '" /></a>';
            echo '<p><a href="'. get_permalink() . '" rel="bookmark" title="' . get_the_title() . '">' . get_the_title() . '</a></p>';
        } else {
            echo '<img src="' . $default_thumbnail . '" alt="' . get_the_title() . '" /></a>';
            echo '<p><a href="'. get_permalink() . '" rel="bookmark" title="' . get_the_title() . '">' . get_the_title() . '</a></p>';
        }
        //echo get_the_title() . '</a>'; // この行はコメントアウトするか削除

  • id:rouge_2008
    画像が小さいのが原因のようですから、使用するサムネイル画像のサイズをもう少し大きくすると大丈夫なはずです。
    CSSで対処するには、「ol.related-posts li」に指定した「width:120px;」を「width:110px;」など小さい値に変更するといいです。
  • id:dejavu888i
    おはようございます。
    いつもありがとうございます。

    早速、横幅110とか100とかに変更してやってみましたが・・・結果同じ状態で変わりませんでした。
  • id:rouge_2008
    もっと小さい値を設定しないと駄目なのかもしれません。
    画像サイズはいくつなのでしょう?

    imgとそれにつづくタイトルのテキストがインライン要素なので、そのまま続けて表示されてしまっています。
    画像の後で改行するか、タイトルテキストをブロック要素で囲むと直るはずです。
    テンプレートの修正方法を回答しましたので、そちらも試してみてください。
  • id:dejavu888i
    いつもお世話になりありがとうございます。
    80とか60とかにもしてみたんですが、変わりませんでした。

    テンプレートの改行を入れる方で上手くいきました。
    毎度毎度お世話になりほんまに有り難く思っています。

    また、宜しくお願いします。

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

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

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

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