擬似要素を使わずに箇条書きのマークを画像に変更する方法【CSSサンプルコード有り】

スポンサーリンク

昨今は、上場・非上場問わず企業のオウンメディア・個人のブログやサイトなどが入り乱れてサイトのレベルが上がってきています。

限られたPVを獲得するためには、他サイトとの差別化が必須の時代になりつつあります。

前置きが長くなりましたが、今回は擬似要素を使わずに箇条書きの先頭を画像にする方法について解説します。

  • 擬似要素を使わない箇条書きマークをマスターしよう!
スポンサーリンク

箇条書きのマークを画像化する

ブログにおいて箇条書きは、読者に重要な点をアピールできるという役割を持っています。

簡潔にまとめることによって、記事で訴求したいこと(メリット・デメリット)問わずわかりやすくなります。

ワードプレスの標準機能でも問題ありませんが、マークを画像化することによって自分の色を出すことが出来ます。

・箇条書きは目立ってなんぼ!

  • 箇条書きは目立ってなんぼ!

自分のサイトのコンテンツの読者がどの様な属性を持つのか分析して使い分けるのが良いと思うよ

CSSのコーディング

デフォルトの箇条書きの設定を外すために以下のコードをstyle.cssに記載します。

.gzou li{
list-style-type: none;
 background: url(~表示したい画像.png) no-repeat ;
font-size: 18px ;
font-wight: bold ;
}

list-style-typeは、■や数字などのセレクタを指定するプロパティです。

画像を挿入するのであればいらないので、スタイルに「none」を記載します。

3行目のバックグランドは、背景を〜という画像に指定して繰り返しはしないという表記です。

箇条書きの文字サイズや強調を変えたいのならfont-size , font-weightなどの記載を追加してあげましょう。

箇条書きマークの画像化は簡単かつ差別化が目立つ場所です。

是非あなたのサイトにも取り入れてみて下さい!

スポンサーリンク
ブログ運営・体験談
スポンサーリンク
RAKIをフォローする
ブログでファイア

コメント

タイトルとURLをコピーしました