はてなブログカスタマイズを0から学ぶ

無料版はてなブログのカスタマイズを学んでいくブログ

箇条書きデザインをカスタマイズ

今回は箇条書きデザインをカスタマイズしてみたいと思います。

参考にした記事はこちら↓

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」にはりつけるとこうなります↓

  • サンプル1
  • サンプル2
  • サンプル3
  • サンプル4

 

シンプルなほうが使いやすそうだなと思いました。

色を変えてバリエーションを作ってみます。

 

ピンク系

.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

 

箇条書き用に一個、枠を設定しておくと便利そうですね!

箇条書きに設定しましたが、目次にも反映されてるような気がします!