本文装飾機能解説

トップ > ダウンロード > Web Diary Professional > Web Diary Professional 機能解説 > 本文装飾機能解説

本文装飾機能解説

段落

概要

文章を空行で囲うと段落に変換します。段落は p でマークアップされます。
管理者ページの「環境設定 → 投稿記事の表示設定 → 空行を段落に変換」を「変換しない」に設定すると、段落記法はOFFになります。

この記法は、本文装飾機能がOFFになっていても常に有効です。

記述例

文章を空行で囲うと段落に変換します。
空行が無ければ、普通の改行になります。

文章を空行で囲うと段落に変換します。

結果

<p>文章を空行で囲うと段落に変換します。<br />
空行が無ければ、普通の改行になります。</p>
<p>文章を空行で囲うと段落に変換します。</p>

見出し

概要

行頭に * があれば見出しに変換します。見出し文字列は h4 でマークアップされます。
また、行頭に ** があれば h5 で、*** があれば h6 でマークアップされます。

記述例

*ここは見出しです

この部分は通常の文章です。

**ここは見出しです

この部分は通常の文章です。

***ここは見出しです

この部分は通常の文章です。

結果

<h4>ここは見出しです</h4>
<p>この部分は通常の文章です。</p>
<h5>ここは見出しです</h5>
<p>この部分は通常の文章です。</p>
<h6>ここは見出しです</h6>
<p>この部分は通常の文章です。</p>

箇条書き

概要

行頭に - があれば箇条書きに変換します。箇条書き文字列は ul と li でマークアップされます。

記述例

この部分は通常の文章です。

-ここは箇条書きになります。
-ここも箇条書きになります。

この部分は通常の文章です。

結果

<p>この部分は通常の文章です。</p>
<ul>
  <li>ここは箇条書きになります。</li>
  <li>ここも箇条書きになります。</li>
</ul>
<p>この部分は通常の文章です。</p>

引用

概要

文章を空行ではなく >> だけの行と << だけの行で囲うと引用に変換します。引用文字列は blockquote でマークアップされます。

記述例

この部分は通常の文章です。
>>
ここは引用になります。
<<
この部分は通常の文章です。

結果

<p>この部分は通常の文章です。</p>
<blockquote>
  <p>ここは引用になります。</p>
</blockquote>
<p>この部分は通常の文章です。</p>

表組み

概要

文章を | で区切ると、表組みに変換します。先頭に * があれば項目名に変換します。表組みは table、tr、th、td でマークアップされます。

記述例

この部分は通常の文章です。

|*見出し１|*見出し２|
|表組み|サンプル|

この部分は通常の文章です。

結果

<p>この部分は通常の文章です。</p>
<table>
  <tr>
    <th>見出し１</th><th>見出し２</th>
    <td>表組み</td><td>サンプル</td>
  </tr>
</table>
<p>この部分は通常の文章です。</p>

定義リスト

概要

: ではじまり : で区切ると、定義リストに変換します。定義リストは dl、dt、dd でマークアップされます。

記述例

この部分は通常の文章です。

:定義リスト１:定義内容１
:定義リスト２:定義内容２

この部分は通常の文章です。

結果

<p>この部分は通常の文章です。</p>
<dl>
  <dt>定義リスト１</dt><dd>定義内容１</dd>
  <dt>定義リスト２</dt><dd>定義内容２</dd>
</dl>
<p>この部分は通常の文章です。</p>

整形テキスト

概要

文章を空行ではなく >| だけの行と |< だけの行で囲うと整形テキストに変換します。整形テキストは pre でマークアップされます。

記述例

この部分は通常の文章です。
>|
ここは整形テキストになります。
|<
この部分は通常の文章です。

結果

<p>この部分は通常の文章です。</p>
<pre>ここは整形テキストになります。</pre>
<p>この部分は通常の文章です。</p>

整形コード

概要

