TiddlyWikiのカスタム(下にもcloseメニュー)
長いtiddlerをいくつも開いていて、最後まで読んだtiddlerを閉じたい時、上に戻って「close」探すの面倒じゃありません?
ということで上にしかない「close close other edit permalink reference jump」のメニューを、下にもつけてみた。
メニューをただ追加してみる
なんとなーく、tiddlerの表示には、「ViewTemplate」が適用されているようなので、これを変えてみる。
初期状態
<div class='toolbar' macro='toolbar closeTiddler closeOthers +editTiddler permalink references jump'></div> <div class='title' macro='view title'></div> <div class='subtitle'><span macro='view modifier link'></span>, <span macro='view modified date [[DD MMM YYYY]]'></span> (<span macro='message views.wikified.createdPrompt'></span> <span macro='view created date [[DD MMM YYYY]]'></span>)</div> <div class='tagging' macro='tagging'></div> <div class='tagged' macro='tags'></div> <div class='viewer' macro='view text wikified'></div> <div class='tagClear'></div>
の最後に先頭行「
」をコピーする。<div class='toolbar' macro='toolbar closeTiddler closeOthers +editTiddler permalink references jump'></div> <div class='title' macro='view title'></div> <div class='subtitle'><span macro='view modifier link'></span>, <span macro='view modified date [[DD MMM YYYY]]'></span> (<span macro='message views.wikified.createdPrompt'></span> <span macro='view created date [[DD MMM YYYY]]'></span>)</div> <div class='tagging' macro='tagging'></div> <div class='tagged' macro='tags'></div> <div class='viewer' macro='view text wikified'></div> <div class='tagClear'></div> <div class='toolbar' macro='toolbar closeTiddler closeOthers +editTiddler permalink references jump'></div>
すると、、、おお、出た!
既に開いているtiddlerには適用されないので、一旦「close」してからどうぞ。
これをいじると、通常表示を変更できるようです。
下に出たのは良いけど、分かりにくい
そう、ただ出すと、上のメニューなのか、下のメニューなのか分かりにくい。
ということで、表示を変えてみる。
まずは先ほどの、「ViewTemplate」の最後の行を修正する。
<div class='toolbar' macro='toolbar closeTiddler closeOthers +editTiddler permalink references jump'></div> <div class='title' macro='view title'></div> <div class='subtitle'><span macro='view modifier link'></span>, <span macro='view modified date [[DD MMM YYYY]]'></span> (<span macro='message views.wikified.createdPrompt'></span> <span macro='view created date [[DD MMM YYYY]]'></span>)</div> <div class='tagging' macro='tagging'></div> <div class='tagged' macro='tags'></div> <div class='viewer' macro='view text wikified'></div> <div class='tagClear'></div> <div class='toolbarU' macro='toolbar closeTiddler closeOthers +editTiddler permalink references jump'></div>
最後の行の「class='toolbar'」を「class='toolbarU'」にしてみた。
すると、、、下のメニューは左寄せになりました。
これでも分からないことはないけど、、、。
線を引いてtiddlerの範囲を明示する
二通りが考えられる。
- 上のメニューの上に線、下のメニューの下に線を引く
- tiddlerを枠で囲む
とりあえず、今のところ、一番目で納得したので、二番目は未検証。
なので、一番目。
線とかのスタイルは「StyleSheetLayout」にある。
この中に
.toolbar { text-align: right; font-size: .9em; visibility: hidden; } .selected .toolbar { visibility: visible; }
があるので、線を加え(border-top: 1px dotted;)
さらに、コピーして「toolbarU」用も作る。
.toolbar { text-align: right; font-size: .9em; visibility: hidden; border-top: 1px dotted; } .selected .toolbar { visibility: visible; } .toolbarU { text-align: right; font-size: .9em; visibility: hidden; border-bottom: 1px dotted; } .selected .toolbarU { visibility: visible; }
うむ、納得。
編集画面は、、、
tiddlerをダブルクリックして、編集画面に入ると、上のメニューだけになります。
(しかも、上に線つき、、、)
これが気になるなら、
- 編集画面にも下のメニューをつける
- 編集画面のメニューには線をつけない
といったことが考えられます。
「EditTemplate」を変更したりすれば、できると思います。
大雑把なO型には気になりませんが、、、。
気になる方は、やってみてください。
答え教えろ、という場合は、コメントを残してくださいな。
気が向いたら書きます。
TiddlyWiki、便利してます。