yuumiさん

私からは以下のように見えておりますが、これとは別ということでしょうか。

1. 1つのトピックにつき1つの質問を書き込んでください
2. 不具合・カスタマイズ対象ページのURLを提示し高速化を無効にしてください
3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

前略、yuumiさん

追加CSSの32行目辺りに、ご自身でお書きになっている、以下のコードが原因です。

.logo-header{
  display: none;
}

削除すると表示されるかと思います。

yuumiさん

ヘッダーロゴ画像やヘッダー背景画像を設定するときは、Cocoon設定の「ヘッダー」タブで設定します。

yuumiさん

Cocoonのヘッダーは、「背景画像」と「ロゴ画像」の２枚の画像を組み合わせて表示できるような仕様になっています。

「背景画像」の上に「ロゴ画像」を重ねて上から見るイメージです。

このCocoonのサイトのヘッダーも鉛筆を持った手の背景画像と「Cocoon」の文字をかたどった「ロゴ画像」の２枚の画像を使っています。

ロゴ画像の方は上に重ねるため、画像の背景を透明にしています。

また、Cocoonをお使いの方の中には、背景画像だけを使っている方もいらっしゃいますし、ロゴ画像だけを使っている方もいらっしゃいます。

どこに設定するとどのように表示されるのかを、試してみてもいいかもしれません。

@mk2_mk2 さん

ご返信ありがとうございます。

フォーラムの書き方、申し訳ございません。

ブラウザ等の削除も試してみます。

ありがとうございます。

yuumiさん

リフィトリーさんもご回答くださっていますが、こちらはお試しになりましたでしょうか。

私が拝見した時は、どんどんデザインが変わっていたので、カスタマイズ作業中かと思い、確認するのは少し諦めたところがあります。

その後、リフィトリーさんがご確認くださっているようです。

@leafytree さん

ご返信遅くなり申し訳ありません。

ご教示いただいた方法でCSSを削除したところ、ロゴの表示はされました。

ただ、ロゴの表示とグローバルメニューの位置がうまく調整できず、

『グローバルメニュー 高さ』や『ロゴ　左寄せ』などで調べていますが、調整できておりません。

添付した画像の黄色部分を倍の高さにし、ロゴもそれに合わせた高さに設定したいと思っております。

@yuumi さん

先ず、追加CSSにお書きになっている以下のコードを削除してください。

#header {
    height: 18.5vw;
}

次にロゴ画像の右側の余白が大きすぎるので、画像の右側の余白部分を適当にトリミングしてください。（私は高さ200×幅652pxで試してみました）

@yuumi さん

Cocoon設定の「ヘッダー」タブの設定で、「ヘッダーレイアウト」を「トップメニュー」にして
「高さ」と「高さ（モバイル）」の数値は消してくさい。

私は「グローバルメニュー幅」はデフォルトの176pxで試してみました。

次に以下のCSSのコードを追加CSS、もしくは、子テーマのCSSファイルにコピペしてみてください。

.navi-in > ul li {
    height: 120px;
    line-height: 120px;
}

.header-container-in.hlt-top-menu .logo-header img {
    max-height: 120px;
}

.header-container-in.hlt-top-menu .logo-header {
    max-height: 120px;
}

.content-top {
    margin-top: 0;
}

@yuumi さん

私のテスト環境ではこんな感じになりました。

@yuumi さん

ヘッダーレイアウトは「トップメニュー」ではなく、「トップメニュー（右寄せ）」の場合でも同じCSSのコードでイケそうです。

ロゴ画像の右側の余白を大きくしてしまうと、タブレットなどの端末幅のとき、ロゴ画像の横幅が広すぎてバランスがとれないかと思います。

ブラウザの画面幅を広げたり縮めたりして、様々な端末の画面幅でも、ある程度のバランスがとれるように工夫なさってみてください。

@leafytree さん

細かい設定までご教示いただきありがとうございます！

設定してみたところ、思った通りにすることができました。

ありがとうございました！

@yuumi さん

修正後の画像があると、他の方の参考になるかもしれないので・・

@leafytree さん

ちなみに伺いたいのですが、CSSでヘッダーの調整をした際、

ロゴの上下に少しスペースを作って余白を入れたい場合は、

コクーン設定のヘッダー高さを調整したらよろしいでしょうか？

投稿者:: @yuumi

@leafytree さん

ちなみに伺いたいのですが、CSSでヘッダーの調整をした際、

ロゴの上下に少しスペースを作って余白を入れたい場合は、

コクーン設定のヘッダー高さを調整したらよろしいでしょうか？

PC表示、モバイル表示とも同じ割合の余白を入れる場合は、ロゴ画像のサイズは変更せずに画像そのものを加工して余白を増やした方が良いと思います。

例えば以下のようなイメージです。

@yuumi さん

上の画像より、更に中身の絵を小さくすると・・

@yuumi さん

もっといくと・・

@leafytree さん

度々のわかりやすいご説明ありがとうございます。

画像自体を編集してやってみます。

ありがとうございました！

@yuumi さん

フォーラムに貼り付けた画像をコピーしても使えるかと思います。

お好みで選んでください。

※あ、でも文字が若干細くなったりしちゃいますね・・

@yuumi さん

だんだんカタチになってきましたね。

「歴10年目～」辺りの文字を読み易くするのであれば、画像の作り込みを工夫すれば良いかもしれません。

この辺りで失礼します。