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ペイン化が完成します。