FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？

リストマークをアイコン画像にする

リストマークの「・」をアイコン画像にする方法を紹介します。

スタイルシートの末尾に次の記述を加えてください。

ul { list-style-image: url("http://～"); }

http://～の部分にはアイコン画像のURLを入れてください。
リストマークの画像なので小さい画像を使うのがよいと思います。

【2010/02/02 追記】マウスを乗せたときに「リストマークは動かさずにリンクテキストを少し右へ移動」するように見せるには、さらにこれをスタイルシートの末尾に加えてください。

ul a:hover { padding-left:5px; }

逆に「リンクテキストを動かさずにリストマークを少し右へ移動」するように見せるには背景画像を利用する必要があります。
上記の今までのカスタマイズを施さずに下記をスタイルシートの末尾に加えてください。

ul,li {
list-style:none;
margin-left:0px;
padding-left:0px;
}

li a {
background-image: url("画像URL");
padding-left: 20px; /* 左に背景画像分の余白設定 */
background-repeat: no-repeat; /* 繰り返し表示しない */
background-position: 0px 2px; /* 左からの位置、上からの位置 */
}

/* マウスを乗せたとき */
li a:hover {
background-position: 2px 2px; /* 左からの位置、上からの位置 */
}

各数値はいろいろ変えて調整してください。

関連記事

[ 2007/05/08 23:50 ] カスタマイズ共通カスタマイズ | TB(1) | CM(33)

≪ 個別記事ページの文末に広告などを表示させる | HOME | lightframeの左右カラム幅を固定、記事カラム幅を可変にする ≫

[ 1876 ] 試してみました。

いたおさん、こんばんは。
面白そうなので、早速試してみました（笑）
説明が解りやすいし、ますますファンになりました。

前回教えて頂いた複製！初めて意味が解りました。
１つのテンプレートで、１枚しか出来ないのですね。
テンプレートは色違いを含め、４枚ＤＬしています。
好きな時に変更できるよう、複製したいと思います。

今はブログを書くよりも、ここを読んでテンプレートをいじるのが楽しいです（笑）
まだ知りたい事が沢山あるため、これからもお世話になります。

[ 2007/05/09 19:34 ] [ 編集 ]

[ 1878 ] ありがとうございました

早速お忙しいのにアップして頂きありがとうございます。

説明がわかりやすく本当に助かります。
ますます自分の思い描いたテンプレートにカスタマイズできて嬉しいです。
もっともっといじりたくなってしまいます。見やすいブログ＆楽しいブログであるように精進しますので今後ともまた宜しくお願い致します。

[ 2007/05/09 21:24 ] [ 編集 ]

[ 1880 ] > らぶりぃママさん

テンプレートをいじるのが楽しくなってくれましたか＾＾
しばらくいろんなカスタマイズに挑戦していると思うようなテンプレートができるだけでなく、様々なスキルが身に付いていると思いますよ。ぜひどんどん挑戦してくださいね。

[ 2007/05/10 01:34 ] [ 編集 ]

[ 1883 ] > pulikoha mamaさん

お役にたてて嬉しいです。
犬の足跡型リストマークが可愛いですね＾＾
私ももっと記事を書けるように頑張ります。

[ 2007/05/10 01:46 ] [ 編集 ]

[ 1889 ] 解決しました。

以前からリストマークをアイコン画像にしたいと思っていたのですが、うまくいかず困ってたところなので大変助かりました。

やはり、画像は大きいとダメですね。
少し調整して小さくしました。

[ 2007/05/12 15:02 ] [ 編集 ]

[ 1891 ] はじめまして

はじめまして！
いたおさんのおかげでテンプレートを自分色にすることができ、とても充実したブログライフを送らせていただいております（＾∀＾）
いたおさんのサイトを参考に、色々いじってみたのですが、ひとつ分からないことがあるので、教えてください（＞＜。）ライトカラムのみに、背景の色をつけることはできるのでしょうか？ブラグインに色が入れれない限り無理なのかな・・？と悩んだりしています。可能か不可能か、教えていただけたらうれしいです！

[ 2007/05/13 00:57 ] [ 編集 ]

[ 1901 ] > ゆうさん

リストマークもカスタマイズしましたね＾＾
Web上の素材屋さんには様々なリストマークが用意されていますよ。

[ 2007/05/13 22:47 ] [ 編集 ]

[ 1902 ] > コロネさん

ライトカラムのみに背景色をつけたい場合はスタイルシートを編集します。

/* ▼ サイトの幅 ▼ */
～
#right {
width:217px; /* 右 */
float:right;
background-color:#cccccc;
}

