@ryo-san 様

本件、解決済になっておりますが、自己解決いただいているということでよろしいでしょうか？

（ご質問いただいている動作もきちんと実装されているようです）

恐れ入りますが、後学のためにも、ざっくりとで構いませんので、どのように解決したかお伝えいただけますでしょうか。

フォーラムガイドラインにも以下のとおり記載ございます。

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

お手数をおかけいたしますが、どうぞよろしくお願いいたします。

「ヘッダーロゴ」を設定すると自動的にトップページへのリンクになる。
ということでしたが、一度ヘッダー背景画像を削除してヘッダーロゴだけを設定しましたが、ヘッダーが無くなりグローバルナビだけ残りました。

●原因

[外観]→[カスタマイズ]→追加CSSに以下を追加してあり、
[外観]→[カスタマイズ]→[サイト基本情報]→サイトのタイトル「園芸初心者が、鉢で果樹栽培を始めてみた。」を非表示としている。

.site-name,         /* サイトのタイトル全体のリンク */
.site-name-text,    /* サイトのタイトル、ヘッダーロゴ　*/
.site-description { /* この要素は存在しない　*/
  display: none !important;
}

ヘッダーの高さはヘッダー背景画像で保持されている。
このため、これを止めてしまうと、ヘッダーロゴ自体を上記CSSで非表示としているため、ヘッダーそのものが消えてしまう。

●対策

追加CSSの記述を削除。

●添付コードの説明

以下は不要です、削除してください。

フッターにJavaScriptを追加し、独自にheaderの子要素としてホームに戻るリンクエリアを追加する。

add_action( 'wp_footer', function(){ ?>
<script>
  document.addEventListener('DOMContentLoaded', function(){
  const header=document.querySelector('.header');
  if(header) {
    const link=document.createElement('a');
    link.href='/';
    link.className="header-home-link';
    link.setAttribute('aria-label','');
    header.appendChild(link);
  }
});
</script>
<?php
});

/* ヘッダーを基点とする */
.header {
  position: relative;
}

/* 追加したリンクエリアをヘッダー背景サイズとする */
.header-home-link{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  display: block;
}

@yinaba すみません、押した覚えはなかったのですが解決済みになっていたみたいです。

結局、現在のfunctions.phpとstyle.cssの運用でいいかなと思いました。

@chu-ya

ありがとうございます。

質問しておいてなんなのですが、現在のfunctions.phpとstyle.cssの運用でいいかなと改めて思いました。

わざわざご回答頂きましたのに申し訳ございません。

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

@ryo-san さん

こちら、コーディングの知識はありません。

それなら尚更です。

単にコピペではなく、少なくてもご自身で書かれたコードについては理解してください。
理解しないまま使うのは、事故の元です。
Cocoonの設定の範囲で使うか、コーディングについて勉強、調べた上で変更するかの二択です。

●ご参考

Cocoon設定でヘッダーロゴ画像を囲むようにリンクエリアが付きます。

このため、上述のコードを用い、わざわざPHPでJavaScriptを追加し、ダミーのエリアを設け、CSSでヘッダー背景画像に合わせリンクエリアを拡張は不要です。

子テーマに追加してある以下のCSSは不要

/* ヘッダー全体をクリック可能に */
.header{
position:relative;
}

.header-home-link{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:5;
display:block;
}

functions.phpに追加したPHPも不要です。

以下に手順を示します。

Cocoon設定

[Cocoon設定]→[ヘッダー]

• ヘッダーロゴ
  「ｈｔｔｐｓ：//gardening-beginner.ryo-yasukawa.com/wp-content/uploads/2026/04/gardening-blog-icon-10.jpg」を選択
• キャッチフレーズの配置「表示しない」をオン

CSSを追加

以下を子テーマCSSに追加。

/* ①の余白をなくす */
.logo-header {
  padding-top: 0;
}

/* ②の余白をなくす */
.site-name {
  padding: 0;
}

@chu-ya ご丁寧にありがとうございます。

仰る通りに作業したらうまくいきました！

ただ、ヘッダーロゴとグローバルナビとの間に緑の線が入るのでそれを消したいのと、【設定】→【一般】→【サイトタイトル】は現在空欄にしていますが、ここが空欄だとサイトを表示する際に全て"https://gardening-beginner.ryo-yasukawa.com"と書かれていて見にくいです。

サイトタイトルは入力するけどトップページには表示しない、みたいな設定はありますでしょうか？

何度も申し訳ございませんが、よろしくお願い致します。

@ryo-san さん

●回答

ただ、ヘッダーロゴとグローバルナビとの間に緑の線が入るのでそれを消したいのと、【設定】→【一般】→【サイトタイトル】は現在空欄にしています

サイトのタイトルを空白にする必要はなく、以前のようにサイトのタイトルには「園芸初心者が、鉢で果樹栽培を始めてみた。」をテキスト入力してください。

サイトタイトルは入力するけどトップページには表示しない、みたいな設定はありますでしょうか？

ヘッダー部分のことを言っていますか？
ヘッダーの表示は、ヘッダーロゴか、サイトのタイトルのいずれか一方です。
このため、ヘッダーロゴ（画像）を設定すれば、サイトのタイトルはヘッダーに表示されません。

●現象

ヘッダーロゴとグローバルナビとの間に緑の線が入るのでそれを消したい。

●原因

提示したCSSに漏れがありました。
.logo-headerでparddin-top:0（上の余白をゼロ）とし、下の余白をゼロとしていない。

このため、[Cocoon設定]→[全体]→サイトキーカラーで「#5fbc3a」を指定しているため、ヘッダー背景色が線となって見える。

●対策

余白をゼロとし、子テーマCSSを以下に修正してください。

.logo-header {
padding: 0;
}

●余談

[Cocoon設定]→[ヘッダー]→「ヘッダーを固定する」をオンとすると図のように、スクロールした際、トップメニューに切り替わります。

このため、ヘッダーが背景色が見え違和感が生じます。
以下の2つの方法があります。それぞれ確認してみて下さい。

1. 「ヘッダーを固定する」をオフとするか
2. 「ヘッダー全体色」を白（#ffffff）にし、「ヘッダー固定・モバイルロゴ」に高さ60pxで横長の小さなロゴ画像を設定するお勧めします。

@chu-ya 詳しくご回答いただきありがとうございます。

コードを書き直して、見た目もスッキリ致しました！

いまのところ、PCで見てもスマホで見ても違和感はありませんのでそのまま運用したいと思います。

もし見た目に違和感があれば、ご回答を参考にしてその時に対応いたします。

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