特定のリストだけカスタマイズを適用する方法【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;
}
コードの詳細

  • .list-3:リスト全体の定義
  • .list-3 li (a):主にテキスト周り
  • .list-3 li::before:テキスト前の記号

適用方法

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

  1. デフォルトのリストを作成
  2. HTMLとして編集
  3. クラス名の追加

クラス名を追加する場所

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

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

↓追加後

<ul class="list-3"><li>リスト1</><li>リスト2</li></ul>
※ulの後に半角スペース

活用方法

流れはOKかと思いますので、後はカスタマイズしたリストをクラス名ごとにいくつか作成し、記事の内容やデザインに応じてピンポイントで適用していきます。

Comment

タイトルとURLをコピーしました