この赤い部分を付け加えてください。#ccccccは任意の色を設定してください。

/* ▼ 右側メニュー(プラグイン２) ▼ */　の中にあるbackground-colorがある行を削除するとプラグインを透過、つまり背景色と同じ色にすることができます。

カスタマイズ、記事掲載ともに素晴らしいブログですね＾＾

[ 2007/05/13 22:56 ] [ 編集 ]

[ 1908 ] 感激です

ありがとうございます！
こんなに早く回答していただけるなんて本当にうれしいです
（＾＾）
しかもいたおさんに褒めていただけるなんて（＾＾＊）テレ・・全ていたおさんの分かりやすい解説のおかげです！

さっそくスタイルシートを確認してみたのですが、
/* ▼ サイトの幅 ▼ */
～
#right {
width:217px; /* 右 */
float:right;
↑この記述が見つかりません（＞＜。）
スタイルシートの中に、サイトの幅という言葉が出てくるのは
/* サイト全体 */の中だけでした（＞＜）
うまく理解できていなくて申し訳ないのですが、＃rightという記述も見あたらなかったので、何か原因を御存知でしたら教えてください（＞＜。）

[ 2007/05/14 22:58 ] [ 編集 ]

[ 1909 ] >>コロネさん

コロネさんはスタンダードのようですので、

/********************** ▼ ライトカラム(右側メニュー) ▼ */
/* ライトカラム(右側メニューカラム)の外枠 */
.right_outline {
/* ～～～～～～～～～～～～～～～～～～～～～～～～ */
border: 1px #ffffff solid; /* ライトカラムの外枠の色 */
/* ～～～～～～～～～～～～～～～～～～～～～～～～ */
padding: 0;
background-color:#○○○○○○; /* ライトカラムの背景の色 */
}
.right_width {
/* ～～～～～～～～～～～～～～～～～～～～～～～～ */
width: 11em; /* ライトカラム(右側メニュー)の幅 */
/* ～～～～～～～～～～～～～～～～～～～～～～～～ */
border-color:#ffffff; /* 背景と同じ色に設定して隠す */
border-style:solid;
}

/********************** ▲ ライトカラム(右側メニュー) ▲ */

これで大丈夫です。

border-color:#ffffff; /* 背景と同じ色に設定して隠す */
この部分もライトカラム背景と同じ色指定にすると今まで通り線が隠れます。

イタチ可愛いですね～♪私も過去に5頭(最高多頭飼い4匹)飼ってました(*´ω｀)

[ 2007/05/15 01:28 ] [ 編集 ]

[ 1910 ] > コロネさん

申しわけありません！間違えてlightframeの場合を説明してしまいました。コロネさんはstandardシリーズをお使いですね。

スタイルシートを編集します。

/* ▼ ライトカラム(右側メニュー) ▼ */
/* ライトカラム(右側メニューカラム)の外枠 */
.right_outline {
～
background-color:#cccccc;
}
.right_width {
～
border-color:#cccccc; /* 背景と同じ色に設定して隠す */
～
}

この記述を加えてください。
混乱させてしまい申しわけありませんでしたm(__)m

[ 2007/05/15 01:35 ] [ 編集 ]

[ 1911 ] > ちゃんさん

コメントを送信するとちゃんさんが投稿しているではありませんか。投稿が重なってしまいました。

いつも助けてくれて有り難うございます＾＾

[ 2007/05/15 01:38 ] [ 編集 ]

[ 1913 ]

ちなみに僕もこの質問は答えられそうなので、書きこもうとしていました。
同じ時間にこのページを皆さんみてるなんて、プチ奇跡ではないでしょうか。

[ 2007/05/15 01:40 ] [ 編集 ]

[ 1914 ] > あなろぐさん

なんとあなろぐさんまで！
今この瞬間同じものを見ていると思うとなんか楽しいです＾＾

[ 2007/05/15 01:49 ] [ 編集 ]

[ 1917 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2007/05/15 14:08 ] [ 編集 ]

[ 1918 ] 遅れて表示されます

毎回申し訳ございません。

リストマークをアイコンに変更したんですがいつも遅れて表示されます。肉球のアイコンはそんなに重いとは思えないのですが設置方法が間違ってるのでしょうか？できれば左カラムの内容が表示されるのと同時に表示されれば気持ち良いのですがムリでしょうか？
スタンダードなので表示速度が遅いのでしょうか？

[ 2007/05/15 18:15 ] [ 編集 ]

[ 1926 ]

ちゃんさん、いたおさん、あなろぐさん！！
皆さんありがとうございます（＞＜。）
こんなに良くしていただけるなんて、本当にうれしいです！

