[キタジマ タカシ]

確かにそうですね、アドバイスありがとうございます！

トピック閉じます。

♥ 0

Who liked: No user

[キタジマ タカシ]

この左右の余白、実は Snow Monkey の中でもカスタマイズが難しい部分なのです…。カスタマイザーで設定できるようにしたいなと思ってはいるのですが、良い方法が浮かばずで手つかずになっています。

一応、下記の CSS を追加することでそれなりにはうまく動いてくれるかな？と思いますが、設定やコンテンツによっては正しく余白が確保されなかったりする部分がでてしまうかもしれません。ひとまず追加して、確認してみていただければと思います。

.c-container, .c-fluid-container {
  padding-right: 1.76923rem;
  padding-left: 1.76923rem;
}

.smb-section>.c-container, .smb-section__inner>.c-container {
  padding-right: 1.76923rem;
  padding-left: 1.76923rem;
}

@supports (padding-left:env(safe-area-inset-left)){
  .smb-section>.c-container, .smb-section__inner>.c-container {
    padding-right: calc(1.76923rem + env(safe-area-inset-right));
    padding-left: calc(1.76923rem + env(safe-area-inset-left));
  }

  .c-container, .c-fluid-container {
    padding-right: calc(1.76923rem + env(safe-area-inset-right));
    padding-left: calc(1.76923rem + env(safe-area-inset-left));
  }
}

♥ 0

Who liked: No user

[キタジマ タカシ]

@rokuzeudon さん、1行ヘッダーの場合はもう少し複雑になりそうです。

@大西さん、下記の CSS を追加してみてください。

@media (max-width: 1023px) {
  .l-1row-header__branding .c-site-branding {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-left: 52px;
  }
}

♥ 1

Who liked:

[キタジマ タカシ]

おそらくカスタマイザー → 追加 CSS 内の

/*記事内の要素*/
.wp-block-image img {
	border-radius: 4px;
	box-shadow: 0 0 4px 0 rgba(0,0,0,.1);
}

が影響していると思います。セレクタを足してもう少し条件を絞ったほうが良いかもですね。

♥ 0

Who liked: No user

[キタジマ タカシ]

こちらで試したところ、下記のように正しく表示されたのですが、もしよかったらそのページの URL を教えてもらうことは可能でしょうか？

♥ 0

Who liked: No user

[キタジマ タカシ]

下側からふわっとフェードインされるアニメーションということですよね？

追加します！

♥ 0

Who liked: No user

[キタジマ タカシ]

わーよかったです！！ご確認ありがとうございます。

♥ 2

Who liked: No user

[キタジマ タカシ]

My Snow Monkey の中に style.css をおいたとして、下記のコードを My Snow Monkey に追加することで読み込ませることができます。

// 実際のページ用の CSS 読み込み
add_action(
	'wp_enqueue_scripts',
	function() {
		wp_enqueue_style(
			'my-snow-monkey',
			untrailingslashit( plugin_dir_url( __FILE__ ) ) . '/style.css',
			[ Framework\Helper::get_main_style_handle() ],
			filemtime( plugin_dir_path( __FILE__ ) )
		);
	}
);

// エディター用の CSS 読み込み
add_action(
	'after_setup_theme',
	function() {
		add_editor_style( '/../../plugins/my-snow-monkey/style.css' );
	}
);

♥ 2

Who liked: No user

[キタジマ タカシ]

良かったです！トピック閉じます。

♥ 0

Who liked: No user

[キタジマ タカシ]

@Yamasaki さん、ご意見ありがとうございます！

フックなどでも、もちろん大丈夫ですのでご検証ください。

あ、実はすでにフックでの書き換えは可能です！後ほどでどこかに書きます。

優先する項目は上の表示されたほうが良いと思います。
・タブレット＆PC （今までの設定はここに引き継がれる）
・スマホ （未入力の場合は「タブレット＆PC 」が表示されます）

これ先の書き込みをした後も考えていたのですが、フッターの CTA 自体は、需要としては PC よりスマホなのかなぁという気がしてきたので、

・スマホ （今までの設定はここに引き継がれる）
・タブレット＆PC （未入力の場合は「スマホ」が表示されます）

にしたほうがわかりやすいかなという気がしてきました。細かい違いではありますが…。

♥ 2

Who liked: No user

[キタジマ タカシ]

あ、スライダーブロックの各画像ブロックに「表示設定（ウインドウサイズ）」を設定するのではなくて、

– PC 用スライダーブロック
– SP 用スライダーブロック

の2つのスライダーブロックをつくって、それに「表示設定（ウインドウサイズ）」を設定したらどうかなと。そして、PC 用スライダーブロックには PC 用の画像を数点、SP 用スライダーブロックには SP 用の画像を数点設定する、というイメージです。

♥ 0

Who liked: No user

[キタジマ タカシ]

おそらくですが、「WPAW：スライダー」を使うよりも、Snow Monkey Blocks プラグインと Snow Monkey Editor プラグインを組み合わせるほうが簡単だと思います。サイトがクラシックエディター利用の場合は使えませんが…。

もしブロックエディター利用の場合は下記がおすすめです。

1. Snow Monkey Blocks、Snow Monkey Editor をインストールする（ダッシュボード → プラグイン → 新規追加から可能）
2. トップページ用の固定ページの中に、スマホ用、PC 用にそれぞれ Snow Monkey Blocks のスライダーブロックを挿入する
3. Snow Monkey Editor プラグインで、↑に入れたスライダーブロックにデバイスサイズごとの表示制限を追加する（ブロックを選択 → インスペクターの「表示設定（ウインドウサイズ）」から設定）

♥ 3

Who liked: No user

[キタジマ タカシ]

あーなるほど、確かに用途的にそれは想定できますね。となると、

スマホ用、PC用と設定項目をわける形になると思うのですが、あまり項目を増やしすぎたくはないので、

・スマホ （未入力の場合は↓の設定がスマホにも使用される）
・タブレット＆PC （今までの設定はここに引き継がれる）

という形にしようかなと思うのですがどうでしょうか？

♥ 0

Who liked: No user

[キタジマ タカシ]

了解です。それではひとまず、Snow Monkey の Slack でメッセージをお送りしますので、お手すきのときに確認をお願いします！

♥ 0

Who liked: No user

[キタジマ タカシ]

こちらでもちょっと設定をいじってみて、5.0.5 から 5.0.6 にアップデートができるようにしてみたつもりなのですが、管理画面にバージョンアップ通知がでていないでしょうか…？ お手すきのときにでも確認してみていただけるとうれしいです。

♥ 0

Who liked: No user

[投稿者]

投稿