サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2020-05-12 20:58
画像のようにグローバルメニューとヘッダーロゴの間に緑となってしまう部分があります。
13.5インチのパソコンだと添付写真のようになり、21.5インチのパソコンだと緑の部分はなくなります。
どのサイズでも同じように見えるようにするにはどうすればよいでしょうか。
お忙しいところ恐縮ですが、ご教示いただけますと幸いです。
宜しくお願い致します。
2020-05-12 22:07
@おすし さん
Cocoonのヘッダー画像の設定は、ちょっと難しいところがあるみたいです。
私もテスト環境で１度だけ試しただけなので、上手くいくかどうかですが・・
Cocoon設定の「ヘッダー」タブの設定で、「高さ」に数値を入れていたら、その数値を消し、「ヘッダー背景画像」に設定した画像をクリアボタンでクリアします。
次に「ヘッダーロゴ」の方に、ヘッダー画像を設定します。
わいひら reacted
2020-05-12 22:13
次に、以下のCSSを、子テーマに設定します。
.header-in {
width: 100%;
}
.logo-image{
padding: 0;
}
.logo-image span, .logo-image a {
width: 100%;
}
.header-in img {
width: 100%;
}
設定したら、サイトの表示を確認します。
表示におかしなところがある場合は、再調整が必要になるかもしれませんが、とりあえず、ここまで、やってみないと、他のカスタマイズされたCSSの影響等がわからないので、やってみるしかないのかなと思います。
わいひら reacted
Topic starter
2020-05-12 22:45
お返事ありがとうございます。
環境情報は以下となります。
画像クリアとCSSの件を試みたのですが、ヘッダーが緑色のみになるというよくわからない状態になってしまいました。
お手数をおかけしますが宜しくお願い致します。
----------------------------------------------
サイト名：おすし修行ログ
サイトURL： https://airlineman.com
ホームURL： https://airlineman.com
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン：5.4.1
PHPバージョン：7.3.17
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate, br
言語：en-US,en;q=0.9
----------------------------------------------
テーマ名：Cocoon
バージョン：2.1.4.1
カテゴリ数：4
タグ数：17
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.1
style.cssサイズ：12559バイト
functions.phpサイズ：203バイト
----------------------------------------------
Gutenberg：1
AMP：0
PWA：0
Font Awesome：4
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
WEBフォントLazy Load：0
----------------------------------------------
利用中のプラグイン：
Contact Form 7 5.1.7
Jetpack by WordPress.com 8.4.2
WP Mail SMTP 1.9.0
----------------------------------------------
リフィトリー reacted
Topic starter
2020-05-12 22:46
「高さ」の部分の数値を消したところ、何も表示されずにグローバルメニューが一番上にくる仕様になってしました汗
2020-05-12 22:49
@おすし さん
そのようですね。
ちょっと、調べてみますね。
Topic starter
2020-05-12 22:50
ありがとうございます。
宜しくお願い致します。
2020-05-12 22:58
ヘッダーの画像がかなり横長で、ヘッダーの高さをそのままの400に指定しているからじゃないですかね。
高さを250～300ぐらいにするといい感じになってきますよ。
※おすしさんのヘッダー画像を使って、実際に自分のサイトで試してみました
そうか、画像って複数表示されないのか。
2020-05-12 22:59
@おすし さん
子テーマのCSSの394行目
/************************************
** サイトタイトル非表示
************************************/
.logo-header{
display: none;
}
これをコメントアウトしてください。
/*
.logo-header{
display: none;
}
*/
こんな感じに・・
高さは、とりあえず、設定しないでください。
高さを設定すると、たぶんレスポンシブにならないと思われます。
わいひら reacted
2020-05-12 23:04
@おすし さん
いい感じになってきました。
下の緑のスキマを無くすように調整しましょう。
少しお待ちください。
Topic starter
2020-05-12 23:05
早速394行目をコメントアウトしました。
状況はよくなり、画像は出てきました！
ただまだ少しだけ謎の緑部分があります。汗
Topic starter
2020-05-12 23:05
色々注文して申し訳ございません。
Topic starter
2020-05-12 23:12
ヒロアキさんもコメントいただきありがとうございます！
2020-05-12 23:25
ちょっと、手こずっていますが・・・
スキマ無くしましょう！
Topic starter
2020-05-12 23:35
ありがとうございます！
2020-05-12 23:36
以下のCSSでPC表示のときは、隙間が消えますね。
.logo-image a {
display: block;
}
.site-name-text {
font-size: 0;
}
font-size: 0;がHTML的にどうかは、別にして・・
でも、サイト名のテキストは無いんですよね。
わいひら reacted
Topic starter
2020-05-12 23:46
ありがとうございます。
試してみたところ、隙間が半分くらいにはなったのですが、まだ少しだけ残ってしまっている状況です泣
2020-05-12 23:52
.logo-image span, .logo-image a {
display: block;
}
.site-name-text {
font-size: 0;
}
こっちだと、どうでしょう？
あ、ちょっと待ってください。
2020-05-12 23:56
間違っていました。
以下に修正します。
.logo-image span {
display: block;
}
.site-name-text {
font-size: 0;
}
たぶん、これでイケるかと・・
わいひら reacted
Topic starter
2020-05-13 00:01
ありがとうございます。
試してみたのですが、変わらずでした、、、
色々提案していただいているのに申し訳ないです。
2020-05-13 00:02
@おすし さん
すみません。
もう一度、やってみます。
2020-05-13 00:04
やはり、１つ前のヤツが正解みたいです。
.logo-image span, .logo-image a {
display: block;
}
.site-name-text {
font-size: 0;
}
なんどもすみません。
わいひら reacted
2020-05-13 00:17
@おすし さん
Cocoonのヘッダー画像は、背景画像に設定すると、常に画像全体が見えるようになっている訳ではないんです。
このCocoonのサイトのように、背景画像と、ロゴ画像の２枚の画像を使うか、背景画像と、サイト名の文字を使うことを想定しているみたいなので、１枚の画像だけで、上手く配置するのは、なかなか難しいです。
それで、皆さん、けっこう苦労されていらっしゃるようです。
わいひら reacted
2020-05-13 01:36
font-size: 0;とは、書いてみたものの、なんか違和感が残るなぁ・・
.site-name-text {
font-size: 0;
}
なんか、気持ち悪い・・・
.site-name-text {
line-height: 0;
}
まだ、こっちの方がいいか・・
わいひら reacted
Topic starter
2020-05-13 09:18
了解です！
変えてみます。
Topic starter
2020-05-16 00:07
大変申し訳ないのですが、
テーマを最新のものにアップデートしたところ、また同じ不具合が起きてしまいました。
もし対処法分かる方がいましたらご回答いただけると幸いです。
宜しくお願い致します。
2020-05-16 00:33
@おすし さん
ありゃ、なんでやねん！
2020-05-16 01:19
@おすし さん
こりゃ、アップデートのせいじゃないような・・
前にやった、ヘッダー部分は問題ないような気がします。
グローバルメニューに何か手を加えようとしていたのでは？
とりあえず、グローバルメニューのHTMLの記述で＜/i＞閉じタグの閉じ山括弧が足りないみたいです。
モバイルのときのグローバルメニューも少しおかしいような・・・
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。