[キタジマ タカシ]

モバイルのときはヘッダーが狭くてヘッダーコンテンツをそのまま表示すると潰れてしまう可能性が高いので、.l-contents > .p-header-content.p-header-content--sm の位置に表示されるような仕様になっています。

PC と同じ p-header-content.p-header-content--lg をモバイルでも表示したい場合は、CSS で display を調整して表示する形になります。

♥ 0

Who liked: No user

[キタジマ タカシ]

// 抜粋の表示を有効化
$args['vars']['_display_item_excerpt'] = true;

の指定で HTML としては出力されていると思うので、CSS も追加して表示されるか確認してみてください。

.c-entries--text2 .c-entry-summary__content {
    display: block;
}

♥ 0

Who liked: No user

[キタジマ タカシ]

の286pxの定義についてなぜその数字になるのか、今後の勉強のために教えていただけないでしょうか？

僕が確認したときの左右の幅がだいたい 286px だったので、中央のカラムは画面幅からその大きさを引いた大きさを指定しました。左右の幅がなぜ 286px なのかは追えませんでした…。

スマホ版GoogleCromeで確認した場合も固定がされていませんでした、、
こちらも同じ理由でしょうか？

あ、中央は意識してませんでした、すみません。固定されていない理由は同じだと思います。中央の背景画像も position: fixed で固定するようにすればスマホでも固定されると思います。

♥ 0

Who liked: No user

[antevasin]

ご丁寧にありがとうございます。

 

いただいたいた提案でも一度実装してみましたが、どうも上手くいきませんでした、、

スマホでは両サイドを非表示にするのですが

いただいたCSSを参考に（かなり強引なやり方ではありますが；）

下記のように実装をさせていただくことにしました。

 

.coverfix_left {
width:15%;
z-index:99;
position:fixed;
left: var(–body-margin-left);
}

.coverfix_center .wp-block-cover__inner-container {
max-width: 60%;
margin-right: auto;
margin-left: auto;
}

.coverfix_right {
width:15%;
position:fixed;
right: 0;
}

 

ちなみに

中央の『max-width: calc(100vw – var(–body-margin-left) – 286px * 2);』

の286pxの定義についてなぜその数字になるのか、今後の勉強のために教えていただけないでしょうか？

 

また、

現状はカバーブロックは背景固定にしていないという認識であっていますかね？

カバーブロックの背景固定は、background-attachment fixed で背景画像を固定する仕組みのようなのですが、iOS Safari は background-attachment fixed が効かない仕様になっているみたいです。なのでスマホでも固定したい場合は独自に実装する必要があります。

とのことですが、

現状でも背景固定は中央のカラムのみを下記画像のように設定していました。

PCでは中央ピンクの背景は固定されているのですが、

スマホ版GoogleCromeで確認した場合も固定がされていませんでした、、
こちらも同じ理由でしょうか？

何度も申し訳ございませんm(_ _)m

♥ 0

Who liked: No user

[キタジマ タカシ]

My Snow Monkey プラグインか、子テーマの functions.php に下記のコードを貼り付けるとどうでしょうか？ 条件分岐については適宜書き換えてください。

add_filter(
	'option_mwt-google-tag-manager-id',
	function ( $value ) {
		// about ページのときは無効化する
		if ( is_page( 'about' ) ) {
			return false;
		}
		return $value;
	}
);

♥ 1

Who liked:

[キタジマ タカシ]

僕もはじめて見るエラーなのでわからないのですが、ぐぐってみると下記のページが見つかりました。

【解決方法】Non-existent changeset UUID.が出てカスタマイザーでプレビューできない

久しぶりにログインしたWordpressサイトでカスタマイザーを起動したら、Non-existent changeset UUID.というメッセージが出て、ライブプレビューが起動しません。 検索し…

nldot.info

実際のWebサイトのURLとWordPressの一般設定に保存されているURLが一致しない場合 に発生します。

URL の設定を一度確認してみると良いかもしれません。

♥ 0

Who liked: No user

[キタジマ タカシ]

下記のコードを My Snow Monkey プラグインに追加してみてください。

/**
 * 記事下部のデフォルトのタグ表示を消す
 */
add_filter(
	'snow_monkey_get_template_part_args_templates/view/content',
	function( $args ) {
		$args['vars']['_display_tags'] = false;
		return $args;
	}
);

