記事内の特定のリストだけカスタマイズを適用する方法【Cocoon】

Cocoonに限った事ではりませんが、記事を作成するにあたりリストを活用する事は多いと思います。その中で「この記事のこのリストだけカスタマイズを適用したい！」というケースはないでしょうか。

左はデフォルト – 右がカスタマイズ

カスタマイズのサンプルコード

ポイントは「.list-3」のクラス名。任意の名前でOKですが、分かりやすく覚えやすい名称にしておきましょう。

/**リストサンプル**/
.list-3 {
  position: relative;
  padding: 1 0.5em;
  margin-top: 1em;
  list-style-type: none;
  border: none;
}
.list-3 li {
  line-height: 2.3em;
}
.list-3 li a {
  text-decoration: none;
}
.list-3 li::before {
  font-family: FontAwesome;
  position: absolute;
  content: "\F058";
  color: #696969;
  font-weight: bold;
  left : 0.8em;
}
.list-3 li:last-of-type {
  border-bottom: none;
}

あくまでもサンプルコードなので参考としてご活用ください。

適用方法

適用方法は以下の流れで行います。

1. 記事にいつも通りリストを作成
2. HTMLとして編集
3. クラス名を追加

クラス名を追加する場所

最初の<ul>の中にクラス名を追加します。

<ul><li>リスト1</><li>リスト2</li></ul>

↓追加後

<ul class="list-3"><li>リスト1</><li>リスト2</li></ul>