たつブロ

アラフォーWebデザイナーの福岡のグルメや日々についての事など、いろいろ雑多なブログです。たまに阪神のことも...

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

箇条書き部分のデザイン
どうも、たつとら(@tatsutora6) です。

 

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

 

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

 

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

 

 

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

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

箇条書き部分

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

番号付きリスト

 

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

味気がないデザイン

 

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

 

 そこで、【ダッシュボード】>【デザイン】>【カスタマイズ】>【デザイン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: の後に入れれば変更できます。

www.colordic.org

また、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;
}

 

「番号付きリスト」の場合は、olulに変えるだけです。(以下同じ)

 

上下に線付きの枠

上下に線付きの枠

 

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

 

最後に

以上が「箇条書き」で使える枠のデザインの紹介でしたが、今回ボクが紹介したのはデザインの中でも簡単な方の枠を紹介したのでこれ以外のデザインが気になる方は調べてみたらいかかでしょうか。

 

では、また。 

 

◆今回参考にさせて頂いたページ

saruwakakun.com

blog.minimal-green.com

 

 

スポンサーリンク

 

  

アフィリエイト始めるなら

初心者でも安心のサポート!アフィリエイトを始めるならA8.net

 

もしもアフィリエイト

 

こちらも合わせてお読みください

www.tatsublo.net

www.tatsublo.net

www.tatsublo.net

www.tatsublo.net