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

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

1333460290
●拡大する

●質問者: dejavu888i
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● rouge_2008
●100ポイント ベストアンサー

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

 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>'; // この行はコメントアウトするか削除

関連質問

●質問をもっと探す●



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