Google

2005年05月14日

トップメニュー表示

ブログのカスタマイズをしてみました。

☆レイアウト 3カラム化(左右にバー)
☆トップメニューの表示(カテゴリー別)
☆記事の上にバナー表示
☆TOP以外 3カラム化
以上のことをしました。

全部書くと大変なので1づつ説明していきます。
まずは、トップメニューの表示について説明させていただきます。
(Livedoorのブログの場合)


1.まず最初に各カテゴリのアドレスを確認しておいてください。
例)僕の「入庫情報」のカテゴリの場合は
  http://blog.livedoor.jp/toko_toco1221/archives/cat_1177212.html
  になります。

2HTMLの書き換え
デザインの設定
  ↓
スタンダード
  ↓
CUSTOM
  ↓ こちらのページ
  ↓
「トップページ」 から「編集」※1
<div class="description"><BlogDescription></div>の後に

<!-- カスタマイズ メニューバー追加 -->
<br><br><div id="menubar">
<a href="カテゴリURL">カテゴリ名</a> ※2
</div> <!-- メニューバー終了 -->

↑を追加します。
例)僕の僕の「入庫情報」のカテゴリをトップメニューに追加したい場合は
  <!-- カスタマイズ メニューバー追加 -->
  <br><br><div id="menubar">
  <a href="http://blog.livedoor.jp/toko_toco1221/archives/cat_1177212.html">入庫情報</a> ※2
  </div> <!-- メニューバー終了 -->
  になります。

※1 「個別記事」「カテゴリ別アーカイブ」「月別アーカイブ」にもトップメニューを表示したい場合は同じ作業を「個別記事」「カテゴリ別アーカイブ」「月別アーカイブ」にもする。

※2 トップメニューの項目数を増やしたい場合はこの1行を増やしてURLとカテゴリ名を変更する。
例) <!-- カスタマイズ メニューバー追加 -->
<br><br><div id="menubar">
<a href="カテゴリURL">カテゴリ名</a>
<a href="カテゴリURL2">カテゴリ名2</a>
<a href="カテゴリURL3">カテゴリ名3</a>
</div> <!-- メニューバー終了 -->

3.この状態でBlogの再構築をしていただいてもメニューバーの追加はできますが、もう少しカスタマイズしてみましょう。
デザインの設定
  ↓
スタンダード
  ↓
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;}

ココを変更することにより文字の色やサイズを変更することができます。
:link は、未訪問リンクの詳細を指定。
:visited は、既訪問リンクの詳細を指定。
:visited は、マウスオーバー中のリンクの詳細を指定。
{}の中は

color:#RGB 又 カラーネーム(red, white など)
色見本(サイバーガーデン様)カラーチャート

text-decoration:none(なし)[規定値]、underline(下線)、overline(上線)、line-through(取り消し線)、blink(点滅)

font-size: xx-small ↓に行くほど大きい文字サイズ
      x-small
      small
      medium[規定値]
      large
      x-large
      xx-large
      smaller(一段階小さく)
      larger(一段階大きく)
      %(medium[規定値]が基点)
      数値(pt, px, em など)

font-weight: normal(標準の太さ)(=400)[規定値]
       bold(いわゆる太字)(=700)
       lighter(一段階細い)
       bolder(一段階太い)
       100〜900(100 刻みで。400=normal、700=bold)

4.あとはブログを再構築するだけです。お疲れ様でした。

↓クリックお願いします。

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

http://trackback.blogsys.jp/livedoor/toko_toco1221/21949453
この記事へのトラックバック
記事の参照ありがとうございました。 とりあえず、トラバ返しさせていただきます。 今後とも、よろしくお願いします。
メニューバーのつけ方 〜ライブドアブログのカスタマイズ〜【beginners' rack 家づくりを応援!】at 2005年05月14日 19:57
この記事へのコメント
初めまして!ブログTOPのカスタマイズから飛んできました。
現在僕も初めてのカスタマイズに挑戦しているのですが、
「3カラム」に苦戦しています。
もしお暇があれば管理人さんのような見事な3カラムを実現するために
僕のBlogを覗いていただければ・・・、そしてアドバイスなど頂けると死ぬほど嬉しいのですが・・・。
いきなり初投稿で不躾ですみません。
もしおきに触ったならスルーしてくださいませ。
僕も管理人さんのようなこんなページにしたいです。
では失礼します。
Posted by 蟲◆MushiMeMMY at 2005年05月15日 05:19
コメントありがとうございます。
Blog覗いて見ました。3カラムにした結果、センターが右に食い込んでいました。
サイズの指定もしくは、マージンの指定が間違ってるかも知れませんね。
どうせするなら綺麗に3カラムにしたいですよね。
Posted by toko_toko1221 at 2005年05月15日 11:00
管理人さま
レスありがとうございます!
そして私のBlogの方にもコメントいただいて
その上同じ環境でシュミレートして頂いて・・・
感謝の言葉もありません。アリガトウございます。
私の記事にも書きましたが、livedoor Blog サポート同盟 BBSさんの方で、
投稿した質問にお答えを頂いて調べてみた所、
CSSの記述漏れと、あとBlogの再構築の際にプルダウンメニューから
CSSが選べると言うことを知らなかったので、(ここが大問題^^;)
それらをきちんと設定すると上手く表示できるようになりました。
一度ご覧になってくださいませ。
わざわざ新しいページでシュミレートしてくださったのに
申し訳ない気持ちです。「3カラム」と言うのが呪文のように
頭の中でぐるぐるしていたので、管理人さまのページを見て
瞬発的にコメントしてしまったことをお許しください。
そしてありがとうございました。
Posted by 蟲◆MushiMeMMY at 2005年05月15日 18:30
toko_tocoさん。こんばんわ。
コメントありがとうございます。
自分はMozilla Firefoxでブラウズしているので
それだとちゃんと左サイドバー 中央記事 右サイドバー
と言う感じで隙間が出来ているのですが、なんでかな?と思い
IEで確認すると確かに記事が右のカラムに食い込んでいました。
で訂正して更新するとIEでは上手く表示されますが
Firefoxだと中央記事が右のサイドバーに重なってしまいます。
こういうときってどうしたらいいんでしょう???
Posted by 蟲◆MushiMeMMY at 2005年05月16日 00:56
MozillaFirefoxで見ているときに、
ウィンドウのサイズを変えると、記事の大きさは変化しますか?
Firefoxは使ったことがないのでわからないですが、
IEの時は変化しません。
あとIEでも解像度を高くして見るとちゃんと隙間ありますよただ記事のところの幅が固定なのでウィンドウを小さくすると食い込んでいます。
メールいただければメールでサポートの方させていただきますがどうしますか?
Posted by toko_toko1221 at 2005年05月16日 17:51
真剣に結婚を考えるなら地元で婚活!その出会いの一歩を「地元で結婚 大阪LOVERS☆」が完全サポート!人生の大きな決断の瞬間を幸せに迎えよう☆最後はあなたの決断力です!地元密着型で近隣府県もカバーしておりますので希望が合えば今すぐにでも会えますよ♪
Posted by 結婚 大阪 at 2011年03月18日 11:05