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

Cocoonブログカードカスタマイズデザインカスタマイズ
この記事は約3分で読めます。

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

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

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

こんな見た目になります

横長
横長タイプ
タイル型
タイル型タイプ

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

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

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

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

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

ブログカードをブロックエディタで使う時

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

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

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

追加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;
}

コメント

  1. […] 【Cocoon】ブログカードのデザインをカスタマイズ(2種類)alice.yuhostyles.com2021.… […]

  2. せんべろ より:

    タイル型のブログカードのタイトルの文字の大きさを変更するにはどのようにすれば良いですか?

    • YuhomyanYuhomyan より:

      .blogcard-title {
      font-size: 任意の大きさ;
      }

      を追加します。

      • せんべろ より:

        ありがとうございました。
        質問ですが、
        }
        .blogcard-wrap{
        width: 80%;
        }
        にした場合、PCでの画像がボケてしまいます。修正方法がありますか?
        AMPページに対応させる方法はありますか?

タイトルとURLをコピーしました