竹内由梨さん
Snow Monkey v19.0.0 で、コンテナーの左右余白について、PC とモバイルで大きさを同じにする変更が入っています。
モバイルだけ小さくしたい場合は、カスタマイザー → デザイン → 基本デザイン設定 → モバイル端末時のコンテンツの左右余白を「狭め」に変更してみてください。
それでも思ったほど狭くならない場合は CSS で調整する形になります。
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 を書くときは詳細度に気をつける、なるべく書かないようにする、という配慮をすることが影響がでにくくなるコツかなと思います。
キタジマ様
情報少なく、失礼いたしました。
[アップデート後（余白大きい）]と[アップデート前（余白小さい）]のスクリーンショットを添付いたしました。
同じ現象が多数出ておりますが、例として２つあげております。
アップデート前のイメージは検証ツールで調整したものですので、両端余白の値は実際のものとは異なりますが、イメージとしてはスクショような感じでした。
何卒、よろしくお願いいたします。
[アップデート後]
![[アップデート後]](https://snow-monkey.2inc.org/wp-content/uploads/hm_bbpui/117469/mslp95bsvyasayco4lg31qtc38hfvq6a.png)
![[アップデート後]](https://snow-monkey.2inc.org/wp-content/uploads/hm_bbpui/117469/55q1y06isuxbcyxtvewxnf9jn127mm4a.png)
[アップデート前]
![[アップデート前]](https://snow-monkey.2inc.org/wp-content/uploads/hm_bbpui/117469/0056cfel536ymeae5s59g4j5d0vgl6cf.png)
![[アップデート前]](https://snow-monkey.2inc.org/wp-content/uploads/hm_bbpui/117469/ste1jy72wd7sevibjrhd0243ji2kij3g.png)
キタジマ タカシ様
いつもお世話になっております。早急なアップデート対応・情報共有ありがとうございます。
スマホでの表示崩れについて、こちらも合わせてご確認・ご対応いただけますと幸いです。
【お使いの Snow Monkey のバージョン】19.0.0
【お使いの Snow Monkey Blocks のバージョン】18.0.0
【お使いの Snow Monkey Editor のバージョン】9.1.1
【お使いのブラウザ】chrome. safari
【当該サイトのURL】https://element-gym.com/
### 発生している問題
スマホで見た際に、一部コンテンツの幅が狭くなり（両端余白が大きい）表示崩れしております。
おそらく、SNOW MONKEY BLOCKS [共通ブロック]のコンテナーブロックを使用している箇所（max-width設定）かと思います。
よろしくお願いいたします。
キタジマさま
早速のご返信ありがとうございます。
現時点で分かる範囲で変わっている部分を記載します。
（過去の画面は以前こちらでご相談した際のスクショと比較しています）
1.英語タイトルのフォントサイズが大きくなっている
2.線の下の余白がなくなっている
3.カテゴリ名の文字と四角が大きくなっている
4.記事タイトルのフォントが大きくなっている
5.記事キャプションの文字が大きく、グレーだった文字が黒くなっている
以上になります。
いつも教えていただく度に追加CSSやMySnowMonkeyに色々追加しているので
もう何がどこの部分に関わっているのか分からない状態です。
一度リセットして一から調整した方がいいのでしょうか？
今後も長く使っていきたいブログで
常に最新の状態を保っておきたいのでアップデートしても
今後影響があまり出ないようにしたいです。
お忙しい中恐れ入ります。
ご確認のほど、よろしくお願いいたします。
承知しました。それではオンラインコミュニティ（Slack）の DM で送ってもらえますか？
もちろん、問題解決できた際はこちらに内容を掲載させていただき皆様に共有できたらと思います。
ありがとうございます、助かります！
キタジマさんのお知らせ記事に、ダウングレードしたい場合のダウンロード先が載っています。`
Snow Monkey Blocksをアップデートされたからではないですか？
v18で、タイポグラフィの設計変更が入っています。
Snow Monkey v19 で、ローカルナビゲーションにもグローバルナビゲーションと同じように data-active-menu="true" が付与されるようになりました。
ざっくりですがこんな感じでしょうか。
My Snow Monkey プラグインか子テーマの functions.php に下記のコードを追加してみてください。
// template-parts/nav/drawer の HTML を書き換え
add_filter(
'snow_monkey_template_part_render_template-parts/nav/drawer',
function( $html ) {
return str_replace(
"placeholder=\"検索 …\"",
"placeholder=\"検索できます\"",
$html
);
}
);
グローバルナビゲーションは下記のコードでカレント表示しています。
ローカルナビゲーションは特に意識していなかったのですが、確かにカレント表示できると良いかもですね。Snow Monkey 側で実装できるか試してみます。
GONSYさま
ご指導ありがとうございます。
上記の通り試してみましたが、うまくいきませんでした。
My Snow Monkeyに以下のコードを記述しました。
function my_scripts_method() {
wp_enqueue_script(
'highlight_script',
get_template_directory_uri() . '/highlight.js',
);
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
JavaScriptは以下のコードです。
function highlight_script() {
const headerNavLink = document.querySelectorAll(".wpaw-local-nav__subitem>a");
headerNavLink.forEach((targetLink) => {
if (targetLink.href === location.href) {
targetLink.parentElement.classList.add("is-current");
}
});
}
こちらを以下のサイトに入れていて、JSはHTML上にいるようですが、クラスの付与ができていないです。
何が原因でしょうか？
こんな感じでしょうか。
add_filter(
'snow_monkey_get_template_part_args',
function( $args ) {
// 記事一覧カテゴリー以外のテンプレートの場合は無視
if ( 'template-parts/loop/entry-summary/term/term' !== $args['slug'] ) {
return $args;
}
// 投稿以外の場合は無視
if ( 'post' !== $args['name'] ) {
return $args;
}
// 全ての設定されたカテゴリーを返す
$terms = get_the_terms( get_the_ID(), 'category' );
$parent_terms = [];
$child_terms = [];
foreach ( $terms as $term ) {
if ( ! $term->parent ) {
$parent_terms[] = $term;
} else {
$child_terms[] = $term;
}
}
$args['vars']['_terms'] = array_merge( $parent_terms, $child_terms );
return $args;
}
);
表示させたい条件によって変わってくると思うので、上記を参考に調整してください。
あ、あと一応このトピックは解決済みということで閉じます。
Slack は下記のページの参加ボタンから参加できます。
もしよくわからない場合は、フォーラムの不具合報告で報告いただいても大丈夫です。とても助かります！
