コピペでかんたん！プラグイン不要でおしゃれなブログカードをデザインしよう

「テキストリンクだけじゃなく、カード型でリンクを表示したい！」

「テーマ標準のブログカードはおしゃれじゃない…」

こんな悩みを解決できます！

この記事では、コピペで使える６種類のブログカードを紹介していきます。

オシャレな装飾を無料でゲットできるチャンスなので、ぜひチェックしてみてください。

1 ブログカードの設置手順
2 ブログカードのデザイン集
3 ショートコードを「ワンクリック」で呼び出す方法

ブログカードの設置手順

最初にブログカードを設置する方法をご紹介していきます。

手順は次の３ステップ！

「functions.php」にPHPコードを追加する
「追加CSS」ににデザインコードを追加する
記事にブログカードを設置する

図解付きの手順を見たい人は、以下のボタンをタップしてください。

もっと詳しい手順を見る

STEP

「functions.php」にPHPコードを追加する

まずは「functions.php」にブログカード用のPHPコードを追加していきます。

WordPress管理画面から「外観」→「テーマファイルエディター」をクリック。

ご利用のテーマを選び、「テーマのための関数（functions.php）」をクリックします。

functions.php はテーマのプログラムが書かれている大切なファイルです。

編集前には必ずバックアップを取っておきましょう。

functions.php ファイルの一番下までスクールし、以下のPHPコードをコピペします。

PHP コード

function render_blogcard_shortcode($items) {

extract(shortcode_atts(array(
'url'=>"",
'title'=>"",
'content'=>""
),$items));

$page_id = url_to_postid($url);
$no_image = '';

//titleが指定されない場合は、記事タイトルを自動取得
if(empty($title)){
$title = esc_html(get_the_title($page_id));
}
//contentが指定されない場合は、記事の概要(最初の55文字)を自動抜粋
if(empty($content)){
$content = esc_html(get_post_summary($page_id));
}

//アイキャッチ画像を取得
if(has_post_thumbnail($page_id)) {
//アイキャッチが設定されている場合
$img = wp_get_attachment_image_src(get_post_thumbnail_id($page_id),'medium');
$img_tag = "<span class=\"card-img\"><img src='" . esc_url($img[0]) . "' alt='" . esc_attr($title) . "' width='" . esc_attr($img[1]) . "' height='" . esc_attr($img[2]) . "' /></span>";
}else{
//アイキャッチが設定されていない場合
$img_tag = '<span class="no_image"></span>';
}

//HTMLを作成
$nlink .=' <div>
<a class="blogcard" href="'. $url .'" title="'.$title.'" target="_blank" rel="noopener">
'. $img_tag .'
<span class="blogcard-text">
<span class="blogcard-title">'. $title .' </span>
<span class="blogcard-content">'. $content .'</span>
</span></a></div>';

return $nlink;
}

// 記事内容の取得
function get_post_summary($post_id){
global $post;
$post_bu = $post;
$post = get_post($post_id);
setup_postdata($post);
$output = get_the_excerpt(); // ←ここはご利用の環境に合わせてコードを書き換えてください。
$post = $post_bu;
return $output;
}

add_shortcode("blogcard1", "render_blogcard_shortcode");

※ 上記コードの $output = ～ の部分は、利用しているテーマやプラグインによって異なります。

以下を参考に書き換えてください。

AllinOneSEOを使っている場合
$output = get_post_custom()['_aioseo_description'][0];
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
YoastSEOを使っている場合
$output = get_post_meta($post_id,'_yoast_wpseo_metadesc',true);
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SANGOを使っている場合
$output = get_post_meta( $post_id, 'sng_meta_description', true );
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
いずれも使っていない場合
$output = get_the_excerpt();

入力が終わったら「ファイルを更新」をクリックして保存しましょう。

これで STEP１は完了です！

STEP

「追加CSS」ににデザインコードを追加する

STEP２では、ブログカードの「色」や「フォントサイズ」などデザインを整えるコードを追加します。

「外観」→「カスタマイズ」を選択してください。

メニューから「追加CSS」を選択します。

「追加CSS」の入力エリアに、以下のCSSコードをコピペしてください。

CSS コード

