関連記事の記事タイトルの表示について

> PC側の関連記事の表示で3行目で記事のタイトルが
> 切れてしまうので改善できる編集方法

1枚めのように3列に並んでいて、その下にタイトルがある感じですかね？
画像にはかからないほうが良いですか？

[画像]
[タイトル]
[抜粋]

こんな表示でしょうか？
で、モバイル時に2列にしたいということですが、それはタブレットもスマホも2列ですか？
表示自体はPCモバイル共通で、PC時は3列、モバイル時は2列で良いでしょうか？

返信ありがとうございます。

ただいまのカスタマイズの設定は、4列の設定です。

今悩んでいるところが、タイトルの表示についてでPC側4列の設定のまま、記事のタイトルが隠れないで全部表示できるようにしたいのです。

[画像]
[タイトル]←4段目の表示

モバイルの方は、出来るならPCとは別で画像とタイトルを綺麗に2列で表示させたいです＞＜

　[画像]　　　[画像]
[タイトル]　[タイトル]

画像は16:9にしましたけれども、通常に表示の仕分けなら

サンプル: pc4列 モバイル2列 | codepen

こんな感じでしょうか

画像はhoverで100%になるようにしました(笑)

はい！ありがとうございます！！

抜粋は無しの方向がいいです＞＜

そして、これらの設定をどう組み込んでいったらいいのかをご教授おねがいします＞＜

抜粋がいらないということでしたのでついでに記事を読むも取りました。
また。本来1列になってほしいサイズで一部2列になっていたので、min-widthを入れてスマホサイズで1列になるようにしました。

関連記事の表示スタイルをデフォルトにしておきます。
サンプルのcss欄右側にある、view compiledボタンからcssに変換します。
表示されたcssの最後の方に#mainの記述がありますがこれは不要です。ここ以外の部分を子テーマstyle.cssに追記します。
2系ならこのままで動作するかと思います。

上手く動作しない時はまたレス下さい。

どうもありがとうございます！！

PCとモバイルの動作ができました！！＞＜

ですが、モバイルの表示が下の画像のように偏ってしまったので、どういうふうに手を加えれば微調整できますか？

ご教授おねがいします！

.related-entryを

max-width: 155px;
margin: 5px 7px;

あたりにしてみてはどうでしょうか？

本来max-widthは必要ないのですが、スマホの画面サイズによって、1列と2列が混在することがあるようだったので後から無理に入れた部分です。
それぞれのエントリーの幅の最大値を設定しておき、それ以上になったらflexのwrapで自動的に改行するようになっています。

#mainのpaddingやらの量にもよるんですが、おそらくは、本来エントリーの間はmarginが5pxで設定してあるので開くはずなんですけれども、画面幅が320px以上の場合は開くと思うんです。なので、通常の状態で横向きにしたらスペースが開くのではないかと思います。
max-width: 160pxと言うことは横に2つ並んだら320pxになるので、隙間が無くなる。こういうことだろうかと。ただ#mainのpaddingがあるはずなので、画面幅はもう少し大きいはずなのですが・・・。

max-width: を 160px以上にすると、今度はPCで4列が厳しくなるだろうと思うので、ここらはmax-widthとmarginを微調整して良い感じの値を見つけて下さい。

一応サンプルでは上記設定にしてあります。320pxと440pxあたりでは問題なく隙間があいていると思うんですけれども、#mainのpaddingやmarginの設定がどうかというのがポイントになりそうです。

ヒントをご教授いただきましてありがとうございます！

max-width、下のmarginを微調整しても変わらかったので、その下にあるmin-widthを160pxから120pxに変えたところ、上手く間を開けることができました！！

> min-widthを160pxから120pxに変えたところ、上手く間を開けることができました！！

実は、その箇所は
>> 本来1列になってほしいサイズで一部2列になっていたので、
>> min-widthを入れてスマホサイズで1列になるようにしました。

ここにあたります。画面サイズが360px前後で2列になってしまい、もう少し小さくすると1列と2列が混在します。2列を回避するにはやはりmin-widthを160pxあたりは必要かと思うんですけれども、実機で問題ないならそれでokです。

160pxはだいたい2列で並んだ最小画面で、そのmarginやらpaddingがギリoverする値だったと思います。添付してもらった画像も一番下に写っているのは1列で上の2つが2列になってますよね？これを何とかした感じがmin-widthなのです。

