2005年01月19日

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

カテゴリごとに、メニューバーをつける方法です。

よろしければ、どーぞ!

 

昨日から、Blogランキングに登録してみた。

効果が現れるのは、いつの日のことやら。。。

■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> <!-- メニューバー div終了 -->

こんな感じ(↑)

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



Google
Web blog.askit-bp.com



 ↑  ↑  ↑  ↑
ランキング参加中。
今日は何位だろう?



この記事へのトラックバックURL

http://trackback.blogsys.jp/livedoor/askit_bp/12593005
トラックバックをされる際、当ブログ、もしくは当記事を参照するリンクを貼っていただけると嬉しいです。
記事と関連性のないトラックバックはご遠慮ください。

この記事へのトラックバック
ライブドアブログのカスタマイズにおいて、念願だったメニューバーをトップページに表示できるようにした。その際、beginners ruckさんがわざわざ、私のリクエストにより書いてくれたメニューバーのつけ方 〜カスタマイズ〜を参考にした。かなり探したが、見つからなかった.
メニューバーをトップに表示する【ライブドアブログのカスタマイズ】【ブログアフィリエイトで日給6万円】at 2005年01月19日 02:43
トップにメニューバーを付けられたらと思っていたのですが、なかなか関連記事が見つからずにいました。参考にさせて頂き、成功しました。ありがとうございます。
トップにメニューバー表示【おこづかいのタネ】at 2005年01月22日 11:43
3カラム化の次にメニューバーを設置してみました。 「beginners' rack 家づくりを応援!」さんの記事を参考に設置。 今回も設置するだけなら、書いてある通りにすればすぐ出来ます。 ...
メニューバーも付けてみました【アフィリエイトで目指すは月収100万円】at 2005年02月07日 22:13
むーん・・・改造してみました。 とりあえず、おおまかな部分は完成。リンク・色・画像などの細かい所はまた後日。 今回も、ちびログさんの所から、テンプレートをお借りしてそれをちょこちょこと改造したわけですが・・ どういうことだか、なぜだか、幅?がおかし.
改造一段落(覚書あり)【365色】at 2005年02月16日 02:34
やっと、トップにメニューバーを追加しました!! と言ってもこちらのページに書いてあるままやってみただけです! 補足することも無いので、チャレンジしてみたい方がいらっしゃいましたらこちらのページを参考にしてください。 1つ注意?することは、カラム位置(HTM
ブログにメニューバーをつける!【ネットDE収入はじめようとしてる人のためのブログ】at 2005年02月26日 21:35
メニューバーを付けたかったので、 「beginners' rack 家づくりを応援!」さんの記事を参考に、 やってみました。 とてもわかりやすいので、 書いてある通りにやるだけで簡単に設置できます。 初心者の私でもすぐに設置できました★ 本当に感謝です。ありがとう.
メニューバーをつけてみました【初心者でもアフィリエイトで稼げるはず】at 2005年03月09日 17:25
 以前からトップにメニューバーを付けれないかと、Blogの設定の説明欄を使ったりして試してみたが、あまり「すっきり」しないのであきらめていた。・・・ 一昨日 ブログアフィリエイトで日給8万円さんのページでトップにメニューバーがあるのを見つけ、トップにメニュー(
メニューバーを新設 Livedoor blog【GIN@ I am thinking!】at 2005年03月12日 17:32
ライブドアブログでカスタマイズ メニューバー追加方法が下記サイトに載っています。
メニューバーのつけ方 〓ライブドアブログのカスタマイズ〓【ブログアフィリエイトで月5万円稼ごう!!】at 2005年03月20日 19:44
ブログのトップページに、カテゴリを表示させているブログをたまに見かけます。 見栄えがいい上、ブログの閲覧もよりスムーズになると思われるため、私も実際に行ってみました。...
ライブドアブログのトップに「カテゴリー」を表示【先駆者に学ぶブログアフィリエイト】at 2005年03月21日 23:10
記事が増えてきて収集がつかなくなってきましたので、ブログのトップにカテゴリーごとのメニューバーをつけてみました。 ...
トップにメニューをつけました【独学でFP資格をめざそう】at 2005年03月29日 02:27
ブログにメニューバーをつけていたのだが、すべてのページにメニューバーが表示されるように、カスタマイズをしてみた。
メニューバーをすべてのページに設置【ブログアフィリエイト by Dio's Room】at 2005年04月01日 02:05
ブログ・アフィリエイトで稼ぐといいながら、 いまだにそれらしい気配を見せなかった当ブログですが、 ようやくカスタマイズの第一歩を踏み出しました。 最近、よく見かけるブログのトップへのメニューバー設置です。 詳しくは、 トップにメニューバーを表示させる方.
ブログトップへのメニューバー設置ーライブドアブログの場合ー【無職からのブログ・アフィリエイト生活】at 2005年04月02日 22:32
メニューバーを追加するも、失敗(泣) どうやったら、真ん中に表示されるんだろうか。 ちなみに、この方のを参考にしております。 http://blog.askit-bp.com/archives/12593005.html どなたか、わかりましたら、お教え願います。 ...
メニューバー追加【カツオの練習実験ブログ】at 2005年05月02日 07:06
今回はメニューバーなるものを取り付けてみました 参考にしたのは”beginners' rack 家づくりを応援!”さんのメニューバーのつけ方 ”〜ライブドアブログのカスタマイズ〜”という記事です
メニューバー追加 etc…【婿養子の戯言〜家族に内緒でアフィリエイトで小遣い稼ぎ〜】at 2005年05月06日 20:13
HTMLのソースを画面に表示させる方法がわかりません(涙) 以下のHPのソースの表示方法が各々違うように見えます(素人目から見てですが。。。) どなたか、教えていただけないでしょうか。 お願いいたします。...
素朴な疑問【カツオの練習実験ブログ】at 2005年05月07日 07:53
アクセス数を増やすためには見た目を良くしていかないと という事で、 ブログの中のトップ画面上の上段にメニューバーを つけて見ました。 これは使い勝手が良くなるので便利かな。 やり方>> 【beginners' rack 家づくりを応援!】さんのページを参照
メニューバーの作り方【何でも屋 〜月収30万円へのチャレンジ〜】at 2005年05月08日 12:41
まずは、トップメニューの表示について説明させていただきます。 (Livedoorのブログの場合) 1.まず最初に各カテゴリのアドレスを確認しておいてください。 例)僕の「入庫情報」のカテゴリの場合は...
トップメニュー表示【toko_toco1221プロジェクター計画】at 2005年05月14日 17:05
さて、昨日メニューバーを付けてみたが HOME→パソコン関連→アフィリエイト体験記と移動すると失敗してしまいました。 こちらを参照。 あすきっとbpさんから 「HOMEにはりつけたメニューバーのリンクを、そのままコピーしていれば、問題ないと思う」 という指摘を受.
メニューバー追加2日目【アフィリエイト、どきどき体験記】at 2005年05月16日 23:21
さて、昨日メニューバーを付けてみたが HOME→パソコン関連→アフィリエイト体験記と移動すると失敗してしまいました。 こちらを参照。 あすきっとbpさんから 「HOMEにはりつけたメニューバーのリンクを、そのままコピーしていれば、問題ないと思う」 という指摘を受.
メニューバー設置リトライ【アフィリエイト、どきどき体験記】at 2005年05月17日 00:35
ブログ上部のタイトル部分に、カテゴリーのメニューバーをつけてみました。 わかりますか? プチリニュです。 参考にしたのは、メニューバーのつけ方 〜ライブドアブログのカスタマイズ〜の記事です。 ありがとうございました。
メニューバーを追加【Happy☆Days】at 2005年10月19日 11:20
このブログの上のタイトルのちょうど上にカテゴリがありますよね。 ふぉるてブログは2カラムなので、サイドバーが左側の一つだけ。なので、カテゴリ別アーカイブがカナリ下に行っちゃって見づらい。 そんなワケで、トップ部分にメニューバーを付けて、カテゴリを表示して...
フォルテのブログカスタマイズVol.18〜トップにメニューバーを付けて、カテゴリー表示【ふぉるてブログ〜小田急線梅ヶ丘駅の不動産会社フォルテの徒然〜】at 2006年02月02日 20:44
この記事へのコメント
わざわざ、書いて頂いてありがとうございました。
お蔭様で私のページにも念願のメニューをつけることが出来ました。
嬉しいです。ありがとうございました。
Posted by おず at 2005年01月19日 02:54
はじめまして。
トップにメニューバー、記事を参考にさせて頂き、成功しました。
確かに応用次第で画面がカッコよくなりますよね!
ありがとうございます。
TBさせて頂きました。
Posted by はな at 2005年01月22日 11:49
「メニューバーのつけ方 〜ライブドアブログのカスタマイズ〜」を拝見し、トライしました。メニューバーはつけられたのですが、ブログタイトルとメニューバーの上部をもう少し狭くしたいのですが、うまく行きません。
もう何時間も試行錯誤しています。スタイルシートのどの部分を書き換えたらよいのか、教えていただきたく、コメントに記述させていただきました。
Posted by 夢見人 at 2005年02月20日 14:11
ブログタイトル上部余白の間隔は詰めることができました。
あとは、メニューバー上部の間隔を詰めることが今後の課題です。
Posted by 夢見人 at 2005年02月20日 16:20
夢見人さま、
コメントありがとうございます。

メニューバー上部の間隔ですが、メニューバーのソースを書き加えるとき、<br><br>
をそのままコピーされていると思います。
これは僕のデザイン上、改行が必要だったわけで、夢見人さんのタイトルには、不要と思います。
ですので、<br> の改行にあたる部分を削ってみてはどうでしょうか。
Posted by あすきっとbp at 2005年02月20日 18:31
はじめまして。
メニューバーのつけ方、参考にさせていただきました。
ブログがすっきり、検索しやすくなり、とっても嬉しいです。
本当にありがとうございました。
勝手ながらではございますが、これからも参考にさせていただければ嬉しく思います。
ありがとうございます!
Posted by btrf at 2005年02月28日 15:32
私もこのサイトでメニューバーをつける事ができて感謝している一人なのですが、タイトルの幅を狭くする方法が分からなくて大変困っています。
通常は青にしたいのですが、青にするとタイトルの幅は広いというか下まで青色に変わってしまいます・・・
仕方なく白色にしているのですが、しっくりキマセン どうか教えて下さい。
Posted by dmura at 2005年03月11日 19:38
dmuraさん、はじめまして。

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

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

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

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

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

が、適当な場所で

</div>

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

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

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

お助けになればいいのですが。
Posted by あすきっとbp at 2005年03月11日 20:42
はじめまして、bronzetableと申します。メニューバーの設置方法を
検索していたところ、beginners'rackさんのページに辿り着きました。
大変解りやすく説明されていて、何とかメニューバーを設置できました。

そこで、あと少し編集したいのですが、メニューバーをブログページの
センターに配置するにはどうしたらいいのでしょうか?
何分初心者なので、方法が解りません。お忙しいところすいませんが、
ご教授願います。
Posted by bronzetable at 2005年03月21日 14:48
あすきっとbpさん、はじめまして!
bronzetableと申します。

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

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

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

Posted by bronzetable at 2005年03月21日 16:42
bronzetableさん、
こちらこそ、はじめまして。

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

<center>
 〜
 〜
 〜
</center>

のように。

これでうまくいくと思います。
Posted by あすきっとbp at 2005年03月21日 18:31
お世話になっております。bronzetableです。
コメントを頂いたとおり、作業を行ったところ、
トップページは、センターに持っていくことができました。

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

文字数が多いようなので分けます。
Posted by bronzetable at 2005年03月22日 16:45
続きです。

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

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

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

Posted by bronzetable at 2005年03月22日 16:56
続きです。

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

Posted by bronzetable at 2005年03月22日 16:59
続きです。

<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> <!-- メニューバー div終了 -->
</center>

以上です。何か原因がありましたら、ご教授願います。
Posted by bronzetable at 2005年03月22日 17:00
それぞれのカテゴリ内にある記事をどれかひとつでも更新してみてください(カラ更新でOK)。
その後再構築すれば、上手くいきますよ。
Posted by あすきっとbp at 2005年03月22日 18:40
あすきっとbpさん、いつもお世話になっております。
bronzetableです。

コメントどおり作業を行ったところ、上手くいきました。
ありがとうございました。
また、今後ともよろしくお願いいたします。
Posted by bronzetable at 2005年03月22日 20:12
はじめまして。
nobeと申します。

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

本当にありがとうございました。
Posted by nobe at 2005年03月29日 02:31
Dioです。おずさんのページから、たまに来て拝見していました。
メニューバーの付け方を参考にさせて頂きました。
トラバ致します。
今後ともよろしくお願いします。
Posted by Dio at 2005年04月01日 02:05
あすきっとbp さん
こんばんわ!

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

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

今後ともよろしく!
Posted by Dio at 2005年04月01日 20:39
ブログのカスタマイズ参考にさせていただきました。
お礼が遅れて申し訳ございません。
本当にありがとうございました。
Posted by ダイキチ at 2005年04月23日 14:38
始めまして。
ご挨拶遅れて申し訳ありません。
メニューバー設置、参考にさせて頂きました。
ありがとうございます。
お陰様で無事出来ました。
ありがとうございました。
Posted by ruru♪ at 2005年04月27日 09:08
ダイキチさん、ruruさん、

こちらこそ、コメント返すのが遅くなってしまいました。
お役に立てて、うれしいです。
いい感じに仕上がってますね。
今後とも、よろしくです。
Posted by あすきっとbp at 2005年04月28日 00:20
はじめまして。

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

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

今後ともよろしくお願い致します。
Posted by ひまわり at 2005年08月02日 23:10
ひまわりさん、

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

また遊びにいらしてください。僕も訪問します。
Posted by あすきっと at 2005年08月03日 00:44
あすきっと様
記事「メニューバーのつけ方」を参考に、ブログにメニューバーをつくることができました。ブログと記事内容を引用させていただきましたので、感謝の意をこめて、ご報告いたします。あすきっとさんのブログの構成にはいろいろと学ぶことが多いので、これからも訪問させていただきます。
Posted by saiou at 2006年03月08日 10:37
>saitouさん、

参考にしていただき光栄です。
このブログ、いろいろと仕掛けを施しています。
カスタマイズは、結構面白いのであります。
Posted by あすきっと at 2006年03月08日 13:02
こんにちは!

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

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

よろしくお願いいたしますm( __ __ )m
Posted by ミスターX at 2006年05月15日 13:20
 
          

     dell_468x60_2




■■■ も く じ ■■■

迷ったら、トップページへ
スウェーデンハウスで家づくり HOME

はじめにお読みください
beginners' rack とは?

家づくり
41万+α 円の節約
マイホームを考え始めたら
家の模型
本人登記の方法
防犯対策
スウェーデンハウス
家づくりの成功と失敗
家のメンテナンス
加湿器 冬の乾燥対策

住宅ローン
ローンとの戦い
繰り上げ返済とローンの借り換え

DIY
物置をDIYで
レンガアプローチ
表札
手作り木製網戸
トールペイントでネームプレート

ガーデニング
ガーデニングの初心者
チューリップの芽
魅惑のホプシー
芝生の手入れ
シラカバ

ダッチオーブン
ルクルーゼ
火のお話(火おこしキスケ2号)
鶏の丸焼き
スペアリブ
野菜丸ごとスープ
スキレットで餃子
広島風お好み焼き

カスタマイズ
メニューバーのつけ方
独自ドメインでスタート
文字の大きさを変える方法


■オススメ商品

インディアン伝承シャンプー

フランクリン・プランナー

年会費無料クレジットカード比較

引越業者の無料一括見積もり比較

住宅ローン繰上返済と借換 無料相談

ガソリン代節約 燃費改善エコマニア


となりまちショッピングモール Store-mix.com


■DIYの工具のことなら
電動工具市場



キーワードアドバイス
ツールプラス

Powered by SEO対策


URL

サイトタイトル

ディレクトリ登録
by ホームページ登録



アクセス解析