GONSY様ありがとうごいます。
それでやってみます。
Olein_jp、キタジマ 様 いろいろお知恵を頂いてありがとうございます。
トピックス閉じます。
横から失礼します。
ロゴ全体を画像にしないのであれば、カスタマイザーの「サイト基本情報」のロゴを削除してプレーンテキストを表示。
そのあとはシンボルマーク部分のみ画像化して、CSSの擬似要素（:before）で設置すれば簡単だと思います。
.c-site-branding__title a {
display: flex;
align-items: center;
}
.c-site-branding__title a::before {
content: "";
display: inline-block;
width: 32px;
height: 32px;
margin-right: 6px;
background: url( 画像のURL ) no-repeat center center;
background-size: 32px;
}
連絡が遅くなり、申し訳ございません。Olein様もいろいろ教えて頂きありがとうございます。
その部分だけを画像にして、「メモリアルプランナーみはし」の部分だけテキストにすることはフックを使う必要はありますが、できると思います。その認識であっていますかね？
はい！大丈夫です。
その方法をご教示していただけますか？
@mihashinoriyuki さん
こちらの画像となります。
えっと、それは理解しているのですが、そこが「画像」だと、使用されている SEO ツールだと h1 が認識されないからテキストにしたい、ということですよね？ ロゴ画像の設定を解除すれば「テキスト」になるから、そうなれば h1 として認識されるようになるから、ロゴ画像設定解除の方法を書いた、という流れになります。
「ロゴ画像」と言われているのが下記の画像の赤丸で囲んだ部分のみのことを指しているのであれば、
その部分だけを画像にして、「メモリアルプランナーみはし」の部分だけテキストにすることはフックを使う必要はありますが、できると思います。その認識であっていますかね？
すみません！改めて調査してみると、独自に追加されている下記の CSS と、WordPress コアの CSS が干渉しているために発生していることがわかりました（全幅・幅広を解除すれば解決しそうというのはそのまま）。
### 独自の CSS
@media screen and (min-width: 1024px) {
〜中略〜
.spider__slide figure img {
width: 100%;
max-width: 100%;
min-width: 100%;
height: 600px;
object-fit: cover;
}
}
## コアの CSS
.wp-block-image.alignfull img,
.wp-block-image.alignwide img {
height: auto;
width: 100%;
}
全幅・幅広を設定するとコアの CSS で画像の height が auto になるため、独自に追加されている .spider__slide figure img の height: 600px が打ち消されて画像の高さが意図したものではなくなってしまい、現象が発生しているようです。
– 画像の全幅・幅広を解除する
– height: 600px を height: 600px !important に変更する
の、いずれかで解決すると思うので試してみてください！
add_filter(
'snow_monkey_site_branding_title_html',
function( $html ) {
// <code><h1></code>内のリンクテキストを追加
$custom_html = '
<h1 class="c-site-branding__title">
<a href="' . esc_url( home_url( '/' ) ) . '" rel="home">メモリアルプランナーみはし</a>
</h1>';
return $custom_html;
}
);
このたびは、いろいろとご対応いただき、誠にありがとうございます。
同じ設定にもかかわらず結果が異なる理由については、教えていただき理解できました。こちらの確認不足で大変失礼いたしました。
最後に、ChatGPTで調べたところ、以下の方法が提案されました。試しに実行してみたのですが、うまくいかず、原因を調べているうちに行き詰まってしまいました。
以下の提案内容について、開発者でいらっしゃる北島様のご意見を伺えればと思います。また、私自身フィルターに関する知識が不足しているため、ご活用いただける可能性がある場合は、ぜひご教示いただけますと幸いです。
どうぞよろしくお願い申し上げます。
add_filter( ‘snow_monkey_site_branding_title_html’, function( $html ) {
// <h1>内のリンクテキストを追加
$custom_html = ‘
<h1 class=”c-site-branding__title”>
メモリアルプランナーみはし
</h1>’;
return $custom_html;
}
https://machiyasaijou-sougi.jp/ のほうはロゴ画像が設定されていないのでテキストリンクになっています。
「カスタマイザー → サイト基本情報 → ロゴ」でロゴを削除すればテキストリンクになります。
調べた結果、alt属性でもSEOの認識はあるのですが、https://machiyasaijou-sougi.jp/のようにaタグでテキストを入れた方が効果的で推奨されてます。こちらに変えることは可能でしょうか？
先ほど共有したトピックの内容を引用します。
——-
実際には h1 の中の画像には alt が設定されているので、h1 の中が空、というわけではないのですが、ツールによって画像を読み取る場合と読み取らない場合があるようです。
本質的な問題はそのツールで読み取られないから、というより、HTML 的に正しいかどうか、だと思いますので、HTML の仕様、あるいは Google が推奨するドキュメントなどがあれば Snow Monkey を改修したほうが良いのかなと思いました。（軽くググった感じでは明確な記述は見つけきれませんでした）
ちなみに、下記のコードを My Snow Monkey プラグイン、あるいは子テーマの functions.php に追加することで、フロントページでも div にすることができます。
add_filter(
'snow_monkey_get_template_part_args_template-parts/header/site-branding',
function( $args ) {
$args['vars']['_title_tag'] = 'div';
return $args;
},
100
);
—-
これを踏まえた上で、
SEOに詳しい方に、h１タグが表示されてないので、こちらを表示させるようにとアドバイスを受けました。
僕は SEO には詳しくないので HTML 的に正しいかどうかで判断するようにしていますが、その方が推奨するやり方があるのであれば、まず上記のフックでデフォルトの h1 を div にして、その方が推奨する位置に h1 が入るようにカスタマイズされると良いのかなと思います。
上記のツールを使用すると表示がしません。
SEOに詳しい方に、h１タグが表示されてないので、こちらを表示させるようにとアドバイスを受けました。
こちらのサイトhttps://machiyasaijou-sougi.jp/
ではツールでh１タグが表示されます。
なぜ同じ設定をしてるのに違いが出るのかがわかりません。
よろしくおねがします。
検証ツールとソースコードを確認しましたが、添付画像のように <h1> タグは出力されていますね。ですので、HTML 上では問題なさそうですが、そういうことではなくでしょうか？
