【WordPress Cocoon】ブログカードの一部をタイルカード風に変える方法

WordPressの無料テーマ「Cocoon」で、本文中のブログカードの一部をタイルカード風に変える方法について解説します。

他のWordpressテーマでも、ブログカード機能がある場合、考え方は参考になるのではないかと思います。

概要【ブログカードの一部をタイルカードに変える】

Cocoonのブログカード機能は、本文中にURLを入力すると

https://wp-cocoon.com/

Cocoon

SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100％GPLテーマです。

wp-cocoon.com

このように表示されますが、設定で変更できる点は「サムネイル配置の左右」と「日付の表示」くらいなので、インデックスページのようにカードの形状を変えることは出来ません。

今回は通常のブログカード形式をデフォルトのまま、

この画像のように変更していきたいと思います。(原寸大です)

手順 【ブログカードの一部をタイルカードに変える】

1. CSSを入力 (CSSクラスを決めておく)
2. 「2カラム」「ブログカード」を使用して、グループを作成

CSSを入力 (classを決めておく)

「外観」「テーマエディター」を開き、子テーマのstyle.cssに追記します。
(親テーマに書くとアップデートの際に消えてしまいます)

.linklist .wp-block-group__inner-container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.linklist .wp-block-cocoon-blocks-blogcard {
width: 100%;
}
.linklist .blogcard-wrap {
max-width: none;
}
.linklist .blogcard-thumbnail {
float: none;
width: 100%;
margin: 0;
}
.linklist .blogcard-thumnail img {
width:100%
}
.linklist .blogcard-content {
padding: .5em;
margin-left: 0;
max-height: none;
min-height: auto;
}
.linklist .internal-blogcard-snippet {
display: none;
}

「linklist」の部分は、後ほど作成するグループに追加するCSSクラスになるので、名前は任意で決めてください。

「2カラム」「ブログカード」を使用して、グループを作成

編集中の完成イメージです。