賢威のリンクカード（ブログカード）を縦型デザインにする

<div class="blog-card-wrapper">（賢威のショートコードを記載）</div>

.blog-card-wrapper {
display: flex;
flex-wrap: wrap;
gap: 8px; /* カード間の間隔を狭く */
max-width: 820px; /* 親要素の幅を設定 */
margin: 0 auto; /* 親要素を中央に配置 */
padding: 16px; /* コンテンツの周りに余白を追加 */
}

.blog-card {
flex: 1 1 calc(33.333% - 16px); /* カードの幅を広げる */
max-width: calc(33.333% - 16px); /* カードの最大幅を設定 */
border: 1px solid #ddd;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s;
margin-bottom: 16px; /* カードの下部にマージンを追加 */
}

@media (max-width: 820px) {
.blog-card {
flex: 1 1 calc(50% - 16px); /* 幅が820px以下の場合は2つ並ぶように */
max-width: calc(50% - 16px);
}
}

@media (max-width: 540px) {
.blog-card {
flex: 1 1 100%; /* 幅が540px以下の場合は1つに */
max-width: 100%;
}
}

.blog-card:nth-child(3n+1) {
margin-left: 0; /* 各行の最初のカードに左マージンをリセット */
}

.blog-card:nth-child(3n) {
margin-right: 0; /* 各行の最後のカードに右マージンをリセット */
}

.blog-card img {
width: 100%;
height: auto;
display: block;
}

.blog-card-title {
font-size: 0.95em;
margin-bottom: 8px;
font-weight: bold;
padding: 2px 5px;
}

.blog-card-url {
display: none;
}

.blog-card-desc {
font-size: 0.75em;
color: #333;
padding: 2px 5px;
}

.blog-card:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

document.addEventListener('DOMContentLoaded', function() {
var wrappers = document.querySelectorAll('.blog-card-wrapper'); // すべてのラッパーを取得
wrappers.forEach(function(wrapper) {
var cards = wrapper.querySelectorAll('.keni-link-card_wrap');
cards.forEach(function(card) {
var blockquote = card.querySelector('.keni-link-card');
if (blockquote) {
// <blockquote> 内の子要素を <div> の親要素に移動
while (blockquote.firstChild) {
card.appendChild(blockquote.firstChild);
}
// <blockquote> タグを削除
blockquote.remove();
}

card.className = 'blog-card'; // 既存のクラスを削除し、新しいクラスを追加

var thumb = card.querySelector('.keni-link-card_thumb');
if (thumb) {
thumb.className = 'blog-card-thumb';
var img = thumb.querySelector('img');
if (img) {
img.className = 'blog-card-thumb';
}
}

var title = card.querySelector('.keni-link-card_title');
if (title) {
title.className = 'blog-card-title';
}

var url = card.querySelector('.keni-link-card_url');
if (url) {
url.className = 'blog-card-url';
}

var desc = card.querySelector('.keni-link-card_desc');
if (desc) {
desc.className = 'blog-card-desc';
}
});
});
});