はてなブログで使える、箇条書き部分をオシャレにデザインしてみよう！

2019年11月7日

当ページのリンクには広告が含まれています。

どうも、たつとら(@tatsutora6) です。

はてなブログで記事を書いていて、「箇条書き」や「番号付きリスト」の部分ってデフォルトの設定だったら余り目立たなくないですか？（ボクは「はてなブログ」で記事を書いているので「はてなブログ」の場合で載せています）

特に注目して欲しい時などにそのまま素通りされたら悲しいですよね…

そういう時は、枠をつけたりして目立つ書き方にしてみましょう。

CONTENTS

デフォルトのデザインは味気ない

「箇条書き」部分というのは「はてなブログ」で書く場合は下記の赤枠で使用する部分。

「番号付きリスト」部分というのは「はてなブログ」で書く場合は下記の赤枠で使用する部分。

普通に入れると「箇条書き」このように味気がないデザインになります。（ブログのテーマによって変わってくると思いますが）

これだとパッと見普通の文章と区別がつかないかもしれません。

そこで、【ダッシュボード】＞【デザイン】＞【カスタマイズ】＞【デザインCSS】にコードを入れるだけで、ちょっと目立つデザインにすることができますよ。

現在使用している枠

ボクが現在自分のブログでデザインしている枠がこちら

こちらの「箇条書き」のコードは

.entry-content ul{
background-color: rgb(240, 240, 240);
border: 1px dotted rgb(56, 56, 56);
padding: 10px 30px;
}

「番号付きリスト」の場合は

.entry-content ol{
background-color: rgb(240, 240, 240);
border: 1px dotted rgb(56, 56, 56);
padding: 10px 30px;
}

.entry-content ul

の部分が

.entry-content ol

に変わるだけです。

コードの中にある

background-color: rgb(240, 240, 240);　の

rgb(240, 240, 240);　部分を変更すれば枠の中の色が変わります。

例えば、rgb(165, 234, 185); の様に入れると

こうなります。

こちらのカラーコードから好きな色を選んでbackground-color: の後に入れれば変更できます。

原色大辞典

WEB色見本原色大辞典 – HTMLカラーコード色の名前とカラーコードが一目でわかるWEB色見本

また、border: 1px dotted rgb(56, 56, 56);

の部分は枠の線を変更します。

左から順に 1px は線の太さ。

dotted は線の種類。dottedはその名の通りドットの線になります。

rgb(56, 56, 56) は線の色です。

ちなみに

border: 1px dotted rgb(56, 56, 56);　を

border: 4px solid rgb(290, 119, 80);　に変更するとこうなります。

その他にもいろいろな枠のデザインがあるので紹介します。

いろいろな枠デザイン

角が丸い枠

.entry-content ol{
border: 3px solid rgb(140, 217, 191);
padding: 10px 30px;
border-radius: 10px;
}

「番号付きリスト」の場合は、olをulに変えるだけです。（以下同じ）

上下に線付きの枠

.entry-content ol{
background-color: rgb(251, 249, 255);
border-top: 3px solid rgb(197, 19, 32);
border-bottom: 3px solid rgb(197, 19, 32);
padding: 10px 30px;
}

影をつけた立体風の枠

.entry-content ol{
background: #e4f2ff;
border-bottom: solid 6px #44607d;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.25);
border-radius: 10px;
padding: 10px 30px;
}

ストライプの背景の枠

.entry-content ol{
background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
padding: 10px 30px;
}

布風の枠

.entry-content ol{
background-color: #ecea8d;
box-shadow: 0px 0px 0px 5px #ecea8d;
border: dashed 2px white;
padding: 10px 30px;
}

ドット柄の枠

.entry-content ol{
background-color: rgb(197, 237, 236);
background-image: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0);
background-position: 0 0, 10px 10px;
background-size: 20px 20px;padding: 10px 30px;
padding: 10px 30px;
}

チェック柄の枠

.entry-content ol{
position: relative;
background-color: #fff;
background-image: linear-gradient(-45deg, rgba(250,215,215,.5) 25%, transparent 25%, transparent 50%, rgba(250,215,215,.5) 50%, rgba(250,215,215,.5) 75%, transparent 75%, transparent 100%), linear-gradient(45deg, rgba(250,215,215,.5) 25%, transparent 25%, transparent 50%, rgba(250,215,215,.5) 50%, rgba(250,215,215,.5) 75%, transparent 75%, transparent 100%);
background-size: 37px 37px;
padding: 10px 30px;
}