サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2018-10-06 17:58
お世話になっております。
コクーンを新ブログに導入し、ヘッダーの設定を行っているのですが、パソコンでの表示は問題ないものの、スマホで表示するとヘッダー背景画像の左右が切れてしまう問題が発生しています。（添付画像参照）
ブログURL： https://butubutukoukan.com/
ネットで調べて下記のコードで対応したところ、今度はヘッダーロゴが潰れたように表示されしまいました。（現在の状態）
/* ヘッダーサイズスマホ用調整 */
@media screen and (max-width: 480px){
.logo img {
height: 40px !important; /* スマホ時のロゴの画像タテサイズ */
margin: .5em auto;
}
}
どうすれば、ヘッダー背景画像の左右が切らず、ヘッダーロゴも潰れない表示が可能でしょうか？
ちなみに、ヘッダーロゴ画像は背景を透明化した「1000ｘ300」サイズのものを、[コクーン設定＞ヘッダー]から「幅：900」「高さ：270」で使用しております。
ヘッダー背景画像は「1000ｘ250」サイズを使用しております。
こちらのサイトを参考にして設定を進めました。
https://3light-style.com/cocoon-header/
2018-10-06 21:34
まず、追加されている下記の CSS を削除します。
@media screen and (max-width: 480px) {
.logo img {
height: 40px !important; /* スマホ時のロゴの画像タテサイズ */
margin: .5em auto;
}
}
次に、下記の CSS を子テーマの style.css に追加します。
@media screen and (max-width: 1023px) {
.header {
background-size: contain;
}
}
これで、ヘッダー背景画像の左右が切れず、ヘッダーロゴも潰れない表示が可能です。
あとは、細かな部分のデザインをどうされるかに応じて CSS を追加します。
わいひら reacted
Topic starter
2018-10-06 22:08
AKIRAさんご回答有り難うございます！
教えていただいたコードを追加したところ、たしかにヘッダーの端が切れず、ロゴも潰れていませんでした！
ただ、ロゴのサイズをどれだけ変更してもサイズが変わらなくなってしまいました。
これも追加のコードなどで解決できるのでしょうか？
2018-10-06 23:48
先程のコメント時に、こんな CSS を試していました。
@media screen and (max-width: 480px) {
.logo-header img {
max-width: 320px;
}
}
max-width や width を使って、ロゴのサイズを変更できます。
ただ、サイトを拝見したところ画像が変わったので、CSS は不要かな。
わいひら reacted
Topic starter
2018-10-08 18:03
であれば、ロゴ画像だけを登録するのが間違いなさそうですね。。。
ありがとうございます！
Topic starter
2018-10-08 18:04
ご返信ありがとうございます！
現在はロゴ画像のみで運用していますが、教えていただいたコードも試してみますね！
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。