現在はCocoon設定>ヘッダー>ヘッダー背景画像で画像を選択しているかと思いますが、そこは「クリア」を押して空欄にした上で、
Cocoon設定>ヘッダー>ヘッダーロゴの部分で同じ画像を選択してみてください。

恐らくクリック位置もタイトルの被りも解消されると思います(テキストて表示されているタイトルが消えます)。

@haruinoue いつもありがとうございます。

無事解決いたしました。

もう一つ質問があるのですが、ヘッダーの下（？）の縞々になっている部分はグローバルメニューですか？

ここの部分がいらないのですが、これはヘッダーやグローバルメニューの大きさを調整すれば解決しますでしょうか？

どうぞよろしくお願いいたします。

前略、@きりみ さん

縞々の部分はスキンでデザインされたものです。

ちなみに、フッター部分にもあります。

スキンを「なし」にするか、momoon以外のスキンに変えれば、無くなるかと思います。

リフィトリーさんの仰っている通り、ヘッダー・フッターと本文部分とメイン部分を分けるデザインですね。

子テーマのsytle.cssに以下のCSSを書けばスキンを利用したままで縞部分が非表示になります。

.header-container:after, .footer:before {
  display: none;
}

@leafytreeさん、はるさん　ありがとうございます。

スキンの問題だったんですね。

ちょうどそろそろスキンを替えようと思っていたころでした。

あと、最後に１つだけヘッダーについての質問があるのですが、現在ＰＣでみたときにピンクの枠の中に白でロゴマークが浮き上がってる状態になっているかと思いますが、スマホでみたときは上下のみピンクの背景があります。

スマホで見たときもＰＣのように四方を囲わせるようにしたいのですが、ヘッダーの高さや幅を微調整していくしかないでしょうか？

スマホで見た際にロゴがヘッダーの真ん中に位置せず、上下のピンクの背景の幅に差があるのも気になります。

何度も質問して申し訳ございません。

どうぞよろしくお願いいたします。

@きりみ さん

スキンを変えたりした場合は、また ちょっとやり方を工夫しなくてはならないかもしれませんが、以下のCSSのコードで、ロゴ画像が およそヘッダーの上下中央に配置できるような気がします。

.site-logo-image.header-site-logo-image {
   vertical-align: middle;
}

また、PC表示のとき、ロゴの白い背景の幅が若干狭くなりますが、左右の部分を透明にすれば、スマホでも似たような表示になるような気がして、ロゴ画像をちょっと修正してみました。

@leafytreeさま、画像まで編集していただきありがとうございました。

すべて解決しました。

いいね！ボタンや、解決済みボタンが見当たらないのですが、質問者が押さなくても大丈夫でしょうか、、、？

この度はありがとうございました。

@きりみ さん

子テーマに記述されいらっしゃるコードに問題があり、ヘッダーを上下中央にする記述が無効になってしまっているようです。

人気記事の３列横並びのところが、スマホで上手く表示されないので、ご自身でコードを追記されたのだと思いますが、上手くいっていないようです。

@きりみ さん

あらためて、人気記事３列横並びのコードを書いてみました。

実際に試していないので、間違っているかもしれませんが、念のため、現状のコード全体をテキストエディターでテキストファイルでバックアップをしたうえで、子テーマの31行目から49行目を以下のコードに差し替えてみてください。

/*人気記事を3列横並びにする*/

#popular_entries-4 .popular-entry-cards {
   display: flex;
   justify-content: space-around;
   flex-wrap: wrap;
}

#popular_entries-4 .popular-entry-cards > a {/*３列にする*/
   width: 31.5%;
}

#popular_entries-4 .widget-entry-cards.card-large-image .a-wrap {
   max-width: none;/*幅400pxの指定を初期化する*/
}

#popular_entries-4 .popular-entry-cards::after {/*クリアフィックス用のアイテムを消す*/
   content: none;
}

@media screen and (max-width:480px) {/*画面幅が480px以下のとき１列にする*/
   #popular_entries-4 .popular-entry-cards > a {
      width: 95%;
   }
}

@きりみ さん

なお、ヘッダーロゴ画像を上下中央に配置する、以下のコードは、合っていると思うので、一番下にでもコピペしていただければ、今度は有効になるのではないかと思います。