.blogcard {
position: relative;
overflow: hidden;
width: 95%;
background: #fff;
font-weight: bold;
text-decoration: none !important;
display: inline-block;
max-width: 310px;
margin-right: 20px;
padding: 10px;
margin-bottom: 1.5em;
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25);
max-width: 100%;
display: table;
border: solid 1px #ffffff;
background-color: #ffffff;
}
.blogcard:hover {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
color: #888;
text-decoration: none;
}
.blogcard img {
width: 100%;
border-radius: 2px;
}
.blogcard-title {
font-size: 1em;
font-weight: bold;
line-height: 1.4;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
color: #000000;
}
.blogcard-content {
padding-top: .8em;
font-size: .8em;
line-height: 1.4;
font-weight: normal;
opacity: .8;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
margin-left: 0px;
color: #333232;
}
.blogcard .blogcard-text {
color: #525252;
padding: 0px 10px;
display: block;
line-height: 1.6;
display: table-cell;
vertical-align: top;
width: 80%;
}
.card-img img {
width: 100%;
}
.no_image {
display: table-cell;
width: 100px;
height: 100px;
background-color: #ccc;
border-radius: 2px;
position: relative;
overflow: hidden;
}
.no_image::before {
content: "no image";
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}
@media only screen and (max-width: 480px) {
.blogcard img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
aspect-ratio: 1 / 1;
display: block;
}
.blogcard-content {
display:none;
}
.blogcard-title {
font-size:0.8em;
}
}

コードを追加したら「公開」ボタンをクリックして保存します。

以上で STEP２は完了です。

では、いよいよ記事にブログカードを設置していきましょう。

STEP

記事にブログカードを設置する

最後に、記事本文へショートコードを追加し、ブログカードを設置していきます。

ブログカードを設置したい投稿記事（または固定記事）を開いてください。

編集画面左上のボタンをクリックします。

ブロック一覧が表示されたら、「カスタムHTML」を選びます。

以下のショートコードを「カスタムHTML」ブロックにコピペしましょう。

ショートコード

[blogcard1 url="https://〇〇〇〇.com（リンク先の記事URL）" content="記事の概要（任意）"]

貼り付けたら、URLや記事の概要（※）を入力します。

※「content="～"」 を削除すると、リンク記事の冒頭文が自動で（概要欄に）表示されます。

ここまでの手順でブログカードが設置されました。プレビューで確認してみてください。

以上で、ブログカードの基本的な設置方法は終了です。

次の章では、バリエーション豊富な「ブログカードのデザイン例」を紹介しているので、お好みのデザインを探してみてください。(*‘∀‘)

ブログカードのデザイン集

ここからはブログカードのサンプルデザインを紹介していきます。

コピペですぐに取り入れられるので、興味のある人はぜひ使ってみてくださいね！

じゃあさっそく見ていきましょう。

ラベル型ブログカード

【暗号資産取引所】口座開設から購入の手順を画像付きで解説！　初心者のための記事です

【暗号資産取引所】口座開設から購入の手順を画像付きで解説！『ビットコインやほかの暗号資産を買ってみたいけど、やり方がわからない』『初めてだから不安が多い』『そもそも暗号資産って危険なイメージがある』こんな悩みや疑問を持っていませんか。暗号資産に興味が ...

背景色：　枠線：　タイトル：　概要：　.

✙ タップしてコードを見る

PHP コード

function render_blogcard_shortcode($items) {

extract(shortcode_atts(array(
'url'=>"",
'title'=>"",
'content'=>""
),$items));

$page_id = url_to_postid($url);
$no_image = '';

return $nlink;
}

add_shortcode("blogcard1", "render_blogcard_shortcode");

※ 上記コードのなかの「$output = ～」については、ご利用の環境によって記載内容が異なります。詳しくはこちらをご覧ください。

CSS コード

ショートコード

[blogcard1 url="https://〇〇〇〇.com（リンク先の記事URL）" content="記事の概要（任意）"]

ラベル型ブログカード２

【暗号資産取引所】口座開設から購入の手順を画像付きで解説！続きを読む

背景色：　枠線：　タイトル：　続きを読む：　.

✙ タップしてコードを見る

PHP コード

※ 上記コードのなかの「$output = ～」については、ご利用の環境によって記載内容が異なります。詳しくはこちらをご覧ください。

CSS コード

