サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2021年5月27日 08:54
お世話になります。
作成したHPをスマホで見た際、左側に余白ができた状態で表示されます。
少し拡大された状態で表示されているようです。
https://strings-architecture.com/
こちら拡大された状態で表示されないようにするには
どうしたら良いでしょうか。
お手数をおかけいたしますが、教えていただけると幸いです。
よろしくお願いいたします。
2021年5月27日 09:56
前略、匿名さん
アピールエリアは、画像をhtmlの「背景画像」として表示します。
htmlでは、背景画像は画像自体では「高さ」を持っていません。
そのため、画像のアスペクト比を保って表示するには、以下のようなCSSでの表示指定が必要になってきます。
#appeal { height: 50vw; }
本件の場合は、グローバルメニューの影響もあるので、どのように画像を表示させるかは、デザイン次第です。
なお、「左側の余白」というのは、キャプチャ画像を添付していただくなどしませんと、どこのことなのかわかりかねます。
少なくとも私のスマホでは、左側に余白のようなものは見られません。
この投稿は4年前 2回ずつリフィトリーに変更されました
わいひら reacted
トピックスターター 2021年5月27日 19:14
お返事ありがとうございます。説明不足で申し訳ございません。トップ画面では余白はできないのですが、「ABOUT」「WORKS」画面では左に余白がある状態で表示されてしまいます…
2021年5月27日 19:46
匿名さん
トップ画面では余白はできないのですが、「ABOUT」「WORKS」画面では左に余白がある状態で表示されてしまいます…
「ABOUT」「WORKS」のページを拝見しますと、コンテンツ幅が、1256px となっていて、コンテンツ部分が左右中央に、それ以外が背景となっています。
コンテンツ幅を定めておかないと、文章やコンテンツを入れた場合に画面幅いっぱいに広がってしまい、文章などは、読みづらくなってしまいます。
そのため、多くのWebサイトは、Hを横にしたような上と下が画面幅いっぱいで、中央のコンテンツ部分が決められた幅に設定されている場合が多いかと思います。
簡単に言えば、横 H 型のような構造です。
アピールエリアは、その上の部分に属しますので、画面の横幅いっぱいに広がります。
コンテンツ部分の背景に色をつけてみると理解しやすいです。
この投稿は4年前 4回ずつリフィトリーに変更されました
わいひら reacted
2021年5月27日 20:35
匿名さん
子テーマのstyle.cssにお書きになった、以下のコードを削除すると、どうなりますでしょうか?
/* 記事を真ん中に */ #main{ float: center; margin-right: 5%; padding-right: 5%; margin-left: 5%; padding-left: 5%; }
わいひら reacted
2021年5月27日 21:03
匿名さん
CSSやhtmlを編集する際は、文字コードをUTF-8(BOMなし)でプレーンテキストを扱うことができるテキストエディタをお使いになることをオススメします。
私のお気に入りのエディタは、Meryというエディタです。
Macでしたら、CotEditor あたりがよろしいのではないかと思います。
CotEditor
文字コードをUTF-8 BOMなし(UTF-8N)でファイル保存をする方法
https://www.1-firststep.com/archives/2258
テキストエディター「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/
もちろん、Visual Studio Code などでも良いかもしれません。
この投稿は4年前ずつリフィトリーに変更されました
わいひら reacted
トピックスターター 2021年5月27日 21:38
とても丁寧に教えて下さり、ありがとうございます。
ひとりで悩んでいたので大変ありがたいです…
本日はゆっくり時間がとれないため、また明日改めて教えていただいたところを修正してみます。
また明日進捗をコメントいたします。引き続きよろしくお願いいたします。
リフィトリー reacted
2021年5月27日 23:14
匿名さん
以下のコードを削除して・・と書き込みましたが、削除するとPC表示にも影響が及んでしまいます。
/* 記事を真ん中に */ #main{ float: center; margin-right: 5%; padding-right: 5%; margin-left: 5%; padding-left: 5%; }
コードを削除しても、削除する前と似たようなPC表示にするには、Cocoon設定の「カラム」タブの設定で、
「コンテンツ幅」を「604」に、
「コンテンツ余白幅」を「63」にして、
「変更をまとめて保存」のボタンをクリックします。
※これは、Cocoon設定の「全体」タブでサイドバーを非表示にする設定を行っていると仮定して書いています。
要するに、PC表示のときのカラム幅が広すぎるので、少し狭めるということなのです。
すると、お望みに近い表示になるような気がします。
この投稿は4年前 2回ずつリフィトリーに変更されました
2021年5月27日 23:17
なお、上記の説明は、サイドバーを表示しない、という前提です。
どこかのページでサイドバーを表示する場合は、メインカラムが狭くなりすぎてしまい、上手くいかないかもしれません。
トピックスターター 2021年5月28日 15:26
サイドバーの表示はないため、教えていただいたとおり、/*記事を真ん中に*/のコードを削除し、カラムタブで「コンテンツ幅」「コンテンツ余白」を調整したところ、
PCでの表示は変わらないまま、スマホ表示を理想のものに変更することができました。
またCSSでのBOMに関してですが、教えていただいたCotEditorを今後導入しようと思います。
(私の現在のPCのバージョンでは入れることができず…アップデートしてから再挑戦します)
大変助かりました…本当にありがとうございます。
またあと1点、HPのタイトルや「ABOUT」「WORKS」「CONTACT」のフォントがどうしても変えられないのですが、こちらは別のトピックとして質問させていただいた方がよろしいでしょうか。
何度もお手数をおかけして申し訳ございませんが、ご確認よろしくお願いいたします。
リフィトリー reacted
2021年5月28日 16:41
匿名さん
リフィトリーさんは、今日はまだお見えになっていらっしゃらない様子ですので…。
お手数ではございますが、別トピックを立てていただくのがよろしいかと思います。
(ご質問内容とタイトルは一致していた方が、後から調べる方達にとってもよろしいかと。)
本トピックは長くなりましたし、「解決済み」にしていたたければと。
私もこれから席を外しますので、調べたりはできませんが。。。
別トピックを立てていただく際には、リフィトリーさんがなさっていたように、画像添付などでご説明いただくのが良いと思います。
おそらく匿名さんが仰っている箇所は、PC・モバイルどちらにもありますが、どちらのことなのか両方なのか等もハッキリさせておく方が、良いかと思います。
また、どのようなことお試しになったけれどもできなかった等も、お書きになった方が良いのではないかと。
この辺りは、ページ上部のフォーラムのガイドラインをご一読ください。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。