min-widthを変えてみて、実機では問題はなかったです。

#related-entries .related-entry .related-entry-thumb {
-webkit-transition: .3s ease;
transition: .3s ease;
position: relative;
width: 100%;
min-width: 145px;
height: 0;
padding-top: 56.25%;
overflow: hidden;
float: none;
margin: 0;
padding-bottom: 0;
}

ここを変えました。

編集を加える前もモバイル側があの画像のような配置にでした。

max-widthをどう変えても、左に寄った上に画像と画像がくっついてしまう現象が回避できませんでした＞＜

また、現在「シンプリシティ２」を導入していて、どこの値が作用しているのか分からないです。

ちなみに前の返信で、おっしゃっていた「#main」のコードはこの部分ですか？

#main {
float: left;
box-sizing: border-box;
width: 740px;
padding: 20px 29px;
border:1px solid #ddd;
background-color:#fff;
border-radius: 4px;
margin-bottom: 30px;
}

> 「#main」のコードはこの部分ですか？

その#mainがスマホの時にどのメディアクエリを読んでいて、どのような設定になっているかで若干変わります。要は#mainの幅の問題なんですけれども、marginとpaddingがいくつか設定してあるかと思うんです。

cssのflexのflex: 1 auto;の部分は、その幅によって自動で配置するので、本来は指定する方がmarginあたりは良いのかも知れないとふと思い、サンプルをちょっと変更してみました。

変更点は、min,max-width廃止で
#related-entriesが
justify-content: space-between;に。

.related-entryが
flex: 1 23%;

.related-entry-thumb、そのimgのmin、max-widthをコメントアウトしています。

前レスにも書きましたがサンプルでは、アイテム数が問題で下2つが大きくなっていますが、ここらは、8、12、16個あたりの関連記事数にすればピッタリと収まります。
設定した表示数まで達していない場合はやはり半端分が大きくなりますが、1列表示以外の時だけです。
最大数が決まっているのであれば、ダミーアイテムを入れることで全てのアイテムの幅を等しくすることは可能です。
すでにどの関連カテゴリ(カテゴリで設定してある場合)でも記事数が達していれば8、12、16個のいずれかでうまく標示できるかと思います。

お返事遅くなったうえに何度も何度もお聞きしてすいません＞＜

モバイルの方をどうしても2列にしたくて今試しているのですが

@media screen and (max-width: 767px) {
#related-entries .related-entry {
-webkit-box-flex: 1;
-webkit-flex: 1 47%;
-ms-flex: 1 47%;
flex: 1 47%;
max-width: 45%;←ここを100%から45%に変えた結果
}

このようになりました。

ここから2列にするにはどうしたらよろしいしょうか？

ひとまずサンプル(full-page)を更新したんですが、これを実機で見て問題ないなら、

サンプルに画面幅320pxのメディアクエリを入れて試すのと、サムネイルに使われている画像のアスペクト比を一定にしてみる感じでしょうか。サンプル見ててどうしても先頭2つが表示おかしいと思ったのでhtmlでコメントアウトしたら普通に表示できたので。

>> 画像のアスペクト比を一定にしてみる感じでしょうか。
これは元々の画像の縦横比率の異なりすぎるものを使わないという感じです。

edit-pageのサンプル

これでもダメならjQueryでimgをbackground-inageにする方法に切り替えます。
こっちなら間違いないと思うんですよね。jQuery使うのがアレな人も多いので敢えてcssでやってましたけれども。

ちなみにmax-widthは変えると最大幅がそのサイズになるので変えるならflexの方です。

ひできちさん！しっかり動きました！

私の要望を聞いていただきありがとうございます！！JQueryの方も頑張って覚えてみたいです！！

どうも、font-sizeが最初の2つが大きくなっていたような風に思えてきたので、font-sizeを14pxに変更したものと、jqueryでbackground-imageにしたサンプルとして作ってみました。

サンプル: jQueryで、imgをbackground-imageとして読み込む。前回のfork | codepen

なんか日本語がおかしい(笑)

どうも、最初の2つのアイテムが大きくなっていたのがfont-sizeのせいというように思えたので、

と言うニュアンスです。