2005年02月25日
メニューバー追加のおさらい
メニューバー追加のおさらい
今回どのようにメニューバーを設置したかというコメントをいただいたので、本人のおさらいをかねて解説します。
あきんどさん自身CSS初心者なので「beginners' rack 家づくりを応援!」さんの記事を参考にしました。
(ちなみにライブドアブログでの設置方法です)
あきんどさん自身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なら”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歩づつ前進していきましょ。
こちらこそよろしくです。
ライブドアでもブログ始めたようですね。
1歩づつ前進していきましょ。
こちらこそよろしくです。
3. Posted by mimi 2005年03月21日 23:50
始めまして(*^-^*)
ビギナーズラックさんのところも見たのですが、
こちらの方がさらに分かりやすく説明してくださっていたので助かりました!!
思うような位置に持っていくのが難しいですが
なんとか設置はできました。ありがとうございます!
ビギナーズラックさんのところも見たのですが、
こちらの方がさらに分かりやすく説明してくださっていたので助かりました!!
思うような位置に持っていくのが難しいですが
なんとか設置はできました。ありがとうございます!
4. Posted by あきんどさん 2005年03月22日 00:26
mimiさん
設置できてよかったよかった。お役に立てて嬉しいです。
設置できてよかったよかった。お役に立てて嬉しいです。
この記事にコメントする
管理人認証後表示されます。
管理人認証後表示されます。