Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

ヘッダーに画像が反映されない
 
共有:
通知
すべてクリア

[解決済] ヘッダーに画像が反映されない

8 投稿
2 ユーザー
6 Reactions
3,046 表示
(@うおさと)
New Member
結合: 4年前
投稿: 2
Topic starter  

お世話になっております。

表題の件でご連絡致しました。

 

Cocoon設定>ヘッダー>ヘッダー背景画像 より画像をアップロードしたのですが、

画像が反映されない状況です。

 

色々調べた結果、プラグインとの兼ね合いで表示されない場合があるとの記載があり、

一度全てのプラグインを外してみましたが、状況が変わらなかったためご連絡致しました。

 

ヘッダー設定・サイトURL・環境情報の情報をお送り致しますので、

ご確認いただけますと幸いです。

 

◆サイトURL

https://uosatoblog.com/

 

◆環境情報

----------------------------------------------
サイト名:うおさとブログ
サイトURL: https://uosatoblog.com
ホームURL: https://uosatoblog.com
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
スキン:/wp-content/themes/cocoon-master/skins/skin-innocence/style.css
WordPressバージョン:5.7
PHPバージョン:7.4.13
ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:2.2.8.5
カテゴリ数:1
タグ数:0
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.2
style.cssサイズ:845バイト
functions.phpサイズ:203バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
----------------------------------------------

 


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

前略、うおさとさん

Webサイトを作ったことがある方ですと、すぐに気づく事なのですが、「背景画像」に設定した画像は、画像だけでは、「高さ」を持っていません。

 

ですので、「高さ」を指定しなくては、画面上の高さが確保されません。

 

Cocoon設定の「ヘッダー」タブの設定では、PC用とモバイル用のそれぞれの高さを指定することができるようになっています。

 

うおさとさんのサイトのヘッダーの高さをブラウザのデベロッパーツールで、500pxにしてみたところ、画像が設定されているのが、わかります。

 

This post was modified 4年前 2回 by リフィトリー

   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

うおさとさん

現在、背景画像に設定されている画像は、縦方向が長く、画像の上の方に何も映っていないので、上の方だけですと、余白に見えてしまいます。

 

ですので、現在背景画像に設定している画像も、背景画像に適していません。

 

この画像を背景画像にお使いになりたい、ということでしたら、上の方グレーの部分を大幅にトリミングする必要があるようです。

 

また、Cocoonでは、サイトのロゴの方も、テキストではなく、画像にすることもできるようになっています。

 

ロゴを画像にする場合は、「ヘッダーロゴ」のところで、任意の画像を設定します。

 

ロゴ画像を設定される場合は、画像の背景を透明にして作成してください。

 

ロゴ画像を設定される場合は、透明をサポートしているpng形式かgif形式のものを使用してください。

 

 

ロゴを画像にしない場合は、テキストで表示されるので設定は不要です。

This post was modified 4年前 3回 by リフィトリー

   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

うおさとさん

ヘッダーの「背景画像」は横長のものを用意してください。

 

横幅は、1920px 程度あった方が良いかもしれません。

 

パソコンの画面の横幅が1920pxのものが多いようですので、それ以下ですと拡大表示になるため、ぼやけてきます。

 

フォーラムのメンバーの Ikumi さんの記事が参考になるかと思います。

 

[Cocoon] ヘッダー画像サイズと選ぶポイント

https://blogstudynotes.com/header/

 


   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

うおさとさん

Cocoonは、設定項目がとても多く、何年も使っていても、あれ?こんな機能もあったんだ、というようなことも多々あります。

 

ですので、フォーラムにお問い合わせの際は、明らかに「不具合」というもの以外は、「不具合報告」のジャンルではなく、「テーマの質問」にお寄せいただいた方が良いのかもしれません。

This post was modified 4年前 by リフィトリー

   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

うおさとさん

Webサイトに画像を掲載する場合は、

 

・画像

・背景画像

 

の2種類の設定が可能です。

 

これは、Cocoonに限らず、Webサイトであれば共通かと思います。

 

「画像」の方は、画像だけでも高さを持っているのに対して、「背景画像」の方は、画像だけでは高さをもっていない、ということです。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

うおさとさん

ちなみに、このCocoonのサイトの画像を調べてみると、

 

背景画像は

1024×309px

 

ロゴ画像は

200×88px

が使われているようです。

 

案外小さいですね。

 

画像は実際に表示されるサイズより小さいと、拡大表示されるため、ぼやけてきます。

 

横幅1024pxでは、ちょっと小さいような気がします。

 

大きなサイズの画像は、ファイルサイズも大きくなってしまいがちですので、以下のようなサービスを使って、ファイルサイズをなるべく小さくした方が良いのかもしれません。

 

https://tinypng.com/

This post was modified 4年前 2回 by リフィトリー

   
わいひら reacted
(@うおさと)
New Member
結合: 4年前
投稿: 2
Topic starter  

リフィトリーさん

 

ご回答いただきありがとうございました。

お気づきの通り、Webサイトの作成やフォーラムへの投稿が初めてのため、

お手数おかけしてしまい申し訳ありません。

 

 ・背景画像に対して「高さ」を設定しなければ反映されない

 ・問い合わせは「テーマの質問」へ投稿する

 

上記につきまして理解致しました。

 

また、横幅についてやファイルサイズの圧縮方法について

ご教授いただきありがとうございました。

今後の作業の参考にさせていただきます。

 

本投稿は解決済みと致します。

ご対応いただきありがとうございました。

引き続きどうぞよろしくお願いいたします。


   
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました