YARPPを使ってサムネイル表示していますが、以前に解答者様にご指導頂いて設置出来た次第です。
関連記事もサムネイルも問題なく表示されるのですが、記事のタイトルを半角英数字で記入するとサムネイルの画像のタイトルが添付画像のように右側に回り込んでしまいます。
これを解消したいのですが、お願いできますでしょうか？
サムネイルを表示する部分のＣＳＳは下記のようになっています。
再三ご指導ばかりお願いして申し訳ありませんが、また宜しくお願いいたします。
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; }
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。
ログインして回答する
ベストアンサー
-
rouge_2008
満足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>'; // この行はコメントアウトするか削除
その他の回答
この質問へのコメント
質問の情報
- 登録日時
- 2012-04-03 22:38:15
- 終了日時
- 2012-04-04 17:26:15
- 回答条件
- 1人5回まで
この質問のカテゴリ
この質問に含まれるキーワード
人気の質問
-
経団連が夫婦別姓（選択的）を提言しました。政府は、配偶者控除の廃止を志向しているようです。結婚制度を…
匿名質問者
3
2
-
オススメのシェイバー教えてください！ 以下の条件に近いシェイバーはあるのでしょうか。 1.髭が濃いため深…
Ryoya391
1
-
０５７０ で始まる電話番号は、キャリアなどとの間でカケ放題などの契約をしていても、そのサービスは受け…匿名質問者1
-
友人の解答と自身の解答で異なります。教えて頂けないでしょうか。 C社株式は，３年後に平均で1,000円にな…匿名質問者3
-
僕の親は苛立っています。 「俺はネットの天才なのに、なんで通報されたり、アカウント凍結されたりするん…匿名質問者34
CSSで対処するには、「ol.related-posts li」に指定した「width:120px;」を「width:110px;」など小さい値に変更するといいです。
いつもありがとうございます。
早速、横幅110とか100とかに変更してやってみましたが・・・結果同じ状態で変わりませんでした。
画像サイズはいくつなのでしょう？
imgとそれにつづくタイトルのテキストがインライン要素なので、そのまま続けて表示されてしまっています。
画像の後で改行するか、タイトルテキストをブロック要素で囲むと直るはずです。
テンプレートの修正方法を回答しましたので、そちらも試してみてください。
80とか60とかにもしてみたんですが、変わりませんでした。
テンプレートの改行を入れる方で上手くいきました。
毎度毎度お世話になりほんまに有り難く思っています。
また、宜しくお願いします。