[firm]

【お使いの Snow Monkey のバージョン】29.1.5
【お使いの Snow Monkey Blocks のバージョン】24.1.3
【お使いの Snow Monkey Editor のバージョン】11.0.2
【お使いのブラウザ】Chrome
【当該サイトのURL】https://www.8-octo.com/

### 実現したいこと

投稿ページのレイアウトを整えたいです。

現状添付①のようにPC・SP共にページ表示時に

ホームアイコンとパンくずリスト・投稿記事タイトルが重なって見えている状態です。

またSP表示時画像要素とテキスト部分の重なりも見えます。

これらを添付②のような見た目にしたいです。

【当該サイトのURL】https://www.8-octo.com/より「News」リンク先に当該問題点があります。

解消法ありましたら教えていただきたいです。

 

### 発生している問題

### 試したこと

白地のアイキャッチ画像を設定して無理やり上部にスペースを作ってみたりしましたが

正しい方法とは思えず。（現在解除中）

画像要素とテキストの重なりも現状の知識では解消できませんでした。

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

♥ 0

Who liked: No user

[まーちゅう]

ヘッダー位置の設定がオーバレイ（上部固定）で、アイキャッチ画像を設定していないのが原因だと思います。
対応方法はいくつかあります。

1. 各投稿にアイキャッチ画像を設定する。
2. 投稿のシングルページを開いた状態でカスタマイザーを開いて「投稿ページ設定」のアイキャッチ画像の位置を「ページヘッダーの上にタイトルを表示」に変更する。
3. My Snow Monkey に以下のコードを追加して投稿ページのヘッダー位置を変更する。

/**
 * シングルページでのヘッダー位置をカスタマイズ
 *
 * @param string $value ヘッダー位置の値.
 * sticky : 上部固定
 * sticky-overlay : オーバレイ（上部固定）
 * sticky-overlay-colored : オーバーレイ（上部固定 / スクロール時背景白）
 * overlay : オーバレイ
 * '' : ノーマル
 * @return string 投稿のシングルページの場合は 'sticky' を、それ以外は元の値を返す。
 */

add_filter(
	'theme_mod_header-position',
	function ( $value ) {
		if ( is_single() ) {
			return 'sticky';
		}
		return $value;
	},
	10,
	1
);

アイキャッチ画像を設定しないのなら、2か3の方法を試してみてください。

♥ 2

Who liked:

[firm]

ご教授くださりありがとうございます。

「2」の投稿のシングルページを開いた状態でカスタマイザーを開いて「投稿ページ設定」のアイキャッチ画像の位置を「ページヘッダーの上にタイトルを表示」に変更する。

を設定してみところ理想の見え方に近づいてきました。

 

ただ、他固定ページタイトル部に付与している追加CSS（添付1）文字拡大の影響か、

投稿ページのタイトルにも同様にスタイルが適用されてしまい添付2のような見た目になってしまいました。

こちら、投稿ページのタイトルのみ追加CSSを除外し、フォーマット通りの文字サイズで表示させるにはどのようなCSSを記述するべきでしょうか？

 

知識が乏しく、デベロッパーで見てみましたがイマイチ分からず。

申し訳ありませんが、ご助言いただけると幸いです。

♥ 0

Who liked: No user

[まーちゅう]

3 の方法を試してみてください。

♥ 0

Who liked: No user

[firm]

ありがとうございます。

My Snow Monkeyの扱い未履修のため、他の方法模索して解消してみようと思います。

トピック閉じさせていただきます。

♥ 0

Who liked: No user

[投稿者]

投稿