Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

記事の文字と日付が重なる:スマホ表示
 
共有:
通知
すべてクリア

[解決済] 記事の文字と日付が重なる:スマホ表示

33 投稿
3 ユーザー
11 Reactions
4,063 表示
(@松岡)
Active Member
結合: 5年前
投稿: 11
Topic starter  

はじめまして。

パソコンでの表示は問題ないのですが、スマホで表示すると、記事文と日付が重なってしまいます。

直す方法はありますか?

 

該当ホームページ

https://nagoya.promo

 

 


   
引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 
@media screen and (max-width:480px) {
.entry-card-content {
padding-bottom: 25px;
}
}

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

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

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

 


   
返信引用
(@松岡)
Active Member
結合: 5年前
投稿: 11
Topic starter  
  • 返信ありがとうございます。
  • 高速化無効になっていないでしょうか?コクーンで、高速化のチエックは全て外したのですが、再度確認してみます。
  • 環境は、iPhonexr ios13
  • huawei p30lite android10

になります。

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


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@松岡 さん

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

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

 ↑

 


   
わいひら reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17212
 

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


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@松岡 さん

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

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

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


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

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

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


   
返信引用
(@松岡)
Active Member
結合: 5年前
投稿: 11
Topic starter  

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

 

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

 

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

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

 


   
返信引用
(@松岡)
Active Member
結合: 5年前
投稿: 11
Topic starter  
  • スキンをはずしてみましたかな。
  • 重なりはなくなっていますね。
  • なにか、私がいじってしまったでしょうか、、、

   
返信引用
(@松岡)
Active Member
結合: 5年前
投稿: 11
Topic starter  

環境情報になります。

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

 

----------------------------------------------
サイト名:なごやぷろも
サイト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
----------------------------------------------


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@松岡 さん

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

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

 

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

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


   
わいひら reacted
返信引用
(@松岡)
Active Member
結合: 5年前
投稿: 11
Topic starter  

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

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

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

 

 


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@松岡 さん

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

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

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


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17212
 

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

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


   
返信引用
(@松岡)
Active Member
結合: 5年前
投稿: 11
Topic starter  

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

 

Momoon(オレンジ)になります。

 

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


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17212
 

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

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


   
返信引用
(@松岡)
Active Member
結合: 5年前
投稿: 11
Topic starter  

有難うございます。

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

助かりました。

 


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@松岡 さん

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

わいひらさん

スキンのCSSの257行目

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

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

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

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

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

 


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@yhira さん

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

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

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

 

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

ありがとうございます。


   
わいひら reacted
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

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

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

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

.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やアンドロイドで見てみないと正確なことはわからないですよね。

 

   
わいひら reacted
返信引用
(@松岡 leafytree)
Active Member
結合: 5年前
投稿: 11
Topic starter  

leafytreeさん

有難うございます。

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

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

 

 


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@松岡 さん

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

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

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

 


   
わいひら reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17212
 

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


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@yhira さん

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

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

 


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@yhira さん

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

max-height: 7.2em;

5行表示なら、

max-height: 9em;

になるのでしょうか?

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


   
返信引用
(@松岡)
Active Member
結合: 5年前
投稿: 11
Topic starter  

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

FTPで更新しました。

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

 

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

max-height7.2em;にしてみました。

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

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

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


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@松岡  さん

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

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

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

 

 

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

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


   
わいひら reacted
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@松岡 さん

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

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

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

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

 


   
わいひら reacted
返信引用
(@松岡)
Active Member
結合: 5年前
投稿: 11
Topic starter  

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

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

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


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17212
 

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


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17212
 

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


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@yhira さん

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

何卒、ご容赦ください。

 

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

 

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

 

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

 

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

 

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

 

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

 

 

 


   
わいひら reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17212
 

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


   
返信引用
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました