特典機能について

パソコン表示のヘッダー画像の上下が切れている | Cocoonテーマに関する質問 | Cocoon フォーラム

サイト内検索
運営者(わいひら)は、10月25日から骨の手術のため数週間入院します。その際、フォーラム負担軽減のため登録者のみ書き込めるようを制限をさせていただきます。フォーラム未登録の方はこちらの手順で登録を行ってください。予定としては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)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

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

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

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

スポンサーリンク
パソコン表示のヘッダー画像の上下が切れ...
 
共有:
通知
すべてクリア

[解決済] パソコン表示のヘッダー画像の上下が切れている


benoki
(@benoki)
Active Member
結合: 1か月前
投稿: 5
Topic starter  

対象のページのURL: https://benokiblog.com/

相談内容:はじめまして!ブログを初めて1カ月のベノキと申します。
     ヘッダー画像についての質問です。ヘッダー画像がパソコン表示だけ上下が切れてしまします。ヘッダー設定で「高さ」の数値を変えればその分表示されるようになります。
これはデフォルト設定で、高さの数値を小さくすればその分トリミングされてしまうのでしょうか?
モバイル表示では画像は全体が表示されています。

解決のために試したこと:ヘッダー設定で高さを調整

※文字だけでは正しく伝わらない可能性があるため、画像の添付もお願いします。

※高速化設定をしている場合は無効にしてください。
環境情報:

----------------------------------------------
サイト名:子どもニガテパパのアウトドア子育て日誌
サイトURL: https://benokiblog.com 
ホームURL: https://benokiblog.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/skins/skin-colors-green/style.css
WordPressバージョン:5.8.1
PHPバージョン:7.4.16
ブラウザ:Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja-JP,ja;q=0.9,en-US;q=0.8,en;q=0.7
----------------------------------------------
テーマ名:Cocoon
バージョン:2.3.0
カテゴリ数:21
タグ数:39
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.2
style.cssサイズ:838バイト
functions.phpサイズ:203バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:4
Auto Post Thumbnail:1
Retina:0
ホームイメージ:/wp-content/themes/cocoon/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:1
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
Akismet Anti-Spam 4.1.12
BackWPup 3.10.0
Classic Widgets 0.2
ConoHa WING コントロールパネルプラグイン 1.0
ConoHa WING 自動キャッシュクリア 1.0.0
Contact Form 7 5.4.2
EWWW Image Optimizer 6.2.5
Post Type Switcher 3.2.1
Rinker 1.9.1
SiteGuard WP Plugin 1.6.0
WP Fastest Cache 0.9.4
WP Media Category Management 1.9.7
WP Multibyte Patch 2.9
XML Sitemaps 4.1.1
----------------------------------------------

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

This topic was modified 1か月前 by benoki

リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6348
 

前略、benokiさん

ヘッダーの表示より重要な事があるのですが、先ずは、ヘッダー画像の件。

 

以下のコードを追加CSSか、子テーマのstyle.cssファイルにコピペすると、PC、モバイルとも背景画像が同じように表示されるかと思います。

#header {
    height: 45vw;
}

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

 

コードをコピペしたら、すぐ上にある「公開」ボタンをクリックして保存します。

 

サイトの表示を確認する場合は、プラグインの「WP Fastest Cache」は停止して、ブラウザのキャッシュを削除して確認してください。


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

benokiさん

別件ですが、ConoHa WING で提供されている Cocoonのテーマのフォルダ名が、標準のフォルダ名と異なっていることが原因で、ダッシュボードの操作でCocoonの親テーマをアップデートできない方が多くいらっしゃるようで、benokiさんも、そのお一人のようです。

 

Cocoonのテーマのデフォルトのフォルダ名

親テーマ→ cocoon-master

子テーマ→ cocoon-child-master

ConoHaからインストールしたCocoonのテーマのフォルダ名(これでは自動アップデートが有効にならないようです)

親テーマ→ cocoon

子テーマ→ cocoon-child

 

Cocoonの親テーマを最新版にすると、プラグインの「Classic Widgets」は不要となります。

 

 

