ライブドアブログのカスタマイズ-CSS Menu MakerでCSSメニューを超簡単に設置

【この記事を読むのに必要な時間は約 2 分です。】

ライブドアブログにはデフォルトでは、メニューがない。
そこで、あっという間にCSSのメニューが設置できるCSS Menu Makerを紹介する。もちろん普通のブログやサイトでも利用できる。
デザインが非常に豊富で、選ぶのに苦労するほどである。
HTMLやCSSの知識がなくても、プレビューを見ながら簡単に作成できるので、是非とも活用して欲しい。知識のある人は、更にカスタマイズもでき自由度も高い。

1 CSS Menu Maker
2 CSSメニューの設置

CSS Menu Maker

CSS Menu Malerのホームページへアクセス

まず、CSS Menu Makerにアクセスする。

初めて利用する場合、登録する必要があるように見えるが、実際は、必要ない。ただし、「Login」ボタンではなく、「Sign Up」ボタン（登録用ボタン）をクリックする。
すると、以下の画面に切り替わるので、「GET STARTED」をクリックする。

デザイン選択画面

数多くのメニューが用意されている。
まず、左上の「Type-any-」プルダウンメニューで、「Drop Down」「Flyout」「Horizontal」「Tabbed」「vertical」の中から利用したいタイプを決定する。
一般的な横メニューであれば「Horizontal」「Drop Down」「Tabbed」から選ぶと良いだろう。「Vertical」と「Flyout」は縦長のメニューだ。
サブカテゴリーを設定できるものとできないものがある。

「Horizontal」のデザイン

「Horizontal」からメニューを選択することとする。
これだけの種類が用意されている。
今回は、2枚目の画像からひとつメニューを選択した。

選択したメニューをカスタマイズ

選択したメニューをクリックする。すると次の画面が現れる。
続けて、「Customize/Download」をクリックする。

現れた画面でカスタマイズすることになる。
主に以下の３つのパートに分かれている。

各パートの説明

Aパート

ここで、メニューに設置したい「テキスト」を設定する。
上の空欄に設置したい「テキスト」を入れて、「+」をクリックすると、下に表示される。
下に表示されている「テキスト」の横の「×」をクリックすると削除できる。
ハイライトされている「テキスト」について、「Edit Item」で編集できる。
「title」で「テキスト」を訂正できる。
「link」でリンクを設定する。
「New Window」も用意されているので、新しいウィンドウで開きたいようなリンクはチェックを入れる。

Bパート

デフォルトでは、プレビュー画面が表示されており、変更を確認できる。
その他に「html」「css」「Images」が用意されているが、特段確認する必要はない。

Cパート

プルダウンが表示され、メニューの全幅や、文字の色、大きさを指定できる。

仕上がり

ひととおり、設定するとこんな感じでプレビューが表示される。
よければ、「Download」をクリックする。

CSSメニューの設置

cssmenu.zipの解凍

ダウンロードしたcssmenu.zipを解凍する。
cssmenuフォルダを展開すると以下のようになっている。

必要なファイル

上記のうち必要なファイルは、
menu_sourceフォルダの中の
　index.html
　style.css
menu_sourceフォルダ>imagesフォルダの中の
　bg.png
の３つ。画像ファイルだけそのまま使用するが、後は中身の一部をコピーして利用する。

画像ファイルのライブドアブログサーバーへのアップロード

「ライブドアブログ管理画面」＞「画像/ファイル」＞「ファイル管理」でフォルダ（任意の名前でいいが、例えば「CSSMENU」＞「images」）を作成して、そのフォルダの中にbg.pngをアップロードする。

ライブドアブログ管理画面でのファイルのアップロードについてわからない場合は、ライブドアサーバーへのアップロードを参考に確認しながら実行して欲しい。

「CSSMENU」＞「images」フォルダを作成し、その中にbg.pngをアップロードすると次のように表示される。

HTMLへの記載

index.htmlファイルの次の部分をコピーする。

index.htmlファイルは直接使用するわけではないが、ブラウザーで表示したときに文字化けする場合は、文字コードを追加してやればよい。
今回は、index.htmlファイルを直接使用するわけではないので、このままで構わない。

コピーする箇所を抜き出したのが以下。
これは、私の設定なので、実際には、「#」部分には実際のリンク先のURLがhttp://から記載されており、「トップページ」以下のテキストも実際に設定したものが記載されていると思う。
また、この部分は後から、直接加筆訂正できる。


<div id='cssmenu'>
<ul>
   <li><a href='#'><span>トップページ</span></a></li>
   <li><a href='#'><span>このブログについて</span></a></li>
   <li><a href='#'><span>Twitter</span></a></li>
   <li><a href='#'><span>RSS</span></a></li>
   <li class='last'><a href='#'><span>ライブドアブログのカスタマイズ</span></a></li>
</ul>
</div>

この部分をライブドア管理画面＞ブログ設定＞デザイン/ブログパーツ設定＞PC＞デザイン設定＞カスタマイズの「トップページ」、「個別記事ページ」、「カテゴリーアーカイブ」、「月別アーカイブ」の全て同じ場所にコピーする。
コピーする場所は、各自使用しているテンプレートによって違うので、<body>より少し下の場所で色々試して欲しい。ちなみに私のテンプレートでは以下の場所。


<IfBlogHeaderImageUrl><img src="<$BlogHeaderImageUrl$>" id="blog-header-image"></IfBlogHeaderImageUrl>
</div>

<!-- メニュー貼り付けStart -->
<div id='cssmenu'>
<ul>
   <li><a href='#'><span>トップページ</span></a></li>
   <li><a href='#'><span>このブログについて</span></a></li>
   <li><a href='#'><span>Twitter</span></a></li>
   <li><a href='#'><span>RSS</span></a></li>
   <li class='last'><a href='#'><span>ライブドアブログのカスタマイズ</span></a></li>
</ul>
</div>
<!-- メニュー貼り付けEnd -->

<div id="content" class="hfeed">
<!-- ..... MainColumn ..... -->
<div id="main" class="column">

CSSへの記載

style.cssファイルの中身を全てコピーする。

追記がわかりやすいように、/*CSSメニュー*/を付け足している。


/*CSSメニュー*/
#cssmenu ul {
  list-style-type: none;
  position: relative;
  display: block;
  height: 33px;
  font-size: 12px;
  background: url(http://48collect.publog.jp/cssmenu/images/bg.png) repeat-x top left;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  border: 1px solid #000;
  margin: 0;
  padding: 0;
  width: auto;
}
#cssmenu li {
  display: block;
  float: left;
  margin: 0;
  padding: 0;
}
#cssmenu li a {
  float: left;
  color: #A79787;
  text-decoration: none;
  height: 24px;
  padding: 9px 15px 0;
  font-weight: normal;
}
#cssmenu li a:hover,
#cssmenu .active {
  color: #fff;
  background: url(http://48collect.publog.jp/cssmenu/images/bg.png) repeat-x top left;
  text-decoration: none;
}
#cssmenu .active a {
  color: #fff;
  font-weight: 700;
}
#cssmenu ul {
  background-color: #B11718;
}
#cssmenu li a:hover,
#cssmenu li.active {
  background-color: #DE3330;
}