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

ブログカードのラベルを表示させたとき、シンプルなカードデザインと合わないと感じました。少し重なっています。

そこで、ラベルの大きさを少し小さくしてみました。

/** ブログカードのラベルを小さく 2024-05-19 */
.blogcard-label {
    top: -22px;
    left: 0px;
    padding: 0px .6em;
}

Cocoonテーマには「ブログカード」ブロックがあり、ラベルを設定できます。

しかし、スタイルシートを変更して表示を確認したところ、予想と異なる結果になりました。リンクが並んでいる場合、1番上のカードにだけラベルがつくことを期待していましたが、すべてのカードにラベルがついてしまいました。

確かに、もともとブログカードのラベルは、記事ごとに追加されます。

しかし、これではバランスが良くありません。

ブログカード自体の処理を変更するという方法もありますが、今回はラベルを使って関連記事を示すのは取りやめることにしました。ブログカード上にテキストを表示するだけでも十分だと判断したためです。

後日、解決しました。

ブログカード抜粋の先頭に「関連」を付けた

Cocoonテーマの「ブログカード」のカスタムCSSクラス「simple」の先頭に「【関連】」という文字を自動的に追加するようにしました。 コードを整理して、よりスッキリとしたデザインに改善しました。 「関連」という文字を先頭に追加した CocoonテーマのブログカードにCSSクラス「simple」を追加すると、文字リンクにするようにしています。このまえに「【関連】」という文字を自動的に追加するようにしました。 .wp-block-cocoon-blocks-blogcard...

chiilabo.com

こちらもどうぞ。

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

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

chiilabo.com

[WordPress 6.5] ブログカードでYouTube動画がうまく表示されない？(Cocoonのキャッシュとリンク)

Cocoonテーマの「ブログカード」を使ってYouTube動画を埋め込んでいるのですが、たまに外部ブログカードとして表示されてしまうことがあるんです。 原因を調べてみると、YouTubeで公開前処理が終わる前に埋め込み動画を設置したことや、URL貼付け時に「リンク」に自動変換されていることが関係しているようです。 埋め込み動画を設置するには、YouTube上で閲覧可能になるまで待って、URLに付いたリンクを削除する必要があります。 ブログカードで動画を埋め込んでいる ブログ内...

chiilabo.com

WordPress 6.5にアップデートしたらブログカード内のURLに改行が追加されるようになった[Cocoon]

昨日、WordPress6.5にアップデートしたところ、ブログカードを再編集したときに、URLの間に空行が追加されることに気づきました。 どうも、ブロックエディタのブログカード内での改行の仕様が変更になっているようです。 Cocoon バージョン：2.7.2.5で修正されました。 環境 Cocoonバージョン: 2.7.2.3 WordPress: 6.5 ブログカードが妙に縦に伸びている ブログカードに複数URLを挿入する運用をしています。 WordPress6.5にアップ...

chiilabo.com

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