リストマークの画像化

2005年8月23日

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

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

カスタマイズ方法（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を記入してください。

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

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

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

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

トラックバック

このエントリーのトラックバックURL:

何でもする。舐めてあげるし。入れてあげる。(*´ω`)★ http://gffz.biz/

投稿者 Anonymous : 2011年11月29日 15:39

私は、この特定の懸念を示してきた道を愛しているそれに加えて私に配慮するためのいくつかの飼料を提供していますか。それにもかかわらず、私が目撃したものから、私は本当に他のレビューはその人々にパックするときに願ってすることは問題にし、ニュースに付き物に関するソープボックス時に一切のスタートにご利用いただけます。まだ、この素晴らしい作品をありがとう、私は全体でそれに同意できない場合でも、私は視点を大切に。

投稿者 online payday loans canada : 2012年1月13日 03:04

ご挨拶！完全にオフトピックな簡単な質問。あなたはサイトをモバイルフレンドリーにする方法を知っていますか？私のiPhoneから参照するときに私のウェブサイトは奇妙に見えます。私はこの問題を解決することができるかもしれないテーマやプラグインを見つけるしようとしている。あなたが何か提案がある場合は、共有をしてください。乾杯！

投稿者 search engine optimization vancouver : 2012年1月13日 16:54

あなたは今までより多くのちょうどあなたの記事より少しを含む考えたことがありますか？私はあなたが基本的かつ全てであると言うものを、意味する。あなたが、より多くの"ポップ"の投稿を与えるためにいくつかの素晴らしい画像や動画を追加した場合、それにもかかわらず想像してみてください。あなたのコンテンツが優れているが、イメージやクリップで、このサイトは、紛れもなくその分野で最高のいずれかになります。素晴らしいブログ！

投稿者 oh canada : 2012年1月21日 13:09

コメントしてください