サイト内検索
Cocoonフォーラム
![](https://wp-cocoon.com/wp-content/themes/cocoon-master/screenshot.jpg)
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
2021年4月10日 20:54
前略、atsushi.c さん
質問1については、WordPressのツールバーを非表示にすれば良いのではないかと思います。
WordPressの管理バー(ツールバー)を非表示にする方法
2021年4月10日 21:01
atsushi.c さん
質問1の内容を誤解していました。
正しい回答を次に記します。
2021年4月10日 21:23
atsushi.c さん
今回の画像では、
350 ÷ (1260 + 17)× 100=27.4
という計算です。
ただ、画像の中央の文字である「未来予想図」も画像の縮小率と同時に小さくなってしまうので、スマホでは判読しづらくなってしまいます。
※CSSのコードは、追加CSSか子テーマのstyle.cssに記述します。
This post was modified 3年前 3回 by リフィトリー
2021年4月10日 21:48
atsushi.c さん
スマホでは「未来予想図」の文字が小さくて読めなーい、という場合は、スマホ用の文字を大きくした背景画像をもう一つ用意して、メディアクエリで差し替えてしまうというのも有りかもしれません。
その場合は、PC用の背景画像とアスペクト比を揃えておくと良いかもしれません。
@media screen and (max-width:480px) { .appeal { background-image: url( https://スマホ用の背景画像.jpg ); } }
This post was modified 3年前 3回 by リフィトリー
わいひら reacted
2021年4月10日 22:03
atsushi.c さん
ヘッダーとアピールエリアはそのままで、左右の余白を狭めたいのですが、
どうすればいいですか?
どうも、私は、質問2についても誤解しているのかもしれません。
この「左右の余白を狭めたい」という表現が今一つよくわかりません。
もっとブラウザの左右のフチギリギリまで、コンテンツを表示させたい、とうことでしょうか?
私は、個人的には、メインカラムやサイドバーの幅は一定以上に広がらない方が良いと考えています。
メインカラムの幅が広すぎると、文字を目で追う左右の距離が長くなってしまい、文章が読みづらくなってしまいます。
ですので、Cocoonのデフォルトのコンテンツ幅以内にしておいた方が無難かと思います。
This post was modified 3年前 2回 by リフィトリー
わいひら reacted
2021年4月10日 22:15
atsushi.c さん
やはり、言葉だけですと、誤解が生じやすいので、キャプチャ画像に、ここを狭くしたい、など、具体的な場所を示して赤字で書きこんでいただくと伝わりやすくなるかと思います。
Topic starter
2021年4月11日 18:18
@leafytree 返信ありがとうございます。
やりたかったのは、こんな感じです。ヘッダーとアピールエリアのみを左右いっぱいにする。
また、デフォルトにするとアピールエリア画像の幅でbodyの幅が決まるのでしょうか?
2021年4月11日 19:33
また、デフォルトにするとアピールエリア画像の幅でbodyの幅が決まるのでしょうか?
@atsushi-c さん、今回の場合は、Cocoon設定の「カラム」タブの設定で、「コンテンツ幅」を広げすぎていることが一番の原因です。
騙されたと思って、一旦、Cocoon設定の「カラム」タブに設定した数値を全部消してみてください。(消すと自動的にデフォルトの数値に戻ります)
Cocoon設定の「カラム幅変更」で変わる場所の説明。
This post was modified 3年前 by リフィトリー
2021年4月11日 20:01
@atsushi-c さん
もうひとつ。
Cocoon設定の「全体」タブの設定で、「サイト幅の均一化」のところの「サイト幅を揃える」のチェックを外して「変更をまとめて保存」のボタンで確定してください。
Topic starter
2021年4月12日 11:51
@leafytree 返信ありがとうございました。騙されたと思ってやったら(笑)表示の方はうまく行きました。
後、スマホ用に横幅480PXを作ってコードを入れてみたのですが、反映しません。
画像の保管場所はライブラリです。cssのコードが間違えているのでしょうか?
よろしくお願いします。
2021年4月12日 20:54
@atsushi-cさん
それと、スマホ用の背景画像のサイズを 480×181px で作成されたようですが、PC用とはアスペクト比が異なっていまっているようです。
スマホ用としては、高さがありすぎるような気もするので、PC用の背景画像と同じアスペクト比の 480 × 132px で作られた方が良いかもしれません。
480×181pxでは、スマホ用のCSSを用意しないと、画像全体が表示されません。
This post was modified 3年前 by リフィトリー
2021年4月13日 21:06
@atsushi-cさん
もし、モバイル用にお作りになられた、480×181px の拝見画像をお使いになるのでしたら、以下のようなコードが要るような気がします。
#appeal { height: 27.4vw; } @media screen and (max-width:480px) { #appeal { height: 37.7vw; } .appeal { background-image: url( https://adm-j.co.jp/wp-content/uploads/2021/04/top_moble.jpg ); } }
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。