tiddlywiki 5.3.6 → 5.3.7

package/editions/ja-JP/tiddlers/howtos/Custom tag pill styles.tid

@@ -0,0 +1,34 @@
+created: 20230608121519758
+modified: 20241120111032165
+original-modified: 20230608123444591
+tags: [[How to apply custom styles]]
+title: Custom tag pill styles
+ja-title: タグピルのカスタムスタイル
+type: text/vnd.tiddlywiki
+
+! 属性: data-tag-title
+
+<<.from-version "5.2.0">> この属性<<.attr data-tag-title>>は、Tiddlerの表示用テンプレートに表示されるタグピルに追加されました。
+
+<<.from-version "5.3.0">> この属性は、標準の~TiddlyWiki UIに表示されるすべてのタグピルに追加されました。特に、編集用テンプレートのタグリスト、タグピッカーのドロップダウン、右側のサイドバー -> 詳しく -> タグ別タブ、そして、$:/TagManagerに追加されています
+
+HTML属性<<.attr data-tag-title>>には、タグピルに表示されるタグタイトルのみが含まれます。これを使用して、タグピルのスタイルを設定できます。
+
+Tiddler全体にスタイルを設定したい場合は、[[data-tiddler-titleによるカスタムスタイル|Custom styles by data-tiddler-title]]を参照してください。
+
+!! 例
+
+新しい `$:/tags/Stylesheet`タグ付きTiddlerで次のCSSを使用すると、`#`で始まるすべてのタグに新しい境界線の丸角半径が設定されます。そのため、これらのタグはデフォルトのタグとは対照的に目立ちます。
+
+既存のTW UI内のすべてのタグピルを捕捉するには、既存のUI構造のため、''両方のCSSルールを定義する必要があります''。
+
+```
+[data-tag-title^="#"] .tc-tag-label,
+[data-tag-title^="#"].tc-tag-label {
+   border-radius: 3px;
+}
+```
+
+!! さらに可能な設定
+
+{{Attribute Selectors}}

package/editions/ja-JP/tiddlers/howtos/Custom_Attribute_Selectors.tid