これを解決する方法は、以下のいくつかの過去のトピックを参照してください。

 

最もスムーズに解決したトピック↓

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

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

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

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

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

 


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

benokiさん

ヘッダー画像の件は、このConoHaからインストールしたテーマの件が解決してから、行った方が確実です。


mk2
(@mk2_mk2)
メンバー Moderator
結合: 8か月前
投稿: 2162
 

benokiさん

ConoHaのテーマの件が解決した後、以下はアンインストールなさってください。

投稿者:: @benoki

Classic Widgets 0.2

Cocoonは、「ウィジェットブロックエディタ」を無効にしていますので、上記プラグインは不要です。

※親テーマが、WordPress 5.8以降に対応したバージョンである必要があります。
 (Cocoon最新版であれば問題ありません。)


わいひら 件のいいね!
benoki
(@benoki)
Active Member
結合: 1か月前
投稿: 5
Topic starter  

リフィトリーさん

丁寧に解説頂きありがとうございます!

まず、cocoonテーマ設定については、ダウンロードから再設定まで無事完了しました!
ありがとうございます!
初期の段階で教えていただけてよかったです!

ヘッダー画像の件ですが
CCSを追加すると画像はフルサイズで表示されていますが、画面いっぱいがヘッダー画像になってしまいました...

理想としては、ヘッダーの高さが300px内で画像が切れることなく表示させたいのですが、可能ですか?

モバイル表示ではいい感じに表示されています

 

 

----------------------------------------------
サイト名:子どもニガテパパのアウトドア子育て日誌
サイトURL: https://benokiblog.com 
ホームURL: https://benokiblog.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
WordPressバージョン:5.8.1
PHPバージョン:7.4.16
ブラウザ:Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja-JP,ja;q=0.9,en-US;q=0.8,en;q=0.7
----------------------------------------------
テーマ名:Cocoon
バージョン:2.3.6
カテゴリ数:21
タグ数:39
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.3
style.cssサイズ:845バイト
functions.phpサイズ:203バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:4
Auto Post Thumbnail:1
Retina:0
ホームイメージ:/wp-content/themes/cocoon/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:1
CSS縮小化:0
JavaScript縮小化:1
Lazy Load:1
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
Akismet Anti-Spam 4.1.12
BackWPup 3.10.0
ConoHa WING コントロールパネルプラグイン 1.0
ConoHa WING 自動キャッシュクリア 1.0.0
Contact Form 7 5.4.2
EWWW Image Optimizer 6.2.5
Post Type Switcher 3.2.1
Rinker 1.9.1
SiteGuard WP Plugin 1.6.0
WP Media Category Management 1.9.7
WP Multibyte Patch 2.9
XML Sitemaps 4.1.1

benoki
(@benoki)
Active Member
結合: 1か月前
投稿: 5
Topic starter  

mk2さん

丁寧な説明、ありがとうございます!


mk2
(@mk2_mk2)
メンバー Moderator
結合: 8か月前
投稿: 2162
 

benokiさん

高さというよりは、幅のような気もしなくはないです。

benokiさんの理想がどういうカタチなのか次第ではありますが。

幅を1920pxにすると、以下のように高さも画面いっぱい近くまで広がります。

 
これは、コンテンツ幅以上に、ヘッダー画像が広がっている状態だと思います。
 
例えば、ブラウザ幅を1300px程度にすると、以下のような感じです。
 
これは、コンテンツ幅とヘッダーの幅が近い状態だと思います。
 
 
例えば…。
「Cocoon設定」-「全体」の「サイト幅を揃える」にチェックをいれると、いかがでしょうか?
ヘッダー画像が、コンテンツ幅を超えないようになると思います。
 
それでbenokiさんの理想通りかは分かりませんが。

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

@benoki さん

これは、画像のアスペクト比の問題ですね。

今お使いの画像は、1280 × 720pxですので、横縦の比率は、1:0.56 ぐらいです。

例えば、多くのパソコンで利用されている解像度は、横が1920ですので、高さを300pxにするには、

