トップブログとネット>フォルテのブログカスタマイズVol.18〜トップにメニューバーを付ける
2006年02月02日

フォルテのブログカスタマイズVol.18〜トップにメニューバーを付ける

メニューバーカスタマイズこのブログの上のタイトルのちょうど上にカテゴリがありますよね。

ふぉるてブログは2カラムなので、サイドバーが左側の一つだけ。なので、カテゴリ別アーカイブがカナリ下に行っちゃって見づらい。
そんなワケで、トップ部分にメニューバーを付けて、カテゴリを表示してみる事に。コレがフォルテのブログカスタマイズVol.18でございます。 →


コレがあるとですね、誰が便利って自分が便利です。
参考にさせて頂いたのは、「beginners' rack 家づくりを応援!」さんのコチラの記事

大変分かりやすく書いてあるので、フォルテが書き足す事は何もございません。ありがとうございます。
え?手抜きじゃないですよ、ホントに分かりやすいんですから!!

ただ、私はね、コチラに書いてある中の2番の「スタイルシート(CSS)」の書き換えはしませんでした。
って言うか、実を言うとスッカリ忘れてしまいまして、それが原因で後々困ったりしたのですが、この困ったのは、特に問題が起きて困ったワケじゃないので、その辺の話は、まぁいいや。
花9
なので、まずは、自分のブログ内のカテゴリ別のそれぞれのURLを確認しておく。

その後「カスタマイズ/管理」から「デザインの変更」、そして、おなじみの「CUSTOM(カスタマイズ)」を選び、「スタイルシート(CSS)」で、メニューバーに足す文字の大きさや色をお好きなように設定して書き加えて下さい。
「スタイルシート(CSS)」に足す場所は下の方とかに足しておけば大丈夫だと思いますよ。私はやってないので何とも確定的な事は言えませんが。

私のようにこの作業をすっ飛ばすとどうなるか?
えーっとね、特に問題はないみたいですね。

ブログのサブタイトル、このブログだと上の方の
「東京都世田谷区・小田急線梅ヶ丘駅の不動産会社フォルテの日記。 物件紹介・街紹介・キャンペーン情報からサッカー話や日々の徒然まで。」
という文字と字の大きさや色が一緒になっただけでした。
サブタイトルと違う文字の大きさや色に設定したい方は、この「スタイルシート(CSS)」への「#menubar」の書き足しもお忘れなきよう。

で、その後、HTMLの書き換えです。
「カスタマイズ/管理」から「デザインの変更」、そして、おなじみの「CUSTOM(カスタマイズ)」を選び、「トップページ」やら「個別記事ページ」・「カテゴリアーカイブ」・「月別アーカイブ」全てに同じ作業をして行きます。
詳細は、「beginners' rack 家づくりを応援!」さんのコチラの記事をご確認頂くとして、フォルテが

<div class="description"><$BlogDescription$>
(「<」・「>」は実際は半角ですよ!!)

の下に足したメニューバーのリンクは↓こんな↓感じ。
ちょっと長ったらしいので、すっ飛ばして下の解説部分までスクロールして頂いてOKです。

<!-- カスタマイズ メニューバー追加 -->
<div Align="center"><br><div id="menubar">
<a href="http://blog.livedoor.jp/forte_umegaoka/archives/cat_50005680.html">フォルテ</a>
<img src="http://livedoor.blogimg.jp/forte_umegaoka/imgs/5/8/589d2b71.gif" width="11" height="11" border="0" alt="ミツバ" hspace="5" class="pict" align="" />
<a href="http://blog.livedoor.jp/forte_umegaoka/archives/cat_50005704.html">物件紹介</a>
<img src="http://livedoor.blogimg.jp/forte_umegaoka/imgs/5/8/589d2b71.gif" width="11" height="11" border="0" alt="ミツバ" hspace="5" class="pict" align="" />
<a href="http://blog.livedoor.jp/forte_umegaoka/archives/cat_50011128.html">周辺街情報</a>
<img src="http://livedoor.blogimg.jp/forte_umegaoka/imgs/5/8/589d2b71.gif" width="11" height="11" border="0" alt="ミツバ" hspace="5" class="pict" align="" />
<a href="http://blog.livedoor.jp/forte_umegaoka/archives/cat_50011986.html">お部屋探しの豆知識</a>
<br>
<a href="http://blog.livedoor.jp/forte_umegaoka/archives/cat_50005681.html">サッカー</a>
<img src="http://livedoor.blogimg.jp/forte_umegaoka/imgs/5/8/589d2b71.gif" width="11" height="11" border="0" alt="ミツバ" hspace="5" class="pict" align="" />
<a href="http://blog.livedoor.jp/forte_umegaoka/archives/cat_50005702.html">ペット</a>
<img src="http://livedoor.blogimg.jp/forte_umegaoka/imgs/5/8/589d2b71.gif" width="11" height="11" border="0" alt="ミツバ" hspace="5" class="pict" align="" />
<a href="http://blog.livedoor.jp/forte_umegaoka/archives/cat_50005703.html">読書</a>
<img src="http://livedoor.blogimg.jp/forte_umegaoka/imgs/5/8/589d2b71.gif" width="11" height="11" border="0" alt="ミツバ" hspace="5" class="pict" align="" />
<a href="http://blog.livedoor.jp/forte_umegaoka/archives/cat_50012995.html">名古屋</a>
<img src="http://livedoor.blogimg.jp/forte_umegaoka/imgs/5/8/589d2b71.gif" width="11" height="11" border="0" alt="ミツバ" hspace="5" class="pict" align="" />
<a href="http://blog.livedoor.jp/forte_umegaoka/archives/cat_50012994.html">ブログ</a>
<img src="http://livedoor.blogimg.jp/forte_umegaoka/imgs/5/8/589d2b71.gif" width="11" height="11" border="0" alt="ミツバ" hspace="5" class="pict" align="" />
<a href="http://blog.livedoor.jp/forte_umegaoka/archives/cat_50012795.html">リンク先ご紹介</a>
<img src="http://livedoor.blogimg.jp/forte_umegaoka/imgs/5/8/589d2b71.gif" width="11" height="11" border="0" alt="ミツバ" hspace="5" class="pict" align="" />
<a href="http://blog.livedoor.jp/forte_umegaoka/archives/cat_50007423.html">その他</a>
</div><br></div> <!-- メニューバー div終了 -->

