【初心者必見！】はてなブログでリストをカスタマイズする方法！

こんにちは！mottiです。

f:id:m_m_motti:20190713020756p:plain

はてなブログを使いの皆さん、「リスト（箇条書き）機能」を活用していますか？

箇条書きにすることで記事が読みやすくなったり、要点が分かりやすいという利点がありますが編集後のリスト（箇条書き）ってちょっと物寂しくないですか？

元々の編集画面に備えられているリスト（箇条書き）のアイコンを押せば簡単にリストを作成することが出来ます。

番号付きリストは言葉の通り、番号をつけてリストを作成します。

今回は、せっかくなのでこの「リスト（箇条書き）をデザインする方法」について説明していこうと思います。

初心者でも簡単に出来るの？

また変なコードとか入れなきゃいけないんでしょ？

ブログを始めたばかりの初心者の方でも簡単に（私でも出来たやりかたで）説明していきますね！

デザイン変更の注意点
物足りない時には囲みを使う
- ここまで私が使ったコードはこちらです↓↓
  - 記事作成で使う時には･･･
囲みを使って色々と応用させてみた
- タイトル付きの囲み
最後に･･･

デザイン変更の注意点

デザイン変更時にはバックアップをとって自己責任でお願い致します。

テーマによってはデザインが崩れたりうまく表示されないという場合もあります。

私のブログテーマは「innocent」を使用しています！

デザインが崩れる

リストのカスタマイズを行うに当たってとても悩まされたことがあります。

それは、「デザインが崩れてしまうこと」。

先日、このブログにもグローバルメニュー（グローバルナビゲーション）を設置したばかりでした。

過去記事↓↓

www.m-m-motti.com

「innocent」のテーマに合わせたカスタマイズ方法だったので、とても簡単に設定を行うことが出来ました。

しかし、今回リストのカスタマイズを行うに当たってグローバルメニューのデザインが崩壊するという事件が起こりました。

HTMLとかCSSとかあまり聞いたこともない私には

「なんで？？」

と思うばかりで、他の方法を探してみました。

デザインを崩さずにカスタマイズする方法

おそらく私の思うところによると、グローバルメニューに使われているコードとリストをカスタマイズするためのコードが被っているため、うまく表示されずデザインが崩れたのだと思います。

「じゃあ、違うコードを使えばいいんだ！」

考え方が単純ね！

とりあえずカスタマイズのために参考にした記事はこちらです↓↓

saruwakakun.com

サルワカさんの記事ですが、私はこれでも分かりませんでした・・・。

サル以下ということが判明！(笑)

こちらの記事通りにしてみたところデザインが崩れてしまったので、サルを目指すのを諦めて違う方法を探し出しました。

そして見つけた記事がこちらです↓↓

コピペでOK！CSSのみでリストをおしゃれにする6つの方法【はてなブログカスタマイズ】 - North-Geek

可愛いデザインを諦める

きっと私には凝ったデザインなんて早すぎたのでしょう（泣）

こうなったらシンプルを目指します！

上記のリンクの中からチェックの表示がされるものを選びました！

カラーを変更する

カラーコードを自分で書き変えるだけで、お好みの色にカスタマイズできます。

カラーコードはこちらから↓↓

www.colordic.org

物足りない時には囲みを使う

こんな風にカスタマイズした

囲みの中にリストを入れるのはどうでしょうか？

それだけで
なんとなく
見やすいリストになりませんか？

囲みのデザインは先程も紹介したサルワカさんの記事から↓↓

saruwakakun.com

こちらもカラーコードや線の太さなどを変更するだけで、自分好みの囲み（ボックス）にカスタマイズすることができます！

ここまで私が使ったコードはこちらです↓↓

.box8 {/*囲みのデザイン*/
padding: 0.5em 1em;
margin: 2em 0;
color: #333631;
background: #fdeff2;
border-left: solid 18px #f4b3c2;
}
.box8 p {
margin: 0;
padding: 0;
}

/* 目次対策 */
.table-of-contents li{
list-style-type: decimal!important;
border: none!important;
}
.table-of-contents li:after{
border: none!important;
}
.entry-content ul li {
list-style-type: none;
position: relative;
}
.entry-content ul li:after {
display: block;
content: '';
position: absolute;
top: .6em;
left: -1em;
width: 8px;
height: 3px;
border-left: 4px solid #f7594d;
border-bottom: 4px solid #f7594d;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}