[Cocoon] ブログカードを2列に並べるCSS

メッセージ動画の一覧を並べるために、Cocoonのブログカードに「thumbnail-only」のCSSクラスを追加しました。

style.cssに以下のコードを追加しました。

ポイントは、「display: flex」と「flex-wrap: wrap」です。

/** 2024-07-01 ブログカードを2列に並べるCSS */

.blogcard-type.thumbnail-only .blogcard-snippet{
  display: none;
}
.blogcard-type.thumbnail-only .blogcard-footer{
  display: none;
}
.thumbnail-only .ib-right .blogcard-content {
  margin-right: 0;
  min-height: 0;
}

article .thumbnail-only .ib-right .blogcard-content .blogcard-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 12px;
}

.thumbnail-only .ib-right .blogcard-thumbnail {
margin-right: 0;
width:100%;
float: none;

}
.blogcard-type.thumbnail-only {
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
}

.blogcard-type.thumbnail-only a {
width: 50%;
}
     
    

LINEで送れる♪暑中見舞い・残暑見舞いメッセージ動画集（2025年）

教室で公開している暑中見舞い・残暑見舞いのメッセージ動画をまとめました。各動画の公開ページに赤いダウンロードボタンがあります。ご自身のスマートフォンに保存をして、LINEなどで送信してみてください。一般に…暑中見舞いは、「小暑（7月7日ごろ）」から「立秋（8月6日ごろ）」まで。残暑見舞いは、「立秋（8月6日ごろ）」から8月末まで。2025年は、小暑が7月7日、立秋は8月7日七夕・暑中見舞い（2025年7月7日〜8月7日）残暑見舞い特集（2025年8月7日〜）各動画ページにある...

chiilabo.com

こちらもどうぞ。

[Cocoon] ブログカードのラベルを小さくしたけど

ブログカードのラベルを表示させたとき、シンプルなカードデザインと合わないと感じました。少し重なっています。そこで、ラベルの大きさを少し小さくしてみました。/** ブログカードのラベルを小さく 2024-05-19 */.blogcard-label { top: -22px; left: 0px; padding: 0px .6em;}Cocoonテーマには「ブログカード」ブロックがあり、ラベルを設定できます。しかし、スタイルシートを変更して表示を確認したところ、予想と異なる...

chiilabo.com

[Cocoon] ブログカードをラベルボックスのように表示するCSS

カタカナ用語は、はじめて目にする人には意味がわかりにくいものです。記事の中で共通して使われる用語説明を、挿入しやすいように、「ブログカード」を活用することにしました。ブログカードでは、スニペットという概要を表示できます。用語と説明を小さな記事にしておけば、ブログ内に挿入できます。「word-description」というHTMLクラスへのスタイルシートで「ラベルボックス」のように表示させてみます。こちらがスタイルシートです。不要な項目を非表示（display: none;）に...

chiilabo.com

[Cocoon]外部ブログカードのサイトアイコンを上に移動した【CSSのposition:absolute】

以前、funtions.phpでテンプレートを変更することで、ブログカードのデザインを変更しました。しかし、「デザインを変更するならCSS」ということで、改めて挑戦してみました。こんなふうに変えましたいつものようにビフォー・アフターをお見せします。↓こうなりました。HTML要素を変更せずにちゃんとCSSでデザインを変えられました。CSSコードはこちらポイントはblogcard-footer要素の位置をabsolute（絶対配置）にして、移動することです。親要素内に自由に配置で...

chiilabo.com

QRコードを読み込むと、関連記事を確認できます。