.blogcard {
position: relative;
overflow: hidden;
width: 95%;
background: #fff;
text-decoration: none !important;
display: inline-block;
max-width: 310px;
margin-right: 20px;
padding: 10px;
margin-bottom: 1.5em;
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25);
max-width: 100%;
display: table;
border: solid 1px #ffffff;
background-color: #ffffff;
}
.blogcard:hover {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
color: #888;
text-decoration: none;
}
.blogcard img {
width: 100%;
border-radius: 2px;
}
.blogcard-title {
font-size: 1em;
font-weight: bold;
line-height: 1.4;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
color: #000000;
margin-bottom: 1ex;
}
.blogcard-content {
padding-top: .8em;
font-size: .8em;
line-height: 1.4;
font-weight: normal;
opacity: .8;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
margin-left: 0px;
color: #333232;
}
.blogcard .blogcard-text {
color: #525252;
padding: 0px 10px;
display: block;
line-height: 1.6;
display: table-cell;
vertical-align: top;
width: 80%;
}
.card-img img {
width: 100%;
}
.no_image {
display: table-cell;
width: 100px;
height: 100px;
background-color: #ccc;
border-radius: 2px;
position: relative;
overflow: hidden;
}
.no_image::before {
content: "no image";
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}
.read-more-button {
padding: 5px 15px;
text-decoration: none;
width: 25%;
text-align: center;
border: solid 1px #949494;
border-radius: 2px;
color: #949494;
}
@media only screen and (max-width: 480px) {
.blogcard img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
aspect-ratio: 1 / 1;
display: block;
}
.read-more-button {
display:none;
}
.blogcard-title {
font-size:0.8em;
}
}

ショートコード

[blogcard1 url="https://〇〇〇〇.com（リンク先の記事URL）"]

ラベル型ブログカード（分割レイアウト）

【暗号資産取引所】口座開設から購入の手順を画像付きで解説！続きを読む

背景色：　枠線：　タイトル：　続きを読む：　.

✙ タップしてコードを見る

PHP コード

※ 上記コードのなかの「$output = ～」については、ご利用の環境によって記載内容が異なります。詳しくはこちらをご覧ください。

CSS コード

.splitlayout{
zoom:1;
}
@media only screen and (min-width: 600px) {
.splitlayout .leftarea {
float: left;
padding-right: 7px;
box-sizing: border-box;
width: 50%;
}
.splitlayout .rightarea {
float: left;
padding-left: 7px;
box-sizing: border-box;
width: 50%;
}
}
.blogcard {
position: relative;
overflow: hidden;
width: 95%;
background: #fff;
text-decoration: none !important;
display: inline-block;
max-width: 310px;
margin-right: 20px;
padding: 10px;
margin-bottom: 1.5em;
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25);
max-width: 100%;
display: table;
border: solid 1px #ffffff;
background-color: #ffffff;
}
.blogcard:hover {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
color: #888;
text-decoration: none;
}
.blogcard img {
width: 100%;
border-radius: 2px;
}
.blogcard-title {
font-size: 1em;
font-weight: bold;
line-height: 1.4;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
color: #000000;
margin-bottom: 1ex;
}
.blogcard-content {
padding-top: .8em;
font-size: .8em;
line-height: 1.4;
font-weight: normal;
opacity: .8;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
margin-left: 0px;
color: #333232;
}
.blogcard .blogcard-text {
color: #525252;
padding: 0px 10px;
display: block;
line-height: 1.6;
display: table-cell;
vertical-align: top;
width: 70%;
}
.card-img img {
width: 100%;
}
.no_image {
display: table-cell;
width: 100px;
height: 100px;
background-color: #ccc;
border-radius: 2px;
position: relative;
overflow: hidden;
}
.no_image::before {
content: "no image";
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}
.read-more-button {
padding: 5px 15px;
text-decoration: none;
width: 25%;
text-align: center;
border: solid 1px #949494;
color: #949494;
border-radius: 2px;
}
@media only screen and (max-width: 600px) {
.blogcard img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
aspect-ratio: 1 / 1;
display: block;
}
.read-more-button {
display:none;
}
.blogcard .blogcard-text {
width: 80%;
}
.blogcard-title {
font-size:0.8em;
}
}

ショートコード

<div class="splitlayout">
<div class="leftarea">
[blogcard1 url="https://〇〇〇〇.com（リンク先の記事URL）"]
</div>
<div class="rightarea">
[blogcard1 url="https://〇〇〇〇.com（リンク先の記事URL）"]
</div>
</div>

ボックス型ブログカード

【暗号資産取引所】口座開設から購入の手順を画像付きで解説！　初心者のための記事です『ビットコインやほかの暗号資産を買ってみたいけど、やり方がわからない』『初めてだから不安が多い』『そもそも暗号資産って危険なイメージがある』こんな悩みや疑問を持っていませんか。暗号資産に興味が ... 続きを読む

背景色：　枠線：　タイトル：　続きを読む：　.

✙ タップしてコードを見る

PHP コード