.site-logo-image.header-site-logo-image {
   vertical-align: middle;
}

@きりみ さん

人気記事ウィジェットなどを横並びにした場合は、画面幅の狭いスマホでの表示も同時に考えなくてはならないかと思います。

PCで横３列の場合は、奇数なので、スマホで２列に設定すると、ひとつ余ってしまうので、あまり体裁がよくありません。

なので、スマホ表示は１列にしとこうか、的な事になってしまいがちです。

PCで横４列の場合は、スマホ表示で２列にしても、比較的自然な感じで表示できます。

奇数でも工夫すれば、スマホ表示２列にした場合でも、で余った一つを左寄せにしたりすることもできなくはないみたいですが、偶数の方が簡単です。

以前のトピックで、PCは、５つ横並びで、スマホは２列というのもありました。

[解決済] 人気記事ウィジェットで５記事横並びにしていますが、モバイル表示では２列にしたい

レイアウトを考える際の参考になれば幸いです。

ピッタリ上下中央ではないかもしれませんが・・

Cocoonのヘッダーと言えば、Ikumi さんでしょうか。

オシャレなブログを作る際には、とても参考になりそうです。

[Cocoon] ヘッダー画像サイズと選ぶポイント

[Cocoon] オシャレロゴ画像のサンプル祭り（8種のサイズ）

[Cocoon] ヘッダーレイアウトの種類を画像で紹介

@きりみ さん

人気記事PC３列横並び、スマホ2列のコードも書いてみました。

/*人気記事を3列横並びにする（スマホでは２列）*/

#popular_entries-4 .popular-entry-cards {
   display: flex;
   justify-content: space-around;
   flex-wrap: wrap;
}

#popular_entries-4 .popular-entry-cards > a {/*３列にする*/
   width: 31.5%;
}

#popular_entries-4 .widget-entry-cards.card-large-image .a-wrap {
   max-width: none;/*最大幅400pxの指定を初期化する*/
}

#popular_entries-4 .popular-entry-cards::after {/*クリアフィックス用のアイテムを消す*/
   content: none;
}

@media screen and (max-width:480px) {/*画面幅が480px以下のとき2列にする*/

   #popular_entries-4 .popular-entry-cards > a {
      width: 48%;
   }

   #popular_entries-4 .popular-entry-cards::after {
      width: 48%;
      content: "";
      display: block;
   }

}

奇数なので、右下部分は空白になります。

デベロッパーツールでちょっと試しただけなので、実際には、試していません。

投稿者:: @きりみ

いいね！ボタンや、解決済みボタンが見当たらないのですが、質問者が押さなくても大丈夫でしょうか、、、？

こちらは、登録してないと表示されないみたいです。
なのでフォーラムに未登録の場合は、押せないのでそのままで大丈夫です。

@leafytreeさま

31行目から差し替えたところ、スマホで見た際に横並びにならなくなりました。

なにか私間違えてしまったでしょうか？

スマホで横1列３サムネイルで見たときに真ん中が大きくなってしまうのは気付いていましたが、それでもいいです。

とりあえず、人気記事に関しては完全に前の状態に戻したいのですが、どうすればよいでしょうか？

どうぞよろしくお願いいたします。

※　Ikumiさんのリンク集もありがとうございました。

あとでゆっくり見て参考にさせてもらいます。

@きりみ さん

スマホでも３列のままにする場合は、以下の部分（先に記述した下の方です）は、削除してください。

@media screen and (max-width:480px) {/*画面幅が480px以下のとき１列にする*/
   #popular_entries-4 .popular-entry-cards > a {
      width: 95%;
   }
}

ヘッダーのコードは有効になったみたいですね。

@leafytreeさま

無事横並びに戻すことが出来ました。

androidで見た際のサムネイル画像の大きさも揃いました。

次から次へと質問してしまい申し訳ございませんでした。

大変助かりました。

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

@きりみ さん

子テーマのCSSのコードに余分な波括弧が残ってしまっています。

そのため、ヘッダーロゴ画像を上下中央に配置するためのコードが無効になってしまっています。

50行目にある、波括弧です。

@きりみ さん

以下のトピックにCSS関連の基礎を学ぶリンクがあります。

お時間のある時にでも、ご覧になってみてください。

【初心者向け】WordPressやCSS初心者向けの記事を紹介するトピック