ブログを書いていると比較的初めの段階でリスト表示したいと思うときがあると思います。
今回は、そのやり方の紹介になりますが、標準のままでは、味気ないので
CSSを触って雰囲気の良いリスト表示のデザインに変更したいと思います。
リストの設定のやり方 リストを使う方法１
リストを記載する。
リスト１
リスト２
リスト３
リストをすべて選択して、右クリックから「リスト」を選択する。
標準で用意されているリスト その１ 中黒点
- リスト１
- リスト２
- リスト３
＜ やり方 ＞
標準で用意されているリスト その２ 数字
- リスト１
- リスト２
- リスト３
＜ やり方 ＞
リストの設定のやり方 HTMLを使う方法２
下記を記述します！
記述した結果です！HTMLでも同じようにリスト表示されます。
- リスト1
- リスト2
- リスト3
リスト表をカスタマイズする
参考になるサイトが下記になります。
このサイトを参考にStyle.cssにCSSを追加していきます。
Style.cssが表示されますので、一番下に追加します。
下記のCSSの意味は、class=”wline”で記述したタグを装飾するということになります。
/* Cocoon CSS リスト start 20210208 /
.wline {
color: #668ad8; border: double 5px #668ad8; /二重線 太さ 色*/
background: #f1f8ff;
padding: 0.5em 0.5em 0.5em 2em;
}
ul.wline > li {
line-height: 1.5;
padding: 0.5em 0;
}
/* Cocoon CSS リスト end 20210208 */
つまり、HTMLでclass=”wline”を設定してあげると下記のように
Style.cssで追加したCSSがあたります。
- リスト1
- リスト2
- リスト3
つまり、今回は、Class指定で限定的にリスト表示の装飾を変更する方法をお伝えしました。
もし、すべてのリストを変更する場合は、CSSを下記のように変更する必要があると思います。
.wline { ⇒ ul{
ul.wline > li { ⇒ ul > li {
ご参考までに。
別のCSSを設定した場合
- リスト1
- リスト2
- リスト3
コメント