こんにちは！フィフス・フロア開発チームのnotozekiです。
みなさんは、弊社サービス「うちのこまとめ」のうちのこ記法機能をご存知でしょうか。うちのこ記法は、普通に文章を書きながら、そこに少しだけ記号などを書き加えるだけで、簡単に文字装飾などをすることができるステキな機能です。うちのこ記法はキャラページやエピソード、Wikiなど、うちのこまとめのいろいろなところで使うことができます。
うちのこ記法を使えば、より魅力的なキャラページやエピソードを作ることができます。一方で、「記法ってなんだか難しそう」というイメージを持っている方もいらっしゃるのではないでしょうか。今回は、そんな不安をお持ちの方向けに、うちのこ記法の使い方を基礎からご説明します。記事を読みながら、ぜひ実際にうちのこ記法を試してみてください！また、便利な使い方もご紹介しているので、「ちょっと使っているよ」という方にも役立つ情報があるかもしれません。
うちのこ記法を書いてみよう
では、早速ですが実際にうちのこ記法を書いてみましょう！
先ほども言った通り、うちのこ記法はうちのこまとめのいろいろなところで使うことができます。今回は、キャラページに書いてみましょう。
うちのこまとめにログインして、マイページのうちの子一覧ページを開いてください。スマートフォンの場合は右上のメニュー、PCの場合は上部のメニューから、「マイページ」→「うちの子」と選択してください。
（※以下はスマートフォンの画面で説明しますが、PCでもほとんど同じです。）
うちのこ記法を試すために、新しいキャラを作ります（もちろん、既にいるキャラで試してもOKです！）。「うちの子を追加する」を押してください。
ページの中ほどまでスクロールすると、「キャラ設定」を記述する欄があります。ここにうちのこ記法を書くことができます。これで準備が整いました！
文字装飾を試してみよう
まずは、簡単な記法から試してみましょう。うちのこ記法には、文字を太字にしたり、色を変えたりといった文字装飾の記法がいくつかあります。たとえば、文字を太字にするには以下のように書きます。
**太字**
記入したら、「プレビュー」というところを押してみてください。すると、いま記入しているうちのこ記法が、キャラページなどで実際にどのように見えるかがわかるようになっています。便利ですね〜
どうですか？ちゃんと太字になっていれば、これでうちのこ記法の第一歩を踏み出したことになります。おめでとうございます！
もちろん、** の外側に文字を書くと、その部分は太字にはなりません。
太字じゃない**太字**太字じゃない
ただし、行をまたがると太字の記法は使えないのでご注意ください。
**太字
じゃなかった**
このような場合は、両方の行で太字の記法を使います。
**太字**
**になった**
これは、太字に限らず他の文字装飾（後で例を見ます）でも同様です。
ヒントを使おう
ところで、** を入力するのは面倒ではありませんでしたか？PCならまだしも、スマートフォンだとちょっと大変ですよね。
実は、記法の入力を簡単にする機能がうちのこ記法の入力欄には備わっています！それが「ヒント」機能です。実際にヒントを使ってみましょう。
入力欄は一度消して、まっさらな状態にしておいてください。
そうしたら、「ヒント」というところを押してみてください。
すると、記法の表示例と書き方がたくさん表示されます。これが「ヒント」です。
ヒントは、記法の書き方を調べることができるのはもちろん、記法の入力も手助けしてくれます。試しに、「タップして貼り付け」（PCの場合は「クリックで貼り付け」）という部分を押してみてください。
するとあら不思議！記法が自動的に入力されます！
しかもよく見てください。カーソルの位置が ** の真ん中に来ていますね。これですぐ太字にしたい文字を書き始めることができます。便利〜〜〜
ヒントの便利機能はこれだけではありません。今度はあらかじめ太字にしたい文字を（記法無しで）入力してみてください。それから、その文字を選択状態にしておいてください。iPhoneなら、文字のところをタップしっぱなしにして、「選択」を押すと選択範囲を選べるようになります。
そうしたら、選択状態のまま、「ヒント」を押して、再び太字のところの「タップして貼り付け」を押してみてください。
するとなんということでしょう！先ほど選択していた部分が ** で囲まれているではありませんか！このように、選択部分がある場合は、その部分に記法が適用されます。便利便利〜〜〜〜
このように、ヒントを使えば記法の入力をかなり簡略化させることができます。また、どんな記法があるかを探すこともできるので、ぜひヒントを活用してみてください。
そのほかの文字装飾
その他の文字装飾をいくつかご紹介します。表示例はあえて省略するので、どのような表示になるかはぜひご自分で試してみてください！
文字の上に線を引く
文字の上に線を引くことができます。書き方は太字のときと似ていて、線を引きたい文字を %% で囲みます。
%%これは間違った情報です%%
訂正や自己ツッコミに使えますね。
文字の色を変える
文字の色を自由に変えることができます。これは今までの記法と少しだけ書き方が違います。まず例を見てみましょう。
{これは赤い文字になります:red}
このように、色を変えたい部分を { と } で囲みます。また、何色にするかを、: の後に書きます。上の例では red、つまり赤色を指定しているので、文字は赤く表示されます。
色の指定は、red 以外にも書き方がいろいろあります（色だけに）。例えば、こんな書き方ができます。
{紫の文字:江戸紫}
{オレンジの文字:#FF9800}
江戸紫 のように、日本語の色の名前を使うことができます。対応している色の名前は「JIS慣用色名 - Wikipedia」に一覧がありますので、ここから自分好みの色を探してその色の名前を書いてみてください。
ちなみに、先ほどの red のような英語の色の名前の一覧は「カラーネーム140色－WEBカラーリファレンス」にありますので、こちらもご参考にしてください。
#FF9800 のような書き方は、ちょっとむずかしいですが、赤、緑、青の光の三原色が、それぞれどのくらいの強さかを表す書き方です。HTMLやCSSを使ったことのある方ならご存知かもしれません。この例では最初の FF が赤の強さ、真ん中の 98 が緑の強さ、最後の 00 が青の強さです。強さは0〜255までの256段階あって、それを16進数で指定します（むずかしい！！！）この指定の仕方は上級者向けなので、説明はこれくらいにとどめておきます。興味のある人は、「カラーネーム140色－WEBカラーリファレンス」に #FF9800 のような書き方も載っていますので、それを参考に自分でカスタマイズしてみてください。
ルビを表示する
文字の上に読み方などのルビを表示することができます。書き方は色の記法と似ていて、次のように書きます。
[ルビ|るび]
このように書くと、「ルビ」の上に小さく「るび」と表示されます。[ と ] で囲って、| で区切って、左側にルビをつけたい文字、右側にルビそのものを書く、と覚えましょう。
記法はまだまだあります！
いかがでしたでしょうか。ここまでご紹介した記法だけでも、文字装飾なしのページに比べればだいぶ見栄えの良いページが作れるのではないでしょうか。
記法はまだまだたくさんあり、使い方次第でさまざまな表現が可能です。記法の一覧は、先ほどご説明した「ヒント」や、「記法ガイド」のページにより詳しい説明がありますので、もっと記法を知りたい！という方はぜひのぞいてみてください。
また、今回ご紹介しきれなかった記法は、いずれ第二弾としてこのブログでご紹介したいと思います。おたのしみに！
記法を活用して、あなただけのステキなキャラページを作りましょう。良い記法ライフを！