ブログカード（リンクカード）のようなデザインを作るCSS

※当サイトにはプロモーションが含まれています。

にゃのらいと

ブログカードのようなリンクを作りたいにゃ

ワードプレス（WordPress）には、ブログカード（リンクカード）の機能が付いていることがほとんですが、カスタマイズすることは、ほとんどできません。

その為、ブログカード（リンクカード）のようなデザインのリンクを作成してみました。

にゃのらいと

LPなどに飛ばすリンクとしても使えそうだにゃ

ブログカードのようなデザインを作るHTMLとCSS

ブログカード（リンクカード）のようなデザインのHTMLとCSSです。

HTML

<a href="（リンク先のURL）" class="nya-linkcard-box">
<div class="nya-linkcard-img">
<img src="（画像のURL）" alt="（画像の名称）">
</div>
<div class="nya-linkcard-txt">
<div class="cardtitle">（タイトル）</div>
<p>
（説明したい内容を記載します）
</p>
</div>
</a>

（）括弧内の箇所を記載してください。

続いて、CSSです。

CSS

.nya-linkcard-box {
display: flex;
flex-direction: row;
align-items: center;
background: #fafafa; /* 背景色 */
background-image:
linear-gradient(transparent 24px, #e0e0e0 25px, transparent 26px),
linear-gradient(90deg, transparent 24px, #e0e0e0 25px, transparent 26px);
background-size: 25px 25px;
border: 1px solid #d4cfd2;
border-radius: 4px;
padding: 15px;
max-width: 600px; /* 幅を調整 */
margin: 20px auto;
transition: background 0.3s ease;
text-decoration: none;
color: #333;
}
.nya-linkcard-box:hover {
background-color: #e5fafd; /* 背景色 */
background-image:
linear-gradient(transparent 24px, #c0e0e0 25px, transparent 26px),
linear-gradient(90deg, transparent 24px, #c0e0e0 25px, transparent 26px);
}

.nya-linkcard-img {
flex: 1;
text-align: center;
}

.nya-linkcard-img img {
max-width: 100%;
height: auto;
border-radius: 4px;
}

.nya-linkcard-txt {
flex: 2;
padding-left: 15px;
}

.nya-linkcard-txt .cardtitle {
color: #025b5e;
border-bottom: 2px solid #025b5e;
margin-bottom: 5px;
display: inline-block;
font-weight: 800;
}

.nya-linkcard-txt p {
line-height: 1.5;
}

@media (max-width: 600px) {
.nya-linkcard-box {
flex-direction: column;
text-align: center;
}
.nya-linkcard-txt {
padding-left: 0;
margin-top: 10px;
}
}

.nya-linkcard-boxのmax-width:600px;で、最大幅を調整します。

例えば、最大幅を700pxにしたい時は、