特典機能について

ヘッダー画像が表示されない | Cocoonテーマに関する質問 | Cocoon フォーラム

サイト内検索
運営者(わいひら)は、骨の手術明けのためしばらく体調を優先して運営させていただきます。ですので、フォーラム負担軽減のため登録者のみ書き込めるようを制限をさせていただきます。フォーラム未登録の方はこちらの手順で登録を行ってください。予定としては12月前半まで実施させていただきます。
書き込みの前に以下の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. ブラウザ環境チェックツール

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

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

wpForoの解決済みリンク

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

wpForoのいいねリンク

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

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

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

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

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

スポンサーリンク
共有:
通知
すべてクリア

ヘッダー画像が表示されない


mami
 mami
(@mami)
ゲスト
結合: 2年前
投稿: 11
Topic starter  

こんばんは。お世話になっております。

ヘッダー画像をつけたいのですが、マニュアルの通りに

「ヘッダー設定」→「ヘッダーの背景画像」をアップロードしたのですが、反映されませんでした。

それでもしかしてスキンが原因かな?と思い、わいひらさんのスキンに変更したのですが、それでも反映してくれませんでした。

これは不具合でしょうか?

 

ちなみにヘッダー画像のサイズは1500✖️500です。

よろしくお願いいたします。


引用解決済
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12932
わいひら - Facebookわいひら - Twitter
 

お手数ですがフォーラムの案内にありますように、該当ページのURLを提示していただいてよろしいでしょうか。

不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください


返信引用
mami
 mami
(@mami)
ゲスト
結合: 2年前
投稿: 11
Topic starter  

ありがとうございます。

そしてお返事が遅くなり申し訳ございません。

お返事が来ていること自体分からず失礼いたしました。

 

URLはこちらです。

http://study-money.blog/

 

ほかのテーマでも試したのですが、ヘッダー画像は出てきませんでした。

 

よろしくお願いいたします。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12932
わいひら - Facebookわいひら - Twitter
 

ヘッダーの設定はどのようになっていますか?
スクリーンショットいただければと思います。


返信引用
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6436
 

前略、@mami さん

Cocoon設定の「ヘッダー」タブの設定の「ヘッダーレイアウト」が、おそらく、「トップメニュー」になっているのではないかと思います。

 

とりあず、「センターロゴ(デフォルト)」にして、「変更をまとめて保存」のボタンをクリックして変更を確定してみてください。

 

細かい見た目の調整は、ヘッダー背景画像が、とりあず、表示されてから、再度行えば良いのではないかと推測します。

 

 


わいひら 件のいいね!
返信引用
バツイチバフェット
 バツイチバフェット
(@バツイチバフェット)
ゲスト
結合: 9か月前
投稿: 1
 

ヘッターの設定を行っている際にエラーがでて、テーマの編集でヘッターがすべて消えてしまいました。

ヘッターの部分を復活するにはどうしたらよいですか?

 

よろしくお願いします。


返信引用
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6436
 

前略、バツイチバフェットさん

このトピックの内容とは少し異なるようですので、お手数ですが別に新しいトピックを立ててくださいますようお願いいたします。

 

なお、お差し支えがなければ、フォーラム冒頭の案内にありますとおり、対象ページのURLをご提示いただき、高速化設定を無効にして、環境情報を貼り付けていただければと思います。

 

高速化設定を無効

https://wp-cocoon.com/theme-trouble/

環境情報

https://wp-cocoon.com/theme-report/

 

This post was modified 9か月前 by リフィトリー

わいひら 件のいいね!
返信引用
mami
 mami
(@mami)
ゲスト
結合: 2年前
投稿: 11
Topic starter  

以前この件でここでトピックを立てて質問させていただいたmamiです。

その節は色々とありがとうございました。

あれからだいぶ時間がたってしまいましたが再度チャレンジして、

リフィトリーさんが仰ってくださった通りにしたら画像がちゃんと表示されました。

ありがとうございました!

しかし、次の問題が起こりました。

