フォーラムへの返信
-
キタジマ様の意図する内容：管理画面上で幅と高さが設定されてない(自動)のもの。
私の認識：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:Snow 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:ちなみに上記コードまだ試せていないのですが、特に条件分岐など無さそうなので上記コードですと全ての閲覧環境・全てのページで表示されるという理解でよろしいでしょうか？
そうですね、そうなります。
PCやタブレットなどデバイス別（メディアクエリ別？）で表示したり、トップページや特定のページのみ（ページidで指定でしょうか）表示させたいときの条件分岐の書き方など教えていただけると大変有難いです……
「PCやタブレットなど」は CSS でメディアクエリを使って出し分けるのが無難です。「トップページや特定のページのみ」については、WordPress の条件分岐タグを使えば良いです。下記は公式ドキュメント（英語）のページですが、ぐぐったらいろいろでてくるかなと思います！
Who liked: No user・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:
