【はてなブログ】リスト(箇条書き)カスタマイズ例13種!四角やダイヤで目立たせよう

今回は、はてなブログのリスト(箇条書き)につく点「・」を自分の好きな形にカスタマイズする方法と一部カスタマイズ例を紹介します。

 

リストをより目立たせることができるので、ぜひ試してみてください。

はじめに

 

今回は、はてなブログのリストをカスタマイズしてみようと思います。

リスト(箇条書き)はこんな感じ!

 

  1. 箇条書きを使える
  2. 読者が理解しやすい
  3. 1行が長いときに便利

 

これがリストです。

ついでにリストの良いところも合わせて紹介しておきました。

 

デフォルトの状態だと、リストの点は「・」になっていますよね。

この点をカスタマイズすることで、「三角形」「四角形」「ダイヤ」「ー」「数字」などにもできるので、ぜひ参考にしてみてください。

 

ではさっそくcssをみていきましょう。

比較的簡単なものから順番に紹介していきます。

 

四角形

 

まずは、リストの点を四角形にするcssです。

以下のコードを、はてなブログの「デザインCSS」の中に追加してください。

 

.entry-content ul>li {
  list-style-type: square;
}

 

たったこれだけで、箇条書きの点を「四角形」にカスタマイズできました。

 

20171108115139

 

  • Pixio PX276 ディスプレイ モニター 27インチ
    Amazon
  • ガススプリングモニターアーム17-27インチ対応
    Amazon
  • Anycubic Ultrabase ヒートベッド用 CR10向け 310x310mm
    Amazon

数字

 

続いて、リストの点を数字にしていきましょう。

前提として、cssには「ul」と「ol」というクラスが用意されています。

 

「ol」を使えば、自動的に数字の箇条書きを設定できるのですが、これまでに作成したリストの点を変えるには、記事ごとに書き換える必要が出てきます。

それを避けるためのカスタマイズですが、本来は、ol(番号つきリスト)を使うべきです。

 

では点を数字に変えるコードを見てみましょう。

 

.entry-content ul > li {
  list-style-type: decimal;
}

 

20171108115852

 

頭に0をつける

 

先ほどの数字は、桁数が増えるとレイアウトが変わってきてしまいますよね。

そこで、頭に0をつけて「01」「02」のようにすることもできるんです。

 

.entry-content ul > li {
  list-style-type: decimal-leading-zero;
}

 

20171108120111

 

漢数字

 

数字と同様、リストを漢数字にすることもできます。

 

.entry-content ul > li {
  list-style-type: cjk-ideographic;
}

 

これで、「一」「二」「三」というような箇条書きになったかと思います。

 

20171108120329

 

abc(アルファベット)

 

次は「abc(アルファベット)」でリストの数を表示させるcssです。

 

.entry-content ul > li {
  list-style-type: lower-alpha;
}

 

20171108120837

 

ちなみにlower-alphaではなく、以下のコードにすることで「大文字のアルファベット」にすることもできます。

 

.entry-content ul > li {
  list-style-type: upper-alpha;
}

 

20171108121058

 

どちらか好きな方を選んでください。

 

  • ASUS 23インチ フレームレスモニター IPS
    Amazon
  • HUION Kamvas GT-191 液晶ペンタブレット
    Amazon
  • グリーンハウス モニターアーム GH-AMC03
    Amazon

甲乙丙丁

 

かなり特殊ですが、「甲」「乙」「丙」「丁」なんかで項目の数を表すこともできます。

 

.entry-content ul > li {
  list-style-type: cjk-heavenly-stem;
}

 

20171108120536

 

いろはにほへと

 

こちらもかなり特殊ですが、箇条書きの点を「いろは」にもできます。

 

.entry-content ul > li {
  list-style-type: hiragana-iroha;
}

 

20171108121416

 

「い→1」「ろ→2」「は→3」ですね。

 

もっと自由にカスタマイズ

 

先ほどまでのカスタマイズは、cssであらかじめ用意されているものでした。

そのため、ものによってはブラウザが対応していなかったり見た目が変わる可能性があります。

 

カスタマイズした後は、ブラウザで確認しましょう。

 

もっと好きな形にしたいときは、cssを直接書きこむ必要があるので、いくつかカスタマイズ例とコードを紹介していきます。

 

ダイヤ(diamond)

 

まずは「ダイヤモンド」型の箇条書きです。

 

.entry-content ul>li {
  position: relative;
  list-style-type: none;
}
.entry-content ul > li:before {
  content: '';
  width: 9px;
  height: 9px;
  background-color: black;
  position: absolute;
  left: -19px;
  top: 8px;
  transform: rotate(45deg);
}

 

このようなコードを、これまでと同じように「スタイルCSS」の中に追加してください。

※「top」「left」「background-color」は、サイトのレイアウトに合わせて調整した方が良い場合があります。

 

20171108122109

 

逆三角形

 

次は、逆三角のリストにしてみます。

ダイヤモンドのリストと同じように、いくつかのスタイルは各自調整が必要になるかもしれないので注意してください。

 

.entry-content ul>li {
  position: relative;
  list-style-type: none;
}
.entry-content ul > li:before{
  content: '';
  border: 5px solid transparent;
  border-top: 9px solid black;
  position: absolute;
  top: 9px;
  left: -17px;
}

 

20171108122916

 

「border-top: 9px solid black;」の部分を「left」や「right」に書き換えることで、三角形の向きを変更できます

 

20171108123107

 

文字を入れる

 

続いては、箇条書きの点を「テキスト」にする方法です。

今回は「@」をリストの点として表示させてみました。

 

.entry-content ul>li {
  position: relative;
  list-style-type: none;
}
.entry-content ul > li:before{
  content: '@';
  position: absolute;
  top: 1px;
  left: -21px;
}

 

「content」の中のテキストを書き換えることで、表示される点の文字も変わるので、好きな文字を入れてみてください。

ただし、1・2・3のように、テキストが順になるわけではないので注意。

 

1つ目の項目が「あ」だったとして、2つ目の項目は「い」ではなく「あ」になります。

 

20171108123821

 

ハイフン(ダッシュ)

 

最後は「-(ハイフン)」をリストの点にしてみましょう。

先ほど紹介した「テキストをリストにする」方法を使っても良いのですが、横幅や高さなどを柔軟に変化させるため、あえてcssで作成しています。

 

.entry-content ul>li {
  position: relative;
  list-style-type: none;
}
.entry-content ul > li:before{
  content: '';
  width: 9px;
  height: 1px;
  background-color: black;
  position: absolute;
  top: 14px;
  left: -18px;
}

 

20171108124534

 

このようになりました。

 

  1. width
  2. height
  3. top
  4. left

 

これらの値をちょっとずつ調整することで、大きさの違うハイフンにできるので、サイトのデザインに合わせて変えてみてください。

 

まとめ

 

今回紹介したcssを使えば、箇条書きのデザインを自分なりにカスタマイズできるようになりました。

リスト(箇条書き)は、まとまった内容を伝える時にとても便利なので、これまで使ってこなかった人は、これを機にリストを導入してみてはいかがでしょうか。

 

 

ではまた。

過去にレビューしたアイテム

関連記事
おすすめの記事