28cd53a7.jpg

当ブログは現在こんな感じです。

ライブドアブログについての解説記事ですが、FC2ブログなどでもタグを入れるところさえ間違えなければいけると思います。

いざやってみようと思っても「タグとか全然わからないよ」って人には少し難しいです。

しかし探してみればあるもので、Web上のサービスサイトを使えば私のような素人でも簡単に10分ほどでブログに反映させるところまで、できました。

私はメニューバーの設置にとても苦労しました。
この方法を使えばあっさりできてしまいます。
タグの知識や画像作成なんて必要ありません。

同じように試みようとしている方の手助けになればと思います。
使用するもの
サイト名:CSS Menu Generator
URL:http://www.cssmenumaker.com/

似たようなサービスはたくさんあるのですが、どれも日本語に対応していなかったり、機能が多すぎて逆に分かりにくいものなどばかりで、少し私には使いにくかったので、このサイトを使いました。
・24種類の完成されたデザインの中から自分にあったものを選べる。
・最小限の作業で作成可能。
・英語のサイトですが日本語に対応しています。
・メニューバーの上にカーソルを重ねたら光る機能がデフォルト。
・HTMLのほうのタグも自動で作成してくれる。

使い方の解説
b24fe026.jpg

まずはサイトにアクセスし24種類の中から好きなものを選びましょう。
サイズなどは自動で調整してくれるので、ブログのデザインに合わせたカラーのものを選ぶとよいでしょう。
437c7af2.jpg

選んだら、次に2択の画面に移るので"Custmize"をクリックします。

196c108b.jpg

この画面でTitle,Link,Targetを設定します。
”Add Button”を押すと、項目を増やすことが出来ます。
多すぎず、少なすぎず、4~7個ぐらいが良いとも思います。
Targetはそのままのウィンドウで開く(デフォルト)か新しくウィンドウで開くかを設定するところなのですが、基本的にデフォルトにしておきましょう。
すべての入力を終えたら”Preview Menu”をクリック。
293c65ae.jpg

先ほど入力しものを最初に選んだデザインに反映し、どのように映るかを見ることが出来ます。
これでOKと思ったら、"Step 3 Download"をクリック。
続いて”Download Now”をクリックし、ダウンロードできたファイルを解凍します。
6495cb91.jpg

それぞれの解説
”sample.html”は先ほどPreview Menuで見たのと同じもが見れるだけですので使いません。
menuフォルダの中には使用する画像とmenu_styleというCSSのスタイルシートが入っています。

これからタグの編集に入ります。といっても画像のURLを置き換えるだけなのですぐに終わります。
編集する際は秀丸エディタを使うことを強くおすすめします。

まずはmenu_styleを開き
url("images/▲▲▲▲▲.gif") を探します。
gifの部分はjpegになってる場合もあり。

▲▲▲▲▲と同名の画像ファイルが同梱されていますので、記事を書くなどの場所で画像をアップロードして、ネット上でアクセスできるようにします。
画像のURLを以下のように書き換えます。
url("images/▲▲▲▲▲.gif")

url("https://livedoor.blogimg.jp/vermelin/imgs/8/4/84da7e6d.gif")

同様に、他の場所も書き換えていきます。

私のダウンロードしたメニューバーでは、画像URLの置き換えは2箇所だけでしたが、他のものでは9ヶ所変更する必要があるものもあります。

ここまできたら,置き換えたmenu_styleのタグを全てコピーし、ブログ設定→デザイン→カスタマイズページから画像の位置に貼り付けます。
ac9c1b8f.jpg

保存するをクリックします。
これでCSSの編集は終わります。

最後にHTMLの編集を行います。

ダウンロードしたファイルにあった”installation_instruction.html”を開きます。
0f3fe03b.jpg

選んだメニューバーによってはここでも画像URLの置き換えが必要な場合があります。(私のやつはありませんでした。)
画像URLの置き換えが先程行ったのと同じようにやれば大丈夫です。
置き換えはこの画面のまま編集することが出来ます。エディタを使う必要はありません。

テーブルの中のタグをすべて選択しコピーします。
トップページ.個別記事ページ.カテゴリアーカイブ.月別アーカイブ内に
編集して貼りつけていきます。
貼り付ける場所は、
<div id="content" class="hfeed">の上になります。
fad280bf.jpg

それぞれ編集後に保存を押すのを忘れないようにしましょう。

これで完成。
タグの知識なんて覚えずにカッコイイ、メニューバーをつくることが出来ました。
28cd53a7.jpg


参考記事(気まぐれなブログ様)
livedoorブログで【CSSを使って】メニューバーを作ってみよう