♥ 0

Who liked: No user

[キタジマ タカシ]

下記のコードを My Snow Monkey プラグインに追加するとどうですかね？

add_filter(
	'vkfs_theme_hook_array',
	function ( $theme_hook_array ) {
		$theme_hook_array['snow-monkey'] = 'snow_monkey_before_archive_entry_content';
		return $theme_hook_array;
	}
);

あるいは、並び替えを pre_get_posts でやるか。

♥ 0

Who liked: No user

[キタジマ タカシ]

Snow Monkey Forms はボタンをクリックすると裏で処理が走り、処理が正しく終了すると確認画面用の HTML が送られてきて、それが画面に反映されます。ずっとぐるぐるのままで画面に反映されないということは、裏でおこなわれる処理が正しく終了していない可能性が高いです。

下記はボタンをおしたときの画面ですが、裏でおこなわれる処理（WordPRess REST API でおこなわれる処理）でエラーが起きていることが確認できました。

<br/><b>Warning</b>: Attempt to read property "ID" on null in <b>/xxxxx/public_html/wp-content/plugins/catch_the_lptools/lib/custom_post.php</b> on line <b>1275</b><br/>"{\"method\":\"invalid\",\"data\":{\"select\":\"\u9805\u76ee\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\",\"fullname\":\"\",\"furigana\":\"\",\"email\":\"\",\"tel\":\"\",\"message\":\"\",\"snow-monkey-forms-meta\":{}},\"controls\":{\"select\":\"<div class=\\\"smf-select-control\\\">\\n\\t\\t\\t\\t<select name=\\\"select\\\" class=\\\"smf-select-control__control\\\"><option value=\\\"\u9805\u76ee\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\\\" selected=\\\"1\\\">\u9805\u76ee\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044<\\\/option><option value=\\\"\u30b5\u30fc\u30d3\u30b9\u5185\u5bb9\u3092\u3082\u3063\u3068\u8a73\u3057\u304f\u77e5\u308a\u305f\u3044\\\">\u30b5\u30fc\u30d3\u30b9\u5185\u5bb9\u3092\u3082\u3063\u3068\u8a73\u3057\u304f\u77e5\u308a\u305f\u3044<\\\/option><option value=\\\"\u76f8\u7d9a\u767a\u751f\u524d\u306e\u3054\u76f8\u8ac7\\\">\u76f8\u7d9a\u767a\u751f\u524d\u306e\u3054\u76f8\u8ac7<\\\/option><option value=\\\"\u76f8\u7d9a\u30b3\u30f3\u30b5\u30eb\u30c6\u30a3\u30f3\u30b0\u9867\u554f\u5951\u7d04\\\">\u76f8\u7d9a\u30b3\u30f3\u30b5\u30eb\u30c6\u30a3\u30f3\u30b0\u9867\u554f\u5951\u7d04<\\\/option><option value=\\\"\u4e8b\u696d\u627f\u7d99\u30b3\u30f3\u30b5\u30eb\u30c6\u30a3\u30f3\u30b0\u9867\u554f\u5951\u7d04\\\">\u4e8b\u696d\u627f\u7d99\u30b3\u30f3\u30b5\u30eb\u30c6\u30a3\u30f3\u30b0\u9867\u554f\u5951\u7d04<\\\/option><option value=\\\"\u8b1b\u6f14\u30fb\u8b1b\u5e2b\u4f9d\u983c\\\">\u8b1b\u6f14\u30fb\u8b1b\u5e2b\u4f9d\u983c<\\\/option><option value=\\\"\u76f8\u7d9a\u7a0e\u7533\u544a\u624b\u7d9a\u304d\\\">\u76f8\u7d9a\u7a0e\u7533\u544a\u624b\u7d9a\u304d<\\\/option><\\\/select>\\n\\t\\t\\t\\t<span class=\\\"smf-select-control__toggle\\\"><\\\/span>\\n\\t\\t\\t<\\\/div>\\n\\t\\t\\t\",\"fullname\":\"<div class=\\\"smf-text-control\\\">\\n\\t\\t\\t\\t<input type=\\\"text\\\" name=\\\"fullname\\\" value=\\\"\\\" placeholder=\\\"\u76f8\u7d9a\u3000\u592a\u90ce\\\" class=\\\"smf-text-control__control\\\" data-invalid=\\\"1\\\">\\n\\t\\t\\t<\\\/div>\\n\\t\\t\\t\\n\\t\\t\\t<div class=\\\"smf-error-messages\\\">\\n\\t\\t\\t\\t\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\u3002\\n\\t\\t\\t<\\\/div>\",\"furigana\":\"<div class=\\\"smf-text-control\\\">\\n\\t\\t\\t\\t<input type=\\\"text\\\" name=\\\"furigana\\\" value=\\\"\\\" placeholder=\\\"\u30bd\u30a6\u30be\u30af\u3000\u30bf\u30ed\u30a6\\\" class=\\\"smf-text-control__control\\\" data-invalid=\\\"1\\\">\\n\\t\\t\\t<\\\/div>\\n\\t\\t\\t\\n\\t\\t\\t<div class=\\\"smf-error-messages\\\">\\n\\t\\t\\t\\t\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\u3002\\n\\t\\t\\t<\\\/div>\",\"email\":\"<div class=\\\"smf-text-control\\\">\\n\\t\\t\\t\\t<input type=\\\"email\\\" autocomplete=\\\"email\\\" name=\\\"email\\\" value=\\\"\\\" placeholder=\\\"sozoku@example.co.jp\\\" class=\\\"smf-text-control__control\\\" data-invalid=\\\"1\\\">\\n\\t\\t\\t<\\\/div>\\n\\t\\t\\t\\n\\t\\t\\t<div class=\\\"smf-error-messages\\\">\\n\\t\\t\\t\\t\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\u3002\\n\\t\\t\\t<\\\/div>\",\"tel\":\"<div class=\\\"smf-text-control\\\">\\n\\t\\t\\t\\t<input type=\\\"tel\\\" name=\\\"tel\\\" value=\\\"\\\" placeholder=\\\"000-0000-0000\\\" autocomplete=\\\"tel-national\\\" class=\\\"smf-text-control__control\\\">\\n\\t\\t\\t<\\\/div>\\n\\t\\t\\t\",\"message\":\"<div class=\\\"smf-textarea-control\\\">\\n\\t\\t\\t\\t<textarea name=\\\"message\\\" rows=\\\"5\\\" class=\\\"smf-textarea-control__control\\\" data-invalid=\\\"1\\\"><\\\/textarea>\\n\\t\\t\\t<\\\/div>\\n\\t\\t\\t\\n\\t\\t\\t<div class=\\\"smf-error-messages\\\">\\n\\t\\t\\t\\t\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\u3002\\n\\t\\t\\t<\\\/div>\"},\"action\":\"<span class=\\\"smf-button-control\\\">\\n\\t\\t\\t\\t<button type=\\\"submit\\\" class=\\\"smf-button-control__control\\\" data-action=\\\"confirm\\\">\u78ba\u8a8d\u753b\u9762\u3078<span class=\\\"smf-sending\\\" aria-hidden=\\\"true\\\"><\\\/span><\\\/button>\\n\\t\\t\\t<\\\/span><input type=\\\"hidden\\\" name=\\\"snow-monkey-forms-meta[method]\\\" value=\\\"confirm\\\">\",\"message\":\"\"}"

catch_the_lptools というプラグインの1275行目でエラーがでているようなので、そのプラグインの処理を見直してみたほうが良いと思います。

♥ 0

Who liked: No user

[キタジマ タカシ]

カバーでの背景固定はやってみましたがセクションが固定するわけではありませんでした。

現状はカバーブロックは背景固定にしていないという認識であっていますかね？

カバーブロックの背景固定は、background-attachment fixed で背景画像を固定する仕組みのようなのですが、iOS Safari は background-attachment fixed が効かない仕様になっているみたいです。なのでスマホでも固定したい場合は独自に実装する必要があります。

〜しましたが真中のセクションだけが表示されます。

position: fixed にすると、その要素は「表示されるレイヤーが変わる」ような形になるので、左右を position: fixed にすると真ん中のカバーブロックと同一のレイヤーには何も存在しない = いっぱいに広がる、という感じになります。

一応それっぽく表示されるような CSS を書いてみました。

@media (min-width: 1024px) {
    .coverfix_left {
        position:fixed;
        left: var(--body-margin-left);
    }

    .coverfix_center .wp-block-cover__inner-container {
        max-width: calc(100vw - var(--body-margin-left) - 286px * 2);
        margin-right: auto;
        margin-left: auto;
    }

    .coverfix_right {
        position:fixed;
        right: 0;
    }
}

