前略、黒むぎさん

投稿者:: @黒むぎ

自分のiPhoneでブログのホームを確認した時にヘッダーロゴが表示されず、ブログタイトルが枠で囲まれている状態のものが表示されます。

またフッターはただの四角だけが表示されています。

この件につきまては、私のiphoneで拝見する限りでは、ちゃんとロゴが表示されているようです。

私のiPhoneからは、ロゴが表示されている状態です。これが正しい状態かは、私では判断できませんが…。

表示されない状態のスクリーンショットのアップしていただけますか。

また、ロゴが表示されないブラウザは何のブラウザでしょうか。

黒むぎさん

投稿者:: @黒むぎ

ちなみにホームではヘッダー画像も表示されません。

この件に関しましては、Cocoon設定の「ヘッダー」タブの設定で「高さ（モバイル）」に数値を入れると出てくるかと思われますが、画面幅によっては、ワンちゃんと猫ちゃんの画像の一部が隠れてしまいます。

最近、別の方のトピックで回答するうちに、良い方法を見つけたので、それを以下に書いてみます。

たぶん、うまくいくだろう、程度になってしまいますが、試してみてください。

黒むぎさん

先ず、Cocoon設定の「ヘッダー」タブの設定で、高さの数値を２箇所とも消して、「変更をまとめて保存」のボタンをクリックします。

そのあと、以下のCSSのコードを、追加CSS、もしくは、子テーマのCSSファイルにコピペします。（どちらでも良いですが、追加CSSの方がわかりやすいかもしれません。）

#header-in {
   height: calc(100vw * 0.186);
}

追加CSSは、ダッシュボードの「外観」→「カスタマイズ」→「追加CSS」で開けます。

追加CSSにコピペした場合は、すぐ上にある「公開」ボタンで、変更を確定します。

黒むぎさん

上の作業をすると、スマホでも、以下のように表示されるかと思います。

黒むぎさん

画面幅を変えても、ヘッダーの背景画像のアスペクト比は変わりません。

黒むぎさん

iphoneでロゴが表示されないときは、ブラウザのキャッシュを削除してみてください。

たぶん、以前表示したときのキャッシュが残っているのだろうと推測します。

Safariのキャッシュを削除してiPhoneを身軽にしよう

黒むぎさん

ヘッダーの背景画像の左端に、白っぽい部分があるみたいです。

これに関しましては、ご自身で画像を再編集して修正いただくしかありません。

CSSのコードの計算方法は、以下のとおりです。

背景画像の高さ÷(背景画像の幅+ブラウザの右端のスクロールバーの幅)=背景画像の幅に対する高さの比率

いまお使いの画像ですと、

180px÷(947px+17px)＝0.1867219917

となるので、CSSのコードで、以下のように指定します。

#header-in {
   height: calc(100vw * 0.186);
}

背景画像を差し替えたときは、高さと幅で、再計算してください。

@saruko さん

被ってしまい、すみません。

黒むぎ さん

背景画像を新しいものに差し替えられたのですね。

今度の背景画像のサイズは、幅1280px、高さ274px  のようですので、背景画像全体を表示するには、

274px÷(1280px+17px)＝0.2125674633

となりますので、CSSのコードは、

#header-in {
    height: calc(100vw * 0.211);
}

となります。

そうしますと、猫ちゃんの口元まで、表示されるかと思います。

計算式の数字を間違えていました。

274px÷(1280px+17px)＝0.21125674633

なので、「0.211」にしました。