あきんどさんがメニューバー追加のおさらいについて語る。

メニューバー追加のおさらい

ブログトップページブログカスタマイズカテゴリー > メニューバー追加のおさらい
2005年02月25日

メニューバー追加のおさらい

メニューバー追加のおさらい

今回どのようにメニューバーを設置したかというコメントをいただいたので、本人のおさらいをかねて解説します。

あきんどさん自身CSS初心者なので「beginners' rack 家づくりを応援!」さんの記事を参考にしました。
(ちなみにライブドアブログでの設置方法です)



最初に、ブログの各カテゴリー別URLをWindowsのメモ帳などにすべてコピー&ペーストしておきます。
(このブログのアフィリエイトカテゴリーのURLなら”http://akindo.livedoor.biz/archives/cat_606452.html”)

次にスタイルシート(CSS)を変更します。
ブログの管理画面から
「Blogの設定/管理」⇒「デザインの設定」⇒「CUSTOM」⇒「テーマの設定」
まで行き、テーマを読み込みます。

ここで読み込むテーマとは、最初にブログを作成した時「デザインの設定」で選んだテンプレートを読み込みます。
このブログの場合、「スタンダード」の「blueline」のテンプレートを使用していたので「simple_line_blue」(なぜか名前が変わってた)を読み込みます。
読み込むと下のボックスにCSSがズラッと表示されます。

ここに追加としてこのブログの場合

#menubar{
color:#000;
font-size:small;
font-weight:bold;
padding:2px 10px;
}
#menubar a{color:#000080;text-decoration:underline;}
#menubar a:link{color:#000080;text-decoration:underline;}
#menubar a:visited{text-decoration:underline;}
#menubar a:active{}
#menubar a:hover{color:#000080;text-decoration:none;}

を一番下に追加し保存します。

あとはHTMLを変更します。
同じように
「Blogの設定/管理」⇒「デザインの設定」⇒「CUSTOM」⇒「テーマの設定」
まで行き、「HTMLテンプレート編集機能ができました!こちらのページからどうぞ。」から「HTMLテンプレートの編集」まで行きます。

そして「トップページ」から「編集」していきます。

<div class="description"><$BlogDescription$>の下に、メニューバーのリンクを追加。

<!-- カスタマイズ メニューバー追加 -->
<br><br><div id="menubar">
<a href="http://akindo.livedoor.biz/">HOME</a>
<a href="http://akindo.livedoor.biz/archives/cat_606452.html">アフィリエイト</a>
<a href="http://akindo.livedoor.biz/archives/cat_606078.html">アクセスアップ</a>
<a href="http://akindo.livedoor.biz/archives/cat_591999.html">オークション</a>
<a href="http://akindo.livedoor.biz/archives/cat_585363.html">お小遣い稼ぎ</a>
<a href="http://akindo.livedoor.biz/archives/cat_603064.html">スポーツ</a>
<a href="http://akindo.livedoor.biz/archives/cat_592419.html">ガンダム</a>
<a href="http://akindo.livedoor.biz/archives/cat_581666.html">日記</a>
</div>
<!-- メニューバー div終了 -->

追加が終われば保存します。
「個別記事」「カテゴリ別アーカイブ」「月別アーカイブ」にも同じ作業をします。

すべての追加・保存が終われば、ブログの再構築をして出来上がりです。


最後にコメントの中で本文(記事、日記)の上にスペースを作ってカテゴリーの設定をしたいとあったのですが、上の説明の位置にHTMLを追加するか、

<div id="content">
<div class="blog">

の下に追加する(トップページの場合)のがいいと思いますよ。
(このブログでは、グーグルの検索BOXなんかが入ってる位置です。)

他にもいろいろ試してみて、他のブログと違ったデザインにすることも楽しいかも。
ただHTMLやCSSを変更の際、バックアップをお忘れなく。
あまりいろいろ変えすぎて、おかしな表示になるわ元にもどせないわじゃ目も当てられないです。
ライブドアブログの場合、デフォルト(初期状態)には戻せますが・・・

アフィリに詳しいブログランク

成功者に学ぶ


トラックバックURL
管理人認証後表示されます。
この記事へのトラックバック
1. いくらでもあるアフィリエイトのブログ・サイト  [ アフィリエイトにそんなうまい話はない? ]   2005年02月26日 18:56
無料ホームページ さすが、流行になってきた感のアフィリエイトのブログですが、いくらでもあります。 このあとのリスト(すごーい、長いです)を最後までじっくり見ていただいた方はエライです。 ご愛読のブログは出てくるでしょうか? しかし、タイトル
2. ちょっとづつカスタマイズ、、  [ 思ったり、、思わなかったり、、 ]   2005年04月09日 23:12
ちょっとづつ頁をカスタマイズしていこうと思います とりあえず今日はデザインをカスタムに変更しただけな訳ですが...
この記事へのコメント
1. Posted by nemo   2005年02月27日 22:45
うーん・・・深いっ・・・。
なんか、ものすごい情報量で、スグに理解するのが、不可能かも・・・(^_^;)。

それでも、ここまで詳細に書いてあると、助かりますよね。
また参考にさせていただきます。

これからもどうぞ、よろしく!
2. Posted by あきんどさん   2005年02月28日 14:28
nemoさん

ライブドアでもブログ始めたようですね。
1歩づつ前進していきましょ。
こちらこそよろしくです。
3. Posted by mimi   2005年03月21日 23:50
始めまして(*^-^*)
ビギナーズラックさんのところも見たのですが、
こちらの方がさらに分かりやすく説明してくださっていたので助かりました!!
思うような位置に持っていくのが難しいですが
なんとか設置はできました。ありがとうございます!
4. Posted by あきんどさん   2005年03月22日 00:26
mimiさん

設置できてよかったよかった。お役に立てて嬉しいです。
この記事にコメントする
管理人認証後表示されます。
名前:
URL:
  情報を記憶: 評価: 顔   
 
 
 

メニューバー追加のおさらいに関するコメントについて

このブログでは、私がメニューバー追加のおさらいに関する情報を調べた結果を忘れないために書いてます。同じようにメニューバー追加のおさらいについて知りたいと思っている方のお役に立つかも。
ほかにもっとメニューバー追加のおさらいの情報をお持ちの方、いろいろメニューバー追加のおさらいに関するコメントをお待ちしてます。
またメニューバー追加のおさらい以外の情報も記事にしてます。カテゴリーごとに分類しておりますので、トップページより左サイドバーのメニュー一覧より選択してください。

このページのカテゴリーはブログカスタマイズです。検索エンジンならびにテレビや書籍などで調べたことを記事にしてます。
またメニューバー追加のおさらいについてわかったことがあれば更新したいと思います。

メニューバー追加のおさらいに関するトラックバックについて

メニューバー追加のおさらいに関するトラックバックをお待ちしております。その際、こちらからもトラックバックさせてもらいます。

メニューバー追加のおさらいの情報

このページはメニューバー追加のおさらいの情報です。メニューバー追加のおさらい以外の情報は、左サイドバーのカテゴリー一覧か、右サイドバーのリンク集よりご覧ください。