今回は箇条書きデザインをカスタマイズしてみたいと思います。
参考にした記事はこちら↓
design-work.tatsublo.net
◆目次◆
箇条書きのカスタマイズ
箇条書きで並べるだけだとこんな感じであまり目立ちません。↓
・サンプル1
・サンプル2
・サンプル3
・サンプル4
デフォルトの「箇条書き設定」だと頭に●がつくだけ、という感じですが、カスタマイズで目立つ感じにすることができます。
メモ
ちなみに、デザインCSSの一番下に貼り付けたらなぜか反映されませんでした。
もともとあるCSSのコードのすぐ下に貼るのがよさそうです。
シンプルな箇条書き
.entry-content ul{
background-color: rgb(240, 240, 240);
border: 1px dotted rgb(56, 56, 56);
padding: 10px 30px;
}
このコードを「カスタマイズ」→「デザイン」→「デザインCSS」にはりつけるとこうなります↓
シンプルなほうが使いやすそうだなと思いました。
色を変えてバリエーションを作ってみます。
ピンク系
.entry-content ul{
background-color: #ffefff;
border: 1px dotted #f19ca7;
padding: 10px 30px;
}
このコードをデザインCSSに貼り付けると雰囲気はこんな感じ↓
・サンプル1
・サンプル2
・サンプル3
・サンプル4
オレンジ系
.entry-content ul{
background-color: #fff7ef;
border: 1px dotted #f7b977;
padding: 10px 30px;
}
このコードをデザインCSSに貼り付けると雰囲気はこんな感じ↓
・サンプル1
・サンプル2
・サンプル3
・サンプル4
緑系
.entry-content ul{
background-color: #efffef;
border: 1px dotted #a7d28d;
padding: 10px 30px;
}
このコードをデザインCSSに貼り付けると雰囲気はこんな感じ↓
・サンプル1
・サンプル2
・サンプル3
・サンプル4
水色系
.entry-content ul{
background-color: #efffff;
border: 1px dotted #88bfbf;
padding: 10px 30px;
}
このコードをデザインCSSに貼り付けると雰囲気はこんな感じになります↓
・サンプル1
・サンプル2
・サンプル3
・サンプル4
おしゃれなのもちょっと使ってみたいと思います。
ステッチ風箇条書き
.entry-content ol{ background-color: #ecea8d; box-shadow: 0px 0px 0px 5px #ecea8d; border: dashed 2px #fff; padding: 10px 30px; }
#ecea8dの部分が背景の色、#fffが線の色ですね。
このコードをデザインCSSに貼り付けるとこんな感じになります↓
・サンプル1
・サンプル2
・サンプル3
・サンプル4
色を変えてバリエーションを作ってみます。
ピンク系
.entry-content ol{ background-color: #fdeff2; box-shadow: 0px 0px 0px 5px #fdeff2; border: dashed 2px #fff; padding: 10px 30px; }
このコードをデザインCSSに貼り付けるとこんな感じになります↓
・サンプル1
・サンプル2
・サンプル3
・サンプル4
オレンジ系
.entry-content ol{ background-color: #fff2e5; box-shadow: 0px 0px 0px 5px #fff2e5; border: dashed 2px #fff; padding: 10px 30px; }
このコードをデザインCSSに貼り付けるとこんな感じになります↓
・サンプル1
・サンプル2
・サンプル3
・サンプル4
緑系
.entry-content ol{ background-color: #e5ffe5; box-shadow: 0px 0px 0px 5px #e5ffe5; border: dashed 2px white; padding: 10px 30px; }
このコードをデザインCSSに貼り付けるとこんな感じになります↓
・サンプル1
・サンプル2
・サンプル3
・サンプル4
水色系
.entry-content ol{ background-color: #dbffff; box-shadow: 0px 0px 0px 5px #dbffff; border: dashed 2px white; padding: 10px 30px; }
このコードをデザインCSSに貼り付けるとこんな感じになります↓
・サンプル1
・サンプル2
・サンプル3
・サンプル4
箇条書き用に一個、枠を設定しておくと便利そうですね!
箇条書きに設定しましたが、目次にも反映されてるような気がします!