ブログカード基本CSSデザイン

1. ブログカードを作りたいと思うサイト/ページを開く
2. 登録したブックマーク（ブックマークレット）をマウスでクリック
3. ブログカードのコードが自動で作成される
4. ポップアップ（小窓）に表示されたコードをコピー
5. Bloggerの記事作成画面でHTMLビューモードで貼り付け

/* カード全体像 */
.blogcard {
    margin: 2rem auto;
    padding: 1.5rem 1rem;  /* カード内余白 */
    border-radius: 8px;  /* カードの角を丸める */
    border: 1px solid rgb(4,65,98);
    box-shadow: 6px 6px 10px 0 rgba(0, 0, 0, .1);
    background: white;
    transition: .4s ease-in-out;
}
.b-link, .b-cite {
    position: relative;
    width: 95%;
}
/* float親要素 */
.blogcard-content {
    margin: 0 auto;
    overflow: hidden;
}

/* OGP画像 */
.blogcard-image,
.blogcard-image-wrapper,
.blogcard-image-wrapper img {
    width: 100px;  /* スマホ表示サイズpxで変更 */
    height: 100px;  /* スマホ表示サイズpxで変更 */
    overflow: hidden;
    border-radius: 8px 0 0 8px;
}
.blogcard-image,
.blogcard-image-wrapper {
    display: inline-block;
}
.bi-link, .bi-cite {
    float: left;
}
.blogcard-image-wrapper img {
    object-fit: cover;
    object-position: center top;
    transition: .4s ease-in-out;
}

/* 記事タイトル */
.blogcard-title {
    font-weight: bold;
    line-height: 1.3;
    color: rgb(4,65,98);  /* タイトルの文字色 */
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    letter-spacing: 0.1px;
    font-size: 15px;
}
.bt-link, .bt-cite {
    margin-top: 7px;
    margin-bottom: 0;
    padding-right: 16px;
    padding-left: 16px;
    -webkit-line-clamp: 3;
    max-height: calc(15px * 1.3 * 3);
}
.blogcard blockquote {
    position: static;
    margin: 0;
    padding: 0;
    box-shadow: none;
    border: 0;
    background: transparent;
}
.blogcard blockquote::before,
.blogcard blockquote::after {
    content: none;  /* 引用符の表示なし */
}

/* 記事概要 */
.blogcard-description {
    margin: 15px 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: rgb(0, 0, 0);
    letter-spacing: 0px;
    font-size: 12px;
    font-weight: normal;
}
.bd-link, .bd-cite {
    display: none;
}
.blogcard-text p {
    margin-bottom: 1rem !important;
}

/* フッター */
.blogcard-footer {
    font-size: 11px;
    color: rgb(4,65,98);
    font-weight: normal !important;
}
.bf-link, .bf-cite {
    position: absolute;
    margin-top: -30px;
    right: 16px;
}
.blogcard-footer img {
    margin-right: 5px;
    vertical-align: middle;
    border-radius: 2px;
    padding: 0;
}

/* PCでのデザイン */
@media screen and (min-width:768px) {

    /*--記事タイトル--*/
    .bd-link, .bd-cite {
        overflow: hidden;
        display: -webkit-box;
        letter-spacing: 0.1px;
        line-height: 1.4;
        font-size: 13px;
        padding-right: 16px;
        padding-left: 16px;
        max-height: calc(13px * 1.4 * 3);
    }
    .blogcard-title {
        padding-top: 10px;
        font-size: 17px;
        line-height: 1.3;
    }
    .blogcard-title a {
        padding-right: 4px;
        letter-spacing: 0.01em;
    }
    .bt-cite,
    .bt-link {
        -webkit-line-clamp: 2;
    }
    .biw-cite img,
    .biw-cite,
    .bi-cite {
        width: calc(150px * 1.33);  /* OGP画像比率*/
        height: 150px;
        border-radius: 8px 0 0 8px;  /* 枠に合わせて角を丸める */

    }
    .biw-link img,
    .biw-link,
    .bi-link {
        width: calc(150px * 1.33);  /* OGP画像比率 */
        height: 150px;
        border-radius: 8px 0 0 8px;  /* 枠に合わせて角を丸める */
    }
}
figure.blogcard {
    margin: 2rem auto;
    transition: .4s ease-in-out;
}

/* カードマウスホバー変移 */
figure.blogcard:hover {
    box-shadow: none;
    background: #ededed;
}
figure.blogcard:hover .blogcard-image-wrapper img {
    filter: brightness(80%);
}

• width: calc(150px * 1); height:150px; ＝高さ150pxの1：1の正方形
• width: calc(150px * 1.33); height:150px; ＝高さ150pxの4：3の長方形
• width: calc(150px * 1.91); height:150px; ＝高さ150pxの1：1.91の長方形

ブログカードの四隅を丸めている場合

.blogcard の border-radius: 8px;  /* カードの角を丸める */ で外枠の角を丸めているので、中の画像も同じように丸めたい場合は /* 枠に合わせて角を丸める */ で設定できます。

ちなみに上記コードでは、中のアイキャッチ画像の角を丸めているのは左上と左下だけです。入力する数値（pxで指定）は border-radius: 左上　右上　右下　左下 と反映されます。

また枠もアイキャッチも丸めたくない場合は、各CSS border-radius: を1行削除してください。

最後に

他にもブログカードをつくる方法がありますが、記事作成作業の中で頻繁に使うことを考えるとブックマークレットの手軽さが1番おすすめです。

とはいえ、記事途中でのブログカードを使いすぎると記事が読みにくくなるので、気を付けたいですね。

その他参考

• ブロガーさん必見！！簡単にできるブックマークレット＆ブログカードデザイン