[キタジマ タカシ]

追記です。

### 前提条件

調査してわかったところを詳しく書きます。
まず、前提として、Snow Monkey v19.0.0 からサイドバーがあるページレイアウトにおいて、サイドバーがメインカラムの下に落ちるタイミングが変更になりました。これまではウィンドウサイズが 1023px 以下になったときでしたが、v19.0.0 からは、メインカラムが 46rem（= 基本文字サイズ x 46）を維持できなくなったとき、になりました。Murasaka さんのサイトは基本文字サイズが 18px だと思うので、メインカラムの幅が 46 x 18 = 828px を維持できなくなるとカラムが落ちます。

### 画像の大きさについて

次に、v18 まではメインカラムの中身がどんな大きさでも、ウインドウサイズが 1024px 以上であれば絶対に2カラムで表示させるというような設計になっていました。ただ、それだと大きなコンテンツがあったときに隠れてしまうという問題もあるので、v19.0.0 からは、大きなコンテンツがあるときはなるべくそのコンテンツのサイズで見せる、という設計に変更しました。これにより、例えばすごく大きな画像があるときは大きなまま画像を見せようとするために、サイドバーがカラム落ちするということが起こりえます。

調べてみると、「皇居馬場先門から帝劇ビル（劇場）を望む」の画像には width: 3264px; とすごく大きな横幅が設定されており、これがカラム落ちの原因になっているのかもしれません。

おそらく画像に横幅が指定されていると思うので、記事の編集画面を開いて横幅の設定を消すと改善されないかな？と思うので、一度試してみてください。

それでもどうしてもダメな場合は、CSS を追加して、強制的に2カラムを維持するようにするしかないかなと思います。必要であれば CSS を書いてみるので、とりあえず上記を試してみて、どうするかご検討ください！

♥ 0

Who liked: No user

[キタジマ タカシ]

動画ありがとうございます。何かが読み込まれるタイミングで大きさが変わっちゃって落ちるんですかね…。

追加した CSS がまだ残っていますよね？ 何の影響か調べるためになるべく余計なものがないほうが良いので、追加した CSS は削除してください。よろしくおねがいします！

♥ 0

Who liked: No user

[キタジマ タカシ]

予定は特になかったです！

よく見かけるのはホバーでストップする機能かなと思うのですが、ボタンで明示的に止めるのも良さそうですね。ボタンをどこに配置するかは考えないといけないかなと思いますが…。

プルリクいただけるのはめっちゃうれしいです！spider の各ボタンは使い手がそのボタンの HTML を書けば機能する（DOM の自動生成はナシ）ようになっているので、それに沿った形であれば全然マージします！！

♥ 4

Who liked:

[キタジマ タカシ]

早速のご確認ありがとうございます！解決済みということでトピックをクローズしてください。

♥ 0

Who liked: No user

[キタジマ タカシ]

Snow Monkey Blocks v18.0.1 で修正してみました。アップデートして確認してみてください！

♥ 1

Who liked:

[キタジマ タカシ]

yuriさん
Snow Monkey Blocks v18.0.1 で機能追加しました！

♥ 1

Who liked:

[キタジマ タカシ]

Snow Monkey Blocks v18.0.1 で fallback.css からいくつかの CSS を削除しました。

♥ 0

Who liked: No user

[キタジマ タカシ]

ちょっと修正を入れた Snow Monkey v19.0.1 をリリースしました。先程追加した CSS を削除してからアップデートして、どうなるか確認してみてください。お手数おかけいたしますがよろしくおねがいします！

♥ 0

Who liked: No user

[キタジマ タカシ]

んーなんでしょうね…もしかしたら Facebook のウィジェットが iframe なのでその影響もあるかもしれませんが…もうちょっと確認してみます。

♥ 0

Who liked: No user

[キタジマ タカシ]

ありがとうございます！

下記の CSS を、カスタマイザー → 追加 CSS に追加してみてもらえますか？

[data-has-sidebar=true] .l-contents__main {
  max-width: min(100%, var(--wp--custom--slim-width));
}

[data-has-sidebar=true] .l-contents__sidebar {
  max-width: 100%;
}

追加したあと、もう一度先程のページを開いてブラウザをリロードしてみてください。

