osoujikireie's Replies

Forum Replies Created

Viewing 3 replies - 1 through 3 (of 3 total)

Forum: Themes and Templates
In reply to: [Lightning] パンくずリストのタイトルが反映されません

Thread Starter osoujikireie
(@osoujikireie)

8 months, 2 weeks ago

@kurudrive

前回に引き続きご回答いただき、誠にありがとうございました。

教えていただいたアドバイス（大元のタイトルを短くし、SEOタイトルはプラグインで設定する方法）を元に、設定を試みました。
その際、ページ内に訴求力のあるH1見出しも別途設置したところ、一つ問題が発生してしまいました。

【現在の問題】
テーマが自動生成するページヘッダーのH1と、本文に設置したH1で、H1タグが重複してしまっています。

【試したこと】
この問題を解決するため、「追加CSS」でページヘッダーを非表示にしようと、以下のコードを試しました。
.page-header { display:none; }

この方法で、見た目上はH1が一つになり、意図通りになりました。
しかし、ご指摘の通り、ページのソースコードを見ると、CSSで非表示にしたページヘッダーのがコード内に残ってしまっており、本文のH1と合わせてH1タグが2つある状態です。

【追加の質問】
SEOの観点からこのH1重複を避けるため、CSSで非表示にするだけでなく、特定の固定ページだけでページヘッダー（とその中のH1）を、HTMLコード上から完全に無効化（または削除）するための、正しい方法をご教示いただけますでしょうか。

以上、誠に恐れ入りますが、宜しくお願い致します。

Forum: Themes and Templates
In reply to: [Lightning] カバーブロックのモバイル表示CSSが効かない
Thread Starter osoujikireie
(@osoujikireie)

8 months, 4 weeks ago
Hidekazu Ishikawa様

ご返信、そして具体的な解決策のご提案、誠にありがとうございます。

ご質問いただいた、確認していた環境は以下の通りです。

端末: Google Pixel7a

ブラウザ: Google Chrome

また、今回CSSで調整しようとしていた根本的な意図としましては、「SEO対策として、テキストのH1見出しをファーストビューに設置したかった」という目的がございました。
背景画像に文字を焼き込むだけでは、H1タグが設置できないため、カバーブロックの上にH1テキストを載せる形をとっておりました。

しかし、そのためにレイアウトが複雑になり、ご指摘の通り分かりにくい状態になっていたと理解いたしました。

CSSでの調整に固執しておりましたが、VK Blocksの表示切替機能を使うという方法は、まさに目からウロコでした。
ご提案いただいた通り、一度PC用（カバーブロック＋H1）とモバイル用（文字情報を含んだ画像ブロック）でコンテンツを分け、表示を切り替える方法を試してみます。

このアプローチで解決が図れそうですので、こちらの質問は一旦クローズとさせていただきます。
大変参考になるアドバイスをいただき、本当にありがとうございました。
- This reply was modified 8 months, 4 weeks ago by osoujikireie.
Forum: Themes and Templates
In reply to: [Lightning] カバーブロックのモバイル表示CSSが効かない
Thread Starter osoujikireie
(@osoujikireie)

9 months ago
```
ご返信ありがとうございます。
説明が不足しており、失礼いたしました。目的と、現在試しているCSSコードは以下の通りです。

【目的】

トップページ（ https://osouji-kireie.com/ ）のファーストビューに設定している「カバーブロック」の、スマートフォンでの表示を最適化したいです。

現状の問題:
スマートフォンで見ると、カバーブロックの高さが大きすぎ、中の見出し文字も大きすぎるため、画面に収まらず非常に見栄えが悪くなっています。

実現したいこと:
スマートフォンで表示した際に、カバーブロックの高さを画面の7割程度に抑え、見出しの文字も適切なサイズになるように調整したいです。

【試しているCSSコード】

以下のコードを、WordPressの「追加CSS」に入力して、上記の実現を目指しています。

CSS

/* --- トップページ ファーストビュー調整 --- */

/* テーマが作るコンテンツ上部の隙間を消す */
.home .site-body {
margin-top: 0 !important;
padding-top: 0 !important;
}

/* PC表示のスタイル */
.home .wp-block-cover {
width: 100vw;
margin-left: calc(50% - 50vw);
min-height: 100vh;
padding: 0 !important;
display: flex;
align-items: center;
justify-content: center;
}

.home .wp-block-cover h1 {
font-size: 2.5rem;
}

.home .wp-block-cover h2 {
font-size: 1.5rem;
}

/* モバイル表示のスタイル（768px以下）*/
@media screen and (max-width: 768px) {

.home .wp-block-cover {
min-height: 0 !important;
height: auto !important;
padding: 18vh 5% !important;
box-sizing: border-box !important;
}

.home .wp-block-cover .wp-block-cover__inner-container {
width: 100% !important;
}

.home .wp-block-cover h1.wp-block-heading {
font-size: 26px !important;
line-height: 1.4 !important;
margin-bottom: 15px !important;
}

.home .wp-block-cover h2.wp-block-heading {
font-size: 16px !important;
line-height: 1.6 !important;
}
}
【補足情報】

WP Super Cacheの停止や、さくらインターネットのサーバーキャッシュ（コンテンツブースト）のクリア、ブラウザキャッシュのクリアはすべて試しましたが、上記のモバイル用CSSが全く反映されない状況です。

お忙しいところ恐縮ですが、このコードで何かお気づきの点や、他に試すべき方法がございましたら、ご教示いただけますと幸いです。
よろしくお願いいたします。
```

Viewing 3 replies - 1 through 3 (of 3 total)