サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2021-09-20 14:41
対象のページの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 3年前 by benoki
2021-09-20 15:10
前略、benokiさん
ヘッダーの表示より重要な事があるのですが、先ずは、ヘッダー画像の件。
以下のコードを追加CSSか、子テーマのstyle.cssファイルにコピペすると、PC、モバイルとも背景画像が同じように表示されるかと思います。
#header {
height: 45vw;
}
追加CSSは、ダッシュボードの「外観」→「カスタマイズ」→「追加CSS」と辿ると開けます。
コードをコピペしたら、すぐ上にある「公開」ボタンをクリックして保存します。
サイトの表示を確認する場合は、プラグインの「WP Fastest Cache」は停止して、ブラウザのキャッシュを削除して確認してください。
わいひら reacted
2021-09-20 15:15
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/
ｍｋ２さんがまとめてくださったトピック
https://wp-cocoon.com/community/postid/55027/
初心者向けのトピック↓
[解決済] ウィジェット機能のカテゴリ追加が正しくサイドバー内で反映されない
https://wp-cocoon.com/community/postid/55462/
わいひら reacted
2021-09-20 15:17
benokiさん
ヘッダー画像の件は、このConoHaからインストールしたテーマの件が解決してから、行った方が確実です。
2021-09-20 16:04
benokiさん
ConoHaのテーマの件が解決した後、以下はアンインストールなさってください。
Classic Widgets 0.2
Cocoonは、「ウィジェットブロックエディタ」を無効にしていますので、上記プラグインは不要です。
※親テーマが、WordPress 5.8以降に対応したバージョンである必要があります。
（Cocoon最新版であれば問題ありません。）
わいひら reacted
Topic starter
2021-09-21 00:08
リフィトリーさん
丁寧に解説頂きありがとうございます！
まず、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
2021-09-21 00:20
benokiさん
高さというよりは、幅のような気もしなくはないです。
benokiさんの理想がどういうカタチなのか次第ではありますが。
幅を1920pxにすると、以下のように高さも画面いっぱい近くまで広がります。
これは、コンテンツ幅以上に、ヘッダー画像が広がっている状態だと思います。
例えば、ブラウザ幅を1300px程度にすると、以下のような感じです。
これは、コンテンツ幅とヘッダーの幅が近い状態だと思います。
例えば…。
「Cocoon設定」－「全体」の「サイト幅を揃える」にチェックをいれると、いかがでしょうか？
ヘッダー画像が、コンテンツ幅を超えないようになると思います。
ヘッダー画像が、コンテンツ幅を超えないようになると思います。
それでbenokiさんの理想通りかは分かりませんが。
わいひら reacted
2021-09-21 00:44
@benoki さん
Cocoonのヘッダーは、背景画像とロゴ画像の２枚の画像が利用できるように設計されています。
背景画像は文字どおり背景画像で、画像の下側の方は、画面幅によって隠れても差し支えない画像を使います。
ロゴ画像の方は、サイトのタイトルで利用も可能です。タイトルを黄色の文字にした場合は、その画像の背景色を透明に設定して、背景画像に重ねて表示させる仕組みです。
ですので、ロゴ画像の方は、透明をサポートしているpng形式の画像を使います。
Cocoonのサイトの背景画像とロゴ画像を貼り付けてみますので、イメージを掴んでいただけるかと思います。
This post was modified 3年前 2回 by リフィトリー
わいひら reacted
2021-09-21 01:04
@benoki さん
ちょうど、昨日、２枚の画像を差し替えて表示させる、というトピックがあったので、リンクを貼ってみます。
[解決済] グローバルナビメニューの高さを変更したい（太くしたい）
https://wp-cocoon.com/community/postid/56703/
PCとモバイルで、背景画像を差し替えるには、CSSでのカスタマイズが必要になります。
わいひら reacted
2021-09-21 01:16
@benoki さん
もう一つ方法としては、1920×440px ぐらいの背景画像１枚だけで済ましてしまう、という方法です。
ブラウザの幅をパソコンの前面にして見ている方もいらっしゃいますが、少しウィンドウを小さくして見ている方もいらっしゃるかと思います。
私はFirefoxがメインなので、横幅は1300pxぐらいで見ていることが多いです。そうすると、1920×440pxぐらいの画像で、高さが300pxぐらいになるという具合です。
１枚の画像だけでデザインするときは、PCでもスマホでも違和感がないような画像の内容と横縦比にしておけば良い訳です。
わいひら reacted
2021-09-21 01:44
誤字訂正します。
ブラウザの幅をパソコンの前面にして見ている
ブラウザの幅をパソコンの全面にして見ている
2021-09-21 07:20
@benoki さん
ｍｋ２さんご案内のCocoon設定の「全体」タブの設定の「サイト幅の均一化」のところの「サイト幅を揃える」にチェックを入れて、「ヘッダー」タブの設定の「高さ」を300にすると以下のような感じになります。
ヘッダーの背景画像がブラウザの幅いっぱいには広がらず、サイトの幅になります。
それでも、やっぱり、画像は横長の比率で作り直した方が良いかもしれません。
スマホや、デジカメにパノラマモードみたいのがあれば、それを使う手もあるかもしれません。
This post was modified 3年前 2回 by リフィトリー
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。