2017-11-15

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

hatena プログラミングカスタマイズ

f:id:clrmemory:20171115012158p:plain

こんにちはクリアメモリです！

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

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

はじめに

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

リスト（箇条書き）はこんな感じ！

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

これがリストです。

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

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

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

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

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

四角形

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

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

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

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

f:id:clrmemory:20171108115139p:plain

数字

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

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

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

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

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

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

f:id:clrmemory:20171108115852p:plain

頭に0をつける

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

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

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

f:id:clrmemory:20171108120111p:plain

漢数字

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

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

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

f:id:clrmemory:20171108120329p:plain

abc（アルファベット）

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

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

f:id:clrmemory:20171108120837p:plain

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

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

f:id:clrmemory:20171108121058p:plain

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

甲乙丙丁

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

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

f:id:clrmemory:20171108120536p:plain

いろはにほへと

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

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

f:id:clrmemory:20171108121416p:plain

「い→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」は、サイトのレイアウトに合わせて調整した方が良い場合があります。

f:id:clrmemory:20171108122109p:plain

逆三角形

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

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

.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;
}

f:id:clrmemory:20171108122916p:plain

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

f:id:clrmemory:20171108123107p:plain

文字を入れる

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

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

.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つ目の項目は「い」ではなく「あ」になります。

f:id:clrmemory:20171108123821p:plain

ハイフン（ダッシュ）

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

先ほど紹介した「テキストをリストにする」方法を使っても良いのですが、横幅や高さなどを柔軟に変化させるため、あえて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;
}