@media screen and (max-width:480px) {
.entry-card-content {
padding-bottom: 25px;
}
}

こんなCSSで、それっぽくは、なるのですが、でも、デフォルトだと、重ならないように配慮してあったような気がするんですが・・

高速化を無効にされていないのと、環境情報をいただいていないので、他人には、原因は、わかりづらいですね。

冒頭にある、以下の表記は、気づきにくいですか？

• 返信ありがとうございます。
• 高速化無効になっていないでしょうか？コクーンで、高速化のチエックは全て外したのですが、再度確認してみます。
• 環境は、iPhonexr ios13
• huawei p30lite android10

になります。

よろしくお願い致します。

@松岡 さん

高速化は無効になっています。

環境情報については、リンク先を今一度、ご参照ください。

　↑

よろしければ一度現在使用しているスキンを外して「スキンなし」にした状態のスクリーンショットもいただいてよろしいでしょうか。

@松岡 さん

どうやら、スキンの不具合っぽいですね。

わいひらさんもこのトピックは、ご覧になっているはずですので、修正くださるかと思います。

松岡さんは、FTPソフトは、使えますか？

ありぁ、わいひらさんとかぶった。 ? 

環境情報は、要らないっぽいですね。

環境情報、大変失礼しました。

一度スキンを外してみます。

>松岡さんは、FTPソフトは、使えますか？

はい、ロリポップで使えます。

• スキンをはずしてみましたかな。
• 重なりはなくなっていますね。
• なにか、私がいじってしまったでしょうか、、、

環境情報になります。

一応つけさせてください。

----------------------------------------------
サイト名：なごやぷろも
サイトURL： https://nagoya.promo
ホームURL： https://nagoya.promo
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン：5.4.1
PHPバージョン：7.3.17
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.129 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate, br
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：2.1.4.1
カテゴリ数：1
タグ数：0
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.1
style.cssサイズ：4190バイト
functions.phpサイズ：335バイト
----------------------------------------------
Gutenberg：1
AMP：0
PWA：0
Font Awesome：5
Auto Post Thumbnail：0
Retina：0
ホームイメージ：
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
WEBフォントLazy Load：0
----------------------------------------------
利用中のプラグイン：
Contact Form 7 5.1.7
Google XML Sitemaps 4.1.0
Jetpack by WordPress.com 8.4.2
SSL Insecure Content Fixer 2.7.2
----------------------------------------------

@松岡 さん

たぶん、わいひらさんは、スキンが原因かどうか切り分けたかったのだと思います。

もう少し、お待ちください。

あら、環境情報をすみません。

何かあったときは、これがあると、解決への近道になることが多いんです。

いえ、環境情報、中身までしっかり確認していませんでした。

教えて頂く立場なのに、ズルしてしまいました。

今後は気をつけたいと思います。

@松岡 さん

スキンの不具合であれば、わいひらさんが、修正したファイルをGithabにアップしてくださり、それを松岡さんがダウンロードして、FTPソフトで、アップロードする、という流れになろうかと思います。

このトピックに連絡くださると思うので、それまで、お待ちください。（明日あたりかな・・）

環境情報の案内については、初めての方には、わかりづいらいのかなと、私も最近感じているところです。

環境情報にスキン情報がないので確認させてください。

使用していたスキンはMomoonであっていますか？よろしければ使用していた色も教えていただければと思います。

はい、Momoonで合っています。

Momoon（オレンジ）になります。

よろしくお願いいたします。

Momoonスキンの不具合と思われるところを削除してみました。
よろしければ以下のファイルでアップデートして試してみてください。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------

有難うございます。

先ほど、FTPで更新したら無事に問題が解決されました。

助かりました。

@松岡 さん

サイトを表示してみたのですが、私の環境では、直っていないように見えます。

わいひらさん

スキンのCSSの257行目

480px以下のメディアクエリの中です。

.entry-card-content{
padding:0;
}

下側のpaddingが0だと、スニペットと重なってしまいます。

スキンなしだと、確か、ボトムだけ1.2emじゃなかったかな？

ちょっとローカルサイトで確認してみます。

@yhira さん

やはり、親テーマのCSSの32行目の

.entry-card-content, .related-entry-card-content {
padding-bottom: 1.2em;
}

これを、スキンのCSSで上書きしている状態なので、スニペットと重なってしまうと推測されます。

ああ、松岡さん、テスト用のスニペットのテキストを追加くださったのですね。

ありがとうございます。

松岡さんの今の状態がスキンのデフォルトのデザインだとすると、

.entry-card-content, .related-entry-card-content {
padding-bottom: 1.2em;
}

これにしてしまうと、スニペットの５行目の頭の部分が少し残ってしまうみたい・・

