サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2020-12-13 16:46
わいひら様、いつもCocoonを利用させていただきありがとうございます。
今回、テーマをアップデートしたところ、ヘッダーロゴの表示が少し変になってしまったためご連絡させていただきました。
ヘッダーロゴが、ヘッダーの枠からはみ出してしまっているのですが、こちらの対処法につきましてご教示いただくことは可能でしょうか。
おそらく、キャッチフレーズの影響などによりずれてしまっているのではないかと思いますが、ご確認をいただけますと幸いです。
以下、URLと参考画像を共有させていただきます。
お手数をおかけしますが、ご確認何卒よろしくお願い致します。
URL: https://security-king.jp/
2020-12-13 17:14
前略、セキュリティキング さん
以前フォーラムに、トップメニューにした場合ロゴが小さくなってしまうので、大きめに表示したい、とのお問い合わせがあり、私の書き込みもあって、トップメニューのときのロゴ画像の表示の仕様が少し変更されています。
状況をもう少し詳しく確認させていたければと思いますので、お差し支えがなければ、Cocoon設定の高速化設定をOFFにしていただけますと助かります。
お手数をおかけし、申し訳けありません。
2020-12-13 17:22
セキュリティキング さん
子テーマのstyle.cssにお書きになられている、以下のコードをコメントアウトするか、削除していただければロゴ画像は、はみ出さなくなるかと思います。
div.header-container-in.hlt-top-menu .logo-header img {
height: auto;
max-height: none;
width: 400px;
}
以前より、若干小さくなってしまうかと思われますので、少し大きくする方法も、次に書き込みます。
わいひら reacted
2020-12-13 17:29
セキュリティキング さん
ロゴ画像をもう少し大きく表示なさりたい場合の方法は以下のとおりです。
デフォルトのロゴ画像の高さは 60px となっているので、以下のCSSのコードで 80px に変更します。
以下のCSSのコードを子テーマのCSSにコピペしていただけますと、ロゴの表示を大きくすることができるかと思います。
/*ヘッダーロゴ画像の高さを60pxから80pxに変更する*/
.header-container-in.hlt-top-menu .logo-header {
max-height: 80px;
}
.header-container-in.hlt-top-menu .logo-header img {
max-height: 80px;
}
数値はお好みで、適宜ご調整ください。（例：70pxなど。注意：２箇所の数値は同じ数値にしてください）
This post was modified 3年前 3回 by リフィトリー
わいひら reacted
2020-12-13 17:46
セキュリティキング さん
上記のコードで80pxより大きい数値を指定しても、それ以上にはならないかもしれません。
設定されていらっしゃるロゴ画像は、300px × 80px のようですので、仮に別な方法でやれば可能だとしても、画像がぼやけてしまうので、原寸か、原寸より小さく表示させる方がよいとは思います。
Topic starter
2020-12-13 23:48
@leafytree リフィトリー様
早速ご返信をいただきましてありがとうございました。
コードの削除をしたところ、ロゴ画像がはみ出てしまう現象は解決することができました。
一方で、画像を縦幅100px程度で表示したいと考え、
教えていただいたコードにて設定を行ってみたのですが、
こちらは、どうしても60pxに自動調整されてしまうようです。
画像サイズも大きいものにしたのですが、
100pxでの表示に対応させるにはどのようにしたらよろしいでしょうか。
重ね重ねの質問となってしまい大変恐縮ですが、
お時間のある際にご確認をいただけますと幸いです。
お手数をおかけしますが、何卒よろしくお願い致します。
2020-12-14 07:26
@セキュリティキング さん
CSSのコードが有効にならないのは、文字コードをUTF-8（BOMなし）でプレーンテキストを扱うことができる適切なテキストエディタをお使いになっていないためです。
適切なテキストエディタを使わず、office系のソフトや、メモ帳、Macでは、テキストエディットなどをCSSのコードの編集に用いてしまうと、余分な文字が入ってしまうことが多いようです。
この余分な文字は、Wordpressのテーマエディター上では、目視できないため、「なんでだろう・・」ということになってしまいます。
Windows環境の場合は、「Mery」というテキストエディタがオススメです。
Meryの設定方法は、過去のトピックに書いています。
また、Mac環境の場合は、「CotEditor」がよいのではないかと思われます。
設定方法は以下のサイトの下の方に記載があります。
文字コードをUTF-8 BOMなし(UTF-8N)でファイル保存をする方法
This post was modified 3年前 3回 by リフィトリー
2020-12-14 07:30
@セキュリティキング さん
また、ロゴ画像の高さを100pxに、とのことですが、高さを100pxにした場合は、横幅が447pxとなってしまい、グローバルメニューが2段に表示されてしまいます。
やはり、80px の方がバランスがとれているような気がします。
CSSのコードは適切なテキストエディタを使って、テキストエディタからコピペすれば、余分な文字は入らないので、先にご紹介したコードでちゃんと有効になるかと思います。
This post was modified 3年前 3回 by リフィトリー
Topic starter
2020-12-15 12:22
@leafytree リフィトリー様
いつもお世話になっております。
ご丁寧にご説明いただきありがとうございました。
早速試してみたところ、無事に思い通りのトップにすることができました。
サイズにつきましても、ご提案をいただいた80pxが最も良かったです。
この度は迅速かつ丁寧にご説明をいただき、
誠にありがとうございました。
今後ともどうぞよろしくお願い致します。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。