css spriteについて(html知識皆無)

質問

PC歴1年半で、KAETENというテンプレートを使って
普段ブログを書いているものです。

「Instant Sprite – Generate CSS Sprites Instantly」
やその他もろもろのサイトを見てブログに導入しようと思ったのですが、

htmlの知識が無いため、どのように変更したり、どこに挿入したりすれば
いいのか全くわかりません＞＜

大画像はかなり圧縮しています。
多くの小画像による通信回数をどうしても削減したいので、
ご協力願います。

下記の形式を使わなくていいので、
変更する箇所と、挿入前後のhtmlやcss
を教えて下さい。どうかよろしくお願いします。

●ブログはこんな感じで表示されています。
http://rankdus.seesaa.net/

●css spriteの画像
http://rankdus.up.seesaa.net/image/sprite.png

●cssのどこかに挿入？（フッターに表示されるものです）
.sprite { background: url('sprite.png') no-repeat top left; }
.sprite.000pageup { background-position: 0px -151px; width: 16px; height: 16px; }
.sprite.000rss { background-position: 0px -177px; width: 16px; height: 16px; }
・・・・
（同じ感じだと思うので、省略しました）

●htmlのどこかに挿入？
<div class='sprite 000pageup'></div>
<div class='sprite 000rss'></div>
<div class='sprite 000home'></div>
・・・

●テンプレートのcssやhtml
（文字オーバーしたので、アップロードしました）
http://firestorage.jp/download/2dce1d5b7374f6abd9166408fb5241122521f75f

回答No.1

mjtanaka · ベストアンサー

参考URLを載せておきます。

HTMLの知識がないとのことですが、今後のためにも勉強されることをお勧めします。

参考URL：

http://lopan.jp/css-sprites/

お礼

位置を指定すればいいだけだったみたいで解決しました。

回答ありがとうございました。