読者です 読者をやめる 読者になる 読者になる

North-Geek

North-Geek(ノース・ギーク) 北海道札幌市在住のWebプログラマー・エンジニア

北海道札幌在住のWebプログラマーのブログです。

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

Webデザイン blog-はてなブログ Webデザイン-css blog blog-カスタマイズ

f:id:northgeek:20160223223619j:plain

前回に続き「コピペでブログをカスタマイズ」できる方法を紹介します。今回は「箇条書き(リスト)」です。他のブログでリストをカスタマイズしているのはあまり見たことがないので、差をつけるためにカスタマイズすることをおすすめします。



前提として

ソースコードを貼り付ける場所

f:id:northgeek:20160215211628j:plain


  1. デザイン
  2. カスタマイズ
  3. デザインCSS

上記の順番で「デザインCSS」を開きます。


目次対策

はてなブログの目次を使っている方は、目次の番号が出なくなる場合がありますので、下記コードも貼り付けておくことをおすすめします。

/* 目次対策 */
.table-of-contents li{
	list-style-type: decimal!important;
	border: none!important;
}
.table-of-contents li:after{
	border: none!important;
}

バックアップ

元に戻せるように、バックアップは必ず取るようにしてください。ブログをカスタマイズする際は基本ですね。



リストをカスタマイズ

チェック


  • list
  • list
  • list

.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: 2px solid #f7594d;
	border-bottom: 2px solid #f7594d;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}


  • 色を変えたい場合「border-left: 2px solid #f7594d;」、「border-bottom: 2px solid #f7594d;」の#f7594dの値を変更します。



ダイヤ


  • list
  • list
  • list

.entry-content ul li {
	list-style-type: none;
	position: relative;
}

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


  • 色を変えたい場合「background-color: #f7594d;」、の#f7594dの値を変更します。


スクエア


  • list
  • list
  • list

.entry-content ul li {
	list-style-type: none;
	position: relative;
}

.entry-content li:after {
	display: block;
	content: '';
	position: absolute;
	top: .6em;
	left: -1em;
	width: 6px;
	height: 6px;
	background-color: #f7594d;
}


  • 色を変えたい場合「background-color: #f7594d;」、の#f7594dの値を変更します。



ハイフン


  • list
  • list
  • list

.entry-content ul li {
	list-style-type: none;
	position: relative;
}

.entry-content li:after {
	border: none;
	display: block;
	content: '';
	position: absolute;
	top: .8em;
	left: -1em;
	width: 8px;
	height: 1px;
	background-color: #f7594d;
}


  • 色を変えたい場合「background-color: #f7594d;」、の#f7594dの値を変更します。



矢印


  • list
  • list
  • list

.entry-content ul li {
	list-style-type: none;
	position: relative;
}

.entry-content li:after {
	display: block;
	content: '';
	position: absolute;
	top: .6em;
	left: -1em;
	width: 6px;
	height: 6px;
	border-right: 1px solid #f7594d;
	border-bottom: 1px solid #f7594d;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}


  • 色を変えたい場合「border-right: 1px solid #f7594d;、border-bottom: 1px solid #f7594d;」、の#f7594dの値を変更します。



円・サークル


  • list
  • list
  • list

.entry-content ul li {
	list-style-type: none;
	position: relative;
}

.entry-content li:after {
	display: block;
	content: '';
	position: absolute;
	top: .6em;
	left: -1em;
	width: 5px;
	height: 5px;
	background-color: #fff;
	border: 1px solid #f7594d;
	border-radius: 100%;
}


  • 円を大きくしたい場合は、「width: 5px;、height: 5px;」の5pxの値を変更します。
  • 色を変えたい場合「background-color: #f7594d;」、の#f7594dの値を変更します。


ブログカスタマイズで参考になるサイト

いくつか参考になるサイトも貼っておきます。安定のゆきひーさんのブログは、はてなブログカスタマイズでお馴染みですね。僕のブログの8割はゆきひーさんのブログカスタマイズ記事を参考させていただいています。

www.yukihy.com
tsukuruiroiro.hatenablog.com
georges.hatenablog.jp


さいごに

いかがでしたでしょうか。CSSを知らなくてもコピペでOKです。これでいつでも簡単にリストを簡単おしゃれ変更することが出来ます。

※お使いのブログの既存CSSによっては上手くいかない場合がございますのでご了承ください。ご利用は自己責任でお願い致します。上手くいかない場合はご相談ください。


オススメ記事

www.north-geek.com

Copyright© North-Geek All Rights Reserved.