TiddlyWikiの小技（２）Tiddler内にローカルの画像を表示する。

基本中の基本かもしれませんが、最近やっと学んだので。

追記：FileDropPluginを使って画像をドラックして簡単に挿入するのがおすすめ。やり方はこちら。

その１　ビルトインの書式を使う

画像のリサイズをする必要がないときはこれが一番楽。もとの画像が大きすぎたり、小さすぎる場合にはスタイルシートに変更を加えてやる必要がある（その３参照）。あとファイルがtifだとなぜかだめだった。

[img[Filename.jpg]]

この場合、ファイルはTiddlyWikiのファイルと同じフォルダにないといけない。imagesというフォルダを作ってその下へ置いた場合は

[img[images/Filename.jpg]]

でＯＫ。

Floot（まわりこみ）を使う。

[>img[Filename.jpg]]

で簡単に画像を右寄せ(>)、左寄せして(<)、そのとなりに文章がかけるのが便利。画像の横のスペースが無駄にならない。

その２　HTMLと宣言してしまう

中央に寄せたりとか、サイズの指定やらいろいろと融通が利くようになるので、これが一番無難かも。

<html><img src="filename.jpg" ></html>
<html><img src="filename.jpg" width="300" height="200"></html>

<html><center><img src="filename.jpg"></center></html>

widthとheightはどちらか一方だけを指定するとアスペクト比が変わらずにリサイズされる。

その３　スタイルシートに記述を追加する方法

まずTiddlyWikiの検索窓にStyleSheetと入れて、スタイルシートを開く。

最後の行（どこでもいいはず）に   .stretch img { width:100%; }
と追加。

[img[Filename.jpg]]　を　{{stretch{ }}}で囲って　{{stretch{ [img[Filename.jpg]] }}}　のように入力する。これでTiddlerの横幅まで拡大されるので中央寄せとかも気にせずにこのままでＯＫ。括弧が多すぎが難点。

その４　プラグインを利用

http://www.tiddlytools.com/#ImageSizePlugin

を参照。重くなるので極力プラグインを避けているのでやる気なしです。すみません。プラグイン導入自体は過去のエントリーを参照してください。

元ネタのGoogle gropesのトピ