ヘッダーが表示されたのはいいのですが、添付画像の通りヘッダーとメニューの間の空白が消えません。

これはどうしたらいいのでしょうか・・・?

すみませんがよろしくお願いいたします。


返信引用
mk2
(@mk2_mk2)
メンバー Moderator
結合: 9か月前
投稿: 2318
 

maniさん

ヘッダーの設定で、添付画像の赤枠の部分に800と入っていないでしょうか。

もしそうであれば、数字を消して「変更をまとめて保存」してみてください。

 
すみません訂正です。
画像の高さにあわせてみてください。

わいひら 件のいいね!
返信引用
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6436
 

mami さん

PC表示のときの「高さ」は、350~400pxぐらいにすれば、ある程度は背景画像が見えて、体裁も、まあまあには、なるのですが、Cocoonのヘッダー背景画像はブラウザの画面の幅によって、表示される部分と隠れる部分が変化します。

 

上の方の中央部分は、常に表示されますが、画面の幅によっては、背景画像の下の方は、隠れて見えなくなってしまいます。

 

これは、Cocoonの背景画像の仕様なので、背景画像には、文字を入れずに、下の方が隠れても差し支えないデザインのものをお使いになるとよいかと思います。

 

試しに、高さを「400」ぐらいに設定して、ブラウザの幅を縮めたり伸ばしたりしてみて、背景画像がどのように表示されるかを理解して背景画像のデザインを練ると良いかもしれません。

 

ロゴの白い文字は、ちょっと今の背景画像では、判読しにくいので、その辺りも工夫する必要がありそうです。

 

This post was modified 7か月前 by リフィトリー

わいひら 件のいいね!
返信引用
mami
 mami
(@mami)
ゲスト
結合: 2年前
投稿: 11
Topic starter  

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

mk2さんが教えてくださったやり方でできました。

しかし次はスマホのほうでまた空白ができてしまいました。

これはヘッダー画像のサイズを0にしたり300にしたり400にしたりと色々とサイズを変えてみたのですが同じでした。

また、キャッシュを消したりPCを再起動したりしても同じでした。

 

①スマホのほうでヘッダーの下の空白を消すにはどうしたらいいのでしょうか?

②例えばPCではヘッダー表示、スマホではヘッダー表示なしでタイトルのみ表示という方法は可能でしょうか?

 

以上、お忙しいところ恐れ入りますがよろしくお願いいたします。


返信引用
mami
 mami
(@mami)
ゲスト
結合: 2年前
投稿: 11
Topic starter  

追加です。写真複数送れないみたいだったので、こちらからもう1枚送ります。


わいひら 件のいいね!
返信引用
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6436
 

mami さん

子テーマにお書きになった以下のコードは削除して、

.header {
   background-size: contain;
}

以下のように記述すると、背景画像のアスペクト比を保って、サイトタイトルのテキストも表示できるかもしれません。

#header {
    height: 32.9vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.header .site-name-text {/*サイトタイトルの文字にに白フチを付ける*/
    text-shadow: white 2px 0px 0px, white -2px 0px 0px, white 0px -2px 0px, white 0px 2px 0px, white 2px 2px 0px, white -2px 2px 0px, white 2px -2px 0px, white -2px -2px 0px, white 1px 2px 0px, white -1px 2px 0px, white 1px -2px 0px, white -1px -2px 0px, white 2px 1px 0px, white -2px 1px 0px, white 2px -1px 0px, white -2px -1px 0px, white 1px 1px 0px, white -1px 1px 0px, white 1px -1px 0px, white -1px -1px 0px;
}

わいひら 件のいいね!
返信引用
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6436
 

mami さん

ただ、前述しましたとおり、ヘッダー背景画像に「お金について知るWEBSITE」などの文字があると、表示される画面の幅によっては、サイトタイトルの文字と重なってしまったりして、デザインの整合性がとれません。

 

ですので、ヘッダー背景画像には、読ませるための文字は含めないデザインにした方が無難です。

This post was modified 7か月前 2回 by リフィトリー

返信引用
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6436
 