※ 上記コードのなかの「$output = ～」については、ご利用の環境によって記載内容が異なります。詳しくはこちらをご覧ください。

CSS コード

.splitlayout{
zoom:1;
}
@media only screen and (min-width: 600px) {
.splitlayout .leftarea {
float: left;
padding-right: 7px;
box-sizing: border-box;
width: 50%;
}
.splitlayout .rightarea {
float: left;
padding-left: 7px;
box-sizing: border-box;
width: 50%;
}
}
.blogcardsquare {
position: relative;
overflow: hidden;
width: 95%;
text-decoration: none !important;
display: inline-block;
margin-bottom: 1.5em;
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25);
max-width: 100%;
border: solid 1px #ffffff;
background-color: #ffffff;
}
.blogcardsquare:hover {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
color: #888;
text-decoration: none;
}
.blogcardsquare img {
width: 100%;
border-radius: 2px;
}
.blogcardsquare-title {
font-size: 1em;
font-weight: bold;
line-height: 1.4;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 1ex;
color: #000000;
}
.blogcardsquare-content {
font-size: 0.8em;
line-height: 1.4;
font-weight: normal;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 1em;
color: #949494;
}
.blogcardsquare .blogcardsquare-text {
display: block;
line-height: 1.6;
vertical-align: top;
padding: 10px;
text-align: center;
}
.blogcardsquare .card-img img {
width: 100%;
padding: 10px;
padding-bottom: 0;
}
.blogcardsquare .no_image {
width: 100px;
height: 100px;
background-color: #ccc;
border-radius: 2px;
position: relative;
overflow: hidden;
}
.blogcardsquare .no_image::before {
content: "no image";
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}
.blogcardsquare .read-more-button {
background-color: #ffffff;
padding: 5px 35%;
text-decoration: none;
width: 25%;
text-align: center;
border: solid 1px #c6c6c6;
border-radius: 2px;
border: solid 1px #949494;
color: #949494;
}
@media only screen and (max-width: 600px) {
.blogcardsquare img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
aspect-ratio: 1 / 1;
display: block;
}
.blogcardsquare-title {
font-size:0.8em;
}
.blogcardsquare-content {
font-size:0.7em;
}
.blogcardsquare img {
aspect-ratio: initial;
}
}

ショートコード

<div class="splitlayout">
<div class="leftarea">
[blogcard1 url="https://〇〇〇〇.com（リンク先の記事URL）" content="記事の概要（任意）"]
</div>
<div class="rightarea">
[blogcard1 url="https://〇〇〇〇.com（リンク先の記事URL）" content="記事の概要（任意）"]
</div>
</div>

ボックス型ブログカード２

【暗号資産取引所】口座開設から購入の手順を画像付きで解説！　初心者のための記事です

背景色：　枠線：　タイトル：　.

✙ タップしてコードを見る

PHP コード

※ 上記コードのなかの「$output = ～」については、ご利用の環境によって記載内容が異なります。詳しくはこちらをご覧ください。

CSS コード

.splitlayout{
zoom:1;
}
@media only screen and (min-width: 600px) {
.splitlayout .leftarea {
float: left;
padding-right: 7px;
box-sizing: border-box;
width: 50%;
}
.splitlayout .rightarea {
float: left;
padding-left: 7px;
box-sizing: border-box;
width: 50%;
}
}
.blogcardsquare {
position: relative;
overflow: hidden;
width: 95%;
text-decoration: none !important;
display: inline-block;
margin-bottom: 1.5em;
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25);
max-width: 100%;
border: solid 1px #ffffff;
background-color: #ffffff;
}
.blogcardsquare:hover {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
color: #888;
text-decoration: none;
}
.blogcardsquare img {
width: 100%;
border-radius: 2px;
}
.blogcardsquare-title {
font-size: 1em;
font-weight: bold;
line-height: 1.4;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 1ex;
color: #000000;
}
.blogcardsquare .blogcardsquare-text {
display: block;
line-height: 1.6;
vertical-align: top;
padding: 10px;
text-align: center;
}
.blogcardsquare .card-img img {
width: 100%;
padding: 0;
padding-bottom: 0;
}
.blogcardsquare .no_image {
width: 100px;
height: 100px;
background-color: #ccc;
border-radius: 2px;
position: relative;
overflow: hidden;
}
.blogcardsquare .no_image::before {
content: "no image";
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}
@media only screen and (max-width: 600px) {
.blogcardsquare img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
aspect-ratio: 1 / 1;
display: block;
}
.blogcardsquare-title {
font-size:0.8em;
}
.blogcardsquare img {
aspect-ratio: initial;
}
}

