サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2020-08-23 10:28
最近ブログをはじめてCocoonを使わさせていただいてます。
自分のiPhoneでブログのホームを確認した時にヘッダーロゴが表示されず、ブログタイトルが枠で囲まれている状態のものが表示されます。
またフッターはただの四角だけが表示されています。
パソコンではちゃんと表示されています。
↑ブログのURLです。
ちなみにホームではヘッダー画像も表示されません。
よろしくお願いいたします。
2020-08-23 12:29
前略、黒むぎさん
自分のiPhoneでブログのホームを確認した時にヘッダーロゴが表示されず、ブログタイトルが枠で囲まれている状態のものが表示されます。
またフッターはただの四角だけが表示されています。
この件につきまては、私のiphoneで拝見する限りでは、ちゃんとロゴが表示されているようです。
わいひら reacted
2020-08-23 12:43
黒むぎさん
ちなみにホームではヘッダー画像も表示されません。
この件に関しましては、Cocoon設定の「ヘッダー」タブの設定で「高さ（モバイル）」に数値を入れると出てくるかと思われますが、画面幅によっては、ワンちゃんと猫ちゃんの画像の一部が隠れてしまいます。
最近、別の方のトピックで回答するうちに、良い方法を見つけたので、それを以下に書いてみます。
たぶん、うまくいくだろう、程度になってしまいますが、試してみてください。
2020-08-23 12:49
黒むぎさん
先ず、Cocoon設定の「ヘッダー」タブの設定で、高さの数値を２箇所とも消して、「変更をまとめて保存」のボタンをクリックします。
そのあと、以下のCSSのコードを、追加CSS、もしくは、子テーマのCSSファイルにコピペします。（どちらでも良いですが、追加CSSの方がわかりやすいかもしれません。）
#header-in {
height: calc(100vw * 0.186);
}
追加CSSは、ダッシュボードの「外観」→「カスタマイズ」→「追加CSS」で開けます。
追加CSSにコピペした場合は、すぐ上にある「公開」ボタンで、変更を確定します。
This post was modified 4年前 by リフィトリー
わいひら reacted
2020-08-23 12:51
黒むぎさん
上の作業をすると、スマホでも、以下のように表示されるかと思います。
2020-08-23 13:02
黒むぎさん
iphoneでロゴが表示されないときは、ブラウザのキャッシュを削除してみてください。
たぶん、以前表示したときのキャッシュが残っているのだろうと推測します。
This post was modified 4年前 by リフィトリー
2020-08-23 13:14
黒むぎさん
ヘッダーの背景画像の左端に、白っぽい部分があるみたいです。
これに関しましては、ご自身で画像を再編集して修正いただくしかありません。
CSSのコードの計算方法は、以下のとおりです。
背景画像の高さ÷(背景画像の幅+ブラウザの右端のスクロールバーの幅)=背景画像の幅に対する高さの比率
いまお使いの画像ですと、
180px÷(947px+17px)＝0.1867219917
となるので、CSSのコードで、以下のように指定します。
#header-in {
height: calc(100vw * 0.186);
}
背景画像を差し替えたときは、高さと幅で、再計算してください。
2020-08-24 14:32
計算式の数字を間違えていました。
274px÷(1280px+17px)＝0.21125674633
なので、「0.211」にしました。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。