リストの左側に画像や文字を貼る方法 -「border」と「before」を使う方法-

記事「リストの左側に画像や文字を貼る方法」において、リストをカスタマイズする方法についてまとめ記事を書いておりますが、ここでは、「border」と「before」を使う方法について覚え書きをしたいと思います。

/* リストのマークを差し替える -テーマ「Twenty Twelve」、左ボーダー+▶文字、水色- */
.entry-content ul li {
list-style-type: none;
position: relative;
padding-left:33px;
}

.entry-content ul li:before {
content: "▶";
position: absolute;
display: list-item;
left: 15px;
top: 7px;
color: #42beee;
border-left: 3px solid #42beee;
line-height: 8px;
font-size: 9px;
padding-left: 1px;
}

comemo forum | WordPress.com のデモ用です。-1

/* リストのマークを差し替える -テーマ「Twenty Twelve」、ボーダー囲み+▶文字、水色- */
.entry-content ul li {
list-style-type: none;
position: relative;
padding-left:40px;
}

.entry-content ul li:before {
content: "▶";
position: absolute;
display: list-item;
left: 15px;
top: 3px;
color: #42beee;
border: 1px solid #cccccc;
border-radius: 3px;
line-height: 8px;
font-size: 9px;
padding: 4px;
}

comemo forum | WordPress.com のデモ用です。-2

#2013

リストの左側に画像や文字を貼る方法 -「list-style-type」と「before」を使う方法-

記事「リストの左側に画像や文字を貼る方法」において、リストをカスタマイズする方法についてまとめ記事を書いておりますが、ここでは、「list-style-type」と「before」を使う方法について覚え書きをしたいと思います。

/* リストのマークを差し替える -テーマ「Twenty Twelve」、■、水色- */
.entry-content ul li {
list-style-type: none;
position: relative;
}

.entry-content ul li:before {
content: "";
position: absolute;
list-style-type: square;
display: list-item;
font-size: 37px;
left: 15px;
top: -21px;
color: #42beee;
}

gfsgsdfgsfd-1

/* リストのマークを差し替える -テーマ「Twenty Twelve」、○、水色- */
.entry-content ul li {
list-style-type: none;
position: relative;
}

.entry-content ul li:before {
content: "";
position: absolute;
list-style-type: circle;
display: list-item;
font-size: 37px;
left: 15px;
top: -21px;
color: #42beee;
}

comemo forum | WordPress.com のデモ用です。

参考

#2013

[WordPress.com] ショートコード「display-posts」を使って、大きな画像+抜粋(概要文)をブログ中の任意の場所に表示する方法

以前、記事「[WordPress.com] ショートコード「display-posts」を使うなどしての、大きい画像をきれいに表示する方法についての検討」において、ショートコードを使って、記事中等にアイキャッチ画像を大きく表示する方法について検討しました。

sfgsgsf

続きを読む

#2013

[WordPress.com] 一覧表をショートコード「display-posts」、カテゴリー分けおよび CSS を使って表示・管理する

[WordPress.com] 一覧表をショートコード「display-posts」、カテゴリー分けおよび CSS を使って表示・管理する | comemo

WordPress.com テーマ一覧の表示方法の変更をしたので、その覚書です。

スクリーンショット 2013-04-09 11.40.34

続きを読む

#2013

箇条書きの記号をスライドさせるためのCSS

itemization03

続きを読む

#2011

リストの左側に画像や文字を貼る方法

listimage01
続きを読む

#2011