-
検索結果
-
キタジマ様の意図する内容：管理画面上で幅と高さが設定されてない(自動)のもの。
私の認識：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 );別ページから、アンカーのある該当ページに移動する場合ですとズレが発生しなかったのですが、この差はページ内とページ外からのリンクで仕組みが異なるからでしょうか？
仕組みは違うのですが、画像が遅延読み込みで読み込まれず高さが保持されていない状態でアンカーに移動するとズレる、という部分は同じ気がするので、ちょっとわからないです…。
Who liked:ご連絡ありがとうございます。
以下、検証いたしました。①2024年2月23日 10:15 AMのキタジマ様が投稿された内容ですが私の理解不足にて齟齬があったかもしれません。
キタジマ様の意図する内容：管理画面上で幅と高さが設定されてない(自動)のもの。
私の認識：html上でwidth・heightが設定されていないもの。管理画面上で、すべての画像の設定にてheight部分へ「自動」 → 「画像の高さ」を設定する事で挙動が改善されました。
管理画面上の高さが「style=”width:auto;height:355px”」にてhtml上に反映され、u-smooth-scrollの計算式に合算されるというニュアンスで合っていますでしょうか？
(逆に自動のままだと反映されない？)※高さが固定になると、レスポンシブ調整がちょっと大変な気もします。
(object-fit等で調整してみようかと思いますが)【高さを設定していないもの】 <div class="wp-block-column is-vertically-aligned-bottom sme-animation-fade-in is-layout-flow wp-block-column-is-layout-flow" data-sme-animation-duration="2"> <figure class="wp-block-image aligncenter size-full plan1"><img class="wp-image-638" src="●●.png" sizes="(max-width: 330px) 100vw, 330px" srcset="●●-2.png 330w, ●●-2-271x300.png 271w" alt="" width="330" height="365" /></figure> </div> 【高さを設定したもの】 <div class="wp-block-column is-vertically-aligned-bottom sme-animation-fade-in is-layout-flow wp-block-column-is-layout-flow" data-sme-animation-duration="2"> <figure class="wp-block-image aligncenter size-full is-resized plan1"><img class="wp-image-638" style="width: auto; height: 355px;" src="●●.png" sizes="(max-width: 330px) 100vw, 330px" srcset="https:●●-2.png 330w, ●●-2-271x300.png 271w" alt="" width="330" height="365" /></figure> </div>②もう一つ補足・確認。
今回、同じページ内でアンカーへ移動する際のみにズレが発生したのですが。
管理画面上にて画像に高さを設定していない状態でも、別ページから、アンカーのある該当ページに移動する場合ですとズレが発生しなかったのですが、この差はページ内とページ外からのリンクで仕組みが異なるからでしょうか？Who liked: No userSnow Monkey Forms の画面遷移は REST API でおこなっているので、Snow Monkey Forms 以外のプラグインやテーマが何らかのエラーを出しているときはそれが影響していて REST API がコケる→画面遷移しない、ということが起こりえます。
当該箇所が PHP 8.1.22 で
PHP Warning: Attempt to read property "post_content" on nullというエラーを出しますと Table of Contents Plus の作者に連絡するのが確実かなと思います。Who liked:これは Table of Contents Plus プラグイン側での対応が必要になるように思えるので、GitHub で公開されているのであればプルリクを送ってみる、またはイシューで本現象を紹介し対応をお願いするなどされてみてはいかがでしょうか？
Who liked:ちなみに上記コードまだ試せていないのですが、特に条件分岐など無さそうなので上記コードですと全ての閲覧環境・全てのページで表示されるという理解でよろしいでしょうか？
そうですね、そうなります。
PCやタブレットなどデバイス別（メディアクエリ別？）で表示したり、トップページや特定のページのみ（ページidで指定でしょうか）表示させたいときの条件分岐の書き方など教えていただけると大変有難いです……
「PCやタブレットなど」は CSS でメディアクエリを使って出し分けるのが無難です。「トップページや特定のページのみ」については、WordPress の条件分岐タグを使えば良いです。下記は公式ドキュメント（英語）のページですが、ぐぐったらいろいろでてくるかなと思います！
Who liked: No user【お使いの Snow Monkey のバージョン】5.2.6
【お使いの Snow Monkey Blocks のバージョン】20.3.5
【お使いの Snow Monkey Editor のバージョン】9.3.2
【お使いの PHP のバージョン】8.2.15### 発生している問題
u-smooth-scrollを設定し、複数のページ内リンクをしているのですが。
スマホ(android、iphone)、パソコン(edge、opera、firefox)にて、新しいタブや、シークレットウィンドウ等で該当URLにアクセスし、ボタンをクリックすると、「初回クリック時」のみ途中で動きが止まってしまいます。※一つ前の投稿と類似しているかなと思ったのですが、内容が微妙に異なっていたので新たにトピックをたてました。
### 試したこと
①パソコンではchromeのみシークレットウィンドウ等でも正常に動作いたしました。
②アンカーへの距離が近いと正常に動作し、距離が長いとアンカーまで到達せずに途中で止まってしまいました。### 確認したいこと
改善する方法はありますでしょうか？
・PC限定（メディアクエリで一定のサイズ以上限定）、
・ブロックあるいはクラシックウィジェットどちらか限定、
・最大幅固定でサイズ以上のものは正常に動作しない（レスポンシブ対応や綺麗な拡縮などの制御は無視）前提…みたいな、極めて限定的な条件であればできる…といった感じでしょうか？それだと汎用的じゃないのでsnow monkey的には微妙そうですが。。
2つ目以外は（多分）技術的には可能ですが、経験上 PC だけじゃなくてモバイルでも表示できるようにしたいとか、正常に動作しない前提としていても正常に動作していませんとクレームが入る、といったことは確実にあるので、Snow Monkey 標準の機能として入れるのはどうかなという感じですね…。
自分なりにも調べたところ、空の使用していないウィジェットを使って、それをpositionなどで任意の位置に無理矢理置いて表示させる…みたいなやり方もみたので
確かにこれも技術的には可能です。空の使用していないウィジェットエリアでもできるとは思いますが、独自にウィジェットエリアを追加してやるほうがわかりやすいかなとは思います。ただ、ご自身でやるにしても、それなりに複雑なことになるので、バナーの表示くらいであればそこまでするのは大変そうかなとは個人的には思います。
参考：
Who liked: No userデフォルトページヘッダー画像登録をしたら 全画像が入らず、上下・左右が切れてしまうので、
ページヘッダー画像は、どのような画像（縦長等）がきてもある程度それなりに表示するために、高さの制御がされており、はみでる部分はトリミングされるようになっています。CSS を追加することで高さの制御とトリミングを無効化できます。
.c-page-header[data-has-image=true] { height: auto; padding: 0; } .c-page-header[data-has-image=true] .c-page-header__bgimage, .c-page-header[data-has-image=true] .c-page-header__bgimage > picture { position: static; } .c-page-header[data-has-image=true] .c-page-header__bgimage > img, .c-page-header[data-has-image=true] .c-page-header__bgimage > picture > img { position: static; height: auto; }ページヘッダー画像を使わない場合は↑は入れなくて大丈夫です。
固定ページで画像挿入、フル画面にして トップページヘッダー画像としています。
画像はそのまま入っていますが、メニューバーと画像の上の間に結構な大きさの空白が生じています。
レイアウトまわりがどのような設定になっているかで変わってくるので、実際に見てみないと正しい答えを提示できるかわからないのですが、とりあえず、下記の CSS を試してみると良いかもしれません。
.l-contents__inner { padding-top: 0; }Who liked:
