ブログデザイン備忘録 ~リスト・目次

1. リスト・目次のデザイン

　今回はリストや目次のデザインについて紹介したい。

まずリストを作成するには全体を<ul>～</ul>で囲い、項目は<li>～</li>で記述する。

<ul>
        <li>内容1</li>
        <li>内容2</li>
        <li>内容3</li>
</ul>

内容1
内容2
内容3

上のコードで<ul>～</ul>の代わりに<ol>～</ol>を用いると番号付きリストになる。

内容1
内容2
内容3

項目のマーク:•を変更したい場合はlist-style-typeで指定する。例えばlist-style-types:square;

<ul style="list-style-type:square;">
        <li>内容1</li>
        <li>内容2</li>
        <li>内容3</li>
</ul>

内容1
内容2
内容3

番号付きリスト<ol>でlist-style-types:upper-roman;とするとローマ数字になる。

内容1
内容2
内容3

他にアルファベットの場合:list-style-types:lower-latin;

内容1
内容2
内容3

漢数字の場合:list-style-type: cjk-ideographic;

内容1
内容2
内容3

変わったところではヘブライ数字:list-style-type: hebrew;

内容1
内容2
内容3

リストの背景塗りつぶしや境界設定は、ボタンや見出しなど同様にbackgroundやborderを用いて指定する。文字の位置や間隔はpaddingを用いて調整する。

<div style="background:#DDFFFF;color:#000066;border: double 5px #000033; padding: 0.8em 0.3em 0.3em 0.8em;font-weight:bold;border-radius:10px;">
<ul>
        <li style="padding:0.3em 0;">内容1</li>
        <li style="padding:0.3em 0;">内容2</li>
        <li style="padding:0.3em 0;">内容3</li>
</ul>
</div>

内容1
内容2
内容3

付箋紙風のリストは少々手間がかかる。(一度決まればコピー&ペーストでよいが）リストの項目ごとにbackground,boder, marginなどを設定する。また幅を適度に短くするためにwidth:50%;を指定している。

<div style="font-weight:bold;color:#000066;">
<ul style="list-style-type: none;">
        <li style="padding:0.3em 0.5em; border-left: solid 6px #2d8fdd;background: #DDFFFF;margin-bottom: 3px;border-radius: 0 15px 15px 0;width:50%;">内容1</li>
        <li style="padding:0.3em 0.5em; border-left: solid 6px #2d8fdd;background: #DDFFFF;margin-bottom: 3px;border-radius: 0 15px 15px 0;width:50%;">内容2</li>
        <li style="padding:0.3em 0.5em; border-left: solid 6px #2d8fdd;background: #DDFFFF;margin-bottom: 3px;border-radius: 0 15px 15px 0;width:50%;">内容3</li>
</ul>
</div>

内容1
内容2
内容3

なおCSSであれば以下の様にセレクタを用いて一括で書式を指定できる。

ul{
  padding: 0;
  position: relative;
}

ul li {
  font-weight:bold;
  color:#000066;
  border-left: solid 6px #2d8fdd;
  background: #DDFFFF;
  margin-bottom: 3px;
  padding: 0.3em 0.5em;
  list-style-type: none;
}

2. 目次の生成とカスタマイズ

はてなブログの目次は見出し(##や###)がある状態で(はてなのメニューバーから)[:contents]を挿入すると以下のように自動的に目次ができる。はてなの目次機能は、すべての見出しを目次にすることができる。(逆に目次からはずすには見出しにしないなどが必要)

1. リスト・目次のデザイン
2. 目次の生成とカスタマイズ
- 内容1
  - サブ項目
- 内容2
- 内容3
3. まとめ

※5/20時点：目次のデザイン設定はデザインCSSで変更している

内容1

サブ項目

内容2

内容3

毎回同じデザインでカスタマイズする場合はデザインCSSでCSSコードを記述することになるが、ここでは記事ごとに目次をカスタマイズする方法になる。

上に紹介したリストの作成方法を利用すれば、記事ごとにカスタマイズした目次が作成できる。ただしリンクなどは自分で記述する必要がある。本ブログにもともとの見出し除いて、"内容"以下を目次にする場合を紹介する。以下マークダウン編集とHTMLが混在しているが、まずマークダウン編集で####など見出しをつけ、さらにHTMLタグで目次項目の固有IDを設定する。

##### <span id="cont1">内容1</span>
###### <span id="sub1">サブ項目</span>

##### <span id="cont2">内容2</span>

##### <span id="cont3">内容3</span>

次にデザインをカスタマイズしたリストを作成し、作成するリストをリンク付にしてリンク先のIDを指定する。

<div style="background:#DDFFFF;border: double 5px #000033;font-weight:bold;border-radius:10px;width:70%;">
<ul style="padding-top:1em;padding-left:1em;">
        <li><a href="#cont1">内容1</a></li>
             <ul style="margin:0 0 0 0;padding-left:1em;"><li><a href="#sub1">サブ項目</a></li></ul>
        <li><a href="#cont2">内容2</a></li>
        <li><a href="#cont3">内容3</a></li>
</ul>
</div>

内容1

サブ項目

内容2
内容3

リスト(目次)内のリンクをクリックすると見出しのところにジャンプでき、目次と同じ機能を再現でき、かつデザインを自由にカスタマイズできる。なおリスト項目を入れ子にする場合、入れ子リストのmarginの調整なしにすると、下の例のように入れ子の項目と次の項目の間隔が広がってしまう。好みの問題もあるが、入れ子のリストのmarginを0にしてからpaddingで位置を調整している。