mami さん

Cocoonのヘッダー背景画像や、ロゴのテキスト表示なども含めて、もう少しデザインを練る必要があるように思います。


返信引用
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6436
 

mami さん

Cocoonのヘッダー部分は、以下のパターンが利用できるかと思います。

 

1.ヘッダー背景画像とサイトタイトルのテキスト表示の組み合わせ

2.ヘッダー背景画像とロゴ画像の2枚の画像の組み合わせ

3.ヘッダー背景画像にサイトタイトルの文字も含めてしまい、ヘッダー背景画像だけでデザインする

4.ヘッダーロゴ画像にサイトタイトルの文字も含めてしまい、ヘッダーロゴ画像だけでデザインする

 

1と2は、Cocoon設定のヘッダータブの設定で、ある程度はデザインが整うかと思います。

 

3と4の場合は、設定した画像が画面の横幅いっぱいになり、上下の不要な隙間や空白を無くすためのCSSのコードによるカスタマイズが必要です。

 

また、1と2の場合でも、ヘッダー背景画像がアスペクト比を保って表示されるようにするには、既にご紹介させていただいたような、CSSのコードでのカスタマイズが必要になってきます。

This post was modified 7か月前 2回 by リフィトリー

わいひら 件のいいね!
返信引用
mk2
(@mk2_mk2)
メンバー Moderator
結合: 9か月前
投稿: 2318
 

mamiさん

ヘッダーについては、画像も含めて、いろいろな悩みやご苦労が、皆様にもある様子です。

フォーラムのメンバーでもいらっしゃる方々のサイトでも考察されております。
もしかすると、ご参考になるかもしれません。

チャンビアさんのサイト
https://changbeer.site/2019/03/cocoon-header-customization/

Ikumiさんのサイト
https://blogstudynotes.com/header/


わいひらリフィトリー 件のいいね!
返信引用
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6436
 

mamiさん

私も、mk2 さんのご紹介いただいた方の記事などを参考にして、ヘッダー部分のデザインを今一度、練ってみるのが良いような気がします。


返信引用
チャンビア🍺
(@changbeer)
メンバーサイト Moderator
結合: 3年前
投稿: 248
チャンビア🍺 - Twitter
 

記事をご紹介いただいていたようでしてありがとうございます。

標準設定から行える仕組み的な話は、Ikumiさんや私のブログに拾えるヒントがあろうかと思います。

------

投稿者の方のブログデザインからすると、ロゴと背景画像を分離するやり方であればどのデバイスでも綺麗になろうかと思います。従いまして、リフィトリーさんが書かれている通り、

投稿者:: @leafytree

2.ヘッダー背景画像とロゴ画像の2枚の画像の組み合わせ

に該当します。

ただ、このロゴデザイン(イラストとブログ名文字列が組み合わさったもの)だと追々ヘッダー固定をしたいとなった場合には適さないような気がします。ヘッダー固定とは、このコクーンサイトも行っているロゴを上部に固定するやり方です(現在はモバイル固定のみの模様)。

ヘッダー固定を使わない場合

  • 背景画像の準備(写真画像)
  • ロゴを準備(イラスト+ブログ名文字列)

ヘッダー固定を使う場合(かもしれない場合含む)

  • 背景画像の準備(写真画像+ブログ名文字列を除いたイラスト部分)
  • ロゴを準備(文字列のみ)

後者のほうで手元で試してみました(添付画像)。条件は次の通り。

  • ヘッダーレイアウト:センターロゴ
  • 高さ:400px
  • 高さ(モバイル):同上
  • ヘッダーロゴサイズ:幅 240px 高さ 未指定
  • キャッチフレーズ:表示しない

「ロゴの文字列を除いたイラスト部分」が丸型だとiPad横以上の幅になってくるとロゴが思うような場所に行きませんね。

