【はてなブログ】コピペでOK!リストデザインをCSSでカスタマイズする方法

はてなブログのリストデザインをカスタマイズする方法の紹介

リストアイコンのデザインをカスタマイズしてみました。KiKi(@kiki_ro_ck)です。

CSSは自分で考えたわけではなく、他の方が紹介しているCSSを参考に、はてなブログ仕様に書き換えただけです。あしからず。

はてなブログ用に書き換えたコード、カスタマイズの参考になれば幸いです。

追記 2016/12/19:気分でコロコロと変えています。現在のコピペコードも下の方で紹介しています。

追記 2018/1/14:いろいろ変えているので、リアルタイムのリスト紹介はやめることにしました。気になる方はお気軽に聞いてください。

リストアイコンとは

リストアイコンとは、箇条書きに使う黒い点「・」のことです。

はてなブログ リスト カスタマイズ

カスタマイズしたリストアイコン

はてなブログ リスト カスタマイズ 方法

今のところ気に入っています♪

参考にさせていただいたのはNxWorldさん

カスタマイズの際、お世話になっているNxWorldさん。

こちらの記事のCSSを、はてなブログ仕様にしてみました。

はてなブログのCSSをカスタマイズする場所

はてなブログ デザイン 場所

書き加える場所は[ダッシュボード]⇒[デザイン]⇒[カスタマイズ]にある[デザインcss ]です。

 

コピペするCSSコード

画像を使わずに、CSSのみでリストアイコンを表現したサンプル 10にある矢印xディスク(円形)をデザインcssにコピペします。

ul li {
position: relative;
}
ul li::after,
ul li::before {
display: block;
content: '';
position: absolute;
}
ul li::after {
top: .35em;
left: -1.2em;
width: 14px;
height: 14px;
background-color: #3498db;
border-radius: 100%;
}
ul li::before {
z-index: 2;
top: .625em;
left: -.975em;
width: 4px;
height: 4px;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}

書き加えるCSSコード

よし完成!と思ったら、サイドバーのカテゴリーにも出ちゃってるうううう!

はてなブログ リスト カスタマイズ 失敗

というわけで、ブログの記事のみに反映してもらうように

.entry-content

を、付け加えてみました。うん、大丈夫そう!

この部分を[ul li…]の前に付け加えることで、記事だけのリストアイコンをカスタマイズすることができました。

コピペしたい方はこちらから

/* --- リストアイコン変更 --- */
.entry-content ul li {
position: relative;
}
.entry-content ul li::after,
.entry-content ul li::before {
display: block;
content: '';
position: absolute;
}
.entry-content ul li::after {
top: .35em;
left: -1.2em;
width: 14px;
height: 14px;
background-color: #3498db;
border-radius: 100%;
}
.entry-content ul li::before {
z-index: 2;
top: .625em;
left: -.975em;
width: 4px;
height: 4px;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}

円形の色をかえたい場合は「#3498db」のカラーコードを書き換えてみてください。

追記:ダイヤのマークにする

最初の絵文字をダイヤに変更するCSSです。

/* --- リストアイコン変更 --- */
.entry-content ul li {
list-style-type: none;
position: relative;
}

.entry-content li:after {
display: block;
content: '';
position: absolute;
top: .6em;
left: -0.8em;
width: 6px;
height: 6px;
background-color: #3498db;
-webkit-transform: rotate(-45deg)!important;
transform: rotate(-45deg)!important;
}

色の参考サイト

色を調べる時、いつも参考にしているサイトです。

おわりに

カスタマイズ楽しいです☆ご指摘、ご意見あればよろしくお願い致します。

いつかちゃんとCSSを勉強したいなーと思いつつ、ゆるっと本を読むくらいしかしていません反省!

 

おすすめの関連記事