1920 × 300pxの画像を用意する必要があります。


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

@benoki さん

Cocoonのヘッダーは、背景画像とロゴ画像の2枚の画像が利用できるように設計されています。

 

背景画像は文字どおり背景画像で、画像の下側の方は、画面幅によって隠れても差し支えない画像を使います。

 

ロゴ画像の方は、サイトのタイトルで利用も可能です。タイトルを黄色の文字にした場合は、その画像の背景色を透明に設定して、背景画像に重ねて表示させる仕組みです。

 

ですので、ロゴ画像の方は、透明をサポートしているpng形式の画像を使います。

 

Cocoonのサイトの背景画像とロゴ画像を貼り付けてみますので、イメージを掴んでいただけるかと思います。

 

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

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

@benoki さん

Cocoonのサイトでブラウザの幅を広げたり、縮めたりしてみてください。

ブラウザの幅を広げると、背景画像の下の方が隠れるのがわかるかと思います。

 


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

@benoki さん

上記で説明したとおり、Cocoonは、基本的には2枚の画像を使ってヘッダーをデザインするように設計されています。

 

この仕組みを上手く利用するのが、難しいようで一番簡単です。

 

1枚の画像をPCとモバイルで差し替えて表示するとなると、Cocoonの標準の機能ではできないので、CSSでカスタマイズする必要が生じます。


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

@benoki さん

ちょうど、昨日、2枚の画像を差し替えて表示させる、というトピックがあったので、リンクを貼ってみます。

 

[解決済] グローバルナビメニューの高さを変更したい(太くしたい)

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

 

PCとモバイルで、背景画像を差し替えるには、CSSでのカスタマイズが必要になります。


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

@benoki さん

もう一つ方法としては、1920×440px ぐらいの背景画像1枚だけで済ましてしまう、という方法です。

 

ブラウザの幅をパソコンの前面にして見ている方もいらっしゃいますが、少しウィンドウを小さくして見ている方もいらっしゃるかと思います。

 

私はFirefoxがメインなので、横幅は1300pxぐらいで見ていることが多いです。そうすると、1920×440pxぐらいの画像で、高さが300pxぐらいになるという具合です。

 

1枚の画像だけでデザインするときは、PCでもスマホでも違和感がないような画像の内容と横縦比にしておけば良い訳です。

 


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

@benoki さん

背景画像1枚だけのときは、以下のような計算式で、CSSのコードの数値を設定すればOKです。

 

背景画像の高さ÷(背景画像画像の幅+17px(縦スクロールバーの幅))×100=数値vw

 

#header {
    height: 数値vw;
}

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

誤字訂正します。

ブラウザの幅をパソコンの前面にして見ている

ブラウザの幅をパソコンの全面にして見ている

 


リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6348
 

@benoki さん

mk2さんご案内のCocoon設定の「全体」タブの設定の「サイト幅の均一化」のところの「サイト幅を揃える」にチェックを入れて、「ヘッダー」タブの設定の「高さ」を300にすると以下のような感じになります。

 

ヘッダーの背景画像がブラウザの幅いっぱいには広がらず、サイトの幅になります。

 

それでも、やっぱり、画像は横長の比率で作り直した方が良いかもしれません。

 

スマホや、デジカメにパノラマモードみたいのがあれば、それを使う手もあるかもしれません。

 

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

わいひら 件のいいね!
benoki
(@benoki)
Active Member
結合: 1か月前
投稿: 5
Topic starter  

リフィトリーさん

ご指摘の通り、ブラウザ幅を変えると画像の見え方もかわっていました!

画像幅をつくりなおします!

丁寧な解説ほんとうにありがとうございました!


わいひらリフィトリー 件のいいね!
benoki
(@benoki)
Active Member
結合: 1か月前
投稿: 5
Topic starter  

mk2さん

『サイトの幅を揃える』にチェックを入れるとかなり見やすくなりました!

あとは、もう少し画像幅を編集します!

丁寧な解説ほんとうにありがとうございました!


わいひらmk2 件のいいね!
共有:
スポンサーリンク
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をコピーしました