TiddlyWiki 2.0 の2ペイン化

画面サイズがXGAのノートパソコンでTiddlyWikiを使っているので、標準の3ペインでは狭く感じてしょうがない。ってことで、2ペイン化するカスタマイズをしてみることにした。完成すると下の図のようになります。以下、作業メモを記します。

まず、サイドバーのタブから "More - Shadowed" にある "PageTemplate" のTiddlerを開く。その中に以下のような記述があるはず。

<div id='mainMenu' refresh='content' tiddler='MainMenu'></div>
<div id='sidebar'>
<div id='sidebarOptions' refresh='content' tiddler='SideBarOptions'></div>
<div id='sidebarTabs' refresh='content' force='true' tiddler='SideBarTabs'></div>
</div>

この部分を以下のように書き換える。

<div id='sidebar'>
<div id='mainMenu' refresh='content' tiddler='MainMenu'></div>
<div id='sidebarOptions' refresh='content' tiddler='SideBarOptions'></div>
<div id='sidebarTabs' refresh='content' force='true' tiddler='SideBarTabs'></div>
</div>

この時点で、左側にあったメニューが右側に移動するが、MainMenuとSideBarが重なって表示されてしまうので、これをスタイルシートの書き換えによって修正する。

同じく "More - Shadowed" タブにある "StyleSheetLayout" Tiddlerを開き、スタイルシートを表示、それぞれの定義を以下のように書き換える。

#mainMenu {
	position: relative;
	left: 0;
	width: 16em;
	text-align: left;
	line-height: 1.6em;
	padding: 1.5em 0.5em 0.5em 0.5em;
	font-size: 1.1em;
}

#sidebar {
	position: absolute;
	left: 1em; // 追加する
	//right: 3px; // コメントアウトする
	width: 16em;
	font-size: .9em;
}

#displayArea {
	margin: 1em 1em 0em 17em;
}

これで2ペイン化が完成します。