現在デフォルトスキンとして「Season (Autumn)」を適用中。

スマートフォンの左右マージンに関して | カスタマイズ相談 | Cocoon フォーラム

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

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

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

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

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

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

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
スマートフォンの左右マージンに関して
 
Share:

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


usjoin
(@usjoin)
New Member
参加: 2年 前
投稿: 2
2018年3月20日 01:50  

わいひらさん

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

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

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

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

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

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


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6440
わいひら - Facebookわいひら - Twitter
2018年3月20日 02:04  

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

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


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3387
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2018年3月20日 02:25  

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

スレ主さんと同じだと思われますが、例えば以下ページもスマホ同様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)
メンバーサイト Admin
参加: 2年 前
投稿: 6440
わいひら - Facebookわいひら - Twitter
2018年3月20日 02:40  

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

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

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


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6440
わいひら - Facebookわいひら - Twitter
2018年3月20日 02:40  

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

思われますか?

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

 


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3387
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2018年3月20日 03:26  

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

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

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

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


moritomo
 moritomo
(@moritomo)
ゲスト
参加: 2年 前
投稿: 1
2018年3月20日 08:35  

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

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


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6440
わいひら - Facebookわいひら - Twitter
2018年3月20日 11:17  

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


Akira
(@akira)
Reputable Memberサイト
参加: 2年 前
投稿: 360
Akira - FacebookAkira - TwitterAkira - Google+
2018年3月20日 12:42  

一応参考情報を。

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

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


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6440
わいひら - Facebookわいひら - Twitter
2018年3月20日 14:42  

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

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

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


usjoin
(@usjoin)
New Member
参加: 2年 前
投稿: 2
2018年3月22日 00:38  

わいひらさん

こんばんは。

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

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

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

開発応援しております。

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

 


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6440
わいひら - Facebookわいひら - Twitter
2018年3月22日 17:26  

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


usjoin 件のいいね!
Share:
スポンサーリンク
わいひらをフォローする
おすすめサーバ

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)
サービス運営期間:1年1ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2019/12/31まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
○サーバ引っ越しオプションあり(有料)
○サーバー料金をチャージ払いが可能
サービス運営期間:3年

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可
サービス運営期間:16年

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:11ヶ月

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)
サービス運営期間:3年

Cocoon
  
動作中

ログイン または 登録 してください

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