メニューバーのつけ方　～ライブドアブログのカスタマイズ～

	[ ライフスタイル・暮らし(総合) - ライフスタイル・暮らし ]		カンタン！ブログをはじめよう

■1. まず、各カテゴリのアドレスを確認。
たとえば、僕のサイトの「家づくり」カテゴリであれば、"http://blog.livedoor.jp/askit_bp/archives/cat_455593.html"。

■2. CSSの書き換え
○デザインの設定
　↓
○スタンダード
　↓
○CUSTOM
　↓
○スタイルシート書き換え（以下は、僕サイトの例）

/* カスタマイズ　メニューバー追加 */
#menubar{
color:#000;
font-size:xx-small;
font-weight:bold;
padding:2px 10px;
}
#menubar a{color:#007e0f;text-decoration:underline;}
#menubar a:link{color:#007e0f;text-decoration:underline;}
#menubar a:visited{text-decoration:underline;}
#menubar a:active{}
#menubar a:hover{color:#007e0f;text-decoration:none;}

要は、#menubar というid属性を、自分の好きなカタチにすればいいんです。
この#menubar　は、以下のHTMLで使います。

■3. HTMLの書き換え
○デザインの設定
　↓
○スタンダード
　↓
○CUSTOM
　↓
○こちらのページ
　↓
○「トップページ」　から「編集」（「個別記事」「カテゴリ別アーカイブ」「月別アーカイブ」にも同じ作業をする）　→　以下の作業を繰り返す。
　↓
○<div class="description"><$BlogDescription$>　の下に、メニューバーのリンクを挿入


<br><br><div id="menubar">
<a href="http://blog.livedoor.jp/askit_bp/">HOME</a>
<a href="http://blog.livedoor.jp/askit_bp/archives/cat_460871.html">DIY</a>
<a href="http://blog.livedoor.jp/askit_bp/archives/cat_466502.html">ガーデニング</a>
<a href="http://blog.livedoor.jp/askit_bp/archives/cat_476136.html">鉄鍋</a>
<a href="http://blog.livedoor.jp/askit_bp/archives/cat_455593.html">家づくり</a>
<a href="http://blog.livedoor.jp/askit_bp/archives/cat_455788.html">カメラ</a>
<a href="http://blog.livedoor.jp/askit_bp/archives/cat_455581.html">子供ネタ</a>
<a href="http://blog.livedoor.jp/askit_bp/archives/cat_453623.html">雑感</a>
</div> 

こんな感じ（↑）

■4. Blogの再構築　をちゃちゃっとやって、完了。

わざわざ、書いて頂いてありがとうございました。
お蔭様で私のページにも念願のメニューをつけることが出来ました。
嬉しいです。ありがとうございました。

はじめまして。
トップにメニューバー、記事を参考にさせて頂き、成功しました。
確かに応用次第で画面がカッコよくなりますよね！
ありがとうございます。
TBさせて頂きました。

「メニューバーのつけ方　～ライブドアブログのカスタマイズ～」を拝見し、トライしました。メニューバーはつけられたのですが、ブログタイトルとメニューバーの上部をもう少し狭くしたいのですが、うまく行きません。
もう何時間も試行錯誤しています。スタイルシートのどの部分を書き換えたらよいのか、教えていただきたく、コメントに記述させていただきました。

夢見人さま、
コメントありがとうございます。

メニューバー上部の間隔ですが、メニューバーのソースを書き加えるとき、<br><br>
をそのままコピーされていると思います。
これは僕のデザイン上、改行が必要だったわけで、夢見人さんのタイトルには、不要と思います。
ですので、<br> の改行にあたる部分を削ってみてはどうでしょうか。

はじめまして。
メニューバーのつけ方、参考にさせていただきました。
ブログがすっきり、検索しやすくなり、とっても嬉しいです。
本当にありがとうございました。
勝手ながらではございますが、これからも参考にさせていただければ嬉しく思います。
ありがとうございます！

私もこのサイトでメニューバーをつける事ができて感謝している一人なのですが、タイトルの幅を狭くする方法が分からなくて大変困っています。
通常は青にしたいのですが、青にするとタイトルの幅は広いというか下まで青色に変わってしまいます・・・
仕方なく白色にしているのですが、しっくりキマセン　どうか教えて下さい。

dmuraさん、はじめまして。

タイトルの幅とは、メニューバー部分のことですか？
だとしたら、メニューのリンクを追加したところの

<br><br>　　←改行、ですね

をはずせば、幅は狭くなるはずです。
僕のサイトはデザイン上、わざと改行を２行しているんです。

また、ソースを拝見させていただきましたが、

<div id="banner">　　←bannerというIDに背景色が設定されてますね。

が、適当な場所で

</div>

により終了されていないようです。
banner というIDは、いわゆるページのヘッダー部分を設定しています。
これが</div>で閉じられていないと、下のほうまでbannerだと読み込まれてしまうんですね。
（だから全部青になるのかも）

まず、CSSにてbannerの背景色を設定し、
HTMLにて、

</div>を、
メニューバーを追加した場所の直後、かつ
<div id="content">　の前に置いてみて下さい。

お助けになればいいのですが。

