[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で送れる♪暑中見舞い・残暑見舞いメッセージ動画集（2024年）

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

chiilabo.com

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

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

chiilabo.com

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