トリビア・ライフ - 天狼記

世の中の至る所にあるトリビア(主にPC上での物創りトリビア、生活トリビア)を発見する生活日記

カレンダー

ブログ内タグ検索

カウンター

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  • FC2ブログテンプレート作成記(タイトルメニュー作成)

FC2ブログカテゴリ編集画面
ブログのカテゴリメニューってみんな見るのかな?っと最近思います。いくつかのブログを見てみると『う~ん。やっぱり見ない(笑)』って感じました。ぱっと見どんなカテゴリが含まれるのか分かりたいですよね。そんな疑問を解決するためにテンプレートにカテゴリメニューをカスタマイズして追加出来るようにしました。 ⇒ブログ作成(ブログランキング)
まず、その前にやることとして、現状のカテゴリの整理(笑)記事をどんどん書いていくと繁雑になってしまいますよね。それでFC2ブログでは、親子カテゴリに分ける機能があるので早速分けてみました。
最初は気付かなかったのですが、親カテゴリの下に子カテゴリをおいてチェックを付ければ良いだけの ようです。

この親子カテゴリをメニューに表示したはいいが…
しょぼい

そんなわけで、CSSを修正してちょっぴりかっこよくしました。共通のプラグインもざっと見た所折りたたみ等機能はあるようですが、単に一覧になっているだけでこれといって良いのがなかったです。このカテゴリメニューってみるのかな?っという疑問は変わらずあったので

『組み込んで読んでもらいたいカテゴリをメニューとしてつくっちゃおう!』

そう思いタイトルに組み込んでみました。普通に組んでもかっこよくなさそうなので、いろいろ探していると『jQuery』というJavaScriptを使って組み込むWin7 Style Menuというのを見つけました。

Windows7ライクなメニューになるそうです
といってもまだWindows7使ってないので良く分かりません(笑)
こちらがデモページです。かっこいい!!!
早速組み込みました。



HTML(<head>~</head>に組み込み)
<script type="text/javascript" src="http://blog-imgs-34.fc2.com/t/r/i/trivialife/jquery-min.js"></script>
<script type="text/javascript" src="http://blog-imgs-34.fc2.com/t/r/i/trivialife/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="http://blog-imgs-34.fc2.com/t/r/i/trivialife/win7.js"></script>


HTML(body)
<div id="title">
<h1 class="logo"><a href="<%url>"><%blog_name></a></h1>
<h2 class="intro"><%introduction></h2>
<div class="menu">
<ul class="win7">
<li class="win7blue break-right"><a href="<%url>">ホーム</a></li>
<li class="win7blue break-right"><a href="#">カテゴリ1</a></li>
<li class="win7yellow break-right"><a href="#">カテゴリ2</a></li>
<li class="win7yellow break-right"><a href="#">カテゴリ3</a></li>
<li class="win7green break-right"><a href="#">カテゴリ4</a></li>
<li class="win7green break-right"><a href="#">カテゴリ5</a></li>
<li class="win7red break-right"><a href="#">カテゴリ6</a></li>
<li class="win7red"><a href="<%url>archives.html">記事一覧</a></li>
</ul>
</div>
</div><!--- close title -->


CSS
/* --------------------------------------------
 *      win7
 * -------------------------------------------- */
/* Menu 37px */
.win7blue div {
  width: 100%;
  background: url(http://blog-imgs-34.fc2.com/t/r/i/trivialife/menu37_hover1.png) no-repeat;
}
.win7yellow div {
  width: 100%;
  background: url(http://blog-imgs-34.fc2.com/t/r/i/trivialife/menu37_hover2.png) no-repeat;
}
.win7green div {
  width: 100%;
  background: url(http://blog-imgs-34.fc2.com/t/r/i/trivialife/menu37_hover3.png) no-repeat;
}
.win7red div {
  width: 100%;
  background: url(http://blog-imgs-34.fc2.com/t/r/i/trivialife/menu37_hover4.png) no-repeat;
}

/* Title */
#title {
  height: 155px;
  border-width: 0 1px 1px 1px;
  border-style: solid;
  border-color: #e0e0e0;
  background: #121212;
}
#title .logo {
  position: absolute;
  top: 50px;
  left: 30px;
}
#title .intro {
  position: absolute;
  top: 80px;
  left: 30px;
}

/* Title - [Menu] */
#title .menu {
  position: absolute;
  top: 133px;
  height: 37px;
  width: 968px;
  border-width: 0 1px;
  border-style: solid;
  border-color: #121212;
  background: url(http://blog-imgs-34.fc2.com/t/r/i/trivialife/trivia_menu_bg.gif) repeat-x top left;
}
#title .win7 { position: relative; }
#title .win7 li {
  display: inline;
  position: relative;
  float: left;
  height: 37px;
  width: 120px;
  font-size: 93%;
  font-weight: bold;
  line-height: 37px;
  text-align:center;
  letter-spacing: 2px;
}
#title .win7 div {
  position: absolute;
  top: 0;
  left: 0;
  height: 37px;
  z-index:0;
}
#title .win7 a {
  display: block;
  position: relative;
  color: #c7c7c7;
  text-align: center;
  line-height: 37px;
  z-index: 2;
}
#title .win7 a:hover { color: #ffffff; text-decoration: none; }


コメント

コメントの投稿

   管理者にだけ表示を許可する
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。