mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-12-12 03:00:28 +00:00
70 lines
2.4 KiB
Plaintext
70 lines
2.4 KiB
Plaintext
|
caption: 画像
|
||
|
created: 20131205160221762
|
||
|
modified: 20241110103117361
|
||
|
original-modified: 20220129152627668
|
||
|
tags: WikiText [[Working with TiddlyWiki]]
|
||
|
title: Images in WikiText
|
||
|
ja-title: WikiTextでの画像
|
||
|
type: text/vnd.tiddlywiki
|
||
|
|
||
|
! 画像のフォーマット
|
||
|
|
||
|
次の構文を使用して、WikiTextに画像を含めることができます:
|
||
|
|
||
|
```
|
||
|
[img[Motovun Jack.jpg]]
|
||
|
[img[https://tiddlywiki.com/favicon.ico]]
|
||
|
```
|
||
|
|
||
|
エディターのツールバーから画像Tiddlerを挿入することもできます。''画像''(<<.icon $:/core/images/picture>>)をクリックし、画像ファイルを選択します。
|
||
|
|
||
|
画像のソースが画像Tiddlerのタイトルである場合、そのTiddlerが直接表示されます。それ以外の場合はURLとして解釈され、URLを含む`src`属性を持つHTMLの`<img>`タグが生成されます。
|
||
|
|
||
|
ツールチップも指定できます:
|
||
|
|
||
|
```
|
||
|
[img[説明ツールチップ|Motovun Jack.jpg]]
|
||
|
```
|
||
|
|
||
|
CSSクラスと画像の幅と高さを指定するための属性を指定できます:
|
||
|
|
||
|
```
|
||
|
[img width=32 [Motovun Jack.jpg]]
|
||
|
[img width=32 class="tc-image" [Motovun Jack.jpg]]
|
||
|
```
|
||
|
|
||
|
属性は、トランスクルージョンや変数参照として指定できることに注意してください:
|
||
|
|
||
|
```
|
||
|
[img width={{!!mywidth}} class=<<image-classes>> [Motovun Jack.jpg]]
|
||
|
```
|
||
|
|
||
|
画像の構文は、ImageWidgetを呼び出すための省略形です。
|
||
|
|
||
|
! トランスクルージョンによる画像の表示
|
||
|
|
||
|
Tiddlerをトランスクルードすることで、Tiddlerに保存されている画像を表示することもできます。この方法の欠点は、画像のサイズを直接制御する方法がないことです。
|
||
|
|
||
|
```
|
||
|
{{Motovun Jack.jpg}}
|
||
|
```
|
||
|
|
||
|
次のようにレンダリングされます:
|
||
|
|
||
|
{{Motovun Jack.jpg}}
|
||
|
|
||
|
! リンクとしての画像
|
||
|
```
|
||
|
<$link to="HelloThere" tooltip="Custom tooltip">{{$:/core/icon}}</$link>
|
||
|
```
|
||
|
|
||
|
次のようにレンダリングされます:
|
||
|
|
||
|
<$link to="HelloThere" tooltip="Custom tooltip">{{$:/core/icon}}</$link>
|
||
|
|
||
|
! 画像のインポート
|
||
|
|
||
|
<<.button import>>ボタン(サイドバーの<<.sidebar-tab Tools>>タブにある)を使用するか、ドラッグアンドドロップします。詳細については、[[Tiddlerのインポート|Importing Tiddlers]]を参照してください。
|
||
|
|
||
|
<<.from-version "5.2.0">> Tiddlerエディタに画像をドロップするかペーストすることでも、画像をインポートできます。
|