【はてなブログ】リストデザインをCSSでカスタマイズしてみました

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

もちろん、CSSコードは自分で考えたわけではなく、はてなブログ仕様に書き換えただけなので、あしからず。

画像を使わずCSSで実装しているので「表示されるブラウザは限られている」とのことですが、わたしは気になりません☆

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

コピペで簡単!リストデザインをCSSでカスタマイズできる記事5選

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

リストアイコンとは

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

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

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

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

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

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

カスタマイズの際、お世話になっているNxWorld様。いつもありがとうございます。

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

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

デザイン→カスタマイズ→デザインcss です。

ログインして「デザイン」をクリック

はてなブログ デザイン カスタマイズ 方法

デザインのカスタマイズをクリック

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

デザインcssをクリックして書き込む

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

※上記の画像は、前の記事からちょっぴり使いまわしています。

コピペしたCSSコード

NxWorldさんの画像を使わずに、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」のカラーコードを書き換えてみてください。

追記:現在使用しているコピペコード

/* --- リストアイコン変更 --- */
.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を勉強したいと思いつつ何もしてない初心者です。

どこをどう書き換えたら、どこが変わるのか。カスタマイズは1つ1つ、そんなことを試しながら行ってます。うん、勉強した方が早いかも笑。

それでもカスタマイズは楽しいです。ご指摘、ご意見あれば宜しくお願い致します。

あなたにおすすめの関連記事

読んでいただきありがとうございました。

 

広告を非表示にする