(「<」・「>」は実際は全て半角で、改行は無しです!!)
コピペ用は↓コチラ↓
頭の「<div Align="center">」とお尻の「</div>」のうちの一つは、先日のVol.15で書いた「ここからここまで真ん中寄せよー!!」呪文です。

なので、このメニューバーを右寄せにしたい時はココの「center」を「right」に、左寄せにしたい時は「left」にしてあげればOK。
フォルテのブログカスタマイズVol.15「広告や画像を真ん中に表示」をご参照下さい。)

リンクの間にイチイチ入っている↓コレ↓
<img src="http://livedoor.blogimg.jp/forte_umegaoka/imgs/5/8/589d2b71.gif" width="11" height="11" border="0" alt="ミツバ" hspace="5" class="pict" align="" />
花15は、文字と文字の間にある「ミツバ」の絵。
このように画像を使う場合は、モチロン画像は事前に「ファイルのアップロード」からアップロードしておく事。
画像じゃなくて「・」や「/」にしてもスッキリして良いかもしれませんね。

真ん中辺りに入っている「<br>」(「<」・「>」は実際は半角!!)は、改行マークです。
私は、メニューバーのカテゴリーを二段に分けたかったので、コレを入れました。 そして、上下がキチキチに詰まっていたので、一番上と下にも「<br>」を1つずつ足しておきました。コレもお好みでどうぞ。

以上のような長いモノを「トップページ」・「個別記事ページ」・「カテゴリアーカイブ」・「月別アーカイブ」にて、「<div class="description"><$BlogDescription$>」の下に挿入しては、その内容で保存して再構築すればアラ素敵!!ってな感じになりまする。

文字じゃなくて、バナー画像にリンクを貼る事もモチロン可能。
(社)全日本不動産協会東京都本部世田谷支部ブログ」は、画像でカテゴリーやリンクをトップページに付けてみました。
が、実はまだ途中・・・。
個別記事ページ等には入れれてませんし、リンクもバナーが全部作れていないので途中で放ってある状態なのです。
本業の方がバタバタしている季節なので、それが落ち着いたらやってみる予定です。

但し、ホントにシッツコークご注意。
「スタイルシート(CSS)」や「トップページ」・「個別記事ページ」・「カテゴリアーカイブ」・「月別アーカイブ」等々をいじる場合、原型をコピーしてメモか何かに残しておかれる事をオススメします。
失敗した時に、ブログ閉鎖したくなりますから。自己責任でよろしくです。

フォルテのブログいじり一覧表(時系列)
フォルテのブログカスタマイズ一覧表(ジャンル別)

(2006.5.18追記)
「スタイルシート(CSS)」への「#menubar」の書き足しを行いました。
足したのは↓コチラ↓の記述です。
#menubar{font-size:12px;
font-weight:bold;
margin: 5px 0px;
}

「font-size:12px;」で文字のサイズを12pxに固定し、「font-weight:bold;」で文字を太字にしました。
この部分の背景色を変更されたい方は「background:#お好きな色コード;」を、文字色を変更されたい方は、コレにプラスして「Color="#色コード";」を付ければ宜しいのではないか、と。

★賃貸でも売買でも→フォルテのHPはコチラ



この記事へのトラックバックURL
http://trackback.blogsys.jp/livedoor/forte_umegaoka/50238286

この記事へのコメント
ブログ始めました。Sさんにも教えて!!
Posted by saitou at 2006年02月02日 21:35
ごめん!こっち!
Posted by saitou at 2006年02月02日 21:38
ご無沙汰しております。
「へ?『saitou』さん??」と思いリンク先を拝見したら、やっぱりアノsaitouさんでしたか。
上司Sにも教えておきましたので、たぶん早速ブログにお伺いするんじゃないか、と。
Posted by フォルテよりsaitouさんへ at 2006年02月03日 13:03
Thank you!
Posted by Diana at 2007年02月23日 12:14
Great work!
Posted by Michelle at 2007年02月23日 12:15
Thank you!
Posted by Hayden at 2007年02月23日 12:15