.entry-card-snippet, .related-entry-card-snippet {
font-size: 0.8em;
max-height: 7.8em;
line-height: 1.3;
overflow: hidden;
}

赤字の部分も調整が要るかもしれませんね。

max-height: 7.5em;

ぐらいなのかな？

私は、Windows環境だけでしか見てないので、実際にCSSを適用してiphoneやアンドロイドで見てみないと正確なことはわからないですよね。

leafytreeさん

有難うございます。

今、再度確認してみたら、まだ少しおかしいですね。

明日7.5emで調整してみます。

@松岡 さん

もう、今日は遅いので、おそらく、また明日、わいひらさんが、修正くださるかと思います。

スキンは有志の方々が無償でご提供くださっているものも多いので、わいひらさん一人では、全てを完璧にCocoonに対応させるのは至難の業なのだろうと推測されます。

面倒なことにお付き合いいただいてすみません。

とりあえずスキンの.entry-card-contentも、削除しておきました。
https://github.com/yhira/cocoon
max-heightについては、スキン側の問題ではなさそうなので、今回はまだ何もしていません。

@yhira さん

スキンでスニペットの行間を1.3から1.8に変えているみたいです。

.entry-card-snippet {
line-height: 1.8;
}

@yhira さん

理論的には、行間が1.8なら、４行表示で、

max-height: 7.2em;

５行表示なら、

max-height: 9em;

になるのでしょうか？

行間を変えたら、上下のスペースも合わせて変えた方が良いかと・・・ ? 

>とりあえずスキンの.entry-card-contentも、削除しておきました。

FTPで更新しました。

しかしながらパソコン表示、表示、android表示でも文字が途切れてしまっています。

あとはleafytreeさんの言われる、max-heightでしょうか？

max-height: 7.2em;にしてみました。

パソコン表示、表示、android表示、途切れることなく表示されています。

とりあえず、これで解決ということになりますでしょうか？

わいひらさん、leafytreeさん、有難うございます。

@松岡  さん

私、個人的には、スキンの「Momoon」を使われる方、皆さんに影響することのような気がしますので、テーマ側で修正しておいた方が良いと考えます。

最近、WordPress5.4.1がリリースされたので、対応等で、わいひらさんも何かと、お忙しいのかなと、思われます。

松岡さん、ご自身で、修正のCSSを子テーマに設定することは、簡単にできるかと思いますが、そうせずとも、おそらく、テーマ側で修正くださるのではないかと私は期待しています。

あ、7.2にしてみたのですね。 ? 

スマホの画面スペースを考えたら、やはり、４行ですかねぇ・・

@松岡 さん

WordPressの場合、親テーマはどんどんアップデートしていくので、親テーマのCSSを直接編集しても、アップデート時に元に戻ってしまう可能性があります。

ご自身で、対応される場合は、以下のCSSを子テーマに追記すれば、反映されるかと思います。

/*スキン（Momoon）適用時に、エントリーカード、関連記事エントリーカードのスニペットの文字スペースの高さを調整*/
.entry-card-snippet, .related-entry-card-snippet {
max-height: 7.2em;
}

バタバタとしていて、すみません。

leafytreeさん、有難うございます。

親テーマだとそうなるのですね。
勉強になります。

早速、子テーマに追記したいと思います。
ありがとうございます。

「line-heightを変更すると中途半端に文字列がはみ出す問題」は、line-heightを変更してしまうと、どんな環境にでも起きる問題です。
なので、例えばスニペット部分の「上部は通常の黒色」から「下部にいくにあたって透過色」になるグラデーションなんかで目立たないようにするような対応も考えて、昨日何もしませんでした。
いろいろなサイトを見ていると、そういった表示を行っている有名サイトとかも結構あるので。

ただ、まだどうしようか迷っているのでleafytreeさんの方法を適用しておきました。
https://github.com/yhira/cocoon

@yhira さん

何か問題が起きると、すぐ目の前の解決策ばかりを追ってしまい、書き込んでしまうので、いつもご迷惑をおかけしています。

何卒、ご容赦ください。

今回のトピックで、スキンの「Momoon」のデザインをあらためて、よく見てみると、隙間や、余白、空間、といったものを考慮してデザインされているのだな、とつくづく感心した次第です。

フォントサイズは、あまり大きくせずとも、老眼の私でも、内容を把握しやすいし、見た目の品位も高いと感じます。

作者の「タイジーWP」さんは、グラフィックデザインをやられている方なのかな？と思ったりしています。

振り返って、自分のサイトを見てみると、自分で書いたCSSは、あまりイケてないなぁ・・と。

私のサイトも「Momoon」を参考にして、少し手直ししてみようと思います。

タイジーWPさん　Cocoonカスタマイズブログ

いえいえ．全然思ったことを書いていただければと思います。
Momoonの余白は心地いいですよね。