「メイド・イン・ヘブン」スキン適用中

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カスタマイズ依頼

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

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

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

23 投稿
7 ユーザー
13 Likes
12.3 K 表示
 mami
(@mami)
Active Member
結合: 4年前
投稿: 11
Topic starter  

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

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

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

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

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

 

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

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


   
引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16312
 

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

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


   
返信引用
 mami
(@mami)
Active Member
結合: 4年前
投稿: 11
Topic starter  

ありがとうございます。

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

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

 

URLはこちらです。

http://study-money.blog/

 

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

 

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16312
 

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


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 5年前
投稿: 6845
 

前略、@mami さん

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

 

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

 

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

 

 


   
わいひら reacted
返信引用
(@バツイチバフェット)
New Member
結合: 3年前
投稿: 1
 

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

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

 

よろしくお願いします。


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 5年前
投稿: 6845
 

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

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

 

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

 

高速化設定を無効

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

環境情報

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

 

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

   
わいひら reacted
返信引用
 mami
(@mami)
Active Member
結合: 4年前
投稿: 11
Topic starter  

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

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

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

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

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

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

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

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

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


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
 

maniさん

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

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

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

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

mami さん

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

 

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

 

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

 

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

 

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

 

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

   
わいひら reacted
返信引用
 mami
(@mami)
Active Member
結合: 4年前
投稿: 11
Topic starter  

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

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

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

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

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

 

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

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

 

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


   
返信引用
 mami
(@mami)
Active Member
結合: 4年前
投稿: 11
Topic starter  

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


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

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;
}

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

mami さん

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

 

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

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

   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 5年前
投稿: 6845
 

mami さん

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


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 5年前
投稿: 6845
 

mami さん

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

 

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

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

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

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

 

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

 

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

 

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

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

   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
 

mamiさん

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

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

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

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


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 5年前
投稿: 6845
 

mamiさん

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


   
返信引用
(@changbeer)
Reputable Member Moderator
結合: 6年前
投稿: 252
 

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

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

------

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

投稿者:: @leafytree

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

に該当します。

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

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

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

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

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

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

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

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

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


   
わいひら reacted
返信引用
(@takkenpenmaru)
New Member Registered
結合: 2年前
投稿: 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)
Noble Member Moderator
結合: 4年前
投稿: 1062
 

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

.logo-header{
  display: none;
}

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

前略、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/

 

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

 

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

 

 


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

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/


   
わいひら reacted
返信引用
共有:

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

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

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

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

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

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

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

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