フォーラムへの返信
-
投稿者投稿
-
本来折り返しがきくべきところだと思うのですが、効いていないようです。
これはもともとの CSS の設計が甘かったようです。確認してアップデートで修正を入れたいと思います。お急ぎであれば
.smf-file-controlと.smf-file-control > labelをflex-wrap: wrap !importantすればとりえあえずは折り返すと思います。また直接関係はなさそうですが、「解除」ボタンもテキストリンク?のアンダーラインがアップデート情報の参考画像では付いていたと思うのですが、こちらも付いていないようで、これは何か原因がありますでしょうか?
これはこちらの環境では下線が表示されているっぽいです。もし独自に CSS を追加されているのであれば、その影響がないか確認してみてください。
♥ 0Who liked: No userまず、下記について教えてください。
– 投稿タイプは「イベント」?
– 「対話の庭 vol.6」は、何というカスタムタクソノミーの何というタームに割り当てていますか?♥ 0Who liked: No user実際にはメディアクエリというか、PHPでの条件分岐の書き方の情報だったのかなと思いました。
なるほどです。記事をみた感じだと、確かにメディアクエリではなくて UA で条件分岐させる方法みたいでした。
『Blocks Animation: CSS Animations for Gutenberg Blocks』プラグインを別で入れているので、こちらを使い別ページのブロック内で仮にアニメーションを付与したバナー画像を作り、ブロックをHTML化することでCSSへの追加記述無く簡単なアニメーションまで実装できました。
アニメーションも便利なプラグインがあるんですね…。
解決済みということで、トピックのクローズをお願いします!
ブロックに用意されているフィルターフックの一覧表などはあるのでしょうか。
ある程度はこの公式サイトのお知らせ記事に書いているとは思いますが、まとまっているものはありません…すみません。
/wp-content/plugins/snow-monkey-blocksを VS Code 等で開いて、apply_filtersで全文検索するのが確実ではあります。Snow Monkey テーマのフックについては GitHub の wiki にまとめていますが、こちらももしかしたら漏れがあるかもしれないので、VS Code 等で全文検索するのが確実だとは思います…。
カスタムフィールドにはどのようなデータでも保存できるので、Snow Monkey Blocks のカスタムフィールドブロックでは表示したいカスタムフィールドの指定だけをして、シンプルにそれを出力する、という仕様にしています。
確かにフォーマットを選択できる UI があれば便利かなとは思いますが、あらゆるフォーマットを追加し続けないといけなくなりそうなので、どういう UI が適切か(または僕の技術力的に可能なのか)が難しいかなと感じます。
一応フィルターフックが通るようにはしているので、コードを書けば好きなフォーマットで出力することは可能です。
add_filter( 'snow_monkey_blocks_custom_field_value_カスタムフィールド名', function( $value, $post_id ) { return $value; // ここで好きなフォーマットに変換して返す } );現状、下記のコード最上部にあるCSSが効いており、.wp-block-imageクラス配下にある、すべてのimgに対してスタイルが設定(height: auto;)されているようなので。
あ、
widthが HTML or CSS で指定してあってheight: autoな場合だと、多分その画像のもとの比率を保った状態で表示枠が確保されて、そして画像がロードされる(はず)なので、多分それは問題ないのかなと思います。widthもheightも両方autoの場合だとか(すみません、これ未検証なので実際どうなるかはわかりません)、HTML 上のwidthを上書きするように CSS でwidthが指定してあるとかだとずれることがありそうだなと。②もしかしたらですが(根拠はないのですが)、imgにloading=”lazy”(遅延読み込み)が自動付与されていますが、decoding=”async”(画像の非同期デコード)も自動付与されていることは関係ないでしょうか?
可能性はあるかもですが、この公式サイト上ではズレないので、別な要因、あるいは別な要因との組み合わせ、という可能性のほうが高いのではないかなと思います。
前に書きましたが、やはり
んーとなると width・height 以外の別の要因ですかねー。一旦コンテンツをガバっと消して、少しずつ戻していきながら都度都度スクロールが正しく動作するか確認していき、正しく動作しないものがでてきたらその場所が原因だとわかるので、さらに具体的に原因を追求していく、という感じで絞り込んでいくのが良いのかなと思います。
が確実かなと思います。あとは一旦、独自に追加した CSS をすべて消して試してみるとか、高速化プラグインを入れているなら無効化してみる、とか。
♥ 0Who liked: No user②ちなみに、あまりよくない&実際に試してはいないのですが、下記の記述等で画像の読込遅延(Lazy loading)の機能を停止するアプローチでも、今回の症状は改善される可能性はあるのでしょうか?
どうなんでしょう? 基本的には
width・heightがあれば画像が読み込まれていなくても画像の表示範囲は確保されているとおもているのですが、試してみるのも良いかもしれませんね。③色々と検索してみたのですが、管理画面上で高さ(CSS)を設定しなくても、最初からhtml上で高さも幅も設定されているのに、画像の専有面積として認識されないのはなぜなのだろうと少し疑問に思ってしまいました。(勉強不足ですみません)
なんですかねー。CSS のほうで画像の幅も高さも auto にしている部分があれば、
widthとheightがあっても無効化されちゃうと思うので、もしそういう CSS を追加されているのであればそういう影響はあるかもしれません。■ちゃんと値が設定されている
width=”330″ height=”365″
※PXでないから?や、これはこれで問題無いはずです。
♥ 0Who liked: No userキタジマ様の意図する内容:管理画面上で幅と高さが設定されてない(自動)のもの。
私の認識:html上でwidth・heightが設定されていないもの。あ、僕も「html上でwidth・heightが設定されていないもの」という認識でした。
管理画面上の高さが「style=”width:auto;height:355px”」にてhtml上に反映され、u-smooth-scrollの計算式に合算されるというニュアンスで合っていますでしょうか?
あーそうか、今の WordPress って
styleでwidthとheightが入っちゃうのでした…。これ確か公式の issues でもレスポンシブ対応しようとすると画像が歪んだりするということで報告があっていた気がするので、そのうち良い感じに修正されたら良いなと思っています。コアで修正されるまでの一時的な感じにはなりますが、下記のコードを My Snow Monkey プラグインか子テーマのfunctions.phpに追加すると、デフォルトよりは素直っぽい挙動になるかもしれません。/** * Remove width/height of style attribute at core/image. * For WordPress 6.3.0. Fixed in 6.3.1. * * @see https://github.com/WordPress/gutenberg/issues/53555 */ add_filter( 'render_block_core/image', function( $block_content, $block ) { $attrs = $block['attrs'] ?? array(); $w = $attrs['width'] ?? ''; $h = $attrs['height'] ?? ''; if ( $w && preg_match( '@^\d+@ms', $w ) && $h && preg_match( '@^\d+@ms', $h ) ) { $w = str_replace( 'px', '', $w ); $h = str_replace( 'px', '', $h ); $size_style = "width:{$w}px;height:{$h}px"; $ratio = "{$w}/{$h}"; $block_content = str_replace( $size_style, "aspect-ratio:{$ratio}", $block_content ); } return $block_content; }, 10, 2 );別ページから、アンカーのある該当ページに移動する場合ですとズレが発生しなかったのですが、この差はページ内とページ外からのリンクで仕組みが異なるからでしょうか?
仕組みは違うのですが、画像が遅延読み込みで読み込まれず高さが保持されていない状態でアンカーに移動するとズレる、という部分は同じ気がするので、ちょっとわからないです…。
ちょっと書いてみました。数値は適当に書き換えてください。
@media (min-width: 640px) { .c-entries-carousel .spider__canvas { width: calc(100% + var(--entries--carousel--gap) * 4); // 4 は枚数 - 1 transform: translateX(-10%); } .c-entries-carousel .spider__slide { max-width: calc(20% - var(--entries--carousel--gap)); } }ただ、やはり、現状 Swiper でいうアクティブなスライドを中央に配置するような機能が Snow Monkey のスライダーには無いので、無理矢理感はあるかなと思います。他に実現できるプラグインがあるようなら、それを使うほうが安定するのではないかと思います。
♥ 0Who liked: No userんーとなると
width・height以外の別の要因ですかねー。一旦コンテンツをガバっと消して、少しずつ戻していきながら都度都度スクロールが正しく動作するか確認していき、正しく動作しないものがでてきたらその場所が原因だとわかるので、さらに具体的に原因を追求していく、という感じで絞り込んでいくのが良いのかなと思います。♥ 0Who liked: No userphpでもメディアクエリが使えると聞いていたので(自身でやったことはないのですが)今回の場合はphp内で分岐したほうが良いのかな?と思ったのですが別にcssでも問題ないのですね。
んー PHP 自体ではできないと思うので、PHP で
styleタグを突っ込むみたいなことですかね? それでも良いと思いますが、既に独自の CSS ファイルがあるならそれを使ったほうが簡単だと思います。♥ 0Who liked: No user -
投稿者投稿
