Memorize

メニューおよびMovable Type 4のウェブページ機能

ヘッダー下、コンテンツ部分上部にサイトメニューを追加し、筆者情報およびサイト情報を追加しました。

この時使用したのが、3ping.org様のCSS メニュー横並びボタン、およびMovable Type 4の機能、ウェブページです。

初めに、サイトメニューについてです。基本的にサイトメニュー用モジュールテンプレート作成、およびサイトメニュー用のCSSコードを追加しました。HTMLは以下のようになっています。

<div>
    <ul id="site-menu">
        <li><a href="/">Index</a></li>
        <li><a href="/pages/authors-info.html">Author's Info</a></li>
        <li><a href="/pages/sites-info.html">Site's Info</a></li>
    </ul>
</div>

要は順序無しリストとしてメニューを構成しています。ulのid属性にはサイトメニューであることを表す"site-menu"を与えています。

次にこれに対応するCSSです。引用させていただいたものを改造して使用しています。

ul#site-menu {
	padding: 5px 2px;
	text-align: left;
	background-color: #ccccff;
	width: 90%;
}

ul#site-menu:after {
	width: 0px;
	height: 0px;
	visibility: hidden;
	content: ".";
	display: block;
	clear: both;
}

ul#site-menu li {
	display: inline;
	line-height: 2;
	list-style-type: none;
}

ul#site-menu li a {
	display: block;
	float: left;
	width: 100px;

	position: relative;/* IE6でマウス反応領域がおかしいのをFix */
	margin: 3px;

	text-align: center;
	text-decoration: none;
	background-color: #eef;
}

ul#site-menu li a:hover {
	text-decoration: underline;
	background-color: #eee;
}

主に色・形状の変更やfloatによる回り込み対象をliからaに変更しています。まあでも大した意味のある変更ではないかと思います。

次にウェブページですが、使用した感想としてはMTに統合されている分便利、といった感じでしょうか。

同一ブログのテンプレートを使用して整形する為、サイトデザインが継承されまとめ易くなっていると思います。ただし、逆に言うとあまりにブログ記事とデザインがそっくりなので、それを嫌う場合、専用のテンプレートを作って・・・となかなか手間になりそうです。僕はブログ記事と同様のデザインになっています。

しかし、ウェブページは"Movable Type Publishing Platform"という名の通り、Webサイト全体を発行するプラットフォームとして必要な機能の拡張の一つではと思います。マネージメントの観点からは、テンプレート作成の手間をかけてでもMovable Typeで完結、というのは良いのではないでしょうか。