widgets – Theme emulsion

2024年12月
月	火	水	木	金	土	日
	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

Comments に themedemos より2024年2月16日
A reply to the example comment.
Comments に themedemos より2024年2月16日
Example comment.
form に tenman より2024年1月10日
comment test
form に tenman より2023年12月21日
テスト
emulsion 2.9.0 に tenman より2023年10月6日
test

effect margin=”auto”

“n247_w1150” by BioDivLibrary/ pdm 1.0

“Sunset Landscape” by Ales Krivec/ CC0 1.0
group flex wp-block-image

縦長画像の、上下がトリミングされる

“Sunset Landscape” by Ales Krivec/ CC0 1.0

“n247_w1150” by BioDivLibrary/ pdm 1.0
css　除去
WordPress の CSS「mediaelement-css」と「wp-mediaelement-css」の削除方法 | Nakata Katsuhisa ICT Yorozu Weblog
dequeue するハンドル名は wp-mediaelement（ -css は不要）。

WordPress バージョン 6.4.2 にて確認しました。
```
function my_enqueue_style(){
wp_dequeue_style( 'wp-mediaelement' );
}
add_action( 'wp_enqueue_scripts', ‘my_enqueue_style' );
```
wp_dequeue_style( ‘wp-mediaelement’ ); を指定するだけで、mediaelement-css も一緒に削除されることを確認しました。

WordPress テーマを自作する場合など、不要な CSS を読み込みたくない場合の参考に。
WordPressでglobal-styles-inline-cssを無効化する｜Webgaku（ウェブガク）
```
add_action( 'wp_enqueue_scripts', 'remove_global_styles' );
function remove_global_styles(){
    wp_dequeue_style( 'global-styles' );
}
```
WordPress 5.9以降、wp_head()からグローバルスタイルが出力されるようになりました。

theme.jsonを使用していないクラシックテーマでもグローバルスタイルが読み込まれます。

クラシックテーマとブロックテーマについては以下のページをご参考ください。

WordPress の CSS「wp-block-library-css」の削除方法 | Nakata Katsuhisa ICT Yorozu Weblog
dequeue するハンドル名は wp-block-library（ -css は不要）。
```
function my_enqueue_style(){
wp_dequeue_style( 'wp-block-library' );
}
add_action( 'wp_enqueue_scripts', ‘my_enqueue_style' );
```
WordPress テーマを自作する場合など、不要な CSS を読み込みたくない場合の参考に。
テスト

test
remove_action( ‘wp_head’, ‘wp_print_auto_sizes_contain_css_fix’, 1 );
レイアウト崩れは、ascpect-ratio をグリッドでunset していたのが原因だった
```
img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }
```
このCSSルールセットが適用された場合の、emulsion テーマの表示はどのように変化するのか

contain-intrinsic-size を適用しない

ブラウザのユーザーエージェントスタイルで、適切な設定が行われているようです

閉じ角括弧の前に i (または I) を追加すると、 (ASCII の範囲内の文字の場合) 値は大文字と小文字を区別せずに比較されます。

“Birds Wings” by Chanan Greenblatt/ CC0 1.0

“n247_w1150” by BioDivLibrary/ pdm 1.0

“Sunset Landscape” by Ales Krivec/ CC0 1.0

contain-intrinsic-size を適用した場合

“Birds Wings” by Chanan Greenblatt/ CC0 1.0

“n247_w1150” by BioDivLibrary/ pdm 1.0

“Sunset Landscape” by Ales Krivec/ CC0 1.0

“Birds Wings” by Chanan Greenblatt/ CC0 1.0

“n247_w1150” by BioDivLibrary/ pdm 1.0

“Sunset Landscape” by Ales Krivec/ CC0 1.0

“Birds Wings” by Chanan Greenblatt/ CC0 1.0

“n247_w1150” by BioDivLibrary/ pdm 1.0

“Sunset Landscape” by Ales Krivec/ CC0 1.0

グリッドレイアウトや段組みレイアウトでは、明示的にサイズを指定すると、暗黙的なコンテンツベースの高さとは異なる扱いを受けます。要素は、単にその高さまでコンテンツで満たされた場合とは大幅に異なるレイアウトになるかもしれません。 auto none 値を指定すると、記憶された値がない場合に要素を contain-intrinsic-size: none にフォールバックし、コンテンツがないかのようにレイアウトすることができます。グリッドレイアウトや段組みレイアウトでは、コンテナーそのものが親要素からはみ出す可能性があり、予期しないページレイアウトになる可能性があるため、内在サイズとして 0px を設定するよりも常に推奨されます。

https://developer.mozilla.org/ja/docs/Web/CSS/contain-intrinsic-size

https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors

フィルタ関数
```
/**
 * Prints a CSS rule to fix potential visual issues with images using `sizes=auto`.
 *
 * This rule overrides the similar rule in the default user agent stylesheet, to avoid images that use e.g.
 * `width: auto` or `width: fit-content` to appear smaller.
 *
 * @since 6.7.1
 * @see https://html.spec.whatwg.org/multipage/rendering.html#img-contain-size
 * @see https://core.trac.wordpress.org/ticket/62413
 */
function wp_print_auto_sizes_contain_css_fix() {
	/** This filter is documented in wp-includes/media.php */
	$add_auto_sizes = apply_filters( 'wp_img_tag_add_auto_sizes', true );
	if ( ! $add_auto_sizes ) {
		return;
	}

	?>
	img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }
	<?php
}
```
[attr^=value]

attr という名前の属性の値が value で始まる要素を表します

[attr operator value i]

https://reference.hyper-text.org/css/propaty/contain-intrinsic-width

https://triple-underscore.github.io/css-contain-ja.html#style-containment

画像ファイルのパスと横幅はsrcset属性

画像ファイルのパスと横幅は、imgタグのsrcset属性に記述します。「画像ファイルの横幅」は、「画像をウェブページ上で表示する際の横幅」ではないことに注意してください。
```
srcset="images/small.jpg 320w,
      images/medium.jpg 640w,
      images/large.jpg 1280w"
```
パスと横幅の間には半角スペースを挿入します。横幅の単位はpxでなくw（幅記述子）を用います。small.jpgは320pxの画像、medium.jpgは640pxの画像、large.jpgは1280pxの画像である、という情報をブラウザに伝えています。

画像ファイルのパスと横幅はsrcset属性

画像ファイルのパスと横幅は`srcset`属性