« Sumimi.orgとEmEditor Free で非日本語のウィンドウズで日本語を編集。 | トップページ | TiddlyWikiでTodo管理。超シンプルToDoラベルマクロを使ってみた。 »

2009年8月27日 (木)

TiddlyWikiの小技(2)Tiddler内にローカルの画像を表示する。

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

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

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

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

[img[Filename.jpg]]
この場合、ファイルはTiddlyWikiのファイルと同じフォルダにないといけない。imagesというフォルダを作ってその下へ置いた場合は
[img[images/Filename.jpg]]
でOK。

Floot(まわりこみ)を使う。

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

その2 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はどちらか一方だけを指定するとアスペクト比が変わらずにリサイズされる。

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

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

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

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

その4 プラグインを利用

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

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

元ネタのGoogle gropesのトピ

« Sumimi.orgとEmEditor Free で非日本語のウィンドウズで日本語を編集。 | トップページ | TiddlyWikiでTodo管理。超シンプルToDoラベルマクロを使ってみた。 »

TiddlyWiki」カテゴリの記事

パソコン・インターネット」カテゴリの記事

コメント

コメントを書く

コメントは記事投稿者が公開するまで表示されません。

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1169291/31121475

この記事へのトラックバック一覧です: TiddlyWikiの小技(2)Tiddler内にローカルの画像を表示する。:

« Sumimi.orgとEmEditor Free で非日本語のウィンドウズで日本語を編集。 | トップページ | TiddlyWikiでTodo管理。超シンプルToDoラベルマクロを使ってみた。 »

広告欄


やっつけタイムライン

広告欄

はてブ

人目の訪問です。

  • follow us in feedly

    かなり更新が不定期なため、RSSリーダーをオススメします。現在Feedlyに122人登録頂いています。多謝!RSSを表示

    ブログランキング用 にほんブログ村 IT技術ブログ Pythonへ ブログランキングならblogram






    Jenny Mayhem
2017年2月
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28        

Amazon

IT技術注目記事

無料ブログはココログ