サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2021年3月21日 12:54
スマホで閲覧したときに行の余白を狭くしたいです。
できればスマホ閲覧時だけ狭くしたいですが、不可能であればPC閲覧時も一緒にせまくなっても構いません。
現在の状況は、「Cocoon設定＞本文＞本文余白」から、行の余白を狭く変更するとPC画面の本文行余白は狭くなりますが、スマホ画面だと変化がないです。
初歩的な質問で申し訳ないですが、よろしくお願いいたします。
----------------------------------------------
サイト名：肌 荒 れ か ら の 脱 却
サイトURL： https://shiratamatomato.net
ホームURL： https://shiratamatomato.net
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
親テーマスタイル：/wp-content/themes/cocoon-master/style.css
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
スキン：/wp-content/themes/cocoon-master/skins/skin-season-spring/style.css
WordPressバージョン：5.7
PHPバージョン：7.4.15
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36
サーバーソフト：LiteSpeed
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate, br
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：2.2.8.1
カテゴリ数：2
タグ数：0
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.2
style.cssサイズ：1951バイト
functions.phpサイズ：203バイト
----------------------------------------------
Gutenberg：1
AMP：0
PWA：0
Font Awesome：4
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
WEBフォントLazy Load：0
----------------------------------------------
利用中のプラグイン：
WP Multibyte Patch 2.9
----------------------------------------------
2021年3月21日 13:39
前略、aykuu さん
先ずは基本的なところから、確認されるのが良いような気がします。
お使いのスマートフォンのブラウザのキャッシュを消去してみられましたでしょうか？
2021年3月21日 13:42
iPhone、Safariのキャッシュとは？削除するとどうなる？
https://iphone-howto.jp/safari-cache-8001
Android キャッシュと Cookie の消去
https://support.google.com/accounts/answer/32050?co=GENIE.Platform%3DAndroid&hl=ja
This post was modified 4年前 by リフィトリー
2021年3月21日 13:47
aykuuさん
aykuuさんが具体的にどこの間隔のことを仰っているのか、ということはありますが。
（私の言っているのが違う場所であれば、画像などでご提示ください。）
おそらくスキンのSeason（Spring）をご利用になっていて、そこで指定されている以下が影響しているのではないかと思います。
（ちゃんと調べていないのですが、すみません。）
entry-content > p, .sidebar p {
margin: 2em 0;
line-height: 2;
}
段落間の間隔は、margin。（ボトム側は効いていない感じですが。）
段落内の間隔は、line-height。
を調整すると良いかも知れません。
本文だけを調整したのであれば、セレクタは「entry-content > p」だけで良いと思います。
わいひら reacted
2021年3月21日 14:20
aykuu さん
m k 2さんの書かれた内容が合っているようです。
Cocoon設定の「本文」タブの「行の余白」の設定は、一応有効になっているのですが、有効になるのは、段落の下の余白だけで、段落の上の余白については、スキンのCSSの指定で固定されてしまっているようです。
mk2さんのご案内のように、子テーマのCSSか、追加CSSに以下のようなコードを設定すれば、改善すると思います。
.entry-content > p,
.sidebar p {
margin: 1.5em 0;/*行の余白*/
line-height: 1.8;/*行の高さ*/
}
This post was modified 4年前 by リフィトリー
2021年3月21日 14:28
リフィトリーさん
ありがとうございます。
リフィトリーさんにご確認いただき、安心しました。
只今、訳あって電源が確保できず、バッテリー残量が?
そろそろダウンしそうな雰囲気です。
2021年3月21日 15:28
わいひらさん
Cocoonの余白の設定の仕様が変更されているので、Season の余白を指定するCSSの記述も、再考する必要があるような気もします。
Topic starter
2021年3月21日 15:44
皆様、返信ありがとうございます。
以下2点を実施しました。
・iPhone、Safariのキャッシュ削除しました。
・子テーマのスタイルシート22行目から添付のように追記しました。
しかし、携帯(iPhone)画面での行余白に変化はありません…。
やり方間違っていましたらご指摘ください。
2021年3月21日 16:58
aykuuさん
バッテリーが?なので、長く返信できません。
marginの左側に、無効な文字コードが含まれており、文法エラーになっていると思います。
marginの左側の4文字を、削除するか、全てスペースにしてください。
2021年3月21日 17:03
@aykuu さん
子テーマのCSSファイルを確認したとろ、BOMとみられる文字が混入しているようです。
この文字は、テーマエディター上では、目に見えない状態となっているので、普通は気づかないです。
CSSのコードを編集するときは、UTF-8（BOMなし）でプレーンテキストを扱うことができるテキストエディターをお使いください。
私のオススメは、Mery という Kuroさんという方が開発されているテキストエディターです。
テキストエディター「Mery」
https://www.haijin-boys.com/wiki/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8
Mery 設定方法
https://wp-cocoon.com/community/postid/38104/
文字コードをUTF-8 BOMなし(UTF-8N)でファイル保存をする方法
https://www.1-firststep.com/archives/2258
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。