当ブログは WordPress（Cocoon） を使って運営しているのですが、CocoonってURLを貼り付けるだけで自動的にブログカード化してくれる便利な機能がありますよね。
「AIに聞けばデザインをもっと自分好みにアレンジできないかな…？」
そう思い立ち、ふとAI（人工知能）に相談してみたところ……なんと驚くほど簡単におしゃれな「Mac風ブログカード」を作ってくれました！今回はそのカスタマイズ方法をご紹介します。
よろずメモ 学び 稼ぎ 趣味 YOROZUMEMO|
yorozumemo.com
CSS公開
上記のように表示するためのCSSを公開します！
こちらのCSSをwordPressのテーマや追加CSSに追記することでMac風に表示されます！ AIに聞けばもっと自分好みに変更も可能ですよ～
/************************************
** ブログカード
************************************/
/* ==========================
Mac風ブログカード（Cocoon）
========================== */
.blogcard {
position: relative;
overflow: hidden;
border-radius: 14px;
background: #ffffff;
border: 1px solid #d8d8d8;
padding-top: 42px;
box-shadow: 0 8px 24px rgba(0,0,0,.08);
transition: all .25s ease;
}
.blogcard-wrap:hover,
.blogcard:hover{
transform: translateY(-4px);
box-shadow:0 18px 40px rgba(0,0,0,.15);
}
/* 上部バー */
.blogcard::before{
content: "🌐 Open Link";
color:#888;
font-size:13px;
line-height:42px;
padding-left:100px;
position:absolute;
top:0;
left:0;
width:100%;
height:42px;
background:#efefef;
border-bottom:1px solid #d7d7d7;
}
/* Macの3色ボタン */
.blogcard::after{
content:"";
position:absolute;
left:18px;
top:15px;
width:11px;
height:11px;
border-radius:50%;
background:#ff5f57;
box-shadow:
18px 0 #febc2e,
36px 0 #28c840;
}
/* サムネイル */
.blogcard-thumbnail,
.blogcard img{
border-radius:0;
}
/* タイトル */
.blogcard-title{
font-size:20px;
font-weight:700;
margin-top:8px;
}
/* 説明 */
.blogcard-snippet{
color:#666;
line-height:1.8;
}
/* URL */
.blogcard-url{
color:#999;
font-size:13px;
}
/* リンク全体 */
.blogcard-wrap a,
.blogcard a{
text-decoration:none;
color:inherit;
}