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

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

スマートフォンの左右マージンに関して
 
共有:
通知
すべてクリア

[解決済] スマートフォンの左右マージンに関して

14 投稿
5 ユーザー
1 Reactions
3,549 表示
(@usjoin)
New Member Registered
結合: 7年前
投稿: 2
Topic starter  

わいひらさん

Cocoonリリースおめでとうございます。

素晴らしいテンプレートですね!

活用させていただきます。

一点ご相談なのですが、スマートフォン表示の際の左右マージンが少しキツく感じます。

少し調整したいのですがcssはどの辺をカスタマイズすればいいでしょうか。

お忙しいとは思いますがご指示よろしくお願い致します。


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

こんにちは。
ありがとうございます。

左右マージンとはどのページのどの部分のことでしょうか?
実際のページのURLを貼り付けてもらってもよろしいでしょうか。


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

お疲れ様です!凄いテーマでまだワクワクしてます^^

スレ主さんと同じだと思われますが、例えば以下ページもスマホ同様PCビューでも幅が狭いとき見切れたり。

https://wp-cocoon.com/specifications/

olリストが100超えると、百の位が見えないのも同じ症状かもしれません。

@media画面と(最大幅:768px)
main.main、div.sidebar {
パディング:5px;
マージン:10ピクセル0。
border-width:0;
}

padding: 5px;padding: 5px 12px;にしたら投稿記事内の左右余白ができるようですが。

リンク先のolリストか何かご確認お願いします


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

ありがとうございます。
SimplicityフォーラムでかうたっくさんやAkiraさん、その他みなさんが返信していただいたおかげで、開発時間を取ることができました。
誠に感謝です。

ここら辺のスマホ表示は、まだまだ改善の余地が全然あると思います。
みなさんの意見を聞いて、できるだけ最適化したいと思いますので、是非ご意見をお聞かせください。

とりあえず、今日は寝て明日やろうと思います。


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

ちなみに、かうたっくさんは左右のマージンはどのくらいが最適と

思われますか?

参考までにお聞かせいただければ幸いです。

 


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

左右のマージンはどのくらいが最適

個人的には12px前後欲しいです。10px位・またはそれよりも多めが個人的には好みかもしれません。例えば5pxだと私のばあいは狭く感じるタイプのようです。

※更新前に『Subscribe to this topic』の意味をみようと日本語化させた際、ソースコードも日本語になってしまいました。見にくいですね…

多忙ななかのご返信と、Cocoon開発・公開していただけた事に感謝です!


   
(@moritomo)
New Member
結合: 7年前
投稿: 1
 

左右のマージン、ぜんぜん今のままでOKです

アイキャッチ画像のマージンを0にしたいくらい


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

Simplicityのマージン(というかpadding)は、10pxだったので、前作に合わせてしばらくpxで様子をみようと思います。
当サイトには既に適用されています。


   
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

一応参考情報を。

マテリアルデザインでは、モバイルでの左右余白は 16px を推奨しています。

ただ、私は画像は画面幅いっぱいに表示させたいので、画像にはネガティブマージンを使っています。


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

マテリアルデザインでは、モバイルでの左右余白は 16px を推奨しています。

そんなに!マテリアルデザインは、結構とるんですね。
とりあえずは、Simplicityと同じの10pxでいって.その間様々なサイトを見て回ったり、いろいろなご意見を聞かせていただいて、最適なものを見つけ出したいと思います。

ネガティブマージンは、初心者さんが混乱するので、今テーマではあえて使わないようにと考えています。Simplicityでは、H2見出しに使ってしまって「初心者用の配布テーマとしてこれはまずかったなぁ」と思ったもので。


   
(@usjoin)
New Member Registered
結合: 7年前
投稿: 2
Topic starter  

わいひらさん

こんばんは。

今みるとしっかりマージンが取れていました。

もしかしたら気のせいだったかもしれません。

お手数をおかけして申し訳ございません。

開発応援しております。

今後ともよろしくお願い致します。

 


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

もし最新版を利用されているのであれば、マージン(CSS的にはpadding)を広めにスタイリングし直したので、それが適用されて表示されているのかもしれません。


   
usjoin reacted
共有:

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

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

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

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

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

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

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

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