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

2024.08.08

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

1. 「関連」という文字を先頭に追加した

CocoonテーマのブログカードにCSSクラス「simple」を追加すると、文字リンクにするようにしています。
このまえに「【関連】」という文字を自動的に追加するようにしました。

.wp-block-cocoon-blocks-blogcard.simple::before {
  content:"【関連】";
  font-size:80%;
  font-weight: bold;
}

以前にも一度試みて途中で断念していました。

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

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

目次に戻る

2. simpleコード全体

だいぶごちゃごちゃしてきたので、いったんコードを整理することにしました。

simpleに関係するコード全体は以下のようになりました。

順番を整理したり、よく見るとタイプミスが合った箇所（.blogcard-snipet、正しくは .blogcard-snippet ）を削除しました。

/** * ブログカードの抜粋（simple クラス） * */

.wp-block-cocoon-blocks-blogcard.simple {
	margin-bottom:1.4em;
	margin-top:1.4em;
    font-size:90%;	
}

.wp-block-cocoon-blocks-blogcard.simple::before {
	content:"【関連】 ";
	font-weight: bold;
    font-size:90%;	
}

.simple .blogcard-wrap {
  margin: 0;
  background-color: transparent;
  font-size:110%;	 
}

.simple .blogcard {
  margin: 0;
  border: 0;
  padding-left: 0;
  padding-bottom: 0;
  padding-top: 0px;
}

.simple .blogcard-content {
  margin-right: 0px;
  min-height: 0px;
}

.simple .blogcard-title {
  padding-top: 0px;
  margin-left: 30px;
  margin-top: 0px;
  margin-bottom: 10px;
  color: #1967d2;
  text-decoration: underline;
}

.simple .blogcard-title::before {
    position:absolute;
    content: "\f0da";
    font-family: FontAwesome;
    left:14px;
}

.simple p {
  margin-bottom: 0.3em;
}

.simple .blogcard-snippet, 
.simple .blogcard-thumbnail, 
.simple .blogcard-domain,
.simple .blogcard-footer {
  display: none;
}

@media screen and (max-width: 834px) {
  .simple .blogcard-content {
    margin-right: 0px;
    min-height: 0px;
  }
  .simple .blogcard-title {
    font-size: 16px;
  }
  .simple .blogcard-footer {
    top: -4px;
  }
}

ついでに、項目の先頭には、「blogcard-footer」にあるファビコンを表示するのではなく、を表示するようにしました。