CSS Menu Generator（改）2

前記事の続きです。
Zipが手元にある状態からはじめます。

5：中は↓のようになっていると思います。

使うのは、”menu”フォルダの中身と”installation_instruction”ファイルです。

6：menuフォルダの中にあるimageフォルダの中の画像をすべてアップロードします。ブログとかでしたら、アップロードのツールがついていると思いますので、それを使って下さい。

次に、menuフォルダの中にある”menu_css”というCSSファイルをメモ帳とかでよいので開きます。
これの画像ファイルの記述を先ほどアップロードした画像のファイルURLに置き換えてゆきます。

例：.menu li a.top_link:hover span {background:url(images/button4.gif) no-repeat right top;}
　　　　　　　　　　　　　　　　　　　　　　　　　　　　↓
.menu li a.top_link:hover span {background:url(http://blog-imgs-38.fc2.com/l/i/t/litchy/css6.png) no-repeat right top;}

ファイル名が一応それぞれに対応しているので、間違えないように書き換えていきましょう。
Ctlキー＋F　で検索窓が出てくるのでそれにそれぞれのファイル名を検索しつつやるとよいでしょう。

7：書き換え終わったらすべてを選択し、コピー。
サイトにあるCSS（ブログだとテンプレートの設定とかそういった所にあると思います）に、今コピーしたCSSを貼り付けます。
記述の一番最後とかに追加する感じで大丈夫です。

8：次に、installation_instructionというHTMLファイルを開きます。
すると、ソースコードが出てくると思いますので、それをメニューバーを設置したい場所にコピペしてください。
※自分はFc2ですが、＜body＞～　の直下においてみてます。
※Livedoorブログは、トップページだけでなく、個別記事・カテゴリアーカイブ・月別アーカイブそれぞれに同じようにコピペしていくことになります。

9：保存して、表示されているかを確認してみてください。これで設置は完了しているはずです。

★メニューバーの幅を設定したい場合★
installation_instructionを開いてでるコードをちょっと改変します。

＜style media="all" type="text/css"＞@import "/menu/menu_style.css";　＜/style＞
とあるすぐ下にある（ないものもありますが、ない場合は書いて下さい）　＜div＞を　＜div style="width=〇〇〇px;"＞にすると、幅が短くできたりします。
　
※↑の記述は全角が含まれますので、半角で書いてくださいませ。
※＜div＞がないものの場合は、忘れずに＜/ul＞の下に＜/div＞を書いて下さい。書かないと、全体の表示がおかしくなる原因になってしまいます。