コピペOK♪Cocoonの数字付リストを加工しちゃおう

ただの数字じゃつまらない(笑)。

「順番表記が必要なリストを書きたい」でも、でもデフォルトのままだと数字が表示。
英語の数字が使いたい時も有るのに・・・。

そら

自分の思うとおりの数字になるように、私のCSS文を参考にしていただけたらと思います。
変更できる数字はたくさん種類が用意されています♪

この記事はCSSを使用しますが、コピペ文のコードの意味も張り付け場所も紹介しますので、初心者さんでも大丈夫。
なるべくコードを少なく、難しめのコードは使用しないようにしています。
目指せ「簡単ちょこっと装飾」です(笑)

コピペする場所

「外観」→「カスタマイズ」→「追加CSS」の順にクリックしていってください。

ol li{
list-style-type:upper-roman;
}
ol li::marker {
color:darkred;
}

リストの数字の形状を変更するCSSのコードの説明をしていきます(^^♪
必ず半角英数字になっていいることを確認して使用してください。

「　ol li　」これは数字を使ったリストへの命令だよ～と指定しています。

リストの数字部分の形状を指定しています。
この種類が沢山あるのです(￣▽￣;)

そら

５からのカウントにしてあります。
下で紹介している開始番号を指定する例として表示してみました。

リストの数字部分のみへの命令だよ～と指定しています。

リストの数字部分の色を指定しています。

color:カラーコード；

カラーコードは英語でも大丈夫です。

そら

こんな風に英語を記入してもOKなんです。
私はピンクを使用することが多いので、英語でpinkとよく記載しています。

他のカラーコードを知りたい場合は、私の主サイトに記事を作成してありますのでそちらを参考にしていただければと思います。

通常は「1」からスタートする数字を、「5」や「10」からカウントをしていく方法を紹介します(^^♪

そら

これは通常のブロックエディタでは使用できませんでした。
使いたい場合は、「クラシック」ブロックを使用してください。

<ol>の後ろに　「start=”開始したい数字”」を追加してあげます。

例）5からカウントしていく

今回は、簡単に数字部分の文字だけのカスタマイズを紹介しました。
文字だけではなく、数字部分の背景も実は指定することもできます。
これに関しては、要望があったら追記しようかなぁと思っています(￣▽￣;)