本文へ移動

はじめに

Markdownで見る
このページの内容

ポストエディターの使い方

Boutletでは、通常のポストも参加投稿も同じエディターで作成します。短い感想から、体験や資料をまとめた長文まで、必要な要素を追加しながら書いてみましょう。

エディターは、Notionに似たブロック形式の編集に対応しています。段落、見出し、リスト、画像などがそれぞれ一つのブロックになり、追加や並べ替えによって文章を組み立てられます。

このページの表示例には、実際のポスト本文と同じレンダラーを使っています。Markdown表示では、同じ例をポストと同じ方法でMarkdownに変換して表示します。文字の色や配置、一部のメディアの表示方法は、閲覧方法によって異なります。

/でブロックを探して追加する

  1. 空の行で / を入力します。
  2. ブロック名や検索語を入力します。
  3. メニューの項目をクリックするか、上下の矢印キーで選んでEnterを押します。

/ の後に入力する文字は、ブロックを探すための検索語です。コマンドを丸ごと覚えなくても、メニューで目的の項目を選べます。

追加するブロック検索例
標準テキスト/標準テキスト、/paragraph
見出し1〜6/h1、/h2、/h3、/h4、/h5、/h6
箇条書き・番号付きリスト/箇条書き、/リスト、/ul、/ol
チェックリスト/チェック、/check
引用/引用、/bq
コードブロック・表/code、/表
画像・動画/画像、/video
画像スライダー/gallery、/slider
区切り線/divider

ブロック横の + ボタンからも追加メニューを開けます。見出しやメディアは、エディター上部のツールバーからも追加できます。

テキストと見出し

段落と見出し

そのまま入力すると通常の段落になります。Enterで次のブロックを作成し、同じ段落の中で改行したいときはShift+Enterを使います。

見出しは1〜6のレベルを選べます。/h2 などで検索するか、上部の見出しメニューから選んでください。文章の中を区切る小見出しには、見出し2や見出し3が便利です。

行の先頭で # に続けてスペースを入力すると見出し1に、## に続けてスペースを入力すると見出し2に切り替わります。

表示例

文字の装飾

文字を選択すると書式ツールバーが表示されます。太字、斜体、下線、取り消し線、インラインコードのほか、文字色や背景色、対応するブロックの文字揃えを変更できます。

リンクを付けるには、文字を選択してリンクツールにURLを入力します。短いコマンドや名前は、インラインコードにすると本文と区別しやすくなります。

表示例

引用

資料の一節や、本文から区別して見せたい文章には引用ブロックを使えます。/引用 を選んで内容を入力してください。出典のある文章には、参照先のリンクも添えましょう。

引用ブロックは本文内の表示形式です。別のBoutletのポストを参照して新しいポストを書く「引用」機能とは、それぞれ別に使えます。

表示例

リスト

関連する項目には箇条書き、手順には番号付きリスト、確認することにはチェックリストを使うと整理しやすくなります。

リスト追加方法
箇条書き/ul を選ぶか、行の先頭で - に続けてスペースを入力
番号付きリスト/ol を選ぶか、行の先頭で 1. に続けてスペースを入力
チェックリスト/チェック を選ぶか、行の先頭で [ ] に続けてスペースを入力

Enterで次の項目を追加します。空の項目でもう一度Enterを押すと、通常の段落に戻ります。入れ子の項目は同じ種類のリストでまとめてください。番号付きリストは1から始まります。

チェックの状態は作成・編集画面で変更します。公開後のポストには、作成者が保存した状態が表示されます。

表示例

コード・表・区切り線

コードブロック

複数行のコードやコマンドを共有するときは、/code でコードブロックを追加します。ブロックの言語メニューで使用する言語を選ぶと、構文の色分けが適用されます。標準テキストとして表示することもできます。

コードブロックはコードを表示するためのもので、実行はしません。

表示例

表

/表 で表を追加し、各セルに入力します。行と列のハンドルメニューから、行や列を追加・削除できます。

複数の項目を比較するときに便利です。最初の行に項目名を入れ、狭い画面でも読みやすいように、列数とセルの内容を簡潔にまとめましょう。

表示例

区切り線

話題が切り替わる場所には、/divider で区切り線を追加できます。

表示例

画像と動画

画像

/画像 または上部の画像ボタンを選び、端末からファイルをアップロードします。画像ファイルをエディターへドラッグしたり、クリップボードの画像を貼り付けたりすることもできます。

画像が何を示しているのか本文に添えると、体験や結果が伝わりやすくなります。公開できる画像を使い、スクリーンショットに個人情報が含まれていないかも確認してください。

表示例

画像スライダー・ギャラリー

複数の画像を一つにまとめるには、/gallery または /slider で画像スライダーを追加します。上部のギャラリーボタンからも複数の画像を選択できます。

スライダーの編集画面で画像を追加し、順番を整えられます。画像ブロックのハンドルメニューにはスライダーとして表示、スライダーのメニューには個別の画像として表示する機能があり、文章に合う形に切り替えられます。

表示例

動画

/video または上部の動画ボタンを選び、ファイルをアップロードします。アップロードと動画の処理が完了すると公開できます。

動画ファイルのアップロードと外部動画の埋め込みでは、追加方法が異なります。YouTubeの動画は、次のURL貼り付けの方法で追加してください。

表示例

リンクと外部ウィジェット

リンクのプレビュー

空の段落にWebページのURLだけを貼り付けると、対応するアドレスをリンクのプレビューや外部ウィジェットに変換できます。

一般的なWebページは、タイトル・説明・画像の付いたリンクカードとして表示される場合があります。元のサイトが情報を提供していない場合やページにアクセスできない場合は、表示内容が限られることがあります。

文中の文字にリンクを付けたい場合は、文字を選択してリンクツールを使ってください。

表示例

対応する外部コンテンツ

ウィジェットは / メニューから選ぶのではなく、対応するURLを空の段落に貼り付けて追加します。

サービス追加できるコンテンツ
YouTube動画
X・Threads・Instagram対応する公開投稿
Notion公開またはWeb公開したページ
Google Workspaceドキュメント・スプレッドシート・スライド・フォーム・カレンダー・Driveの対応する共有コンテンツ

元のサービスの共有設定を確認してください。自分のアカウントで開けても、ほかの人には閲覧権限がない場合があります。Boutletに追加しても、元のコンテンツの閲覧権限は変わりません。

外部コンテンツの表示には、そのサービスへの接続が発生します。再生や追加の読み込みは、各サービスの提供状況と表示される案内に従って利用できます。

表示例

ブロックの整理と保存

並べ替えと削除

ブロック横のハンドルをドラッグすると、好きな位置へ移動できます。ハンドルをクリックするとメニューが開き、不要なブロックを削除できます。

段落を見出しやリストに変えるときは、文字を選択して書式ツールバーのブロック種類メニューを使います。誤って変更した場合は、元に戻す操作で取り消せます。

下書きと公開済みポストの保存

作業の種類保存方法
新しいポスト・引用ポスト・参加投稿の作成下書きが自動保存されます。画面を離れる前に、上部の保存状態を確認してください。
公開済みポスト・参加投稿の編集編集後に変更を保存して反映します。

下書きを保存しただけでは公開されません。ファイルのアップロードと処理が終わったことを確認してから、公開ボタンを選んでください。

参加投稿にも同じブロックと書式ツールが使えます。作成画面の上部にある参加先と報酬案内を確認し、無料で一般公開できる内容を作成してください。公開後の編集を評価用の提出内容にも反映したい場合は、再提出できるか確認が必要です。参加の手順は参加投稿の作成と提出で確認できます。