【Cocoon】ブログカードのデザインをカスタマイズ(2種類)

Cocoonのブログカードのデザインをカスタマイズする方法を解説していきます。

ブログカードは記事内で自分のブログ記事や外部のサイトなどを紹介する際に使います。

ただリンクを貼るだけよりも見やすく、またサムネイルが見えるためリンク先がどんなサイトなのか分かりやすくなるので便利です。

こんな見た目になります

デザインも、横長タイプとタイル型タイプの2種類を作成しました。

どちらも簡単なコピペでできるので、ぜひ使ってみてください。

Cocoonのブログカードの使い方

「すでに使ったことあるよ」という方は読み飛ばしてください。

ブログカードは通常の段落などと同様に、ブロックエディタで呼び出すことができます。

コードを書かなくても良いのでとても簡単です。

Cocoonのブログカードをカスタマイズする手順

カスタマイズといっても、カスタマイズ用のコードを追加CSSにコピペするだけです。

追加CSSは、「管理画面→カスタマイズ→追加CSS」で編集できます。

カスタマイズ用コード

カラーコードの部分は好きな色に置き換えて使っていただけます。

横長のブログカード

/* Blog Card */
.blogcard {
	padding: .5em;
	border: none;
	box-shadow: 0 1px 5px 0 rgb(0 0 0 / 25%);
}

.blogcard-label {
	background-color: #7fbfff;
	padding: .3em 1em;
	bottom: 5px;
    right: 5px;
    top: auto;
    left: auto;
}
.blogcard-content {
    padding: .5em;
    margin-left: 0;
    max-height: none;
    min-height: auto;
}
/* URLと日付を非表示にする */
.blogcard-footer{
	display: none;
}

タイル型のブログカード

/* Blog Card */
.blogcard {
	width: 100%;
	border: none;
	padding: 0;
	box-shadow: 0 1px 5px 0 rgb(0 0 0 / 25%);
}
.blogcard-wrap{
	width: 40%;
}
.blogcard-label {
	background-color: #7fbfff; /* ラベルの背景色 */
        color: white; /* ラベルの文字色 */
	top: 5px;
	right: 5px;
	left: auto;
}
.blogcard-content {
    padding: .5em;
    margin-left: 0;
    max-height: none;
    min-height: auto;
}
.blogcard-thumbnail {
    float: none;
    width: 100%;
    margin: 0;
}
.blogcard-thumbnail img {
    width: 100%;
}
.blogcard-footer {
    padding: .5em;
}

ブログカードのURLと日付を非表示にする方法

以下のコードを追加すると、ブログカードのURLと日付を非表示にできます。

このあたりはお好みに合わせて使ってみてください。

このページでは、横長タイプでは非表示に、タイル型の方では表示にしています。

/* URLと日付を非表示にする */
.blogcard-footer{
	display: none;
}