文章を空行ではなく >|| だけの行と ||< だけの行で囲うと整形コードに変換します。整形コード内のHTMLはすべて無効になるため、プログラムの掲載などに便利です。整形テキストは pre と code でマークアップされます。

記述例

この部分は通常の文章です。
>||
<html>
<body><p>HTMLやプログラムを掲載することができます。</p></body>
</html>
||<
この部分は通常の文章です。

結果

<p>この部分は通常の文章です。</p>
<pre><code>&lt;html&gt;
&lt;body&gt;&lt;p&gt;HTMLやプログラムを掲載することができます。&lt;/p&gt;&lt;/body&gt;
&lt;/html&gt;</code></pre>
<p>この部分は通常の文章です。</p>

アスキーアート

概要

文章を空行ではなく >|aa| だけの行と ||< だけの行で囲うとアスキーアートの表示に適したスタイルを適用します。アスキーアート内のHTMLはすべて無効になります。アスキーアートは、フォントなどの指定がある span でマークアップされます。

記述例

アスキーアートは涼宮ハルヒの憂鬱 暫定まとめサイトから引用。深い意味は無い。

この部分は通常の文章です。
>|aa|
　-､
（　 ヽ
　ヽ,_　＼
　/ﾞi､｀ﾞ""ﾞヽ　 　　　　　　　　 -‐ '´￣￣｀ヽ､
/　　 ｀'i　　 ﾞ､　　　　　　　／　／" ｀ヽ ヽ　　＼
l,　　_／ヽ　 .入　 　　　　//, '/　　　　 ヽﾊ 　､　ヽ
　ヾ､　　 ／　.ﾉ　　 　　 〃 {_{＼　　　 ／ﾘ| ｌ │ i|
　　 ｀ｰ'く　／.＼. 　 　　ﾚ!小ｌ●　　　 ● 从　|、i|
　　　 　 　　　＼＼＿.　ヽ|l⊃　､_,､_,　⊂⊃　 |ﾉ│
　　 　 　　 　　　 ( __ノヽ__|ﾍ　　 ゝ._）　 　j /⌒i　!
.　 　　 　　　　 　　 ＼＼::|　l＞,､ __,　イァ/　 / │
　 　　　 　　　 　　　 /＼＼ |　ヾ:::|三/::{ﾍ､__∧. |
.　　　　　 　　　 　　 ｀ヽ<＼＼　 ヾ∨:::/ヾ:::彡'　|
||<
この部分は通常の文章です。この部分は通常の文章です。l

結果

<p>この部分は通常の文章です。</p>
<p><span style="font-size:12pt;line-height:18px;font-family:'Mona','IPA MONAPGOTHIC','MS PGothic','ＭＳ Ｐゴシック',sans-serif;">　-､<br />
（　 ヽ<br />
　ヽ,_　＼<br />
　/ﾞi､｀ﾞ""ﾞヽ　 　　　　　　　　 -‐ '´￣￣｀ヽ､<br />
/　　 ｀'i　　 ﾞ､　　　　　　　／　／" ｀ヽ ヽ　　＼<br />
l,　　_／ヽ　 .入　 　　　　//, '/　　　　 ヽﾊ 　､　ヽ<br />
　ヾ､　　 ／　.ﾉ　　 　　 〃 {_{＼　　　 ／ﾘ| ｌ │ i|<br />
　　 ｀ｰ'く　／.＼. 　 　　ﾚ!小ｌ●　　　 ● 从　|、i|<br />
　　　 　 　　　＼＼＿.　ヽ|l⊃　､_,､_,　⊂⊃　 |ﾉ│<br />
　　 　 　　 　　　 ( __ノヽ__|ﾍ　　 ゝ._）　 　j /⌒i　!<br />
.　 　　 　　　　 　　 ＼＼::|　l＞,､ __,　イァ/　 / │<br />
　 　　　 　　　 　　　 /＼＼ |　ヾ:::|三/::{ﾍ､__∧. |<br />
.　　　　　 　　　 　　 ｀ヽ<＼＼　 ヾ∨:::/ヾ:::彡'　|<br />
</span></p>
<p>この部分は通常の文章です。</p>

ブラウザでは以下のように表示されます

この部分は通常の文章です。

　-､
（　 ヽ
　ヽ,_　＼
　/ﾞi､｀ﾞ""ﾞヽ　 　　　　　　　　 -‐ '´￣￣｀ヽ､
/　　 ｀'i　　 ﾞ､　　　　　　　／　／" ｀ヽ ヽ　　＼
l,　　_／ヽ　 .入　 　　　　//, '/　　　　 ヽﾊ 　､　ヽ
　ヾ､　　 ／　.ﾉ　　 　　 〃 {_{＼　　　 ／ﾘ| ｌ │ i|
　　 ｀ｰ'く　／.＼. 　 　　ﾚ!小ｌ●　　　 ● 从　|、i|
　　　 　 　　　＼＼＿.　ヽ|l⊃　､_,､_,　⊂⊃　 |ﾉ│
　　 　 　　 　　　 ( __ノヽ__|ﾍ　　 ゝ._）　 　j /⌒i　!
.　 　　 　　　　 　　 ＼＼::|　l＞,､ __,　イァ/　 / │
　 　　　 　　　 　　　 /＼＼ |　ヾ:::|三/::{ﾍ､__∧. |
.　　　　　 　　　 　　 ｀ヽ<＼＼　 ヾ∨:::/ヾ:::彡'　|

この部分は通常の文章です。

脚注

概要

文章を (( と )) で囲うと、脚注に変換します。脚注部分は文章の最後に一覧表示されます。
脚注ではなく普通の2重カッコを使用したい場合、)(( と ))( で囲います。

記述例

脚注((書物などの本文の下につけた注釈。))はこのように表示されます。

結果

<p>脚注*1はこのように表示されます。</p>
<p>*1：書物などの本文の下につけた注釈。</p>

続きを読む

概要

文中に ----- と記述すると 続きを読む のリンクになります。
-----ネタバレ----- と記述すると、リンクのテキストが ネタバレ になります。

この記法は、本文装飾機能がOFFになっていても常に有効です。

記述例

この部分は通常の文章です。
-----
この部分は非表示になります。

結果

この部分は通常の文章です。
続きを読む

記法を部分的に無効化する

概要

* や - を行頭に使用したい場合、半角スペースに続けて入力します。 これは上で紹介した他の文字についても同様です。

記述例

*ここは見出しです

 *この部分は通常の文章です。

結果

<h4>ここは見出しです</h4>
<p> *この部分は通常の文章です。</p>

記法の組み合わせ

概要

「段落」「見出し」「箇条書き」などを文中に使用する場合、前後は空行にします。
「引用」「整形テキスト」「整形コード」の場合は例外で、前後の行は >> と << などの記法を記述します。

記述例

*見出し

-箇条書き１
-箇条書き２
>>
引用文章。
<<
|*見出し１|*見出し２|
|表組み|サンプル|

:定義リスト１:定義内容１
:定義リスト２:定義内容２

脚注((書物などの本文の下につけた注釈。))はこのように表示されます。

結果

<h4>見出し</h4>
<ul>
  <li>箇条書き１</li>
  <li>箇条書き２</li>
</ul>
<blockquote>
  <p>引用文章。</p>
</blockquote>
<table>
  <tr>
    <th>見出し１</th><th>見出し２</th>
    <td>表組み</td><td>サンプル</td>
  </tr>
</table>
<dl>
  <dt>定義リスト１</dt><dd>定義内容１</dd>
  <dt>定義リスト２</dt><dd>定義内容２</dd>
</dl>
<p>脚注*1はこのように表示されます。</p>
<p>*1：書物などの本文の下につけた注釈。</p>