スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
新しい記事を書く事で広告が消せます。
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>を書いて下さい。書かないと、全体の表示がおかしくなる原因になってしまいます。
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>を書いて下さい。書かないと、全体の表示がおかしくなる原因になってしまいます。
- 関連記事
-
- RSS一括購読ボタン
- CSS Menu Generator(改)2
- CSS Menu Generator(改)1
- 震災関連ツール
- サイトSEOチェックツール
スポンサーサイト
カテゴリ
全記事表示リンク
記事ナビ2 新着+関連エントリー
PR
最新コメント
月別アーカイブ
訪問者数
アクセスランキング
Fc2ブログランキング
記事ナビ
- まとめサイト死亡? (06/04)
- 嫌儲のスレに2ch管理人ひろゆきさんが降臨していたようです。で、その後2chには↓のような一文が添えられております。2ちゃんねるのデータの利用に関して、原則的に自由
- 2ちゃんねるDaysのこと (05/30)
- 特にアドセンスを利用している方に。 お客様の広告は、承認していないウェブサイトに最近表示されました。収益の損失を防ぐには、アカウント設定にアクセスして、広告
スポーンサードリンク
まとめサイト新着記事
検索フォーム
RSSリンクの表示
リンク
QRコード

SEOツール等