上下にもバーを創る（ページ内ナビが欲しい）

サイドバーが長くなって見辛いので、上下にスペースを創り（以下、トップバーとボトムバー）、そこにページ内ナビを配置したいと思っていたんですが、ココログにはそういう機能はまだありません。

そこで、マイリストを使ってその機能を実現できないかなあと試行錯誤してみたところ、とりあえず形になったので暫定公開します。

要は、トップバーのスペースを創る場合、左サイドの最初に専用のマイリストを配置し、ボトムバーを創る場合は右サイドの最後に専用のマイリストを配置するという具合です。

とりあえず、作り方の概要を書いておきます。（まだ未完成なので、ここが変だとか分かりにくいとかのご意見をいただけると嬉しいです(^^)。）

トップバーの作り方
1. 「Top-bar」という名前（任意）のマイリストをリンク型（など）で作成し、「高度な設定」でメモの表示を「テキスト表示」にする。
2. 「Top-bar」を表示するように設定し、「デザイン」の「並べ方」のところで左サイドバーの最初に配置する。
3. 「Top-bar」に新規項目を追加し、「メモ」欄に以下のようなコードを書き込む（※色やフォント、ボーダーなどは自分のスタイルに合わせて適宜変更してください）。

---
</li>
</ul>
</div> <!-- .sidebar -->
</div> <!-- #left -->
<!-- ↑左サイドバー強制終了 -->


<!-- ↓スタイル開始（※） -->
<style type="text/css">
/* ↓ここからトップバー用のスタイル */
#left {
	height: 0px;　/* ←元の左サイドバー隠蔽 */
	width: 200px;
	float: left;
	overflow: hidden;
	background-color: #99CC99;
}
#top-bar {
	width: 800px;
	padding: 0px 15px 0px 15px;
	border-bottom: solid 2px white;
	background-color: #99CC99;
	font-family: 'Trebuchet MS', Verdana, sans-serif;
	font-size: x-small;
}
/* ↓新規左サイドバーのid="left2"の場合 */
#left2 {
	width: 200px;
	float: left;
	overflow: hidden;
	background-color: #99CC99;
	}
/* ↓このダミーは不要かも */
.dummy {
	height: 0px;
	margin: 0px;
	padding: 0px;
}
.sidebar ul.dummy {
	padding-left: 0px;
	margin: 0px;
	margin-bottom: 0px;
	/* ↑レイアウト用（効果不明） */
}
.sidebar li.dummy {
	margin-top: 0px;
	/* ↑レイアウト用（効果不明） */
	list-style-type: none;
}
/* ↓ここからボトムバー用のスタイル */
#bottom-bar {
	width: 800px;
	border-top: solid 2px white;
	padding: 0px 15px 0px 15px;
	background-color: #99CC99;
	font-family: 'Trebuchet MS', Verdana, sans-serif;
	font-size: x-small;
}
#footer {
	width: 800px;
	border-top: solid 2px white;
	padding: 0px;
	margin: 0px;
	background-color: #99CC99;
	font-family: 'Trebuchet MS', Verdana, sans-serif;
	font-size: x-small;
	text-align: center;
}
#footer li {
	list-style-type: none;
	/* ↑リーダが出てしまったので */
}
</style>


<!-- ↓トップバー開始 -->
<div id="top-bar">


<!-- ↓トップナビ開始 -->
<div class="top-navi">
<!-- ここにトップナビのコンテンツを配置 -->
</div> <!-- .top-navi -->


</div> <!-- .top-bar -->


<div style="clear: both;"></div>


<!-- ↓新たに左サイドバー開始 -->
<div id="left2">
<div class="sidebar">


<ul class="dummy">
<li class="dummy">
---

実は、以前、サブタイトル内で</h2>…<h2>としてその間にトップナビを作ることを考えたんですが、サブタイトル内にいろんなタグを入れるとRSSリーダーで読んでもらう時にそれがそのまま現れてしまって…という話を聞き、断念していました。今回の方法ではマイリストを使っているのでRSSリーダーの問題は回避できたのではないかと思うのですが、実はRSSリーダーを未だ使ったことがないので単なる無駄な努力だったかもしれません(^_^;)。

また、XHTML準拠の問題を回避するために、凹日記さんのjavascriptを使う方法を参考にして外部スタイルシートを使うようにしてみたりもしたんですが、left,top-bar,left2などの部分などが上手くスタイルを反映してくれず、スタイルが大きく崩れてしまいました。ということで、暫定的にマイリスト内にstyleタグを置く手法を採っています。(Varid XHTML except for style tag ! (;_;) ということで。）

ボトムバーの方も同じような感じなんですが、今日は体力の限界だ～(+_+)。多分次回に。A bientôt !