はじめまして、bronzetableと申します。メニューバーの設置方法を
検索していたところ、beginners'rackさんのページに辿り着きました。
大変解りやすく説明されていて、何とかメニューバーを設置できました。

そこで、あと少し編集したいのですが、メニューバーをブログページの
センターに配置するにはどうしたらいいのでしょうか？
何分初心者なので、方法が解りません。お忙しいところすいませんが、
ご教授願います。

あすきっとbpさん、はじめまして！
bronzetableと申します。

メニューバーの設置方法を検索していたところ、
こちらのページに辿り着きました。
大変解りやすく解説されていましたので
メニューバーを設置することが出来ました。

そこで、もう一工夫したいのですが、
設置したメニューバーをブログページのセンターに
もって行くには、どうしたらよいのでしょうか？

何分初心者なので解りません。
お忙しいところすいませんが、ご教授願います。

bronzetableさん、
こちらこそ、はじめまして。

センターに持っていくには、<center>タグを使えばいいはずです。
カスタマイズで追加したソースをまるごと<center>タグで囲ってみてください。

<center>
　～
　～
　～
</center>

のように。

これでうまくいくと思います。

お世話になっております。bronzetableです。
コメントを頂いたとおり、作業を行ったところ、
トップページは、センターに持っていくことができました。

そしたら、その他のページで不具合が発生しました。

文字数が多いようなので分けます。

続きです。

１、HOME 電脳卸　アフィリエイト　e-business　カスタマイズ　
スポーツ　　としていますが、HOMEしかセンターに行きません。

２、上記のHOME　電脳卸　までは、メニューバーが表示されるが、
　　それ以外のメニューを表示させてもメニューバーが表示されない。

あすきっとbpさんのブログページを参照して、CSSを追加後、
以下の作業を行いました。

続きです。

■HTMLの書き換え
○デザインの設定
　↓
○スタンダード
　↓
○CUSTOM
　↓
○こちらのページ
　↓
○「トップページ」　から「編集」
（「個別記事」「カテゴリ別アーカイブ」「月別アーカイブ」にも
同じ作業をする）　→　以下の作業を繰り返す。
　↓
○<div class="description"><$BlogDescription$></div>　の下に、
メニューバーのリンクを挿入

続きです。

<center>

<div id="menubar">
<a href="最大長オーバーでカット">HOME</a>
<a href="最大長オーバーでカット">電脳卸</a>
<a href="最大長オーバーでカット">アフィリエイト</a>
<a href="最大長オーバーでカット">e-business</a>
<a href="最大長オーバーでカット">カスタマイズ</a>
<a href="最大長オーバーでカット">スポーツ</a>
</div> 
</center>

以上です。何か原因がありましたら、ご教授願います。

あすきっとbpさん、いつもお世話になっております。
bronzetableです。

コメントどおり作業を行ったところ、上手くいきました。
ありがとうございました。
また、今後ともよろしくお願いいたします。

はじめまして。
ｎｏｂｅと申します。

メニューバーのつけ方、参考にさせていただきました。
記事が増えて収集がつかなくなり、困っていたのですが、おかげ様で非常にすっきりと整理できました。

本当にありがとうございました。

Dioです。おずさんのページから、たまに来て拝見していました。
メニューバーの付け方を参考にさせて頂きました。
トラバ致します。
今後ともよろしくお願いします。

あすきっとbp さん
こんばんわ！

メニューバーは、ホームページも持っているので、
あのような形になったとです。

真似してください！
光栄です！

今後ともよろしく！

始めまして。
ご挨拶遅れて申し訳ありません。
メニューバー設置、参考にさせて頂きました。
ありがとうございます。
お陰様で無事出来ました。
ありがとうございました。

ダイキチさん、ruruさん、

こちらこそ、コメント返すのが遅くなってしまいました。
お役に立てて、うれしいです。
いい感じに仕上がってますね。
今後とも、よろしくです。

はじめまして。

ブログの表示に関して調べていました。
メニューバー設置できたことで、サイドバーを有効に活用できそうです。
どうもありがとうございました。

今後は、ブログ表示に関してではなく、「家づくり」や「ガーデン」の記事も
じっくり読みたいです。

今後ともよろしくお願い致します。

ひまわりさん、

記事にて紹介くださり、ありがとうございます。
ひまわりさんのサイトの作り方は上手いですね。
メニューバーにカテゴリではなく、個別記事をつける方法は、結構イケマス。僕も別ブログで同じ方法を使ってますが、ブログっぽくなく自然に仕上がりますね。

また遊びにいらしてください。僕も訪問します。

あすきっと様
記事「メニューバーのつけ方」を参考に、ブログにメニューバーをつくることができました。ブログと記事内容を引用させていただきましたので、感謝の意をこめて、ご報告いたします。あすきっとさんのブログの構成にはいろいろと学ぶことが多いので、これからも訪問させていただきます。

こんにちは！

ブログはじめたばかりなのですが、プラグインを右に出そうとしてBに設定してもなぜか左側になります・・・orz
http://siroux.livedoor.biz/

どなたか原因と解決法が分かる方いらっしゃらないでしょうか？

よろしくお願いいたしますm( __ __ )m

名前:
メール:
URL:
情報を記憶:
コメント:

メニューバーのつけ方 ～ライブドアブログのカスタマイズ～