これから出掛けなのですぐに妙案浮かびませんが、ここからはデザイナーさんの出番でしょうか(なんというオチ


わいひら 件のいいね!
返信引用
takkenpenmaru
(@takkenpenmaru)
New Member
結合: 3週間前
投稿: 1
 

ヘッダーのロゴ画像がスマホだと反映されるのですが、PCだと反映されません。

プラグイン停止やlazyloadのチェックを外す、などはやりました。

 

他の原因はあるのでしょうか?

----------------------------------------------
サイト名:ペン丸の宅建教室
サイトURL: https://takkenpenmaru.com
ホームURL: https://takkenpenmaru.com
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon
スタイルシートURL:/wp-content/themes/cocoon-child
親テーマスタイル:/wp-content/themes/cocoon/style.css
子テーマスタイル:/wp-content/themes/cocoon-child/style.css
スキン:/wp-content/themes/cocoon-child/skins/skin-template/style.css
WordPressバージョン:5.8.2
PHPバージョン:7.4.25
ブラウザ:Mozilla/5.0 (iPhone; CPU iPhone OS 15_0_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Mobile/15E148 Safari/604.1
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja
----------------------------------------------
テーマ名:Cocoon
バージョン:2.3.4
カテゴリ数:7
タグ数:0
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.2
style.cssサイズ:2129バイト
functions.phpサイズ:203バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/uploads/2021/11/BFEAB437-1C9B-44BB-BDBF-984F4DA2F18E.jpeg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
AddQuicktag 2.6.1
Akismet Anti-Spam 4.1.12
ConoHa WING コントロールパネルプラグイン 1.1
ConoHa WING 自動キャッシュクリア 1.0.0
Contact Form 7 5.5.2
EWWW Image Optimizer 6.3.0
Rinker 1.9.1
SiteGuard WP Plugin 1.6.0
TypeSquare Webfonts for ConoHa 2.0.2
WP Multibyte Patch 2.9
XML Sitemaps 4.1.1
---------------する-------------------------------


返信引用
はる
(@haruinoue)
メンバーサイト Moderator
結合: 1年前
投稿: 802
 

外観>カスタマイズ>追加CSSの部分にご自身で以下のように書かれているようです。

.logo-header{
  display: none;
}

わいひら 件のいいね!
返信引用
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6436
 

前略、takkenpenmaruさん

ロゴ画像とは別件ですが、ttakkenpenmaruさんの環境情報を拝見しますと、Cohoha WING からCocoonをインストールしたため、ダッシュボードの操作で親テーマをアップデートできない状態になっているようです。

 

Cocoonの親テーマのフォルダ名は「cocoon-master」で、子テーマのフォルダ名は「cocoon-child-master」ですが、Cohohaからインストールすると親テーマのファルダ名が「cocoon」子テーマが「cocoon-child」となってしまうようです。

 

この解決方法をmk2さんがまとめてくださっているので、リンクを貼ってみます。

 

「ConoHa WINGからインストールしたテーマで、アップデートできない」

https://wp-cocoon.com/community/postid/55027/

 

もう少し、わかりやすい過去のトピックがあったと思うのですが、出先なので探しきれません。

 

お時間に余裕のあるときに作業なさってください。

 

 


わいひら 件のいいね!
返信引用
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6436
 

takkenpenmaruさん

ConoHaからインストールしたCocoonのテーマをこのサイトからダウンロードしたCocoonのテーマと入れ替える際に参考になりそうな過去のトピックも貼っておきます。

 

[解決済] Cocoon設定に寄付タブが表示されない

https://wp-cocoon.com/community/postid/54748/

mk2さんがまとめてくださったトピック
https://wp-cocoon.com/community/postid/55027/

初心者向けのトピック↓
[解決済] ウィジェット機能のカテゴリ追加が正しくサイドバー内で反映されない

https://wp-cocoon.com/community/postid/55462/


わいひら 件のいいね!
返信引用
共有:
スポンサーリンク
SWELLと業務提携しています
WordPressテーマSWELL
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:3年

1年以上の契約をする場合は、クーポンコード入力でさらに50%割引キャンペーン中!
※BOX2 ~ BOX8プラン契約の場合

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:3年

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:18年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:5年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:5年

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