改造頑張ってみますね（＾∇＾＊）

[ 2007/05/17 23:37 ] [ 編集 ]

[ 1945 ] > pulikoha mamaさん、コロネさん

> pulikoha mamaさん
右上のカウンターを一時的に非表示にしてみてください。少し早く表示されるようにならないでしょうか？

> コロネさん
幸い親切な方が沢山ここを訪れてくれるので私も本当に助かっていますよ＾＾

[ 2007/05/21 22:45 ] [ 編集 ]

[ 2163 ]

逆に消す事は出来ないのですか？

[ 2007/06/12 12:05 ] [ 編集 ]

[ 2164 ]

過去記事にありました。
申し訳ございませんでした。

[ 2007/06/12 12:16 ] [ 編集 ]

[ 2213 ] コメント欄に背景画像を入れたい

はじめまして。いろんな作家さんのテンプレをお借りして
いたおさんのstandard_wide_whiteに行き着きました。
シンプルで、中央部分が広くて　とても　気に入っています。

コメント欄に背景画像を入れたいと思い、ｃｓｓの部分で
}
/* コメントナビゲーション */
.comment_navi {
text-align: right;
margin-top:8px;
margin-bottom: 10px;
　 background-image: url(http://blog53.fc2.com/h/haiteitumo/file/20070617081658.gif);
padding: 5px;
border-top: #dddddd 1px solid; /* 記事下ナビ区切り線 */
こういう風に　やってみたのですが　反映されません。
お時間ありましたら力をお貸しください。
尚、当サイト右サイドバーで　こちらのサイトご紹介
させていただいております。バナー見つかりませんでしたので
すいません。
よろしく　お願い致します。

[ 2007/06/17 08:34 ] [ 編集 ]

[ 2228 ] > 真珠さん

background-image:
と
url(http://～);
の間にスペースが二つ入っているようなので、一つを消してみてください。
ちなみにFirefoxでは表示されませんが、IE6では表示されていますよ。真珠さんはFirefoxをお使いなのかな。
あとご紹介有り難うございます＾＾

[ 2007/06/18 02:52 ] [ 編集 ]

[ 3144 ]

はじめまして。
こんばんわ！
いつも参考にさせて頂いています。

そこで質問なんですが、この黒の点のリストマークを
使いたいのですが使うことはできますか？

画像のＵＲＬをテンプレで探してみましたが
見つからずアドバイスをお願いします。。

[ 2008/02/29 01:00 ] [ 編集 ]

[ 3145 ]

何度もすいません。
無事解決できました(_ _*)

[ 2008/02/29 01:23 ] [ 編集 ]

[ 3309 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2008/05/18 21:17 ] [ 編集 ]

[ 3310 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2008/05/18 21:36 ] [ 編集 ]

[ 4093 ]

いつもお世話になってます。
今さらですが、自分もリストマークの画像化を試してみました。

とてもわかりやすくてよかったのですが、
これだとページ全体のマークが変わってしまいます。

自分は記事中にリストマークを使っているので、
記事内とページ全体とで違うマークの画像を使用できないでしょうか。
よろしければ返答ください。

[ 2009/05/06 21:50 ] [ 編集 ]

[ 4100 ] > orzさん

記事を掲載したのでこちらを参考にしてください。

記事内のリストにだけ、リストアイコン画像を設定する
http://10plate.blog44.fc2.com/blog-entry-197.html

[ 2009/05/07 01:29 ] [ 編集 ]

[ 5155 ] 横メニューバーにリストマークがついてしまう。

はじめまして。
こちらのブログがカスタマイズに関して非常に解りやすく、
色々と参考にさせていただいています。

ひとつ質問なのですが、
リストマークに画像を指定した場合、
横メニューバーにもリストアイコンが付いてしまいます。
横メニューバーだけリストアイコンを表示しないように
するにはどうしたらいいのでしょうか？

スタイルシート上では
#menu_bar li {
list-style-type:none;
となっているのですが、画像を指定した場合のみ
リストアイコンが表示されてしまいます。

以上、よろしくお願いします。

[ 2009/07/29 00:16 ] [ 編集 ]

[ 5158 ] > 名無しさん

スタイルシートにこれを追加してください。

#menu_bar li {
list-style-image: none;
}

[ 2009/07/29 00:30 ] [ 編集 ]

[ 8807 ] 承認待ちコメント

このコメントは管理者の承認待ちです

[ 2011/03/05 20:11 ] [ 編集 ]

[ 8808 ] 承認待ちコメント

このコメントは管理者の承認待ちです

[ 2011/03/05 20:15 ] [ 編集 ]

[ 8832 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます