私のサイドバーの至る所にある緑のお花の小さなマーク

これはリストマークと言うそうで、

これを好きな画像のアイコンに変える方法を紹介したいと思います☆簡単ですよ♪

FC2-97.jpg

普通は↓こんなマークが多いです。

   FC2-98.jpg

アイコン画像はなるべく文字より小さめの画像がいいので、フリー素材配布されているサイトさんから

ダウンロードしておくといいですよ☆

画像のURLが必要なので、画像をアップロードしておきます。

やり方を忘れた方は、→ FC2ブログ ~記事に画像を入れる 画像アップロード~

アップロード出来たら、画像のURLをコピーしておきます。

FC2-877.jpg

 

管理画面の「環境設定」→「テンプレートの設定」→「スタイルシート編集」で

スタイルシートの最後の行から一行あけて以下を挿入します。

ul { list-style-image: url("画像のURL"); }

画像のURLの部分に、先ほどコピーしておいた画像のURLを挿入して下さいね。

""の間に隙間がないように挿入しましょう~隙間があるとうまくいきません。。。

これで、リストマークがお好みのアイコンに変わりました☆

簡単なので是非やってみて下さいませ~

 


上記のやり方は、ブログ全体のどの部分のリストマークもすべて指定していて

みんな同じアイコンになるという方法です。

箇条書きをした場合もすべて同じアイコンということです。

もしも、記事内や個別にリストマークを別のものに変えたい場合は

直接以下のもので指定するとその部分はそこで指定した画像にすることが出来ます。

 

  • 例えば
  • この画像で
  • 表示する場合は
  • このように記入して下さい。

<ul style="list-style-image: url(画像のURL);">
<li>例えば</li>
<li>この画像で</li>
<li>表示する場合は</li>
<li>このように記入して下さい</li>
</ul>

これで、この部分だけ別のリストマークにすることも出来るようになりました☆

記事内は別のリストマークにしてみるなど、いろいろ変更してみても楽しいですね☆

 

 

 タグ
None