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

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

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

CSS Menu Maker

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

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

1cssmenu_s

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

3free

デザイン選択画面

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

4CSS Menus   CSS Menu Maker_small

「Horizontal」のデザイン

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

6-1CSS Menus   CSS Menu Maker
6-2CSS Menus   CSS Menu Maker
6-3CSS Menus   CSS Menu Maker
6-4CSS Menus   CSS Menu Maker
6-5CSS Menus   CSS Menu Maker

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

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

7CSS Menus   CSS Menu Maker

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

8CSS Menus   CSS Menu Maker

各パートの説明

Aパート

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

Bパート

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

Cパート

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

9CSS Menus   CSS Menu Maker

仕上がり

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

10New Menu   CSS Menu Maker

CSSメニューの設置

cssmenu.zipの解凍

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

11New Menu   CSS Menu Maker

必要なファイル

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

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

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

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

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

12New Menu   CSS Menu Maker

HTMLへの記載

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

13New Menu   CSS Menu Maker

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;
}

上記に2箇所ある画像のurl
background: url(http://48collect.publog.jp/cssmenu/images/bg.png)
では各自の画像の保存場所(アップロードした場所)を指定すること。上では、私の画像の保存場所になっているので、注意。

この部分をライブドア管理画面>ブログ設定>デザイン/ブログパーツ設定>PC>デザイン設定>カスタマイズ>CSSで、CSSの最後にコピーする。
上で説明しているが、わかりやすいように、/*CSSメニュー*/みたいな表題を付けて、追記してやれば良い。
出来上がり!以上

Related Posts Plugin for WordPress, Blogger...