Sparrowで記事や固定ページを執筆するときに使うエディタについて紹介します。
記事、固定ページの追加方法
記事と固定ページはサイドバーから追加できます。記事は、投稿日、カテゴリー、タグ、関連記事が設定できますが固定ページはこれらの項目は設定ができません。
プレビュー機能
編集時は、画面右側にプレビューパネルが表示されます。
スマホ、タブレット、PCの画面幅ごとの見え方を確認しながら執筆を進めることができます。編集内容が自動的に反映されてプレビューが更新されるため、編集画面から離れることなく執筆を進めることができます。
ブロック
Sparrowではブロックと呼ばれるものを組み合わせながら執筆を進めていきます。
- パラグラフ
- ボックス
- 引用
- コード
- トーク
- 内部ページリンク
- ボタン
ブロックは以下の方法で選択できます。いずれもtabキーや矢印キーなどのキー入力のみで操作できるので快適な執筆体験を味わえます。
1. ブロック一覧の中から選択
2. スラッシュ入力で表示した候補から選択
スラッシュを入力するとブロック一覧を表示できます。また、スラッシュの後ろにブロック名を入力すると候補を絞り込むことができます。例えば、/bと入力するだけでボックス(box)ブロックの候補を表示できます。
ここからは、各ブロックについて説明していきます。括弧内の英単語はブロックを絞り込むときに使用できる英単語です。
例えば 「/paragraph」 と入力することでパラグラフブロックを選択できます。
パラグラフ(paragraph)
文章を書くためのブロックです。文章は以下の装飾ができます。
- 見出し2 (h2)
- 見出し3 (h3)
- 見出し4 (h4)
- 太字 (bold)
- 斜体 (italic)
- 打ち消し線 (strikethrough)
- コード (code)
- リンク (link)
- 箇条書き (* または -)
- 番号付き箇条書き (1.)
- 水平方向の罫線 (hr)
- 画像 (image)
- 埋め込み (embed)
装飾するには下記の方法があります。
1. Markdown形式で入力
## を入力することで「見出し2」が入力できたり、**で囲むことで太字にできたりします。
2. 文字列を選択してパレットを表示
装飾したい文字列を選択するとパレットが表示されます。この中から装飾を選択します。
パレットに表示されるショートカットコマンドを使えばより素早く執筆することができます。
3. スラッシュを入力してパレットを表示
スラッシュ / を入力するとパレットが表示されるので、この中から装飾を選択できます。
スラッシュの後に装飾名を入力すると絞り込むことができます。例えば、/imageと入力すると「画像」が選択され、画像選択モーダルを表示できます。
なお実際には/image とすべて入力しなくても/im だけで1つに絞り込まれるので、あとはEnterキーを押すだけで選択できます。
4. コマンド入力
パレットの下に表示されるコマンドを入力することで装飾モードを切り替えられます。例えば ⌘ + B で太字/細時を切り替えられます。文字列を選択して⌘ + Bすることでも太字にできます。
リンクの挿入
文章中にリンクを挿入する方法は主に2つあります。
1つ目は、パレットまたは⌘ + Kでリンク挿入パネルを開くことです。パネルから内部リンク、外部リンクなどを入力できます。
2つ目は、クリップボードにリンクをコピーした状態で文字列を選択し⌘ + Vでペーストすると文字列にリンクが設定されます。
画像の挿入(image)
パレットから「画像」を選択すると画像挿入用パネルが表示されます。パネルで登録済の画像を選択するか、新規の画像をアップロードします。
「キャプション」には画像の説明文を入力できます。説明文は画像の下に表示されます。
画像を選択するとフォーマット選択パネルが表示されます。サイズとalt属性を設定できます。
各サイズは以下のように表示されます。
埋め込み(embed)
YouTubeやTwitterなどのコンテンツを埋め込み表示することができます。
以下のように表示されます。
just setting up my twttr
— jack (@jack) March 21, 2006
埋め込み可能なコンテンツはこちらのファイルに記載されているプロバイダに対応しています。
ボックス(box)
メモ、注意書き、要点を目立たせるために活用できます。タイトルは任意入力です。タイプにはノーマル、プライマリー、重要があります。
ノーマルタイプのボックスです。
タイトルなしのボックスです。
サイトのプライマリーカラーに指定した色のボックスです。
タイトルなしのボックスです。
赤い色のボックスです。
タイトルなしのボックスです。
引用(quote)
引用文を囲むことができます。引用元、引用元リンクは任意入力です。
犬も歩けば棒に当たる
吾輩は猫である。名前はまだない。
コード(code)
ソースコードをハイライトして表示できます。ファイル名は任意入力です。
def sum(a, b):
return a + b
answer = sum(2, 5)
print(answer)<h1>タイトル</h1>
<p>ファイル名を入力しなかった場合の表示はこのようになります。</p>コードブロックはhilight.js の機能を使用して表示されています。見た目はhilight.jsのThemeの中から選択して好みのものにすることができます。また、「言語」は自分がよく使うものだけに限定することもできます。（いずれもカスタマイズのための実装が必要です。）
トーク(talk)
キャラクターを登録して、セリフを表示することができます。
左寄せのセリフです。
右寄せのセリフです。
「表示名」を入力するとその値がアイコンの下に表示されます。
キャラクターはサイドバーの「スニペット」から追加できます。
キャラクターは「タイトル」でソートされるのでタイトルは「〇〇さん 笑顔」のように登録しておくと選択しやすくなります。
内部ページリンク(internal_links)
サイト内ページへのリンクをサムネイル付きで表示できます。合わせて読んでほしいページがある時などに便利です。
ボタン(button)
目立たせるためのボタンを表示できます。