が、画面幅が1024px〜1200pxくらいのときの真ん中のコンテンツの表示が結構きついので、個人的にはレイアウトを考え直したほうがベターなのかなぁと思いました。

背景固定画像があくまで装飾で、画像のここからここまでをきっちり見せたい、というようなことがないのであれば、下記のような方法にするのも良いのかなと思いました。

– 「Thanks…for coming.〜」という文字列は無し
– カバーブロックを使うのをやめる
– 適当なフックで背景画像用の画像を追加し、position: fixed して位置も調整する（背景画像を表示するのがこのページだけならフックを使わずにエディターで画像ブロックを入れて class を追加して〜でも良いかも）

♥ 0

Who liked: No user

[Katsuyuki Murasaka]

2024年4月17日現在、自然に症状は直りました。なぜかは分かりませんが助かりました。

ありがとうございます。

Snow Monkeyバージョン: 25.4.3
Snow Monkey Blocksバージョン 20.5.2
Snow Monkey Editorバージョン 9.4.0

♥ 1

Who liked:

[antevasin]

いつもお世話になっております。

どうしても解決できなかったため初歩的で申し訳ありませんがご教授お願いいたします(＞人＜)

【お使いの Snow Monkey のバージョン】 25.4.3
【お使いの Snow Monkey Blocks のバージョン】 20.5.2
【お使いの Snow Monkey Editor のバージョン】 9.4.0
【お使いのブラウザ】 Google Chrome
【当該サイトのURL】 （管理者により削除）

### 実現したいこと

横並びで、両サイドのセクションをスクロールで固定したい
＆
モバイルでカバー背景を固定したい

### 発生している問題

当初のデザインはPCでも１カラムでしたが、背景画像が固定が反映されず指定の画像が荒くなりうまく表示できませんでした。

そのため、別の対応としてPCでは３カラム、モバイルでは１、３列目を非表示にして１カラムというデザインに変更にすることで、ある程度画像が理想のサイズで表示できるようにはなりましたが１、３列目が同時にスクロールされるため固定したいのですが純粋にカスタマイズ方法がわかりません、、、

### 試したこと

カバーでの背景固定はやってみましたがセクションが固定するわけではありませんでした。

各セクションはカバーで１,３列目はフルハイトにしています。

CSSは左右のセクションにそれぞれ.coverfix_left、.coverfix_rightを付けて

/*ABOUTページ*/
.coverfix_left{
  position:fixed;
  top:0;
  left:0;
  z-index: -1;
}

.coverfix_right{
  position:fixed;
  top:0;
  right:0;
  z-index: -1;
}

をしましたが真中のセクションだけが表示されます。

CSSの初歩的な質問で大変申し訳ありませんが、今後モバイルファーストのデザインを勉強したため別のやり方でも構わないので黒背景部分が出ないようにできるカスタマイズ方法を知りたいです。

カバーで背景固定をオンにしているのに固定されないのはなぜなのかご教授いただけますと幸いです。

[m.yosh]

キタジマさんご返答ありがとうございます。

var(--_padding-1) をたどって行ってみますと

--_padding-1 : var(--_s-1);
　　↓
--_s-1: calc(var(--_ms1) * 1rem);
　　↓
--_ms1: calc(var(--_space-unitless) / 3 * 2);
　　↓
--_space-unitless: 0.8;

この --_space-unitless が他のサイトでは 1.8 になっているという違いでした。
つまりカスタマイザーの基本デザイン設定の「余白サイズ」デフォルト1.8 がこのサイトでは 0.8 に変更されていたのが原因と判明しました(^^;

すっきりしました。
しかしこんな複雑な構造になっていたのですね(^^;`

トピックを閉じます。

♥ 1

Who liked:

[*****]

[ プライベートトピックのため非表示 ]

♥ 1

Who liked:

[キタジマ タカシ]

Snow Monkey + Snow Monkey Forms + Table of Contents Plus だけのシンプルなテスト環境をつくってみたのですが、問題は再現できませんでした。

Contact Form Test

sm-toc-test.instawp.xyz

もしかしたら他のプラグインやカスタマイズコードが影響しているのかもしれません。

♥ 0

Who liked: No user