関連記事（サムネイル表示）のフォントサイズ、行の高さの変更について

すみません、Simplicityのバージョンは2.4.6です。

通常、指定文字数で省略され末尾に…と三点リーダーが入る状態で、仮に半角全角が混じって抜粋部分の高さが変わることがあってもそれに外枠が追従するはずですが、文字の下半分が切れるということは抜粋部分に高さが指定されているのではなかろうかと思います。

simplicityのデフォルトではそれら指定はないかと思うので後でされた何かしらプラグイン、カスタマイズ等の影響かと思いますが、実際どうなっているのかを見てみないとこれというような回答はできないかと思います。

問題と思われる箇所がわかるページのアドレス、どのブラウザで見た時に問題かと、どうなって欲しいか(どうなるのが正解か)を書いてもらうとよいかと思います。

Hidekichi さん

いつもご親切にありがとうございます。
ご質問させていただくにあたり、不足が有りスミマセンでした。。
準備次第再度投稿させていただこうと思います。

ちなみに、
外観＞カスタマイズ＞レイアウト（投稿・固定ページ）の設定内容を見直し、
関連記事表示タイプを「サムネイル3列（推奨表示数3, 6, 9）」にしたら文字が正しく表示されました！
が、「サムネイル4列（推奨表示数4, 8, 12）」にするとやはり枠内に収まらず、文字の下半分が切れてしまういました、、。

タイル表示やらはmasonryというjavascript(jQuery)のスクリプトによってエントリーの位置を計算で設定してあります。

そのため(関連記事が同じ仕様かは調べてませんが)、抜粋部分には高さが入っていてサイズが固定されているため、はみ出たものはoverflow: hiddenによって質問のようにはみ出た箇所のフォントの下半分が切れるという事になります。これは仕様です。

再計算させたりさせればもしかすると上手く行くかも知れませんが、基本切れるものとして利用するしかありません。

抜粋枠の高さは固定されていますが、言われているようにフォントサイズや行間を小さくして、かつ中の文字を必ず2行なら2行に収めるように文字数を指定すればいけますが、これが上手く行くかどうかは100%ではありません。極端に短いならイケるかと思いますが。

エントリーを横に3つ並べるというのはcssだけで可能ですから、タイル形式ではなく独自にカード形式にすれば高さは可変にできますので(エントリーの行ごとに隙間が大きくなったり小さくなったりしますけれども)、どれを良しとするかはカスタマイズ次第です。

エントリーの高さを固定するに当たって画像の方の高さを可変にするという方法も考えられますが、masonryは設定がすでにされているので色々上手く行かない場合もあるかもしれません。

サンプル: 3列カード例 | codepen
※一部しかレスポンシブにしてません。

こんな感じで3列なり2列なりはcssのみでできます。各エントリーの高さが異なる場合、一番高いものに他が合うことになるので余計な隙間が生まれます。これは仕様です。これを埋めるための技術がmasonryなどです。

単純に高さ固定を解除したら良いだけということかも知れませんが、現物を見てないので何とも…という感じです。

Hidekichiさん

夜遅くまでスミマセン（＾＾；。
3列へ変更したら直りました！と書かせていただいたのですが、よくみると直っていませんでした。
記事のタイトルが3行以上あると見切れてしまうようで、いままで気が付かなかったのは短めのタイトルだったからかもしれません。
http://www.aneron.net/8A/wp-content/uploads/img.jpg
http://www.aneron.net/8A/?p=3726

実装しているプラグインは
Batch Cat
Better Delete Revision
Category Order
Google XML Sitemaps
Link Manager
Link to Post
Quick Adsense
Regenerate Thumbnails
spam-byebye
StatPress Reloaded
Throws SPAM Away
TinyMCE Advanced
WordPress Popular Posts
WP Multibyte Patch
WP Render Blogroll Links
で、装飾に関わるものの有無は正直分かりません。。

実際に行ったインストール手順は、Simplicity2.4.6（本体）を有効化して、その後Simplicity2の子テーマを有効化しました。また、Simplicityの時と同様に、ほぼデフォルトのまま使わせていただいておりましたので、CSSの編集などは行っていない状態です。サイドバーに好きなウィジェットを並るくらいしか・・・。

希望する形としては、枠内のテキスト量に合わせて枠の高さが可変してほしいのですが、無理な場合はこのまま気にしないようにします（＾＾；

Hidekichiさん

Simplicity（バージョン１）の時には3行以上の表示になっても枠が可変して表示できていました。
ふと思い出したので書かせていただきました。後付、申し訳ないです。

.related-entry-thumbnailにheightがあるのでこれをキャンセルすれば高さは一番高い部分に合います。インラインのスタイルがあるのですが(カスタマイザーが吐き出す設定かと思います)、普通にかいてあるだけなので

.related-entry-thumbnail {
  height: initial !important;
}

で強制的にheightを無くせます。

.related-entry-thumbnail .related-entry-title {
  line-height: 1.1;
  font-size: 14px;
}

.related-entry-thumbnail .related-entry-title a {
  line-height: inherit;
}

このようにかくことで、h3のaに対する行間とフォントサイズが設定されます。フォントサイズがない場合はh3の設定から行間が計算されるので、セットで書きます。行間が狭すぎると思う場合は、デフォルトの130%と同じ値の1.3でokです。line-heightだけだと上記理由で130%以上の行間が設定されると思われるので広く感じるかと思います。
またtext-align: left;を.related-entry-thumbnail .related-entry-titleに入れる事で微妙な揃えが改善されるかも知れませんがここらは好みです。

すでに投稿されたものを触る必要はないかと思いますが、今後は上記設定で、できるだけ3行で収まるぐらいのタイトルの長さを心がけると高さが揃うようになるかと思います。

.related-entry-thumbnailは2017年1月21日 午前11時41分現在のスタイルについてるクラスなので、変更した場合はここらのクラスを変更すればよいかと思います。

Hidekichiさん

ソースまで教えて頂きありがとうございます。
おかげさまで行間とフォントサイズを微調整することができ、
無事に希望の形になりました！
ご親切にありがとうございました＾＾