はじめに
- 見出しについているエンピツマークをクリックすると、その見出しの中のみの編集ができます。
- 画面右上の「編集する」ボタンを押すことでページ全体の編集ができます。
- 編集のチュートリアルはhttps://w.atwiki.jp/guide/pages/226.htmlが詳しいです。
ここではこのwikiでよく使いそうなものをまとめていきます。
基本以外の情報
基本
平文
何の記号も使わず、ふつうに文章をかきこめば、このような平文になります。
見出し
行の最初に*。*の数に応じて階層構造。
*大見出し **中見出し ***小見出し
箇条書き
行の最初に-。-の数に応じて階層構造。
-技 -体 -心 --小鈴
と入力すると下記のようになります。
- 技
- 体
- 心
- 小鈴
数字つき箇条書き
行の最初に+。+の数に応じて階層構造。
+技 +体 +心 ++小鈴
と入力すると下記のようになります。
- 技
- 体
- 心
- 小鈴
記号無視
行の最初に半角スペース。そうすると、あらゆる記号をコマンドだと解釈せずにそのまま書き込まれます
いままでの*やら-の記号の説明はこうやって作っていたんですね&image(){どんなコマンドも無効に}
コメントアウト
編集画面にメモ書きを残したいけど、記事として表に出てほしくない。
そんなときは行の最初に//を置くと、そのあとメモ書きしても記事に反映されなくなります。
そんなときは行の最初に//を置くと、そのあとメモ書きしても記事に反映されなくなります。
記述例： //↓ここわかんないから誰か編集して～ (記事内容) //↑ここわかんないから誰か編集して～
太字・取り消し線・下線・文字カラー
太字にしたい文章をドラッグし、編集画面上の「B太字」ボタンを押すのが楽です。
たとえば
たとえば
あああああいいいいうううう
の
いいいい
だけをドラッグして太字ボタンを押すと
あああああ&bold(){いいいい}うううう
という命令が付記され、結果として
あああああいいいいうううう
と表示されます。
取り消し線も下線も同じ用にやりましょう。文字色もカラーボタンで行けます。
取り消し線も下線も同じ用にやりましょう。文字色もカラーボタンで行けます。
リンク
wiki内の別ページへのリンク
コード
[[ダメアタ]]
結果
解説
wikiのページ名を[[]]で包むと、そこへのリンクになります。
ただし、ときどき「階層の中にあるページ」があることに気をつけてください。
たとえば↓のページの名前は「チルノ」だと思いがちですが、
真のページ名は「キャラクター解説/チルノ」です。青字のところをチェックしてください。
ただし、ときどき「階層の中にあるページ」があることに気をつけてください。
たとえば↓のページの名前は「チルノ」だと思いがちですが、
真のページ名は「キャラクター解説/チルノ」です。青字のところをチェックしてください。
表記とリンク先を変えたい
コード
[[最強妖精>キャラクター解説/チルノ]]
結果
解説
A>Bと入力すると、実際のリンク先はBになりますが、表記がAとなります。
別ウィンドウで開かせたい
コード
[[最強妖精>>キャラクター解説/チルノ]]
結果
解説
>を２回入力すると、別タブや別ウィンドウで開くリンクになります。
wikiの外のサイトを開かせたい
コード
[[上海アリス>>https://www16.big.or.jp/~zun/]]
結果
解説
ページ名のかわりにURLを入力すればそのURLへのリンクになります。
リンクにもなってる画像を作りたい
一般的コード
&image(画像ファイル名,linkpage=リンク先ページ名,page=画像が貼ってあるページ名,height数字px,inline)
サンプルコード
&image(thumb-1001001.png,linkpage=キャラクター解説/博麗霊夢,page=キャラクター解説,height60px,inline)
サンプル結果
解説
ちょっと難しいので、一般的コードをそのまま貼り付けて編集してください。
画像貼り付け
新しく画像をアップロードして貼る
編集画面の上のほうに、このようなメニューがあるはずです。
「画像ボタン」を押し、「画像をアップロードして挿入」をクリック。
そうすると下のような画面が出ます。
ここに画像を投稿します。筆者がよくやる方法は下記の３つ。
「画像ボタン」を押し、「画像をアップロードして挿入」をクリック。
そうすると下のような画面が出ます。
ここに画像を投稿します。筆者がよくやる方法は下記の３つ。
・スマホで撮った画像を、そのままスマホでアップロード (往々にして1MBサイズ制限に引っかかる) ・スマホで撮った画像を、Xで自分にDMする。Xの自分のDM欄からドラッグ＆ドロップ ・パソコン画面でWindows+Shift+Sを押し、望みの画面を切り取り、Xで自分へのDMに貼り付け。投稿されたものをドラッグ＆ドロップ
さて、アップロードすると、記事の中にこのようなコードが生まれます。
&image(あああああ.png)
画像がデカすぎるだろ…って思ったら、サイズを調整してください。
&image(あああああ.png, width300px)
こんなふうに『,width300px』と書き加えると、幅が300ピクセルになります。
ほかにも色んなオプションが書き加えられます。
ほかにも色んなオプションが書き加えられます。
| オプションコード | 効果 |
| ,width300px | 画像の幅が300ピクセルになる |
| ,height300px | 画像の高さが300ピクセルになる |
| ,inline | 画像の前後がかってに改行されなくなる |
| ,linkpage=ページ名 | 特定ページへのリンクにもなる |
すでにどこかに貼られた画像を貼る
一般コード
&image(ファイル名, page=そのファイルが貼ってあるページ, height画像高さpx,inline)
サンプルコード
&image(石1.png, page=sozai, height30px,inline)
サンプルコード結果
解説
一般コードの『ファイル名』『そのファイルが貼ってあるページ』『画像高さ』を書き換えて使ってください。
サンプルコードでは、sozaiページにある「石1.png」を貼り付けています。
「画像がアップされたページ ＝ いま編集中のページ」なら、page= のオプションを省略することができます。
よくつかうので、筆者はこのコードを辞書登録しちゃったりしてます
サンプルコードでは、sozaiページにある「石1.png」を貼り付けています。
「画像がアップされたページ ＝ いま編集中のページ」なら、page= のオプションを省略することができます。
よくつかうので、筆者はこのコードを辞書登録しちゃったりしてます
表
1行だけ
|ああ|いい|うう|
↓ ↓ ↓ ↓ ↓
| ああ | いい | うう |
解説
|で囲めば表になります。|はキーボードのBackspaceの1個左です。
画像命令をぶちこめばちゃんと画像入りの表になります
画像命令をぶちこめばちゃんと画像入りの表になります
複数行
|ああ|いい|うう| |AA|BB|CC|
↓ ↓ ↓ ↓ ↓
| ああ | いい | うう |
| AA | BB | CC |
解説
1行ぶんの命令を書いたあと、改行をはさみ、もういちど繰り返すと複数行の表を書くことができます。
セルの中で改行したい
|ああ|いい|う&br()う| |AA|BB|CC|
↓ ↓ ↓ ↓ ↓
| ああ | いい | う う |
| AA | BB | CC |
解説
いつもの改行は「次の行に行く」目的で使われてしまってるので、
セル内で改行したいばあいは代わりに「改行命令：アンドbr()」を使う必要があります。
セル内で改行したいばあいは代わりに「改行命令：アンドbr()」を使う必要があります。
セルの結合
|>|>|うう| |AA|BB|CC| |~|イイ|ウウ|
↓ ↓ ↓ ↓ ↓
| うう | ||
| AA | BB | CC |
| イイ | ウウ | |
解説
「>」とだけ書かれたセルは、右隣と融合します。
「~」とだけ書かれたセルは、上隣と融合します。
「~」とだけ書かれたセルは、上隣と融合します。
見出し行だけ色を変える
#table_style(head=#CCCCCC){}
|~ああ|~いい|~うう|
|AA|BB|CC|
|アア|イイ|ウウ|
↓ ↓ ↓ ↓ ↓
| ああ | いい | うう |
|---|---|---|
| AA | BB | CC |
| アア | イイ | ウウ |
解説
「~」ではじまるセルは見出しセルになり太字強調されます。
「#table_style(head=#カラーコード){}」と書き込めば、
直後の表の見出しセルの色がカラーコードの色になります。
カラーコードわかんね！って人はhttps://www.colordic.org/とかをご覧ください。
「#table_style(head=#カラーコード){}」と書き込めば、
直後の表の見出しセルの色がカラーコードの色になります。
カラーコードわかんね！って人はhttps://www.colordic.org/とかをご覧ください。
見出し行の色を変えつつ、それ以外は列ごとに色分けする
#table_style(head=#CCCCCC){霊夢=#ffb6c1, 魔理沙=#f0e68c, 早苗=#98fb98}
|~霊夢|~魔理沙|~早苗|
|レ|マ|サ|
|イ|リ|ナ|
|ム|サ|エ|
↓ ↓ ↓ ↓ ↓
| 霊夢 | 魔理沙 | 早苗 |
|---|---|---|
| レ | マ | サ |
| イ | リ | ナ |
| ム | サ | エ |
解説
さっきの奴とほぼ同じですが、さらに{}の中に「霊夢=#ffb6c1」と書き込んでおくと
「霊夢」という見出しセルがある列がいっせいに#ffb6c1の色になります
「霊夢」という見出しセルがある列がいっせいに#ffb6c1の色になります
X（ツイッター）のポストを貼り付け
①貼り付けたいポストの右下のボタンから、「リンクをコピー」
②ツイッターパブリッシュに行ってください。
ブックマークを強く推奨。
ブックマークを強く推奨。
③コピーされていたリンクを貼り付け、→ボタン。
「Embedded post」を押す。
「Embedded post」を押す。
④「Copy code」を押す。
⑤コピーされていたモノをwikiにそのまま貼り付けてください。
⑥貼り付けたものの先頭に『#twitter_widget3(){』と書き加えてください。末尾に『}』と書き加えてください。
裏技：ブックマークレットで時短
②③をやってくれるブックマークレットA
④⑥をやってくれるブックマークレットB
を用意することで、時短ができます。
④⑥をやってくれるブックマークレットB
を用意することで、時短ができます。
ブックマークレットとは、いつものブックマークのURLのところにプログラムを入力しておけば、ブックマーク押す感覚で処理を実行できるというものです。
なんか適当なブックマークを２個つくり、それを右クリックして編集し、URL欄に以下のコードを入力してください。
なんか適当なブックマークを２個つくり、それを右クリックして編集し、URL欄に以下のコードを入力してください。
ブックマークレットA
javascript:(function(){ /* クリップボードから文字列を取得 */ navigator.clipboard.readText().then(text => { alert('1. クリップボードからURLを取得しました: ' + text); /* URLが有効か簡易チェック */ if (!text.match(/^https:\/\/(x\.com|twitter\.com)\/.*\/status\/[0-9]+/)) { alert('2. 無効なURLです。例：https://x.com/username/status/123456789'); return; } /* URLをエンコード */ var encodedUrl = encodeURIComponent(text); /* クエリパラメータ付きURLに遷移 */ var publishUrl = `https://publish.twitter.com/?query=${encodedUrl}&widget=Tweet`; window.location.href = publishUrl; }).catch(err => { alert(%275. クリップボードの読み取り失敗: %27 + err); });})();
ブックマークレットB
javascript:(function(){ var copyButton = document.querySelector('button.EmbedCode-copy.Button--blue'); if (copyButton) { ['mousedown', 'mouseup', 'click'].forEach(eventType => { var event = new MouseEvent(eventType, { bubbles: true, cancelable: true }); copyButton.dispatchEvent(event); }); /* クリップボードの内容を取得 */ navigator.clipboard.readText().then(clipboardText => { /* 加工: 先頭に「#twitter_widget3(){」、末尾に「}」を追加 */ var processedText = '#twitter_widget3(){' + clipboardText + '}'; /* 加工した内容をクリップボードに保存 */ navigator.clipboard.writeText(processedText).then(() => { console.log('クリップボードに加工済みコードを保存しました。'); }).catch(err => { console.error('クリップボードへの書き込み失敗: ' + err); }); }).catch(err => { console.error('クリップボードの読み取り失敗: ' + err); }); } else { alert('Copy codeボタンが見つかりません。'); }})();
これを導入した場合、処理はこうなります。スッキリ。
①貼り付けたいポストの右下のボタンから、「リンクをコピー」
②Aを実行
③Bを実行
④wikiに貼り付け。
