[キタジマ タカシ]

モバイルで見るとアイキャッチ画像が横にはみ出しているので

ページ最上部にある画像のことでしょうか？ この画像は CSS 的には横幅100% + 枠内で画像を引き伸ばして埋める（object-fit: cover）ようになっているので、幅自体は画面の幅を超えていないんです。

実際横スクロールは発生していないので Google の検証時において発生するものがあるのかもしれません。上から1つずつ要素を display: none して検証していって、何を消したときにそのエラーがなくなるか確認するのが確実かもしれませんね。

♥ 0

Who liked: No user

[キタジマ タカシ]

現在「コードエディター」になっているようです。コードエディター上部にある「コードエディターを終了」をクリックするか、ページ右上にある3点ボタン→ビジュアルエディターをクリックしてみてください。

♥ 0

Who liked: No user

[キタジマ タカシ]

ちょっと僕もスクロール処理が苦手なのでぱっとコードを提示することは難しいです、すみません。

スクロール時に処理を実行するコードは以下、

// ページがスクロールするたびに実行
window.addEventListener(
  'scroll',
  () => {
    // ここに実行したいコード
  },
);

要素のスクロール位置を制御するのは以下

// .target クラスを持つ要素を全取得
const targets = [].slice.call(document.querySelectorAll( '.target' ));
// .target クラスを持つ要素の横スクロール位置を0にする
targets.forEach((target) => {
  target.scrollLeft = 0;
});

でできるかと思いますので、組み合わせてトライアンドエラーでやってみてください！ ただ、繰り返しになりますがスクロール処理は扱いが難しいですし、ユーザーも使いづらくなることのほうが多いと思いますので、個人的には横スクロールをしないレイアウトにするのが良いと思います。

♥ 0

Who liked: No user

[キタジマ タカシ]

@西澤さん
解決済みの場合はトピックを閉じていただけると助かります！

♥ 1

Who liked:

[キタジマ タカシ]

デフォルトでは AND 条件で一致するものが抽出されます。条件を変更したい場合は snow_monkey_related_posts_args フィルターフックで変更できます。

♥ 2

Who liked:

[キタジマ タカシ]

モバイルフレンドリーは僕も詳しくないのですが、「クリック可能な要素同士が近すぎます」「コンテンツの幅が画面の幅を超えています」が具体的にページのどの部分のことかってわかったりするのですかね？

♥ 0

Who liked: No user

[キタジマ タカシ]

「任意のタクソノミーの投稿」ブロックのカルーセルは自動的に全件表示にはなりません。カルーセルにしたあと、表示件数を設定する必要があります（現状、max12件までひょうじできます）。もし件数指定をしていない場合は件数を4件以上に変更してみてください。

♥ 0

Who liked: No user

[キタジマ タカシ]

下記の CSS で実現できるかと思います。

.smb-spider-slider .smb-spider-slider__figure-wrapper .spider__figure {
  object-fit: contain;
}

ただ、すべてのスライダーブロックに反映されてしまうので、適当な CSS クラスをブロックに追加して、そのクラスに適用されるようにセレクタを調整してください。

♥ 1

Who liked:

[キタジマ タカシ]

読み込まれている js ファイル（ https://nekosippo.com/wp/wp-content/plugins/my-snow-monkey/js/main.js ) をみてみると、misoCalc() は定義してありますが、ページ上のボタンには misoCalc() を呼び出すコードが無いようにみえます。js ファイルに addEventListner を記述するか、ボタンに onClick 属性を追加するなどの対応が必要ではないですかね？

♥ 0

Who liked: No user

[キタジマ タカシ]

それぞれのスクロール箇所に制御用の class を追加して、ページをスクロールしたらそれらの class の scrollLeft を0にする、とかですかね。

Element.scrollLeft – Web API | MDN

Element.scrollLeft プロパティは、要素の内容が左端からスクロールするピクセル数を取得または設定します。

developer.mozilla.org

実際のところ、スクロールの制御を完璧にするのはかなり難しいです。ユーザーも意図しない挙動になったと感じて操作しにくくなることのほうが多いと思います。個人的にはスクロールが不要なレイアウトにするのが良いと思います。

♥ 0

Who liked: No user

[キタジマ タカシ]

設定にはありませんので CSS でカスタマイズする必要があります（CSS によるカスタマイズはアップデート時に影響が出る可能性があるためご注意ください）。カスタマイザー → 追加 CSS に下記の CSS を追加してみてください。

// ボタンのサイズ
.c-hamburger-btn__bars {
    width: 26px;  // 好きなサイズを設定
    height: 18px; // バーの太さと位置から計算して設定
}

// バーの太さ
.c-hamburger-btn__bar {
    height: 2px;
}

// 2本目のバーのy位置
.c-hamburger-btn__bar:nth-of-type(2) {
    top: 8px;
}

// 3本目のバーのy位置
.c-hamburger-btn__bar:nth-of-type(3) {
    top: 16px;
}

// MENU の文字サイズ
.c-hamburger-btn__label {
    font-size: 12px;
}

♥ 0

Who liked: No user

[キタジマ タカシ]

としたところ、良さそうな気がするのですが、こちらのコードで問題はありそうでしょうか？

各デバイスサイズで確認してみて意図しない崩れがないのであれば大丈夫ではないですかね？ただし、CSS でカスタマイズする場合は Snow Monkey / Snow Monkey Blocks 等のアップデート時に影響がでる可能性があるので、その際は再チェックが必要かと思います。

♥ 2

Who liked:

[キタジマ タカシ]

もし古いバージョンの Snow Monkey Blocks を使っていて、そのアップデートを直近でおこなったのであればその影響はあるかもしれません（WordPress 本体のアップデートの影響というのはあまり考えられないかなと思います）。

いただくたスクショの見た目はセクション（ブロークングリッド）ブロックのほぼデフォルトの見た目に見えるので、ブロックの再設定をされるか、あるいは半々で表示したいのであればセクション（ブロークングリッド）ブロックではなくメディアとテキストブロックのほうがあっているかもしれません。

♥ 0

Who liked: No user

[キタジマ タカシ]

あ、一応確認ですが、どのブロックスタイルを選択してもしなくても背景色を設定すると左に寄っている感じがするのですが、認識あっていますかね？

♥ 0

Who liked: No user

[キタジマ タカシ]

確かに！ 次回のアップデートで対応します！

♥ 0

Who liked: No user

[投稿者]

投稿