@@ -0,0 +1,33 @@
+created: 20170126152839462
+modified: 20241119110659035
+original-modified: 201804111739
+tags: [[Custom data-styles]]
+title: Attribute Selectors
+ja-title: 属性セレクタ
+type: text/vnd.tiddlywiki
+
+;[attr]
+:属性attrを持つ要素を表します。
+
+;[attr="value"]
+:属性attrの値が"value"である要素を表します。
+
+;[attr~="value"]
+:属性attrの値が、空白で区切られた単語のリストで、そのうちの1つが"value"である要素を表します。
+
+;[attr|="value"]
+:属性attrの値が、“value”か、“value”の後に“-” (U+002D)が続く値である要素を表します。言語サブコードの一致に使用できます。
+
+;[attr^="value"]
+:属性attrの値の先頭に"value"が付く要素を表します。
+
+;[attr$="value"]
+:属性attrの値の末尾に"value"が付く要素を表します。
+
+;[attr*="value"]
+:属性attrの値に文字列"value"が部分文字列として少なくとも1回含まれる要素を表します。
+
+;[attr "operator value" i]
+:閉じ括弧の前にi(またはI)を追加すると、値は大文字と小文字を区別せずに比較されます(ASCII範囲内の文字の場合)。
+
+詳細は[[CSSの属性セレクタ|https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors]]や[[CSS仕様書|https://www.w3.org/TR/CSS22/selector.html#attribute-selectors]]を参照してください

package/editions/ja-JP/tiddlers/howtos/Custom_styles_by_data-tags.tid

@@ -0,0 +1,62 @@
+created: 20170124132500000
+modified: 20241119105640364
+original-modified: 201804111739
+tags: example-test [[How to apply custom styles]]
+title: Custom styles by data-tags
+ja-title: data-tagsによるカスタムスタイル
+type: text/vnd.tiddlywiki
+
+! 属性: data-tags
+
+<<.from-version "5.1.16">>
+
+~TiddlyWikiのコアでは、レンダリングされたコンテンツにいくつかの`属性`を追加します。これらの属性を使用すると、カスタムスタイルをTiddlerコンテンツに適用できます
+
+例えば、この<<tag "How to apply custom styles">>と<<tag "example-test">>でタグ付けされたTiddlerには、次のような属性になります:
+
+```
+data-tags="[[How to apply custom styles]] example-test"
+```
+
+''重要: ''Tiddlerタグはソートされて''いない''ため、レンダリングされた出力の順序は異なる場合があります!
+
+!! 例
+
+次のCSSは[[Custom data-styles]]で定義されており、`example-test`でタグ付けされたすべてのTiddler(これを含む)にピンクの境界線を作成します
+
+```
+[data-tags*="example-test"] {
+  border: 2px solid pink;
+}
+```
+
+!!! スタイルシートのスタイリング
+
+`data-tags-styles`でタグ付けされたTiddlerを表示するには、適切な方法で、次のコードを使用できます(`$:/tags/Stylesheet`を使用することもできますが、このWiki 内のすべてのスタイルシートに影響を与えることになり、意図したものではありません。)
+
+''重要:'' `.tc-tiddler-body`を指定することも忘れないでください。指定しないと、タイトルを含むTiddler全体が変更されます! 参照: [[Custom data-styles]]
+
+```
+[data-tags*="data-tags-styles"] .tc-tiddler-body {
+  display: block;
+  padding: 14px;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  word-break: normal;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  background-color: #f5f5f5;
+  border: 1px solid #cccccc;
+  padding: 0 3px 2px;
+  border-radius: 3px;
+  font-family: Monaco, Consolas, "Lucida Console", "DejaVu Sans Mono", monospace;
+}
+```
+
+!! 強制改行
+
+この仕組みは、散文的な文章を書きたいユーザーにとっては便利です。参照: [[CSSを使用した強制改行|Hard Linebreaks with CSS]]
+
+!! その他の記述方法
+
+{{Attribute Selectors}}

package/editions/ja-JP/tiddlers/howtos/Debugging Stylesheets.tid

@@ -0,0 +1,13 @@
+created: 20211125175712017
+modified: 20241118113249073
+original-modified: 20211125175906085
+tags: [[Using Stylesheets]]
+title: Debugging Stylesheets
+ja-title: スタイルシートのデバッグ
+type: text/vnd.tiddlywiki
+
+コアの隠しTiddler $:/snippets/DebugStylesheetsには、括弧の不一致やその他の入れ子構造に関する特定の問題を追跡するための簡単なツールが含まれています
+
+以下のリストでは、エラーを含むスタイルシートには赤いバツ印が付いています: 
+
+{{$:/snippets/DebugStylesheets}}

package/editions/ja-JP/tiddlers/howtos/Generating Static Sites with TiddlyWiki.tid

@@ -0,0 +1,37 @@
+created: 20130828190200000
+modified: 20250120105549696
+original-modified: 20241008031135403
+tags: [[TiddlyWiki on Node.js]]
+title: Generating Static Sites with TiddlyWiki
+ja-title: TiddlyWikiで静的サイトを生成する
+type: text/vnd.tiddlywiki
+
+TiddlyWiki5は、JavaScriptを必要としないTiddlyWikiの静的HTML表現を生成できます。このプロセスでは、ローカルシステムのNode.jsにTiddlyWikiがインストールされている必要があります。詳細については、[[Node.jsにTiddlyWikiをインストールする|Installing TiddlyWiki on Node.js]]を参照してください。
+
+静的HTMLの生成方法には多くの柔軟性があります。次のシナリオはすべて https://tiddlywiki.com で説明されています。
+
+! WikiスナップショットとTiddlerスナップショット
+
+https://tiddlywiki.com/static.html で、メインのTiddlyWikiサイトの静的な表現を見ることができます。このファイルは、現在のDefaultTiddlersの静的スナップショットです。このファイルにリンクされているすべてのTiddlerは、個々のTiddlerの静的スナップショットを指す`/static/HelloThere.html`形式のURLによって参照されます。TiddlerのHTMLファイルは、`static.css`スタイルシートファイルを参照します。
+
+次のコマンドは、TiddlyWiki5サイトの静的バージョンのサンプルを生成するために使用されます:
+
+```sh
+tiddlywiki wikipath --render '[!is[system]]' '[encodeuricomponent[]addprefix[static/]addsuffix[.html]]' text/plain $:/core/templates/static.tiddler.html
+tiddlywiki wikipath --render $:/core/templates/static.template.html static.html text/plain
+tiddlywiki wikipath --render $:/core/templates/static.template.css static/static.css text/plain
+```
+
+最初のRenderCommandは、フィルタ`[!is[system]]`を使用してすべての個別の非システムTiddlerのHTML表現を生成し、次のフィルタ`[encodeuricomponent[]addprefix[static/]addsufixx[.html]]`は各タイトルにURIエンコーディングを適用し、プレフィックス`static/`を追加して、最後にサフィックス`.html`を追加します。2番目のRenderCommandは、DefaultTiddlersの静的バージョンを`static.html`に保存し、最後のRenderCommandはスタイルシートを保存します。(すべてのファイルは、Wikiフォルダの`output`フォルダに配置されます)。
+
+! 内部リンク付きWikiスナップショット
+
+Tiddlerの静的表現を含み、標準のHTMLアンカーリンクを使用してそれらの間を移動する単一のHTMLファイルを作成することも可能です。
+
+例: https://tiddlywiki.com/alltiddlers.html
+
+この例は次のコマンドによって構築できます: 
+
+```
+--render $:/core/templates/alltiddlers.template.html alltiddlers.html text/plain
+```

package/editions/ja-JP/tiddlers/howtos/How to apply custom styles by tag.tid

@@ -0,0 +1,62 @@
+caption: {{!!ja-title}} - ^^非推奨^^
+created: 20141001132300000
+modified: 20241121113613599
+original-modified: 20220704174221300
+tags: [[How to apply custom styles]] $:/deprecated
+title: How to apply custom styles by tag
+ja-title: タグでカスタムスタイルを適用する方法
+type: text/vnd.tiddlywiki
+
+<<.deprecated-since "5.1.16" "Custom styles by data-tags">>. [[カスタムスタイルを適用する方法|How to apply custom styles]]も参照してください
+
+----
+
+`tc-tagged-<Tag Name>`という名前のCSSクラスを定義することで、特定のタグを持つTiddlerにカスタムスタイルを適用できます。
+
+たとえば、"NightReader"というタグが付けられたTiddlerを夜の読書に適した特別な配色で表示するには、次のようにクラス`tc-tagged-NightReader`を定義する[[スタイルシートを作成|Using Stylesheets]]します:
+
+```
+.tc-tagged-NightReader {
+	background-color:black;
+	color: orange;
+	padding: 35px 35px;
+}
+
+.tc-tagged-NightReader .tc-tiddler-body {
+	font-size: 1.5em;
+}
+```
+
+クラス`tc-tagged-NightReader`は、Tiddlerのテキスト部分だけでなく、Tiddler全体に適用されます。Tiddlerのより小さな部分をターゲットにしたい場合は、この`.tc-tagged-NightReader .tc-tiddler-body`のようにCSSセレクターを修飾します。
+
+Note that tags containing spaces or non-alphanumeric characters will be converted using URI encoding, making the generated CSS classname hard to predict. For example:
+スペースや英数字以外の文字を含むタグはURIエンコーディングを使用して変換されるため、生成されるCSSクラス名を予測することが困難になることに注意してください。例:
+
+|!Tag |!Generated Class Name |
+|`$:/mytag` |`tc-tagged-%24%3A%2Fmytag` |
+|`Doctor Who` |`tc-tagged-Doctor%20Who` |
+|`£35.23` |`tc-tagged-%C2%A335.23` |
+
+~TiddlyWikiはこれらのタグを生成しますが、実際にCSSで使用するには、次のようにスタイルシートでパーセント文字をエスケープする必要があります: 
+
+```
+.tc-tagged-Doctor\%20Who {
+    background-image: url(./tardis_back.svg);
+    background-repeat: no-repeat;
+    background-position: right;
+    color:#FBFBFB;
+}
+```
+
+変換を実行するためのユーティリティ関数がJavaScriptで利用できます: 
+
+```
+$tw.utils.tagToCssSelector("$:/tags/Stylesheet")
+```
+
+次の出力を生成します: 
+
+```
+tc-tagged-\%24\%3A\%2Ftags\%2FStylesheet
+```
+

package/editions/ja-JP/tiddlers/howtos/How to apply custom styles.tid

@@ -0,0 +1,12 @@
+created: 20141001132300000
+list: [[Custom styles by data-tags]] [[Custom styles by data-tiddler-title]]
+modified: 20241117105127872
+original-modified: 201804111740
+tags: [[Customise TiddlyWiki]]
+title: How to apply custom styles
+ja-title: カスタムスタイルを適用する方法
+type: text/vnd.tiddlywiki
+
+カスタムスタイルを適用するにはいくつかの方法があります
+
+<<list-links filter:"[tag[How to apply custom styles]]">>

package/editions/ja-JP/tiddlers/howtos/How to build a TiddlyWiki5 from individual tiddlers.tid

@@ -0,0 +1,19 @@
+created: 20131124220600000
+modified: 20250121112457196
+original-modified: 20241025051111864
+tags: [[TiddlyWiki on Node.js]]
+title: How to build a TiddlyWiki5 from individual tiddlers
+ja-title: 個々のTiddlerからTiddlyWiki5を構築する方法
+type: text/vnd.tiddlywiki
+
+まず、[[Node.jsにTiddlyWikiをインストール|Installing TiddlyWiki on Node.js]]の説明に従ってTiddlyWikiをインストールします。
+
+# 空の[[TiddlyWikiFolder|TiddlyWikiFolders]]を作成します
+## 適当な場所に新しいフォルダを作成します (例: `~/MyWiki`)
+## 次のテキストを含む`tiddlywiki.info`というファイルを作成します: 
+##* `{"themes": ["tiddlywiki/vanilla","tiddlywiki/snowwhite"]}`
+## `tiddlers`というサブフォルダを作成します
+##* あるいは、TiddlyWiki5リポジトリから、`editions/empty`フォルダをコピーします
+# `~/MyWiki/tiddlers`ディレクトリ内に個々のTiddlerFilesを作成します
+# TiddlyWiki5ルートディレクトリから次のコマンドを実行して、TiddlerからTiddlyWiki5ファイルを構築します: 
+## `tiddlywiki ~/MyWiki --render $:/core/save/all index.html text/plain`

package/editions/ja-JP/tiddlers/howtos/Making a custom journal button.tid

@@ -0,0 +1,43 @@
+created: 20160424150551727
+modified: 20241117105431939
+original-modified: 20171114215846324
+tags: [[Customise TiddlyWiki]]
+title: Making a custom journal button
+ja-title: カスタムジャーナルボタンの作成
+type: text/vnd.tiddlywiki
+
+独自の''//カスタム//''ジャーナルボタンを取得するには、まず[[新しいジャーナル|$:/core/ui/Buttons/new-journal]]ボタンを複製します
+
+次に、独自の設定用Tiddlerを作成します。例: 
+
+* ``$:/config/myNewTiddler/Tags``と... 
+* ``$:/config/myNewTiddler/Title``と... 
+* ``$:/config/myNewTiddler/Text``
+
+カスタムボタンを編集し、設定用Tiddler名を"検索して置換"します
+
+Tiddlerの終わり近くにある次の行を修正します
+
+修正前
+
+```
+<$set name="journalTitleTemplate" value={{$:/config/NewJournal/Title}}>
+<$set name="journalTags" value={{$:/config/NewJournal/Tags}}>
+<$set name="journalText" value={{$:/config/NewJournal/Text}}>
+```
+
+修正後
+
+```
+<$set name="journalTitleTemplate" value={{$:/config/myNewTiddler/Title}}>
+<$set name="journalTags" value={{$:/config/myNewTiddler/Tags}}>
+<$set name="journalText" value={{$:/config/myNewTiddler/Text}}>
+```
+
+サイドバーで使用したい場合は、設定用Tiddlerを次のようにします: 
+
+```
+<$set name="journalTitleTemplate" value={{config/myNewTiddler/Title}}>
+<$set name="journalTags" value={{config/myNewTiddler/Tags}}>
+<$set name="journalText" value={{config/myNewTiddler/Text}}>
+```

package/editions/ja-JP/tiddlers/howtos/Preserving open tiddlers at startup.tid

@@ -0,0 +1,17 @@
+created: 20140101192052333
+modified: 20241117105837064
+original-modified: 20140912142248706
+tags: [[Customise TiddlyWiki]]
+title: Preserving open tiddlers at startup
+ja-title: 開いているTiddlerを起動時に保持する
+type: text/vnd.tiddlywiki
+
+通常、TiddlyWikiは起動時にTiddler[[$:/DefaultTiddlers]]でフィルターとして指定されたTiddlerを表示します
+
+ファイルを保存したときに開いていたTiddlerを再度開くと便利な場合があります。これを行うには、[[$:/DefaultTiddlers]]に次のフィルタを設定します: 
+
+```
+[list[$:/StoryList]]
+```
+
+このフィルタは、[[$:/StoryList]]Tiddlerで指定されたTiddlerを返します。これは、TiddlyWikiが現在のストーリーのTiddlerのシーケンスを保存するために使用するシステムTiddlerです

package/editions/ja-JP/tiddlers/howtos/Setting a favicon.tid

@@ -0,0 +1,19 @@
+created: 20131224074240979
+modified: 20241117110141506
+original-modified: 20200510115704738
+tags: [[Customise TiddlyWiki]]
+title: Setting a favicon
+ja-title: faviconを設定する
+type: text/vnd.tiddlywiki
+
+"favicon"は、Webサイトを区別できるようにするために、主なブラウザで表示される小さなアイコンです。すべてのブラウザはビットマップ画像形式をサポートしていますが、SVG画像形式のアイコンをサポートしているのは特定の最新ブラウザだけであることに注意してください。
+
+! ブラウザのfavicon
+
+TiddlyWikiがブラウザで起動すると、[[$:/favicon.ico]]というTiddlerが検索され、ページのfaviconとして動的に使用されます。画像を変更すると、faviconが即座に変更され、反映されます。
+
+<<.from-version "5.1.23">> 外部画像をfaviconとして設定するには、[[$:/favicon.ico]]Tiddlerの''_canonical_uri''フィールドにURLを割り当てます。
+
+! サーバ上のfavicon
+
+サーバ上では、ServerCommandがパス`/favicon.ico`に[[$:/favicon.ico]]Tiddlerを提供します。

package/editions/ja-JP/tiddlers/howtos/Setting a page background image.tid

@@ -0,0 +1,19 @@
+created: 20150417155912612
+modified: 20241117110849866
+original-modified: 20230803044412567
+tags: [[Customise TiddlyWiki]]
+title: Setting a page background image
+ja-title: ページの背景画像を設定する
+type: text/vnd.tiddlywiki
+
+# 画像をTiddlerとしてインポートします([[WikiTextでの画像|Images in WikiText]]を参照)
+#* [[外部の画像|ExternalImages]]も使用できます
+# [[コントロールパネル|$:/ControlPanel]]<<.icon $:/core/images/options-button>>を開き、''外観''/''Theme Tweaks''タブに切り替えます
+# "Page background image"というラベルのドロップダウンリストから画像を選択します
+# "Page background image attachment"を"Fixed to window"に設定すると、背景が固定され、コンテンツがその上でスクロールします。また、"Scroll with tiddlers"に設定すると背景も移動します(iPhone/iPadではパフォーマンス上の理由から[[Fixed設定はサポートされない|http://stackoverflow.com/a/20444219]]ことに注意してください)
+# "Page background image size"を以下のように設定します: 
+#* ''Auto''は、ページの背景に背景画像が並べて表示されます
+#* ''Cover''は、背景画像がページを完全に覆うようにサイズ調整されます。画像の端が切り取られる場合があります
+#* ''Contain''は、背景画像がページ内に収まるようにサイズ変更されます
+
+[[DarkPhotos|ColourPalettes]]パレットは、暗い背景画像でサイドバーを読みやすくするために提供されていることに注意してください。

package/editions/ja-JP/tiddlers/howtos/Using SVG.tid

@@ -0,0 +1,57 @@
+created: 20131028132700000
+modified: 20241219105600277
+original-modified: 20160618085859219
+tags: Features
+title: Using SVG
+ja-title: SVGの使用
+type: text/vnd.tiddlywiki
+
+TiddlyWiki5では、SVGを使用して2つの方法でベクターグラフィックスを表示できます: 
+
+* `image/svg+xml`タイプのTiddlerはSVG画像として解釈され、`src`属性にデータURIとして埋め込まれたSVGを持つ自己包含型の`<img>`要素として表示、トランスクルードされます。
+** SVG画像の例としては、[[Motovun Jack.svg]]や[[Tiddler Fishes.svg]]を参照してください
+* WikiTextには、インラインSVG要素を直接含めることもできます。例については以下を参照してください。
+
+! SVG Tiddlerの埋め込み
+
+通常のトランスクルージョン構文を使用してSVG画像Tiddlerを埋め込むことができます:
+
+```
+{{Motovun Jack.jpg}}
+```
+
+[[WikiText の型付きブロック|Typed Blocks in WikiText]]を使用して、インラインでSVG Tiddlerを埋め込むこともできます。
+
+`<img>`要素内でレンダリングされる画像の意味は、画像がサンドボックス化されることです。たとえば、親ドキュメントのCSSスタイルは使用されません。また、画像はトランスクルージョンなどのWikiText機能も使用できません。
+
+! SVG要素の埋め込み
+
+SVGを使用するもう1つの方法は、`<svg>`要素を直接埋め込むことです。例:
+
+<svg width="150" height="100">
+  <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
+</svg>
+
+インラインSVG要素には`<?xml version="1.0"?>`宣言は必要ないことに留意してください。
+
+! SVG画像にHTMLまたはWikiTextコンテンツを含める
+
+`<text>`要素を使用して、SVG画像に単純なテキスト文字列を含めることができます: 
+
+<svg width="100px" height="30px" viewBox="0 0 1000 300"><text x="250" y="150" font-family="Verdana" font-size="55">みなさん、こんにちは</text><rect x="1" y="1" width="998" height="298" fill="none" stroke-width="2" /></svg>
+
+`<foreignObject>`要素を使用して、HTMLやWikiTextコンテンツをインラインSVG画像内に含めることができます。例:
+
+<svg width="260px" height="260px"><circle cx="150" cy="150" r="100" fill="blue" stoke="red"/><foreignObject x="70" y="110" width="150" height="180"><body>これはワードラップが必要なテキストで、[[Tiddlerへのリンク|HelloThere]]が含まれています。</body></foreignObject></svg>
+
+! SVG要素のトランスクルード
+
+SVG要素を埋め込むときは、トランスクルージョンなどのWikiText機能も使用できます。たとえば、半径がTiddler[[$:/SVGExampleRadius]]の値に設定されたSVG円を示します: 
+
+<svg width="150" height="150"><circle cx="75" cy="75" r={{$:/SVGExampleRadius}} stroke="black" stroke-width="2" fill="green"/></svg>
+
+半径の値を編集できます: <$edit-text tiddler="$:/SVGExampleRadius" tag="input"/>
+
+! SVGでカーブしたテキストを作成する
+
+{{Making curved text with SVG}}

package/editions/ja-JP/tiddlers/howtos/Using Stylesheets.tid

@@ -0,0 +1,82 @@
+created: 20140305091244145
+modified: 20241118112833362
+original-modified: 20211125175708977
+tags: [[Customise TiddlyWiki]]
+title: Using Stylesheets
+ja-title: スタイルシートの使用
+type: text/vnd.tiddlywiki
+
+\define tv-config-toolbar-text() yes
+
+\define openCpTheme()
+<$action-setfield $tiddler="$:/state/tab-1749438307" $value="$:/core/ui/ControlPanel/Appearance"/>
+<$action-setfield $tiddler="$:/state/tab--1963855381" $value="$:/core/ui/ControlPanel/Theme"/>
+<$action-navigate $to="$:/ControlPanel"/>
+\end
+
+! テーマとカラーパレット
+
+~TiddlyWikiの外観を変更するための最初の手順は、以下を選択して適用することです: 
+
+* 利用可能なテーマの1つ: {{$:/core/ui/Buttons/theme}}
+* カラーパレットの変更: {{$:/core/ui/Buttons/palette}}
+* <$button actions=<<openCpTheme>> class="tc-btn-invisible"><<.icon $:/core/images/options-button>>コントロールパネル</$button>で試す
+
+! スタイルシートの動き
+
+コントロールパネルに加えて、Tiddlerに`$:/tags/Stylesheet`タグを付けることでカスタムスタイルを定義できます。ページの背景色を赤に変更するには、次の内容でカスタムスタイルシートを作成します: 
+
+```
+body.tc-body {
+	background: red;
+}
+```
+
+その後、[[WikiTextで独自のスタイルとクラス|Styles and Classes in WikiText]]を使用します。
+
+!! 追加リソース
+
+* [[カスケーディングスタイルシート(CSS) (mozillaサイト)|https://developer.mozilla.org/en-US/docs/Web/CSS]]
+* [[カスケーディングスタイルシート(CSS) (w3scoolsサイト)|http://www.w3schools.com/css]]
+
+! テーマ設定の上書き
+
+カスタムスタイルシートは、テーマスタイルシートとは独立して適用されます。そのため、カスタムスタイルシートのCSSルールは、上書きするテーマのCSSルールよりも具体的にする必要があります。たとえば、`html body.tc-body`は`body.tc-body`よりも具体的です。
+
+<<.tip """常に、最も具体的でない値から始めます!""">>
+
+! スタイルシートの種類
+
+通常、スタイルシートの種類には`text/css`を使用するのが最適です。これにより、プレーンなスタイルシートとして扱われ、~TiddlyWikiがWi​​ki処理を適用しないことが保証されます。
+
+If you wish to use macros and transclusions in your stylesheets you should instead use the default WikiText type `text/vnd.tiddlywiki`. This allows full ~WikiText processing to be performed. Here is an example:
+スタイルシートでマクロやトランスクルージョンを使用したい場合は、代わりにデフォルトの種類であるWikiText `text/vnd.tiddlywiki`を使用します。これにより、完全な~WikiText処理を実行できます。次に例を示します。
+
+```
+\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline html
+
+body.tc-body pre {
+	<<box-shadow "inset 0 1px 0 #fff">>
+}
+```
+
+ティドラーの先頭にある`\rules`プラグマは、~WikiTextがマクロとトランスクルージョンのみを許可するように制限します。これにより、誤って不要な~WikiText処理がトリガーされることを回避できます。
+
+スタイルシートTiddlerは、まずWiki化され、次に出力のテキスト部分が抽出されてCSSとして適用されるように処理されます。したがって、スタイルシートで使用しているHTMLタグはすべて無視されます。たとえば、RevealWidgetによって生成されたHTML要素は出力に影響しません。次の例のように、CSSルールを`<pre>`タグで囲んで、内部マクロの処理などの処理に影響を与えることなく、コードブロックとして表示できます。
+
+```
+\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline html
+
+<pre>body.tc-body pre {
+	<<box-shadow "inset 0 1px 0 #fff">>
+}
+</pre>
+```
+
+!! スタイルシートマクロ
+
+~TiddlyWikiコアは、[[スタイルシートの構築に役立つグローバルマクロ|Stylesheet Macros]]を提供します。
+
+!! 参照
+
+<<list-links "[tag[Using Stylesheets]]">>

package/editions/ja-JP/tiddlers/howtos/Using TiddlyWiki for GitHub project documentation.tid

@@ -0,0 +1,31 @@
+created: 20130825150100000
+modified: 20250204104525288
+original-modified: 20140912141559011
+tags: [[TiddlyWiki on Node.js]]
+title: Using TiddlyWiki for GitHub project documentation
+ja-title: GitHubプロジェクトのドキュメントにTiddlyWikiを使用する
+type: text/vnd.tiddlywiki
+
+TiddlyWiki5は、GitHubプロジェクトのドキュメントを作成するために使用できます。ソースコード管理下にある個別のTiddlerファイルを含む[[TiddlyWikiフォルダ|TiddlyWikiFolders]]として単一のドキュメントセットを維持し、それを使用してプロジェクトフォルダーに含める`readme.md`ファイルや[[GitHub Pages|http://pages.github.com/]]に保存するHTMLファイルを作成できます。両方の機能は、TiddlyWiki5自身によって実証されています。
+
+! `readme.md`ファイルの生成
+
+フォルダーの内容を表示する際、GitHubは`readme.md`ファイルを探して表示します。この方法では完全なHTMLファイルではなく、静的なMarkDownファイルのみが表示されることに注意してください(これはセキュリティ対策です)。幸いなことに、MarkDownはHTMLの安全なサブセットを許可しているため、GitHubに適した`readme.md`ファイルを生成するには、TiddlyWiki5がHTMLドキュメントの`<body>`要素の内容を生成し、適切なファイル名を付けるだけで済みます。
+
+これは次のコマンドで実行できます: 
+
+```
+--rendertiddler ReadMe ./readme.md text/html
+```
+
+ReadMe Tiddlerを`text/html`形式でファイル`./readme.md`に保存します。
+
+デフォルトでは、Tiddlerのリンクは、Tiddlerのタイトルで構成される相対URIへのリンクとしてレンダリングされます。この動作は、ReadMe Tiddlerの先頭で行われているように、マクロ`tv-wikilink-template`を定義することで上書きできます
+
+```
+\define tv-wikilink-template() https://tiddlywiki.com/static/$uri_doubleencoded$.html
+```
+
+詳細については、LinkWidgetを参照してください。
+
+この例では、Tiddlerのリンクはtw5.comの静的レンダリングへのリンクとしてレンダリングされます。

package/editions/ja-JP/tiddlers/howtos/Using a custom path prefix with the client-server edition.tid

@@ -0,0 +1,16 @@
+created: 20140613133627669
+modified: 20241230102718926
+original-modified: 20140912141613393
+tags: [[TiddlyWiki on Node.js]]
+title: Using a custom path prefix with the client-server edition
+ja-title: クライアント-サーバーエディションでカスタムのパスプレフィックスを使用する
+type: text/vnd.tiddlywiki
+
+デフォルトでは、[[Node.js上のTiddlyWiki|TiddlyWiki on Node.js]]を実行すると、サーバーはプロトコル、ホスト、ポートから形成されたURI - 例えば、`http://127.0.0.1:8080/`でWikiを公開します。
+
+`http://127.0.0.1:8080/path/to/my/wiki/`のようなカスタムパスでWikiを実行するには、2つの手順があります: 
+
+# ServerCommandの''pathprefix''属性として`/path/to/my/wiki`を渡してサーバーを設定します
+# `$protocol$//$host$/path/to/my/wiki/`を含む、`$:/config/tiddlyweb/host`というTiddlerを作成してクライアントを設定します
+
+

package/editions/ja-JP/tiddlers/howtos/faq/csFAQ_dynamic_stylesheet.tid

@@ -0,0 +1,10 @@
+created: 201804111739
+modified: 20241120110107221
+original-modified: 201804111739
+title: Q: Is there a way to create dynamic stylesheets?
+ja-title: Q: 動的スタイルシートを作成する方法はありますか?
+tags: [[Custom Styles FAQ]]
+
+''回答:'' <<.from-version "5.1.16">>
+
+はい、[[Q: カスタムフィールドを使用してTiddlerのスタイルを設定するにはどうすればよいですか?|Q: How can I use a custom field to style a tiddler?]]を参照してください

package/editions/ja-JP/tiddlers/howtos/faq/csFAQ_how_can_i_use_custom_field.tid

@@ -0,0 +1,31 @@
+created: 201804111739
+modified: 20241120110107221
+original-modified: 201804111739
+title: Q: How can I use a custom field to style a tiddler?
+ja-title: Q: カスタムフィールドを使用してTiddlerのスタイルを設定するにはどうすればよいですか?
+tags: [[Custom Styles FAQ]]
+
+''次のユースケースを考えてみましょう:'' <<.from-version "5.1.16">>
+
+`rank`という名前のフィールドがあります。このフィールドには、例えば`species`のようなさまざまな値を保持できます
+
+''回答:''
+
+ここでのアイデアは、スタイルシートを動的に作成するということです。スタイルシートは次のようになります: 
+
+"""
+title: `myStyles`
+tags: `$:/tags/Stylesheet`
+"""
+
+```
+<$list filter="[rank[species]]"> 
+[data-tiddler-title^="<$view field=title/>"] .tc-tiddler-body {
+    column-count: 2;
+}
+</$list> 
+```
+
+これにより、フィールド`rank`と値`species`を持つすべてのTiddlerタイトルのCSSルールが作成されます
+
+[[利用できる属性についての詳細はこちらをご覧ください!|Attribute Selectors]]

package/editions/ja-JP/tiddlers/howtos/faq/csFAQ_what_if_tiddler_has_no_tags.tid

@@ -0,0 +1,21 @@
+created: 201804111739
+modified: 20241120110107221
+original-modified: 201804111739
+title: Q: What if a tiddler has no tags?
+ja-title: Q: Tiddlerにタグがない場合はどうしますか?
+tags: [[Custom Styles FAQ]]
+
+''回答:'' <<.from-version "5.1.16">>
+
+* Tiddlerにタグがないが、スタイル設定が必要な場合は、CSSセレクターとして`data-tiddler-title`を使用します
+** Tiddlerは一つのみです
+
+* ユーザーがシステムTiddlerのスタイルをカスタム設定したい場合: セレクターとして`[data-tiddler-title^="$:"/]`を使用します
+** TW名前空間機能を使用する
+
+* ユーザーがタグ付けされたTiddlerに対して特別な動作を設定したい場合。例: Learning
+** CSSセレクターとして`[data-tags*="Learning"]`を使用します
+
+私が使用している名前は、既存のWikiを変更することなく、ドキュメント目的でのみ使用されます。ドキュメントに副作用があることは望ましくありません
+
+[[利用できる属性についての詳細はこちらをご覧ください!|Attribute Selectors]]