ショートコード

吹き出し付ブログカード

【暗号資産取引所】口座開設から購入の手順を画像付きで解説！

Webページのパーツごとに、多彩なデザインを提供しています！装飾を探している人はぜひ活用してみてください。

カード背景：　カード枠：　タイトル：　吹出背景：　吹出枠：　コメント：　.

✙ タップしてコードを見る

PHP コード

※ 上記コードのなかの「$output = ～」については、ご利用の環境によって記載内容が異なります。詳しくはこちらをご覧ください。

CSS コード

/* ========== Layout ========== */
.splitlayout {
zoom: 1;
position: relative;
}

@media only screen and (min-width: 600px) {
.splitlayout .leftarea {
float: left;
padding-right: 7px;
box-sizing: border-box;
width: 50%;
}

.splitlayout .rightarea {
float: left;
padding-left: 7px;
box-sizing: border-box;
width: 50%;
}
}

/* ========== Blog Card ========== */
.blogcard {
position: relative;
overflow: hidden;
width: 95%;
max-width: 100%;
max-width: 310px;
margin-right: 20px;
margin-bottom: 1.5em;
padding: 10px;
display: table;
background: #fff;
background-color: #ffffff;
border: solid 1px #ffffff;
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25);
text-decoration: none !important;
}

.blogcard:hover {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
color: #888;
text-decoration: none;
}

.blogcard img {
width: 100%;
border-radius: 2px;
}

.blogcard-title {
font-size: 1em;
font-weight: bold;
line-height: 1.4;
margin-bottom: 1ex;
color: #000000;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
}

.blogcard-content {
padding-top: 0.8em;
font-size: 0.8em;
line-height: 1.4;
font-weight: normal;
opacity: 0.8;
color: #333232;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
margin-left: 0px;
text-overflow: ellipsis;
}

.blogcard .blogcard-text {
color: #525252;
padding: 0 10px;
display: table-cell;
vertical-align: top;
line-height: 1.6;
width: 70%;
}

/* ========== Card Image ========== */
.card-img img {
width: 100%;
}

/* ========== No Image Placeholder ========== */
.no_image {
display: table-cell;
width: 100px;
height: 100px;
background-color: #ccc;
border-radius: 2px;
position: relative;
overflow: hidden;
}

.no_image::before {
content: "no image";
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}

/* ========== Read More Button ========== */
.read-more-button {
padding: 5px 15px;
width: 25%;
text-align: center;
border: solid 1px #949494;
color: #949494;
border-radius: 2px;
text-decoration: none;
}

/* ========== Speech Bubble ========== */
.container {
transform: translateY(0%);
display: flex;
justify-content: left;
align-items: start;
gap: 0 10px;
}

.speech-bubble {
position: relative;
margin: 0 0 30px 20px;
padding: 0.8em 1em;
border-radius: 5px;
background-color: #ffffff;
border: solid 2px #b0b0b0;
color: #000000;
}

.speech-bubble::before {
content: "";
position: absolute;
left: -13px;
top: 15px;
width: 13px;
height: 30px;
background-color: #b0b0b0;
color: #ffffff;
clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

.speech-bubble::after {
content: "";
position: absolute;
left: -11px;
top: 15px;
width: 13px;
height: 30px;
color: #ffffff;
background-color: #ffffff;
clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

/* ========== Responsive (Max 600px) ========== */
@media only screen and (max-width: 600px) {
.blogcard img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
aspect-ratio: 1 / 1;
display: block;
}

.read-more-button {
display: none;
}

.blogcard .blogcard-text {
width: 80%;
}

.blogcard-title {
font-size: 0.8em;
}

.container {
transform: translateY(0%);
display: flex;
justify-content: center;
align-items: start;
gap: 0 10px;
}

.speech-bubble {
position: relative;
margin: 0 0 20px 0px;
padding: 0.8em 1em;
border-radius: 5px;
}

.speech-bubble::before {
position: absolute;
left: 50%;
top: -15px;
width: 13px;
height: 30px;
clip-path: polygon(0% 50%, 100% 50%, 50% 0%);
}

.speech-bubble::after {
position: absolute;
left: 50%;
top: -10px;
width: 13px;
height: 30px;
clip-path: polygon(0% 50%, 100% 50%, 50% 0%);
}
}

ショートコード

[blogcard1 url="https://〇〇〇〇.com（リンク先の記事URL）" content="ここに概要を記載してください（任意）"]