おちゃのこ通信 Vol.366 - デザイン道場 - おちゃのこネットメールマガジン

このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。

皆さん、こんにちは。おちゃのこネットの刑部です。

今回のデザイン道場は、注意書きなどに利用する※付きの番号リストをスタイルシートで簡単に作成する方法をご紹介します。

	https://cafe-responsive.ocnk.net/

HTMLタグを挿入する

自由記入欄やHTMLタグ利用可能エリアに下記のHTMLタグをコピーして貼り付けてください。

<ol class="asterisk">
<li>ご注意事項1</li>
<li>ご注意事項2</li>
<li>ご注意事項3</li>
</ol>

スタイルシートを編集する

デザイン管理→スタイルシートの編集から下記の指定をコピーして貼り付けてください。
※貼り付け位置は最下部にお願いします。

リストに数に応じて、アスタリスク横に自動で番号が付きます。

ol.asterisk {
counter-reset: number;
list-style: none;
position: relative;
padding-left: 25px;
font-size: 14px;
}

ol.asterisk li:before {
content: "※"counter(number)" ";
counter-increment: number;
position: absolute;
left: 0px;
}

なお、お問い合わせは下記ページからお願い致します。