はてなブログ　各カテゴリーページのサムネイルを16：9に表示させるには

HTMLやCSSの知識の乏しいビギナーレベルの者です。

はてなブログのデザインを設定しているのですが、
各カテゴリーページを設けていまして、
サムネイルのサイズが16：9のサイズにおさまりません。

トップページのようにきれいに表示させたいのですが、
どういうコードを入力したらよいかアドバイスをいただけないでしょうか。

「あおりスピード日常茶飯事な香港　まさかの海上の小舟まで走り屋だったという話。」
というタイトルのブログのサムネイルが下記双方のページに表示されているのをごらんいただけると、
分かっていただけるのですが…

【カテゴリーページのうちのひとつ】
https://www.michelley.link/archive/category/A%20Life%20in%20HK

【HTML】

<footer id="footer">
    <div id="footer-menu">
        <div id="blog-title-content">
    <a href="https://www.michelley.link">TOP PAGEへ ポチッとGO????</a>
  </div>
      <nav>
        <div class="footer-links">
          <ul>
             <li>
          </ul>
          </div>
         </nav>
         <p class="copyright">© 2018 Asian View All rights reserved.</p>
  </div>
</footer>
<script>	(function(){	    if(document.body.classList.contains('page-index')){	        var elements = document.getElementsByClassName('entry-thumb');	        var re = /https%3A%2F%2F.+.jpg/;	        Array.prototype.forEach.call(elements, function(element) {	            var imageUri = re.exec(element.getAttribute('style'));	            element.style.backgroundImage = 'url(' + decodeURIComponent(imageUri[0]) + ')';	        });	    }	}());	</script>

【CSS】

/* <system section="theme" selected="8599973812283705281"> */
@import url("https://blog.hatena.ne.jp/-/theme/8599973812283705281.css");
/* </system> */

.page-archive .entry-thumb {	    width: 352px;	    height: 198px;/**/	}

.cp_navi {
	background-color: #ffffff;
	border: 1px solid #dedede;
	border-radius: 4px;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
	color: #888888;
	display: block;
	margin: 1em 1%;
	overflow: hidden;
	width: 100%;
}
.cp_navi ul {
	margin: 0;
	padding: 0;
}
.cp_navi ul li {
	display: inline-block;
	list-style-type: none;
	-webkit-transition: all 0.2s;
	        transition: all 0.2s;
}
.cp_navi > ul > li > a > .caret {
	border-top: 4px solid #aaaaaa;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	content: '';
	display: inline-block;
	height: 0;
	width: 0;
	vertical-align: middle;
	-webkit-transition: color 0.1s linear;
	        transition: color 0.1s linear;
}
.cp_navi > ul > li > a {
	color: #aaaaaa;
	display: block;
	line-height: 56px;
	padding: 0 10px;
	text-decoration: none;
}
.cp_navi > ul > li:hover {
	background-color: rgb(218, 60, 65);
}
.cp_navi > ul > li:hover > a {
	color: rgb( 255, 255, 255 );
}
.cp_navi > ul > li:hover > a > .caret {
	border-top-color: rgb( 255, 255, 255 );
}
.cp_navi > ul > li > div {
	background-color: rgb(218, 60, 65);
	border-top: 0;
	border-radius: 0 0 4px 4px;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
	display: none;
	margin: 0;
	opacity: 0;
	position: absolute;
	width: 165px;
	visibility: hidden;
	-webkit-transiton: opacity 0.2s;
	       transition: opacity 0.2s;
}
.cp_navi > ul > li:hover > div {
	display: block;
	opacity: 1;
	visibility: visible;
}
.cp_navi > ul > li > div ul > li {
	display: block;
}
.cp_navi > ul > li > div ul > li > a {
	color: #ffffff;
	display: block;
	padding: 12px 24px;
	text-decoration: none;
}
.cp_navi > ul > li > div ul > li:hover > a {
	background-color: rgba( 255, 255, 255, 0.1);
}


.page-index .archive-entries .categories {

  display : none;

}

/* トップページカード型 */
@media (min-width: 768px){
.page-index .archive-entries {
 display: -webkit-flex;
 display: flex;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-justify-content: space-between;
 justify-content: space-between;
}

.page-index .archive-entry {
 margin-bottom: 20px!important;
 padding-bottom: 10px;
 box-sizing: border-box;
 width: calc(50% - 10px);
}

/*TOP記事を大きく表示*/
.page-index .archive-entries > section:first-child {
 flex: 0 0 100%;/*TOP記事を大きく表示*/
}
}


@media (min-width: 768px){
.page-index .archive-entry {
    position: relative;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
}
.page-index .entry-thumb-link {
    order: 1;
    height: 200px;
}
.page-index .archive-entry-header {
    order: 2;
}
.page-index .categories {
    order:3;
}
.page-index .archive-entry-body {
    order:4
}
}

.entry-categories {
  display:none;
}
.cp_navi > ul > li:hover > div {
    display: block;
    opacity: 1;
    visibility: visible;
    z-index: 1; /* これを追加 */
}

kei344

2019/08/22 03:04

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Lhankor_Mhy

2019/08/22 03:05

前の質問でも書きましたが、コードはMarkdownで書いてください。 https://teratail.com/help/question-tips#questionTips3-7

Michelley

2019/08/22 03:18

今コードを入力してみました。理解していなくて申し訳ありません、お手数をおかけしますが、よろしくお願いいたします。

Lhankor_Mhy

2019/08/22 03:56

これ、画像自体がトリミングされてますから、CSSでは解決しないと思いますよ。こことか参考にしてみてはいかがですか？ https://www.imuza.com/entry/2018/03/05/114303

Michelley

2019/08/22 04:11

いただいたページに貼ってあったリンク先を参考にしたら解決しました。ありがとうございました！

行動規範の内容に同意します

回答1件

自己解決

<script>	(function(){	    if(document.body.classList.contains('page-index')){	        var elements = document.getElementsByClassName('entry-thumb');	        var re = /https%3A%2F%2F.+.jpg/;	        Array.prototype.forEach.call(elements, function(element) {	            var imageUri = re.exec(element.getAttribute('style'));	            element.style.backgroundImage = 'url(' + decodeURIComponent(imageUri[0]) + ')';	        });	    }	}());	</script>

のうち、page-indexを"page-archive"に差し替えることで解決。

投稿2019/08/22 04:14

Michelley

総合スコア5