サムネイル画像のアスペクト比をCSSでも定義

amp.css

@@ -798,6 +798,44 @@ img.emoji {
   word-break: break-all;
 }
 
+/* サムネイルアスペクト比 */
+.thumb-wide {
+  --card-ratio: 16 / 9;
+}
+
+.thumb-golden-ratio {
+  --card-ratio: 8 / 5;
+}
+
+.thumb-postcard {
+  --card-ratio: 3 / 2;
+}
+
+.thumb-silver-ratio {
+  --card-ratio: 7 / 5;
+}
+
+.thumb-standard {
+  --card-ratio: 4 / 3;
+}
+
+.thumb-square,
+.post-navi-square {
+  --card-ratio: 1 / 1;
+}
+
+.ect-tile-card,
+.ect-big-card,
+.ect-big-card-first .a-wrap:first-child {
+  --card-ratio: auto;
+}
+
+.blogcard-thumbnail img,
+.card-thumb img {
+  aspect-ratio: var(--card-ratio);
+  object-fit: cover;
+}
+
 /************************************
 ** ヘッダー
 ************************************/

css/admin.css

@@ -293,6 +293,7 @@ body.wp-admin {
   /*ボーダー（太線）*/
   /*シャドー*/
   /*シャドーペーパー*/
+  /* サムネイルアスペクト比 */
   /************************************
   ** ヘッダー
   ************************************/
@@ -545,6 +546,7 @@ body.wp-admin {
   /*ボーダー（太線）*/
   /*シャドー*/
   /*シャドーペーパー*/
+  /* サムネイルアスペクト比 */
   /************************************
   ** ヘッダー
   ************************************/
@@ -1326,6 +1328,35 @@ body.wp-admin {
   margin: 0;
   word-break: break-all;
 }
+.admin-settings .demo .thumb-wide {
+  --card-ratio: 16 / 9;
+}
+.admin-settings .demo .thumb-golden-ratio {
+  --card-ratio: 8 / 5;
+}
+.admin-settings .demo .thumb-postcard {
+  --card-ratio: 3 / 2;
+}
+.admin-settings .demo .thumb-silver-ratio {
+  --card-ratio: 7 / 5;
+}
+.admin-settings .demo .thumb-standard {
+  --card-ratio: 4 / 3;
+}
+.admin-settings .demo .thumb-square,
+.admin-settings .demo .post-navi-square {
+  --card-ratio: 1 / 1;
+}
+.admin-settings .demo .ect-tile-card,
+.admin-settings .demo .ect-big-card,
+.admin-settings .demo .ect-big-card-first .a-wrap:first-child {
+  --card-ratio: auto;
+}
+.admin-settings .demo .blogcard-thumbnail img,
+.admin-settings .demo .card-thumb img {
+  aspect-ratio: var(--card-ratio);
+  object-fit: cover;
+}
 .admin-settings .demo .header {
   height: 100%;
   flex-shrink: 0;
@@ -9645,6 +9676,35 @@ body.wp-admin {
   margin: 0;
   word-break: break-all;
 }
+.admin-settings .demo .thumb-wide {
+  --card-ratio: 16 / 9;
+}
+.admin-settings .demo .thumb-golden-ratio {
+  --card-ratio: 8 / 5;
+}
+.admin-settings .demo .thumb-postcard {
+  --card-ratio: 3 / 2;
+}
+.admin-settings .demo .thumb-silver-ratio {
+  --card-ratio: 7 / 5;
+}
+.admin-settings .demo .thumb-standard {
+  --card-ratio: 4 / 3;
+}
+.admin-settings .demo .thumb-square,
+.admin-settings .demo .post-navi-square {
+  --card-ratio: 1 / 1;
+}
+.admin-settings .demo .ect-tile-card,
+.admin-settings .demo .ect-big-card,
+.admin-settings .demo .ect-big-card-first .a-wrap:first-child {
+  --card-ratio: auto;
+}
+.admin-settings .demo .blogcard-thumbnail img,
+.admin-settings .demo .card-thumb img {
+  aspect-ratio: var(--card-ratio);
+  object-fit: cover;
+}
 .admin-settings .demo .header {
   height: 100%;
   flex-shrink: 0;

lib/additional-classes.php

@@ -80,38 +80,6 @@ function body_class_additional($classes) {
   //フォントウエイト
   $classes[] = get_site_font_weight_class();
 
-  // //サイドバー表示設定
-  // $add_no_sidebar = false;
-  // //var_dump(get_sidebar_display_type());
-  // switch (get_sidebar_display_type()) {
-  //   case 'no_display_all':
-  //     $add_no_sidebar = true;
-  //     break;
-  //   case 'no_display_front_page':
-  //     if (is_front_page() && !is_home()) {
-  //       $add_no_sidebar = true;
-  //     }
-  //     break;
-  //   case 'no_display_index_pages':
-  //     if (!is_singular()) {
-  //       $add_no_sidebar = true;
-  //     }
-  //     break;
-  //   case 'no_display_pages':
-  //     if (is_page()) {
-  //       $add_no_sidebar = true;
-  //     }
-  //     break;
-  //   case 'no_display_singles':
-  //     if (is_single()) {
-  //       $add_no_sidebar = true;
-  //     }
-  //     break;
-  //   default:
-
-  //     break;
-  // }
-
   //投稿管理画面で「1カラム」が選択されている場合
   if (is_singular() && is_singular_page_type_column1()) {
     //$add_no_sidebar = true;
@@ -350,6 +318,9 @@ function body_class_additional($classes) {
     $classes[] = 'is-header-fixed';
   }
 
+  //サムネイルアスペクト比
+  $classes[] = 'thumb-'.replace_value_to_class(get_thumbnail_image_type());
+
   return apply_filters('body_class_additional', $classes);
 }//body_class_additional
 endif;

lib/image.php

@@ -159,4 +159,4 @@ function add_spotlight_property( $content ) {
 function is_lightboxable_page(){
   return is_singular() || (is_category() && !is_paged()) || (is_tag() && !is_paged());
 }
-endif;
+endif;

scss/_img.scss

@@ -127,3 +127,41 @@ img.emoji {
     word-break: break-all;
   }
 }
+
+/* サムネイルアスペクト比 */
+.thumb-wide {
+  --card-ratio: 16 / 9;
+}
+
+.thumb-golden-ratio {
+  --card-ratio: 8 / 5;
+}
+
+.thumb-postcard {
+  --card-ratio: 3 / 2;
+}
+
+.thumb-silver-ratio {
+  --card-ratio: 7 / 5;
+}
+
+.thumb-standard {
+  --card-ratio: 4 / 3;
+}
+
+.thumb-square,
+.post-navi-square {
+  --card-ratio: 1 / 1;
+}
+
+.ect-tile-card,
+.ect-big-card,
+.ect-big-card-first .a-wrap:first-child{
+  --card-ratio: auto;
+}
+
+.blogcard-thumbnail img,
+.card-thumb img {
+  aspect-ratio: var(--card-ratio);
+  object-fit: cover;
+}

style.css

@@ -823,6 +823,44 @@ img.emoji {
   word-break: break-all;
 }
 
+/* サムネイルアスペクト比 */
+.thumb-wide {
+  --card-ratio: 16 / 9;
+}
+
+.thumb-golden-ratio {
+  --card-ratio: 8 / 5;
+}
+
+.thumb-postcard {
+  --card-ratio: 3 / 2;
+}
+
+.thumb-silver-ratio {
+  --card-ratio: 7 / 5;
+}
+
+.thumb-standard {
+  --card-ratio: 4 / 3;
+}
+
+.thumb-square,
+.post-navi-square {
+  --card-ratio: 1 / 1;
+}
+
+.ect-tile-card,
+.ect-big-card,
+.ect-big-card-first .a-wrap:first-child {
+  --card-ratio: auto;
+}
+
+.blogcard-thumbnail img,
+.card-thumb img {
+  aspect-ratio: var(--card-ratio);
+  object-fit: cover;
+}
+
 /************************************
 ** ヘッダー
 ************************************/