[Cocoon]アイコンリストにステップ箇条書きのカスタムクラスを追加した

これが普通のアイコンリストです。

そこに、追加CSSクラスに「step-list」を入れて、アイコンを変更してみます。

style.cssに追加しました。

/** step-listタグをつけるとアイコンリストのタイトルが普通になる 2024-06-02 */
.step-list .iconlist-title {
  font-size: 1em;
  font-weight: 900;
  padding-left: 1.2em;
}
.step-list .iconlist-title::before {
    margin-left: -1.3em;
    content: "\f2b4";
    font-family: FontAwesome;
    margin-right: .4em;
    position: absolute;
    opacity: 0.6;
}

.step-list.iconlist-box li::before {
   margin-left: -1.3em;
    opacity: 0.6;
}

.article .step-list.iconlist-box ul li {
  margin-left: 0.2em;
  margin-top: 0.7em;
}
.article .step-list.iconlist-box ul li::first-line {
  font-weight: 900;
}

こちらもどうぞ。

[Cocoon]アイコンリストのデザインをラベルボックスみたく余白をつめた

Cocoonのアイコンリストのデザインが、ラベルボックスに比べて余白が多すぎる感じがしたので、修正しました。ビフォー・アフターを比べる元のデザインがこれでちょっとラベルボックスに比べると間延びしている気がします。こんなふうにしました。ほんとはさらにリストタイトルをラベルのようにしたかったんですが、ボーダーをつけるdiv要素を変えるのは大変だったので、やめました。Cocoonのラベルボックスのいいところ記事の中のポイントが目立って、読みやすいことです。Cocoonのアイコンリス...

chiilabo.com

[Cocoon] Amazonリンクに個別にPR表記をつける[CSS]

ちょっと商品紹介をしたいとき記事の中にちょっとAmazonの商品紹介を入れたいときがあります。記事全体がPRでもないので、記事先頭にPR表記を入れるのにも抵抗があります。そういうときのために、Amazonリンクに個別にPR表記をつけるようにCSSを変更しました。テーマのstyle.cssに以下のコードを追加しました。/** Amazonリンクに個別にPR表記をつける 2024-05-01*/.product-item-title::before { content: "[PR...

chiilabo.com

[CSS] 印刷時にラベルボックスの一部だけが別のページになるのをどうにかしたい

メモ。ラベルボックスの見出しラベルボックスの内容こんな感じで、ラベルボックスのラベル部分と内容部分が別のページに印刷されてしまうのが気になります。たぶん、CSSのpage-breakみたいなのがあった気がする。

chiilabo.com

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