もしこれで解決するようであれば、次のアップデートに上記の CSS を入れ込みます。

♥ 0

Who liked: No user

[キタジマ タカシ]

すみません、崩れたページの URL を教えてください。

♥ 0

Who liked: No user

[キタジマ タカシ]

竹内由梨さん
確認ありがとうございます！ Snow Monkey Blocks の次のアップデートで、コンテナーブロックに「左右のスペースを削除する」設定が追加されます。良かったら後日試してみてください。

♥ 1

Who liked:

[キタジマ タカシ]

URL 受け取りました。ありがとうございます。どうもメディアの位置の設定とモバイルの並び順の設定の組み合わせで正しく反映されない場合があるようです。次のアップデートで修正入れます！

♥ 0

Who liked: No user

[キタジマ タカシ]

竹内由梨さん
Snow Monkey v19.0.0 で、コンテナーの左右余白について、PC とモバイルで大きさを同じにする変更が入っています。

Snow Monkey v19.0.0 をリリースしました

Snow Monkey のメジャーアップデートである v19.0.0 をリリースしました！メジャーアップデート…

snow-monkey.2inc.org

モバイルだけ小さくしたい場合は、カスタマイザー → デザイン → 基本デザイン設定 → モバイル端末時のコンテンツの左右余白を「狭め」に変更してみてください。

基本デザイン設定

サイト全体で共通する、基本的なデザインの設定がまとめられた設定パネルです。設定はカスタマイザーから行います。 …

snow-monkey.2inc.org

それでも思ったほど狭くならない場合は CSS で調整する形になります。

♥ 1

Who liked:

[キタジマ タカシ]

JKDECOR さん
ありがとうございます！
トップページの HTML 構造、ちゃんと最新版になっているみたいです。

文字サイズ等の調整について、CSS を書いてみました。ブラウザのサイズが 639px 以下のときに適用されます。必要に応じて調整してください。

@media (max-width: 639px) {
    .c-container {
        --_container-margin: calc(var(--_s1) * .5);
    }

    .c-entries {
        --entries--gap: calc(var(--_margin1) * .5);
    }

    .c-entry-summary__title {
        font-size: 1rem;
    }

    .c-entry-summary__content {
        color: var(--wp--preset--color--sm-dark-gray);
        font-size: .75rem;
    }

    .smb-section__title {
        font-size: 1.5rem;
    }

    .c-entry-summary__term {
        font-size: .75rem;
    }
}

いつも教えていただく度に追加CSSやMySnowMonkeyに色々追加しているので
もう何がどこの部分に関わっているのか分からない状態です。

なるべくコメントを入れるようにしたほうが良いと思います。web を受託制作しているような方でも（もちろん僕でも）このコードなんだっけ？となるので笑
ただ、追加 CSS はなぜかコメントを入れていると正しく動かなくなる場合があるみたいなので、もしそうなったときは My Snow Monkey プラグインの中に CSS ファイルを作成して読み込むような形に変更する必要があるかもしれません。

一度リセットして一から調整した方がいいのでしょうか？

本当はそうしたほうが管理面や速度面、意図せぬ不具合が発生しにくいという面でも良いとは思いますが、JKDECOR さんが CSS を理解して整理しないと難しいかもしれません。もし知り合いに CSS や WordPress に理解がある方がいらっしゃるのであれば、そのような方にお願いしてみるのがベストかなと思います。

今後も長く使っていきたいブログで
常に最新の状態を保っておきたいのでアップデートしても
今後影響があまり出ないようにしたいです。

なるべく影響がでないようにアップデート作業をしているつもりなのですが、どうしても（ミス、意図的によらず）多少影響はでてしまいます。これは Snow Monkey に限らず WordPress でもそうで、Snow Monkey のアップデートで WordPress の変更の影響が出ないような調整もおこなっています。基本的に CSS や PHP などのコードを書いてのカスタマイズについては、書けば書くだけどうにでもできてしまうものなのでこちらで完全に動作保証することはできません。どうしても自己責任となってしまうので、コードにはなるべくコメントを書く、CSS を書くときは詳細度に気をつける、なるべく書かないようにする、という配慮をすることが影響がでにくくなるコツかなと思います。

♥ 0

Who liked: No user

[投稿者]

投稿