リストマークの画像化

今回は、リストマークを画像化する方法について説明します。

リストマークは種類が限られていますが、画像を利用すると自由にデザインできます。

カスタマイズ方法（MovableType編）

では、サイドバーのリストマークを画像に変更してみましょう。カスタマイズ方法は、下記の手順で進めてください。

1. リストマークに使用する画像の用意
まず、リストマークに使用する画像を用意します。

画像は、「0円のWEB素材屋さん」や「1キロバイトの素材屋さん」などのHP素材サイトで無料配布されていますので、利用規約をお読みの上ダウンロードしてください。

自分で画像を作成する場合は、「PhotoShop（有料）」や「Pict Bear（無料）」などのソフトを使用すると便利です。

２. 画像ファイルのアップロード
用意した画像をサーバーにアップロードします。画像のアップロード方法は、ファイル、画像のアップロード方法を参考にしてください。

３. CSS（スタイルシート）の編集
次に、「スタイルシート」を編集します。
デフォルト・テンプレートの場合、下記の部分を編集します。

＜スタイルシート＞

.sidebar li { list-style-type: none; }

下記のように編集します。

＜スタイルシート＞

.sidebar li { list-style-image: url(画像URL); }

画像URLは、アップロードした画像URLを記入してください。

編集後は保存して再構築すると完了です。
これで、リストマークが画像に変更されました。

しかし、リスト画像が微妙にずれていて、気になるという方は、下記を参考にして修正してくださいね。

[関連記事] → リスト画像のずれを修正するには

ブログランキングに参加中です。応援お願いします。