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カスタマイズ依頼

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

モバイルの余白に関して
 
共有:
通知
すべてクリア

[解決済] モバイルの余白に関して

15 投稿
5 ユーザー
7 Reactions
1,434 表示
(@とし)
Eminent Member
結合: 6年前
投稿: 34
Topic starter  

モバイルでの表示の際に上部に大きな余白ができてしまうのですが、解決方法が分かりません。

画像で黒く書いた部分の幅を狭めたいです。

よろしくお願いします。

https://chetz.coresv.com/


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

前略、とし さん

以下のコードだと、どうでしょうか?

@media screen and (max-width:480px) { 
.article h2 {
margin-top: 1em;
}
}

   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17009
 

以下のようなコードを子テーマのstyle.cssに追記するとどうでしょうか。

h2.top2 {
margin-top: 0;
}

   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17009
 

僕の環境からだと、上の方の余白は再現できなかったので、どういう状態なのかはちょっとわかりませんでした。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17009
 

書き込みがかぶってしまった。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17009
 

モバイル版のみ余白を消したいのであれば、リフィトリーさんが書かれたようにメディアクエリを書く必要があるかも。


   
(@とし)
Eminent Member
結合: 6年前
投稿: 34
Topic starter  

h2.topの余白は直りました。ありがとう御座います。

その上の部分ですが、もう一度確認お願いします。


   
はる
(@haruinoue)
Noble Member Moderator
結合: 4年前
投稿: 1082
 

19:30頃に確認した時はわいひらさんと同様余白が確認できませんでしたが、19:45現在は余白ができてますね。

ご自身で子テーマのstyle.cssに書かれている

#container {
padding-top: 90px;
}

によるもののようです。


   
わいひら reacted
(@とし)
Eminent Member
結合: 6年前
投稿: 34
Topic starter  

訂正しました。ありがとう御座います。

因みにもう少し余白を消すことはできないでしょうか?

 

はる様へ

CSSは消してデフォルト状態にしました


   
はる
(@haruinoue)
Noble Member Moderator
結合: 4年前
投稿: 1082
 
.article h2, .article h3, .article h4, .article h5, .article h6 {
margin-top: 2.4em;
}

のせいで見出しの上に2.4em分の余白が空いているのだと思いますが、CSSが圧縮されており何によるものなのか確認できません。

高速化をオフにしていただいた方が確認がしやすそうです。

あるいはリフィトリーさんの書いてくださっているCSSでも余白を小さくできます。


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

としさん

CSSのコードを編集するときは、文字コードをUTF-8(BOMなし)でプレーンテキストを扱うことができる、適切なテキストエディターをお使いになってください。

 

子テーマのCSSの最後の方に余分な文字や不適切な文字が入ってしまっています。

h2.top2 {
 margin-top:0;
ï½

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

としさん

テーマエディター上では、目視できない文字化けです。


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

としさん

Windowsのメモ帳や、WordやExcel 、Macだと、テキストエディットは、CSSの編集には、不適当です。

 


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

無料で入手でき、初心者にも扱いやすいテキストエディターは、

 

Mery や TeraPad や サクラエディタ などがあります。

 

Macだと、

 

CotEditor があります。

 

This post was modified 4年前 2回 by リフィトリー

   
(@naotoyoshiii)
New Member Registered
結合: 4年前
投稿: 3
 

いくつかの設定を調整すればよいのではないでしょうか。また、非常に大きな余白がある場合は、そのコーディングを変更する必要があります。何の問題もないと思いますよ。また、バナーを追加することで、画面が空っぽにならないようにすることもできます。私の場合は、margin-topの大きさを変えただけです。多分、数秒でできると思います。ただし、ウェブサイトだけではなく、モバイルブラウザでも変更するようにしてください。これは、変更が表示されることを確認するためです。

 

 

 


   
共有:

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

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

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

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

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

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

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

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