FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか?

メニューバーに「リンク」と「月別アーカイブ」を表示する

Tips skillを運営するtskillさんがメニューバーに「リンク」と「月別アーカイブ」を表示する方法を教えてくれたので紹介します。
スポンサーサイト



縦メニューの階層化

先日は縦メニューの設置方法を紹介しました。
今回はこの縦メニューを階層化する方法を紹介します。

縦メニューの設置

以前横メニューバーを設置する方法を紹介しましたが、今回は縦メニューの設置方法を紹介します。

メニューバーのドロップダウンにカテゴリを表示

以前にメニューバーのドロップダウンを紹介しましたが、このドロップダウンにカテゴリを表示する方法を紹介します。

このドロップダウンメニューは親子設定したカテゴリにも対応しています。

メニューをマウスオーバーするとタイトル背景が変わる

以前に横メニューバーをブログタイトル下に表示する方法を紹介しました。

今回はこの各メニューにマウスを乗せたとき、タイトルの背景画像を変えるカスタマイズを紹介します。

メニューバーに検索フォームを表示

以前に横メニューバーをブログタイトル下に表示する方法を紹介しましたが。

今回はこの中に検索窓を表示させる方法を紹介します。

メニューバーの中央寄せ

以前に横メニューバーをブログタイトル下に表示する方法を紹介しました。
今回はこれを中央寄せに表示する方法を紹介します。

スタイルシートの末尾に以下を加えてください。

ul#menu_bar {
width:707px; /* (メニューの幅+1) X メニューの数 */
margin-right: auto;
margin-left:auto;
}


数値は (メニューの幅+ボーダーの幅)×メニューの数 としてください。

IE6以前のブラウザはボーダー幅の解釈が異なるため、僅かにズレて見えてしまうのでご了承ください。

メニューバーの画像ロールオーバー

以前に横メニューバーをブログタイトル下に表示する方法を紹介しました。
今回はこのメニューの背景を画像にしてロールオーバーさせるカスタマイズを紹介します。ロールオーバーとはマウスを乗せたときに画像が変わることです。

通常画像とマウスオーバー画像の2つを切り替えて表示しようとすると、マウスオーバーしてから画像を読み込むために一瞬遅れて画像が表示されます。

このタイムラグを解消するために、1つの背景画像の「見える部分」を制御して、画像のロールオーバーを実現します。

メニューバーのドロップダウン

以前に横メニューバーをブログタイトル下に表示する方法を紹介しました。
今回はこのメニューをドロップダウンさせるカスタマイズを紹介します。

ドロップダウンは2段階(第3階層の表示)まで対応しました。

IE6以下を無視すればCSSのみでドロップダウンが可能なのですが、まだまだ無視できる数ではないため一部JavaScriptを用いています。

横メニューバーを幅一杯に表示する(リキッドレイアウト)

以前に横メニューバーをブログタイトル下に表示する横メニューバーを幅一杯に表示する記事を紹介しましたが、今回はこれをリキッドレイアウトに対応させるカスタマイズを紹介します。
ブログ内検索1
プロフィール

いたお

Author:いたお
更新は非常にマイペースです
現在休止中です

当サイトはリンクフリーです。

いたおの他の運営サイト
カレンダー
08 | 2023/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

※スクロールさせる文字やプラグインのHTMLをここに
今日の日付入りカレンダー

08 | 2023/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
ユーザータグ


△ ページトップへ戻る