ブログカードをデザインをAIに頼んで視認性の良いものに変えてもらいました。
ブログカードとは
ブログカードとは文字通りカード状で表示するリンクのことで、こんなやつです。
このままでも良いのですが、ちょっと味気がないので、AIに頼んでブログカードのデザインを少し変えてもらいました。
以前のブログカードも「記事を読む」という文字を追加するなどしていたのですが、もう少し目立つようにしたかったのでAIにお願いしたらこんな感じにアレンジしていただけました。
Luxeritasのブログカードを少しアレンジしてみた
PV（回遊率）を上げるためにLuxeritasのブログカードを少しアレンジしてみました。
t-blog.tgr-guitar.com
変更前「記事を読む」を追加：
当ブログの見出しには緑が入っているので、緑を入れてくれました。
変更後「枠線に色付け」：
いい感じですね。これでクリックが増えてくれればありがたい！！
CSSをいじっただけなので、削除すれば簡単に元に戻せます。
変更前CSS：
/* ========================================
Luxeritasブログカードを見やすくするCSS
======================================== */
/* Blog Card */
a.blogcard-href::before {
content: "記事を読む";
position: absolute;
color: white;
font-size: 12px;
background: #268e67;
width: 90px;
height: 20px;
text-align: center;
bottom: 0;
right: 0;
border-radius:8px 0 0px 0;
}変更後CSS：
/* ========================================
Luxeritasブログカード見やすく調整CSS
擬似要素「記事を読む」＋枠線・影対応
======================================== */
/* ブログカード全体 */
a.blogcard-href {
display: block;
position: relative;
margin: 1em 0; /* 上下の余白 */
padding: 0.7em; /* 内側余白 */
border: 2px solid #268e67; /* 枠線を太く */
border-radius: 8px; /* 角丸 */
box-shadow: 0 3px 6px rgba(0,0,0,0.1); /* ほんのり影 */
background-color: #fff; /* 背景を白に */
text-decoration: none;
transition: all 0.2s ease-in-out;
}
/* ホバー時の明るさアップ */
a.blogcard-href:hover {
background-color: #fafafa;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
/* 「記事を読む」ボタン */
a.blogcard-href::before {
content: "記事を読む";
position: absolute;
color: white;
font-size: 12px;
background: #268e67;
width: 90px;
height: 20px;
text-align: center;
line-height: 20px; /* 縦中央 */
bottom: 0;
right: 0;
border-radius: 8px 0 0 0;
}こんなのAIがなければ自分では絶対にできません、感謝です！！
