本文を投稿する上での様々な方法をご紹介致します。
文字装飾記法・色指定記法の書き方
設定で無効にしない限り、
文字に色を付けたり文字サイズを変えたり、引用枠を加えたり、指定範囲の文字を隠したり、ルビを振ったりする各種文字装飾機能が使えます。
専用の文字装飾記法を使って記述しますが、編集領域の下に表示されるボタンを使って簡単に入力することもできます。
（※文字装飾機能は、管理画面の[設定]→[ページの表示]で無効に設定することもできます。ボタンを表示するかどうかは管理画面の[設定]→[投稿欄の表示]で設定できます。）
▼文字装飾の書き方（基本）
設定で無効にしない限り、本文中には以下のような文字装飾用の特殊な記法が使えます。
- [B:●●●]：
<b class="decorationB">～</b>でマークアップされ、●●●の文字が太字になります。(Bold)
- [D:●●●]：
<del class="decorationD">～</del>でマークアップされ、●●●の文字に取消線が引かれます。(Delete)
- [E:●●●]：
<em class="decorationE">～</em>でマークアップされ、●●●の文字が強調されます。(Emphasis)
- [I:●●●]：
<i class="decorationI">～</i>でマークアップされ、●●●の文字が斜体になります。(Italic)
- [Q:●●●]：
<q class="decorationQ" style="display:block;">～</q>でマークアップされ、●●●の内容が「引用」として表示されます。(Quote)
- [S:●●●]：
<small class="decorationS">～</small>でマークアップされ、●●●の文字サイズが小さめになります。(Small)
- [T:●●●]：
<small class="decorationT">～</small>でマークアップされ、●●●の文字サイズが極小になります。(Tiny)
- [U:●●●]：
<u class="decorationU">～</u>でマークアップされ、●●●の文字に下線が引かれます。(Underline)
括弧に続く装飾記号は、半角大文字のみで指定できます。小文字では認識されませんのでご注意下さい。
そのほか、さらに特別な記法を追加することで使える文字装飾等の書き方として、
文字色・背景色の指定、
ルビ振りの指定、
class名の指定、
指定の範囲を隠す指定
があります。それぞれ後述します。
取消線・強調・下線・引用などの見栄えは、スキンによって異なります。スキンのCSSに専用の装飾が書かれていない場合、[S:小さめ]と[T:極小]は同じサイズになります。
実際にページ上でどのように装飾されて表示されるかは、各スキンのCSS次第です。
▼文字色・背景色の指定方法
文字色や背景色を指定する特殊な記法も使えます。
ボタンクリックで入力する方が楽でしょうが、自力で記述する場合は以下の記法で配色を指定できます。
- [C:色名:●●●]：
<span class="decorationC" style="color:色名;">～</span>でマークアップされ、●●●の文字色が「色名」として指定した色で表示されます。(Color)
- [M:色名:●●●]：
<span class="decorationM" style="background-color:色名;">～</span>でマークアップされ、●●●の文字の背景色が「色名」として指定した色で表示されます。(Marker)
色名は、以下の記述方法で指定できます。RGBAカラーモデルを使うことで、半透明の色を指定することもできます。
-
英小文字で色名を指定。
例えば red や blue など、HTML・CSSで認識できる色名が使用可能です。色名は「原色大辞典」などが参考になります。
mediumvioletredやdarkolivegreenなど、多数の色が英語名で指定できます。
-
16進数のRGB値6桁で色を指定。
例えば c71585 や 55b62f など、6桁の16進数を使って色を指定可能です。
c71585や55b62fなど、自由な色を指定できます。「#」記号は不要です。
-
16進数のRGB値3桁で色を指定。 (※Ver 2.0.0以降)
例えば cfc や 8cf など、3桁の16進数を使って色を指定可能です。
ea8や8cfなど、自由な色を指定できます。「#」記号は不要です。
-
rgb(赤,緑,青)の書式で指定。 (※Ver 2.0.0以降)
例えば rgb(199,21,133) や rgb(85,191,38) など、RGB値を数値で指定して色を指定可能です。
rgb(199,21,133)やrgb(85,191,38)など、自由な色を指定できます。
-
rgba(赤,緑,青,透過)の書式で指定。 (※Ver 2.0.0以降)
例えば rgba(199,21,133,0.75) や rgba(85,191,38,0.5) など、RGB値とアルファチャンネル値を数値で指定して、半透明な色を指定可能です。
rgba(199,21,133,0.75)やrgba(85,191,38,0.5)など、自由な色を指定できます。半透明な色にすれば、背後が透けて見えます。
存在しない色名や、各書式の仕様を逸脱した値を指定した場合でも、上記の書式に沿っている限りはそのまま出力されます。（その場合は、たいていのブラウザではおそらく黒色で表示されるでしょう。）
これらの記法で色が指定された場合は、style属性を用いて直接CSSをマークアップに加えますので、スキン側の装飾指定を無視した色指定ができる(できてしまう)点に注意して下さい。
16進数で色を指定する際に、先頭の「#」記号を不要にしてあるのは、ハッシュタグの指定と誤解してしまうのを防ぐための仕様です。内部の処理を簡単にするために、色指定で「#」記号は使わない仕様にしてあります。
▼ルビ振りの指定
ルビを振る機能もあります。(Ver 2.0.0以降)
創作系サイト等でご活用頂けるかもしれません。
本文中に [R:漢字:かんじ] のように書くと「漢字」の上にルビで「かんじ」が載ります。
出力されるマークアップは、<ruby class="decorationR">漢字<rp>(</rp><rt>ルビ</rt><rp>)</rp></ruby>のようになります。
ルビに対する文字装飾も有効なので、文字色を変化させたり色を付けたりもできます。ルビだけに色を付けることも、本体だけに色を付けることもできます。
ボタンクリックでルビを入力する場合は、「漢字」の方を範囲選択した上でボタンを押して下さい。すると、ルビの入力欄が現れます。
▼文字装飾は、複合（入れ子）指定も可能
装飾指定は入れ子にできる(ネストできる)ため、太字にした上で下線を引く、というような装飾も可能です。
- [B:太字にさらに[U:下線を引く]こともできます。] のように記述すれば、「下線を引く」の部分は太字＆下線の二重装飾で表示されます。
※ネスト階層の数に制限はありません。
※ネストする際のマークアップの正しさは考慮しませんので、組み合わせによってはHTMLの文法上では正しくない形で出力されてしまう可能性がある点にご注意下さい。
装飾対象の文字として、角括弧 [ や ] を直接含めることはできません。装飾対象の範囲内に角括弧を表示させたい場合は、数値文字参照の書き方を使うと表示できます。
詳しくは、装飾範囲内に角括弧 [ や ] を書きたい場合をご参照下さい。
▼装飾範囲内に角括弧 [ や ] を書きたい場合
文字装飾の範囲内に、装飾目的以外の角括弧 [ や ] や、コロン記号 : を書く際にはやや注意が必要です。
場合によっては、装飾範囲の認識がおかしくなったり、装飾指定の全体が無効になったりします。
特に、閉じ角括弧「 ] 」だけを単独で含めると、そこが「装飾の終了位置」を示していると解釈されてしまいます。
▼安全な書き方
装飾範囲内に角括弧を文字として表示したい場合は、記号の直前に半角「\」記号を使ってエスケープする以下の書き方をご使用下さい。
- 開き角括弧 [ を表示するには、本文中に \[ と書きます。
- 閉じ角括弧 ] を表示するには、本文中に \] と書きます。
- コロン記号 : を表示するには、本文中に \: と書きます。(※)
これらの記法を使う限りは、は、いくらでも装飾範囲内に含めて問題ありません。
※コロン記号「:」は、そのまま「:」だけを書いて問題ないケースも多々あります。文法的に、色指定やオプション指定記法だと解釈されてしまう場合にだけ、「\:」のように書く必要があります。
角括弧は数値文字参照で [ や ] のようにも表記可能ですから、この方法で記述することもできます。
▼そのまま書いても問題ないケース
角括弧の「開き」と「閉じ」の個数が1対1で正しく対応している場合は、上記のようなエスケープ記法を使わずに、そのまま問題なく記述できます。
例えば、 [B:この範囲が[太字]になります。] のような記述なら問題なく装飾されます。
もちろん入れ子にしても大丈夫なので [B:この[U:範囲が[太字[＆]下線]になり]ます。] のような記述でも大丈夫です。これらの場合は、装飾範囲に含まれる角括弧の開き「 [ 」と閉じ「 ] 」の個数が一致しているからです。
▼class名を自由に指定できる装飾記法
やや上級者向け機能として、本文中に直接class名を指定できる装飾記法も用意してあります。
記述方法と出力例：
例えば、以下のⒶように記述すると、Ⓑのように出力されます。
- Ⓐ自由装飾記法： [F:sakura:あいうえお]
- Ⓑ出力されるHTML： <span class="deco-sakura">あいうえお</span>
「あいうえお」という文字列が、「deco-sakura」というclass名でマークアップされます。（使われるclass名は「sakura」ではなく「deco-sakura」になる点にご注意下さい。）
投稿時に自由なclass名を指定できるので、望みの装飾をCSS側に用意しておけば、装飾の数に制限なくいくらでも装飾可能です。事前に自力でCSSを書いておく必要がありますが、デフォルトの装飾種類を超えていくらでも装飾パターンを用意しておけます。
この自由装飾機能もボタンクリックで挿入可能ですが、そのボタンはデフォルト設定では非表示になっています（CSSを自力で事前に書いておかない限り意味のない機能だからです）。使う場合には、管理画面の「設定」→「投稿欄の表示」→【装飾ボタンの表示設定】で、表示する設定に変えて下さい。なお、ボタンを表示しない場合でも、自力で記述すれば使えます。
※装飾種類の識別記号が「F」なのは、「Free」の意味です。
制約：
投稿者が完全に自由なclass名を書けてしまうと、ページの表示が崩れるようなclass名が使われてしまったときに困りますので、それを避けるために実際に出力されるclass名には、必ず「deco-」という接頭辞が付く仕様になっています。
つまり、投稿時に「tomoyo」というclass名を指定したら、実際には「deco-tomoyo」というclass名としてspan要素に出力されるということです。この方法なら、既存のページ構造に使われているようなclass名を誤って（もしくは悪戯で）指定してしまうことを防げます。（※偶然、deco-XXXというclass名を使ってページを作っていた場合だけは例外ですが。^^;）
class名には、英数字（英大文字・英小文字・数字）と、ハイフン「-」記号と、アンダーバー「_」記号が使えます。
文字装飾関連の各種記法は、ボタンクリックで簡単に入力する機能があります。
標準では投稿欄下部に見える「装飾」ボタンを押すと下図のように展開されます。
設定（下図紫色矢印／詳しくは後述）を変更すれば、常時展開しておくことも、非表示にすることもできます。
また、どの装飾ボタンを表示してどの装飾ボタンを表示しないかも個別に設定できます（後述）。
▼使い方：
装飾したい範囲を選択してからボタンを押して下さい。
- 「文字色」(色)・「背景色」(背)ボタンは、押すと色名を入力するダイアログが表示されます。
- 「ルビ」(ル)は、押すとルビを入力するダイアログが表示されます。
- 「自由装飾」(○)は、押すとclass名を入力するダイアログが表示されます。（※デフォルトではこのボタンは非表示に設定されています。）
- それ以外のボタンは、押すと選択範囲を装飾する記法が直接挿入されます。
色名の入力では、入力内容が本当に正しい色名（＝HTML・CSSで有効な色として認識される文字列）かどうかはチェックしていません。
▼設定箇所：
管理画面の[設定]→[投稿欄の表示]→【装飾ボタンの表示設定】で表示形態を選択できます。
ここで表示されるボタンは13種類(※)ありますが、利用形態によってはすべてが必要というわけではないでしょう。不要なボタンは非表示にもできます。
また、一般編集欄（＝スケジュール詳細に書くための欄）か簡易編集欄（＝スケジュール概要に書くための欄）かで表示ボタンの種類を分けることもできます。
なお、ボタンのラベルもここから変更できます。
※自由装飾ボタン（デフォルトのラベルは「○」）はデフォルトでは非表示に設定されています。この機能は、あらかじめ自力でclass名をCSS側に記述しておかないと役に立たない機能だからです。
文字装飾機能が不要な場合
本文中の文字装飾記法を有効にするかどうかは、設定から選択できます。(標準では有効にする設定になっています。)
文字装飾機能が不要であれば、無効に設定しておけば、一切装飾されません。
文字装飾記法を無効に設定すると、「続きを読む」ボタン挿入機能も無効になります。
続きを読む(一部を隠す)機能の仕様
本文内に「続きを読む」というボタンを表示させ、そのボタンが押されない限り続きが表示されないようにする機能があります。
※JavaScriptが動作しない環境では「続きを読む」ボタンは表示されず、最初から全文が見えます。
※RSSフィードには、隠された範囲は出力されません。
標準スキンでは「ボタン」に見えますが、それはCSSで装飾されているからボタンに見えるだけです。そのため、（自作スキンなどで）「続きを読む」用の装飾を用意していなければ、ボタンではなくテキストリンクの形状で表示されます。
▼有効/無効の設定
この機能は、管理画面の[設定]→[ページの表示]→【投稿本文の表示／テキスト】→[文章の表示]区画の『指定範囲だけを隠す装飾機能の使用を許可』項目から有効/無効を設定可能です。
標準では ON なので、不要な場合にはOFFにして下さい。
▼指定の範囲だけを隠す「続きを読む」ボタンの書き方
指定範囲だけを隠した上で「続きを読む」ボタンを表示させる記法があります。
本文中に [H:あいうえお] のように書くと、（その範囲が動的に隠すHTML＋JavaScriptでマークアップされて）「あいうえお」の文字が隠されます。
- 最初の
[H: と最後の ] は、すべて半角で記述する必要があります。「H」は大文字のみ認識します。(H＝Hideの意味です。)
- 1つの投稿文中で何度でも使えます。
この記法は、手動で入力するほか、投稿欄下部に表示される「装飾」→「隠す」ボタンでも挿入できます。（ボタンが表示される設定にしている場合のみ）
スケジュール概要でも使用可能ですが、スケジュール概要で使うとカレンダー上の表示が崩れる可能性がある点にご注意下さい。スケジュール概要では使わずに、スケジュール詳細だけで使うことをお勧め致します。
▼「続きを読む」や「畳む」ボタンラベルの設定
「続きを読む」ボタンや「畳む」ボタンのラベルや動作に関しては、管理画面の[設定]→[ページの表示]→【投稿本文の表示／テキスト】区画内の下図の欄から設定できます。
「続きを読む」や「畳む」ボタンのラベルは、上図のテキスト入力欄に入力することで自由に変更できます。
読後に畳むボタンを表示しない設定にした場合は、「畳む」ボタンはどこにも表示されなくなります。その場合、一度展開した空間は(ページを再読込しない限り)閉じられなくなります。
リンクの書き方
さんごよみでは、本文中にURLを書けばそのURLがそのままリンクになりますが、それ以外にも任意のテキストリンクや画像リンクを書くことができます。また、リンク先をどのように表示するのか等の設定もできます。
カレンダーの内側に記載する場合、URLをそのまま書くと長くなりすぎるでしょうから、何らかのラベルを指定したテキストリンクの形で掲載する方が望ましいでしょう。
▼リンク出力に関する詳細設定
リンクの出力に関する各種設定は、管理画面の［設定］→［ページの表示］→【投稿本文の表示／URL処理】区画にあります。
図の黄色矢印の先に見える「URLを自動でリンクにする」という項目がONの場合にだけ、さんごよみ上でリンクが作れます。
この項目をOFFにすると、URLが自動でリンクにならないだけでなく、すべてのテキストリンクや各種外部サービスの埋め込み機能（例えばツイートの埋め込み等）も無効になりますのでご注意下さい。
標準状態では、図の水色矢印の先に見える「リンク先は同一ウインドウ(タブ)で開く」項目が選択されています。ここを、他の項目に切り替えると、リンク先を新規ウインドウ（別タブ）にしたり、フレームを解除したりできます。
※ここで「リンク先は新規ウインドウ(タブ)で開く」項目を選択すると、投稿本文中に含まれるすべてのリンクがその動作に変わります。
しかし、後述のオプション記法を使えば、設定は「リンク先は同一ウインドウ(タブ)で開く」項目のままでも、リンク1つ1つに対して（その都度個別に）新規ウインドウで開くよう指示を加えることもできます。
この設定画面には、長すぎるURLの表示を指定文字数で切り、それ以降を「...」で省略する設定項目があります（標準設定では40文字より後が省略されます）。この設定をOFFにすることはできませんが、自動省略させたくない場合は「1000」などの充分大きな数を指定すれば良いでしょう。
なお、この指定はあくまでも「URLがそのままリンクになる場合」だけに適用される設定であり、リンクラベルが指定されたテキストリンク等には適用されません。（リンクラベルが指定された場合のテキストリンクには、文字数の上限設定はありません。）
▼リンクになる書き方のバリエーション
URLをそのまま書く以外に、下記に示すバリエーションがあります。(※Ⓑの書式は、Ver2.0.0以降のみで使用可能)
- Ⓐ 任意のURLへリンクする記法1：
[ラベル]URL
- 記述例：
[にししふぁくとりー]https://www.nishishi.com/
- 表示例：
にししふぁくとりー
- Ⓑ 任意のURLへリンクする記法2：
[ラベル](URL) ※URLを半角丸括弧で囲んでいます。
- 記述例：
[にししふぁくとりー](https://www.nishishi.com/)
- 表示例：
にししふぁくとりー
- Ⓑ 相対パスでリンクする例
[ラベル](../page.html) ※リンク先は「../」か「./」のどちらかで始まる必要があります。
- Ⓑ 絶対パスでリンクする例
[ラベル](/sample/yomple.html) ※リンク先は必ず「/」記号で始まる必要があります。
- Ⓑ メールにリンクする例
[ラベル](mailto:メールアドレス)
- Ⓑ 電話番号にリンクする例
[ラベル](tel:電話番号)
- 上図の緑色矢印の先に見える設定項目『URLの直前に[ラベル]があればその文字列でリンクにする』にチェックが入っていれば、Ⓐの書式でテキストリンクを作れます。
- 上図の紫色矢印の先に見える設定項目『URLを丸括弧で囲む [ラベル](URL) 記法も使用可能にする』にチェックが入っていれば、Ⓑの書式でテキストリンクを作れます。
リンク先URLのURLそのものの中に丸括弧記号が含まれる場合は、Ⓐの記法を使う必要があります。
Ⓑの記法では、URLの中に丸括弧を含めることはできません。
相対パスの記法を使って、さんごよみ設置ディレクトリに含まれるサブディレクトリ以下のファイルへリンクしたい場合は、./subdir/file.png などのように、リンク先の先頭に ./ の2文字を含めて下さい。
相対パス記法として認識されるには、リンク先が ../ か ./ のどちらかで始まっている必要があります。
出力されるリンクには、装飾を適用しやすいようにclass名が付加されています。
※実際にどのようなHTMLソースとして出力されるのかは、てがろぐ側のヘルプドキュメントのカスタマイズ方法ページにある「リンクの装飾方法」項目もご参照下さい。
▼リンクラベルに加えられるオプション
リンクラベルには、[リンクラベル:オプション]https://～/ のように半角コロン記号で区切ることで下記のような3種類のオプションを加えられます。(※Ver 2.0.0以降)
- 新しいウインドウ（別タブ）で開くリンクを作る「 :NEW 」
➡ リンクラベルに :NEW を加えて、[リンクラベル:NEW]https://任意のURL のように記述すると、
リンクに target="_blank" が付加されて、リンク先を新しいウインドウ（別タブ）で開くリンクになります。
あらゆるリンクすべてを新規ウインドウ（別タブ）で開くようにしたい場合は、この記法を使うよりも、設定画面にある項目「リンク先は新規ウインドウ(タブ)で開く」を選択しておく方が楽です。
詳しい位置は、先の図に見える水色矢印の先をご覧下さい。
なお、ここで「リンク先はフレームを解除して開く」項目が選択されている場合でも、:NEW オプションを加えたリンクは、新規ウインドウで開きます。
- リンクに rel="nofollow" 属性を加える「 :NF 」
➡ リンクラベルに :NF を加えて、[リンクラベル:NF]https://任意のURL のように記述すると、
リンクに rel="nofollow" が付加されます。
あらゆるリンクすべてに rel="nofollow" を付加したい場合は、この記法を使うよりも、設定画面にある項目「自動リンクには rel="nofollow" 属性を付加する」をONにしておく方が楽です。
- リンクに任意のclass属性値を加える「 :CL(英数字) 」
➡ リンクラベルに例えば :CL(sakura) を加えて、[リンクラベル:CL(sakura)]https://任意のURL のように記述すると、
リンクに class="uc-sakura" のように「uc-指定英数字」のclass属性値が追加出力されます。
※指定されたclass名には、必ず先頭に「uc-」の3文字が付加されて出力されます。ucは「User Class」の略です。
※リンクを作るa要素には、デフォルトで固定的に出力されるclass属性値があります。上記の記法で指定されたclass名は、それらに追加される形で出力されます。
これらのオプションは複数の同時指定が可能です。
例えば、[リンクラベル:NEW:NF:CL(tomoyo)]https://任意のURL などのように続けて記述できます。
▼画像を使って任意のリンク先にリンクする書き方
リンクラベルにはテキストだけでなく画像やカスタム絵文字を含めることもできます。
それぞれ特別な書き方があるわけではなく、単にリンクラベルの中に「画像を挿入する記述」を含めたり「カスタム絵文字を挿入する記述」を含めたりすれば良いだけです。
-
画像を使って任意のURLにリンクする書き方
➡ 記述例：[[PICT:sakura.png]]https://www.nishishi.com/
-
リンクテキストの中にカスタム絵文字を含ませる書き方例
➡ 記述例：[たこ焼き[:takoyaki:]食べたい]https://www.nishishi.com/
画像表示時に原寸画像へのリンクにする設定にしている場合でも、リンクラベルの中に画像挿入記法を書いた場合は、（原寸画像へのリンクにはならず）リンク記法で指定したURLへのリンクになります。
