Todoを編集する
ワークカードの中にあるTodoは文字のサイズ変更や太字、画像の添付など見た目を装飾することができます。見やすさを工夫することで、Todoの視認性が高まり、作業漏れやミスの防止、円滑な作業の進行にも繋がります。
下記ではTodoの見た目に関する編集方法をご案内します。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/5495f4d3-bb32-4b91-a3b3-d7789fce01a2/d9608bcc2662b361a38b3ba2ddfcb2be.png)
■マークダウンエディタでできることについて
Todoを編集する画面のことを「マークダウンエディタ」と呼びます。マークダウンエディタの画面でできることは以下のとおりです。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/2c20e049-e5b3-4e1b-9354-723e490e30db/40bdb12fd9b73709e8de03b177fe66d8.png)
1.装飾の無いテキスト![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/de43d7e2-215c-42fa-ae24-aa3c8aa86b11/7e68183bc741b05bf8ae4601b622cdc9.png)
装飾の無い普通のテキストを記入することができます。
後述の「見出し」や「箇条書き」で記入されているテキストを、装飾の無い普通のテキストに戻すこともできます。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/de43d7e2-215c-42fa-ae24-aa3c8aa86b11/7e68183bc741b05bf8ae4601b622cdc9.png)
2〜4. 見出し![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/c2753604-8b98-44bc-bef5-0b12d29fc586/6d9007fc36a3b1e89683875e0631b75a.png)
文字のサイズや太さを自動で調整することができます。H1が一番文字サイズが大きく、H3に近づくほど文字サイズは小さくなります。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/c2753604-8b98-44bc-bef5-0b12d29fc586/6d9007fc36a3b1e89683875e0631b75a.png)
5. 箇条書き(黒丸リスト)![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/38250118-59c5-41cc-9467-00224fcc34b3/a3e9748c73b7dea477cb833d619db1b3.png)
テキストを箇条書きに自動調整することができます。作業時のチェック項目などを箇条書きにすることで、何に注意しなければいけないのかひと目で分かるようになります。
[Enter]キーで改行する度に黒丸(「・」)が自動で増え、余白も自動で調整してくれます。クリックを2回(改行を2回)することで、普通のテキストを記入できる状態に戻すことができます。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/38250118-59c5-41cc-9467-00224fcc34b3/a3e9748c73b7dea477cb833d619db1b3.png)
6. 箇条書き(順序リスト)![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/695b9500-3d18-47f3-bb16-cdc9b6bb09f9/508ab24a8f9ea911f7d762190bc98b63.png)
テキストを箇条書きに自動調整することができます。作業時のチェック項目にて順番に見る必要があるものなどを順序リストで表現すると、どんな順番で作業を進める必要があるのか分かりやすくなります。
操作方法については「箇条書き(黒丸リスト)」と同じです。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/695b9500-3d18-47f3-bb16-cdc9b6bb09f9/508ab24a8f9ea911f7d762190bc98b63.png)
7. 引用![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/f601d957-bbe1-47eb-b00e-243bddaa2d9a/84d33009079531ac6728301284494c6a.png)
引用箇所を装飾することができます。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/f601d957-bbe1-47eb-b00e-243bddaa2d9a/84d33009079531ac6728301284494c6a.png)
8. トグルリスト![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/9b711d46-c23f-442a-90fa-92f5b8fad48c/47bb620e2b337173c6b8f564bc38f8a9.png)
▼アイコンがついている箇所をクリックすることで、その中に記載されている文章を閉じたり開いたりすることができます。長い文章を書く時に利用がおすすめです。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/9b711d46-c23f-442a-90fa-92f5b8fad48c/47bb620e2b337173c6b8f564bc38f8a9.png)
9. 強調(大)(コードブロック)![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/b17049a7-21a1-4f2a-bc4b-ca1c0c7bd155/ee466f8d4b496bce16c8170f96c43191.png)
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/ab301d75-1309-4a4e-b37c-ff61c71bc091/a1f7195fba4ed55c4e6f6cf6a18b2297.png)
文字の背景に色を付け、文章を強調することができます。作業時の注意事項などを強調する際に有効です。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/b17049a7-21a1-4f2a-bc4b-ca1c0c7bd155/ee466f8d4b496bce16c8170f96c43191.png)
入力を保存すると、以下のように表示されます。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/ab301d75-1309-4a4e-b37c-ff61c71bc091/a1f7195fba4ed55c4e6f6cf6a18b2297.png)
コードブロックは元々プログラムのコードを書く時に使うものですが、BYARDでは日本語を記入し強調させる用途で活用できます。コードブロックを適用するとプログラム言語の設定が表示されますが、見た目には大きな影響はありませんので、初期値のままご利用ください。![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/e754c16e-6047-4905-b1c3-aa6f29122a98/175d47d8d35b3c7ba88debeaf6e332d3.png)
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/e754c16e-6047-4905-b1c3-aa6f29122a98/175d47d8d35b3c7ba88debeaf6e332d3.png)
10. 太字![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/15ab6498-4882-4a02-b448-dab1d6d41873/0ed3a26d2f39848f8be967700091a96c.png)
テキストを太字で強調することができます。見出しやコードブロックと異なり、文字のサイズや背景色に変化はありません。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/15ab6498-4882-4a02-b448-dab1d6d41873/0ed3a26d2f39848f8be967700091a96c.png)
11. 斜体![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/fc2ef9c2-d5c7-41e1-a057-65e34ee6ce2e/c99894b7b55e93c31858b001580ad2a1.png)
テキストを斜体にすることができます。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/fc2ef9c2-d5c7-41e1-a057-65e34ee6ce2e/c99894b7b55e93c31858b001580ad2a1.png)
12. 打ち消し線![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/b3fc3606-5634-424d-ad61-1a7b0a2dd19a/806dd1bc16cc98fb08149a5ec8845252.png)
テキストに打消し線を引くことができます。業務の改善をする中で、Todoの内容に変更が入ったが過去の情報を残しておきたいときなどに使うことができます。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/b3fc3606-5634-424d-ad61-1a7b0a2dd19a/806dd1bc16cc98fb08149a5ec8845252.png)
13. 強調(小)(インライン)![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/288ed281-a64b-4c77-b7af-7fc03a357b24/eefa06da9250b3d7c9b42e0da8c7df8c.png)
文字の背景に色を付け、文章を強調することができます。テキストの部分を覆う形で強調がされます。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/288ed281-a64b-4c77-b7af-7fc03a357b24/eefa06da9250b3d7c9b42e0da8c7df8c.png)
14. リンク![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/43ea9e82-3d59-4a95-baba-89fa7cd180e1/0cc92e0d9e46e6faefd1d7cf16201778.png)
テキスト内にリンクを貼ることができます。作業マニュアルやスプレッドシート、Webサイトなどのリンクを添付することで、作業者はTodoを確認しながら関連する情報もその場で参照することができます。
リンクを添付した箇所は文字が青色になります。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/43ea9e82-3d59-4a95-baba-89fa7cd180e1/0cc92e0d9e46e6faefd1d7cf16201778.png)
リンクに設定できるURLは「http」「https」から始まるURLです。社内サーバーのリンクなどは、ブラウザのセキュリティポリシー上、直接アクセスすることができません。社内サーバーやローカルファイルのリンクに関する詳細は下記FAQをご確認ください。
「Q. PCのローカルファイルや社内ファイルサーバーのリンクに直接アクセスすることはできますか?」
15. ファイルの添付![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/7ed7c573-dba6-4d54-8e40-15ee7b38e826/b5e11680241fe7f0a0a5c810ad49ae8b.png)
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/5b3036b7-5da4-4710-85ba-ef9a9a542a64/a034b3134fa7877b59efd8c725cea876.png)
Todo内にファイルを添付することができます。ドラッグ&ドロップでもファイルの添付は可能です。Todoの編集画面では、添付したファイル名がテキストとして表示されます。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/7ed7c573-dba6-4d54-8e40-15ee7b38e826/b5e11680241fe7f0a0a5c810ad49ae8b.png)
設定を保存し、[▼画像のファイル名]の部分をクリックすると、画像の開閉が可能です。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/5b3036b7-5da4-4710-85ba-ef9a9a542a64/a034b3134fa7877b59efd8c725cea876.png)
また、添付した画像やファイルはダウンロードすることも可能です。
添付できるファイルについては以下のとおりです。
ファイル形式 | 拡張子 | 容量 | 備考 |
画像 | .jpg/.jpeg/.png/.webp | 30MB | アップロード時に圧縮処理をしており、ダウンロード時のファイルは元データより軽量になっております。 |
ワード | .xlsx/.xls | 3MB | |
エクセル | .docx/.doc | 3MB | |
3MB |
16. 保存![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/66f0518f-e60a-4650-b8ba-cb26e59d5795/3680ba70c2f37ce8dd6247bbe398ebc0.png)
設定した内容を保存します。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/66f0518f-e60a-4650-b8ba-cb26e59d5795/3680ba70c2f37ce8dd6247bbe398ebc0.png)
■マークダウンエディタの使い方
テキストを装飾する方法
テキストを装飾する方法は大きく2種類あります。
- 先に装飾ボタンを押してからテキストを入力する
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/0c906b3d-67e9-4e84-b910-16b75e2c3c80/24998bee83bd1441fe38585f33a5142c.png)
- 装飾したい範囲を選択してから装飾ボタンをクリックする
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/bfc2e3bb-b1e6-49e1-a36d-beffef94feba/e3e142b48a5d01dc416854928d0e2fef.png)
リンクの設定手順
リンクは下記の手順で設定できます。
- リンクを設定したい範囲を選択する
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/f4f367b8-0f2f-4950-acb6-ff2064724a6e/9fe128de7dcd80c46dae0277952f43a8.png)
- リンクボタンをクリックする
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/7556b4f7-ef8d-42fc-a096-ce5952a80876/57846c202f80a977a3d6ca67d80192dc.png)
- [URL]に遷移先のURLを記入して保存する
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/87a6c9e1-adad-48ee-957a-4ad790e7e971/8822c73eb1e6d3fb0077babf764f7144.png)
■活用Tips
2つの改行について
改行には[Enter]キーを押す方法と[Shift]+[Enter]キーを押す2つの方法があります。方法によって行間の幅に差が生じます。
- [Enter]キーによる改行
段落が変わる処理となり、行間の幅が大きくなります。少し広めに行間を取りたい時はこちらがおすすめです。
- [Shift]+[Enter]キーによる改行
一般的な改行です。行間を詰めて改行されるため、文章が続く場合はこちらがおすすめです。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/8a38a866-c5e0-46ed-a25a-b1aa4dded3a7/de81140a8415964273de4e9eaa7c3c3e.png)
活用例
下記は複数の装飾を組み合わせた例です。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/166b351f-45f9-4884-a3db-3d3d2ec204b6/89fa7d52f0a79673dbcb72f5ca41eb72.png)
- 最初の1行は「見出し(H3)」がおすすめです。最初の1行目がTodoの概要になりますので、テキストを見出しとして強調することで、どんな作業をするのかひと目で分かりやすくなります。
- 注意事項や作業者へのメッセージは「強調」を使い、他のメッセージに埋もれないようにすると良いでしょう。
- 画像を添付することで、作業内容や注意事項がより分かりやすくなります。画像はクリックすることで開閉することもできますので、複数枚添付しても見た目に大きな影響はありません。
- 作業マニュアルや参照すべきシステムのURLなどがあればリンクを貼りましょう。Todoを確認しながら、必要な情報をすぐに取得できるようになりますので、情報を探す手間を省くことができます。
■書き方のヒント
Todoを記入する際の考え方についてご案内します。前述の内容でマークダウンエディタの使い方は理解したが、いざ書こうと思ったらどの様な内容を書けば良いか分からない時などにご参考ください。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/backyard/7e9af64a-88e7-4a04-ada8-0d84786d774c/7050cb28cd047e564307f7bc033b8ca3.png)
- 「概要」に業務の意図と目的を記入します
- Todoのアクション内容を記入します
- 手順と対応を記入します
- 具体的な実行手順
- 対応のポイント
- ログイン情報
- 関連資料と参照先(リンク)
以下の様な情報を記入しておくことをオススメしております。
- 対応時の注意点を記入します
トラブルを防止するための注意点を記入してください。
関連記事