WordpressのLigtningのテーマにおいて、固定ページの子ページのヘッダーに任意の画像を表示させたい

Question

実現したいこと

WordpressのLigtningのテーマにおいて、固定ページの子ページのヘッダーのタイトルを削除し、ヘッダーには使用するPCのローカルに保存してある任意の画像のみ全幅で表示させたい

発生している問題・分からないこと

ウェブで検索し、以下実行するも、ヘッダーのタイトルと背景色は非表示になるが、表示させたい画像は表示されない(何も変化がなく何も表示されない)

該当のソースコード

element.style {
    background-color: #171791;
}
.wp-block-cover .has-background-dim:not([class*=-background-color]), .wp-block-cover-image .has-background-dim:not([class*=-background-color]), .wp-block-cover-image.has-background-dim:not([class*=-background-color]), .wp-block-cover.has-background-dim:not([class*=-background-color]) {
    background-color: #000;
}
.wp-block-cover .wp-block-cover__background, .wp-block-cover .wp-block-cover__gradient-background, .wp-block-cover-image .wp-block-cover__background, .wp-block-cover-image .wp-block-cover__gradient-background, .wp-block-cover-image.has-background-dim:not(.has-background-gradient):before, .wp-block-cover.has-background-dim:not(.has-background-gradient):before {
    bottom: 0;
    left: 0;
    opacity: .5;
    position: absolute;
    right: 0;
    top: 0;
}
*, ::after, ::before {
    box-sizing: border-box;
}
:where(.wp-block-cover-image:not(.has-text-color)), :where(.wp-block-cover:not(.has-text-color)) {
    color: #fff;
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

↑が実行後の該当のページとなります。
(変化が見られません泣)

【実行したこと】
➀以下のコードを「外観＞カスタマイズ＞追加CSS」に追加することで、
ヘッダーのタイトルと背景色は非表示になる。

/* ページヘッダーを非表示 */
h1 .entry-title,
.page-header { display:none; }

②該当の固定ページ(子ページ)にて、
以下の追加CSSを追加するも何も変化しない。

.single-post .page-header {
background-image: url(背景画像のURL);
}

@media (max-width: 575.98px) {
.single-post .page-header {
background-image: url(背景画像のURL);
}
}

入力したローカルに保存中の背景画像のURL
file:///C:/Users/ji-te/OneDrive/Desktop/work/HP/%E7%94%BB%E5%83%8F%E7%B4%A0%E6%9D%90/%E6%9C%AC%E7%95%AA/%E5%8A%A0%E5%B7%A5%E5%BE%8C/about%20us.png

補足

Answer 1

原因は主に3つです。

1. file:///C:/... のローカル画像はWebサイト上では表示できない
2. .single-post は「投稿ページ」用で、固定ページには効かない
3. .page-header を display:none; にしているため、背景画像を指定しても表示領域が消えている

そのため、まず画像を WordPressのメディアライブラリにアップロード し、画像URLを取得してください。

修正例：

/* 固定ページのページヘッダーを画像だけ表示 */
.page .page-header {
display: block;
background-image: url("https://あなたのサイトURL/wp-content/uploads/xxxx/about-us.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 300px;
}

/* タイトル文字だけ非表示 */
.page .page-header .page-header-title,
.page .page-header h1,
.page .entry-title {
display: none;
}

子ページだけに限定したい場合は、該当ページの body にある page-id-数字 を確認して、こうします。

.page-id-123 .page-header {
display: block;
background-image: url("https://あなたのサイトURL/wp-content/uploads/xxxx/about-us.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 300px;
}

.page-id-123 .page-header h1,
.page-id-123 .entry-title {
display: none;
}

結論：

ローカル画像URL file:///C:/... は使えません。
画像をWordPressへアップロードし、そのURLをCSSに指定してください。
また、.page-header を display:none にすると画像も表示されないため、タイトルだけを非表示にします。

Answer 2

https://jitech0610.com/はインターネットに公開されたサイトのようですが、そのWebサーバーからローカルPCのファイル(OneDriveのファイル？)は見えません。
対処方法は、以下のいずれかになります。

• 表示したい画像ファイルを、そのWebサーバーにアップして、相対パスか絶対パスかURLを指定する。
• 表示したい画像ファイルを別のWebサーバーにアップして、インターネット上に見えるようにして、URLを指定する。

もっと言えば、ローカルにWordPressが動く環境を作って、サイトが出来上がってからサーバーにアップしたほうがいいと思います。

※提示されたCSSが正しいかどうかは検証していません。