前略、セキュリティキング さん

以前フォーラムに、トップメニューにした場合ロゴが小さくなってしまうので、大きめに表示したい、とのお問い合わせがあり、私の書き込みもあって、トップメニューのときのロゴ画像の表示の仕様が少し変更されています。

トップメニューのロゴ画像の表示に関する考察

状況をもう少し詳しく確認させていたければと思いますので、お差し支えがなければ、Cocoon設定の高速化設定をOFFにしていただけますと助かります。

お手数をおかけし、申し訳けありません。

セキュリティキング さん

子テーマのstyle.cssにお書きになられている、以下のコードをコメントアウトするか、削除していただければロゴ画像は、はみ出さなくなるかと思います。

div.header-container-in.hlt-top-menu .logo-header img {
height: auto;
max-height: none;
width: 400px;
}

以前より、若干小さくなってしまうかと思われますので、少し大きくする方法も、次に書き込みます。

セキュリティキング さん

ロゴ画像をもう少し大きく表示なさりたい場合の方法は以下のとおりです。

デフォルトのロゴ画像の高さは 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など。注意：２箇所の数値は同じ数値にしてください）

セキュリティキング さん

上記のコードで80pxより大きい数値を指定しても、それ以上にはならないかもしれません。

設定されていらっしゃるロゴ画像は、300px × 80px　のようですので、仮に別な方法でやれば可能だとしても、画像がぼやけてしまうので、原寸か、原寸より小さく表示させる方がよいとは思います。

@leafytree　リフィトリー様

早速ご返信をいただきましてありがとうございました。
コードの削除をしたところ、ロゴ画像がはみ出てしまう現象は解決することができました。

一方で、画像を縦幅100px程度で表示したいと考え、
教えていただいたコードにて設定を行ってみたのですが、
こちらは、どうしても60pxに自動調整されてしまうようです。

画像サイズも大きいものにしたのですが、
100pxでの表示に対応させるにはどのようにしたらよろしいでしょうか。

重ね重ねの質問となってしまい大変恐縮ですが、
お時間のある際にご確認をいただけますと幸いです。

お手数をおかけしますが、何卒よろしくお願い致します。

@セキュリティキング さん

CSSのコードが有効にならないのは、文字コードをUTF-8（BOMなし）でプレーンテキストを扱うことができる適切なテキストエディタをお使いになっていないためです。

適切なテキストエディタを使わず、office系のソフトや、メモ帳、Macでは、テキストエディットなどをCSSのコードの編集に用いてしまうと、余分な文字が入ってしまうことが多いようです。

この余分な文字は、Wordpressのテーマエディター上では、目視できないため、「なんでだろう・・」ということになってしまいます。

Windows環境の場合は、「Mery」というテキストエディタがオススメです。

Meryの設定方法は、過去のトピックに書いています。

Mery 設定方法

また、Mac環境の場合は、「CotEditor」がよいのではないかと思われます。

設定方法は以下のサイトの下の方に記載があります。

文字コードをUTF-8 BOMなし(UTF-8N)でファイル保存をする方法

@セキュリティキング さん

また、ロゴ画像の高さを100pxに、とのことですが、高さを100pxにした場合は、横幅が447pxとなってしまい、グローバルメニューが2段に表示されてしまいます。

やはり、80px の方がバランスがとれているような気がします。

CSSのコードは適切なテキストエディタを使って、テキストエディタからコピペすれば、余分な文字は入らないので、先にご紹介したコードでちゃんと有効になるかと思います。

@leafytree　リフィトリー様

いつもお世話になっております。
ご丁寧にご説明いただきありがとうございました。

早速試してみたところ、無事に思い通りのトップにすることができました。
サイズにつきましても、ご提案をいただいた80pxが最も良かったです。

この度は迅速かつ丁寧にご説明をいただき、
誠にありがとうございました。

今後ともどうぞよろしくお願い致します。