BBcodeについて

BBcodeについて

投稿記事by admin » 2014年6月17日(火) 5:14 pm

BBCode(Bulletin Board Code)とは、phpBB などの電子掲示板で使用されるマークアップ言語で、キーワードを角括弧で囲んだタグによってマークアップされた構文が、HTML に変換され、ブラウザに表示されます。デフォルトでいくつかのタグが用意されていますが、このページでは、それ以外の様々なタグを追加する方法を解説します。


[note]1 : BBCode 追加のための予備知識

BBCode を追加する方法と追加する際の注意点。[/note]

[note][note]1.1 : 追加方法


BBCode を追加するには、管理画面にログイン後、
投稿 → メッセージ → BBcode


と進み、[BBCode の追加]をクリックし、BBCode 作成、HTML 表現、ヘルプライン、設定に入力を行います。

BBCode を作成するとき、可変部分に以下のようなトークンを使います。
{TEXT}:あらゆるテキスト文字。
{SIMPLETEXT} :半角アルファベット(A-Z)、半角数字(0-9)、半角スペース、コンマ(,)、マイナス(-)、プラス(+)、ハイフン(-)、アンダーライン(_)
{INTTEXT}:ユニコード文字、半角数字(0-9)、半角スペース、コンマ(,)、マイナス(-)、プラス(+)、ハイフン(-)、アンダーライン(_)、ドット(.)、半角スペース( )

"INTTEXT"は、phpBB 3.0.7 から導入されたトークンで、たぶん"International Text"の略なのでしょう。このトークンを用いれば、非アスキー文字をも含むユニコード文字(Unicode letter characters)の入力が可能なので、日本語のユーザにとっては便利です。

1.2 : トークン選択時の注意

HTMLタグ 内の属性指定に{TEXT} トークンを使用すると、クロス・サイト・スクリプティング攻撃を受ける可能性があり、セキュリティ上非常に危険です。例えば、CodeCogs のサービスを使って、数式を表示しようとして、BBCode 作成で
[tex]{TEXT}[/tex]

HTML 表現で
< img src= "http://latex.codecogs.com/png.latex?{TEXT}"/ >

という設定を行ったとします。すると、外来者が掲示板で

[tex]x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}" onMouse Over="window.location('悪意のあるサイト')[/tex]

という入力を行うことで、

<img src="http://latex.codecogs.com/png.latex?x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}" onM ouseOver="window.location('悪意のあるサイト')" />

という危険なスクリプトを作ることができます。これを防ぐには、{TEXT} の代わりに、{SIMPLETEXT} や {INTTEXT} を使用するとよいでしょう。

もとより{SIMPLETEXT} や {INTTEXT} では数式の入力はできません。投稿に数式を含めたい時は、Online LaTeX Equation Editor で数式画像を作成し、それを添付する形で行いましょう。

本ページでは、以下、私のサイトで採用している BBCode の追加方法を解説します。投稿時における具体的な BBCode の使い方に関しては、システム論フォーラムにある BBCode の使い方を参照してください。[/note][/note]
2 : レイアウトの強化

文が長くなる時は、小見出しを付けて整理するとか、水平線で内容を区切ったりする必要が出てきます。また、画像とそのキャプションなど、センタリングが必要となる時もあります。これらのための BBCode を追加します。

[note]2.1 : 見出し

各投稿の見出しのレベルが<h3>なので、投稿内で小見出しを付ける場合は、<h4>タグをつける必要があります。

BBCode 作成:
コード: 全て選択
[heading]{TEXT}[/heading]


HTML 表現:
<h4>{TEXT}</h4>

2.2 : 水平線

濫用は避けるべきですが、気軽に内容を区切る時に使えます。コード間には何も入力する必要はありません。

BBCode 作成:
コード: 全て選択
[hr][/hr]


HTML 表現:
<hr />

2.3 : センタリング

画像とそのキャプションは、センタリングした方が見栄えがします。

BBCode 作成:
コード: 全て選択
[center]{TEXT}[/center]

HTML 表現:
<div style="text-align: center;">{TEXT}</div>

2.4 : インデント

注釈、定理、公式の提示など、地の文との区別を明確にするために、左のパディングを大きく取ります。

BBCode 作成:
コード: 全て選択
[note]{TEXT}[/note]

HTML 表現:
<div style="padding-left: 20px;">{TEXT}</div>[/note]

3 : 上付き文字と下付き文字

上付き文字と下付き文字は、数式や化学式を書くときに必要です。

[note]3.1 : 上付き文字

BBCode 作成:
コード: 全て選択
[super]{TEXT}[/super]

HTML 表現:
<span style="vertical-align: super;">{TEXT}</span>

3.2 : 下付き文字

BBCode 作成:
コード: 全て選択
[sub]{TEXT}[/sub]

HTML 表現:
<span style="vertical-align: sub;">{TEXT}</span>[/note]

4 : 引用と出所

ブロック引用のためのタグ“blockquote”はデフォルトでありますが、インライン引用のためのタグ“<q>”はないので、新しく付け加えます。また引用せずに情報の出所を示すためのタグも追加しましょう。これらは、Firefox Make Link で単一のパターンとして登録しておきながら、CSS を用いて異なる見栄えを与えることで、日本語と英語とでは異なる記号で括ることができます。

[note]4.1 : インライン引用

BBCode 作成:
[q="{TEXT1}"]{TEXT2}[/q]



HTML 表現:
<q>{TEXT2}</q><span class="source">Source: {TEXT1}</span>



4.2 : Youtube 引用

BBCode 作成:
[youtube]{SIMPLETEXT}[/youtube]



HTML 表現:
<div style="text-align: center;"><object type="application/x-shockwave-flash" style="width:420px; height:315px;" data="http://www.youtube.com/v/{SIMPLETEXT}"><param name="movie" value="http://www.youtube.com/v/{SIMPLETEXT}" /></object></div>



なお、{SIMPLETEXT} には、URL に表れる以下の Youtube 動画のストリング(英数字からなる ID 番号)をペイストします。
http://www.youtube.com/watch?v=ストリング



4.3 : 情報源表示

BBCode 作成:
Source: {TEXT}



HTML 表現:
<span class="source">Source: {TEXT}</span>[/note]

5 : 任意行数の表
以下のような表を作るには、
[table-head-first]table-head-first[/table-head-first][table]table[/table][table]table[/table][table-body-first]table-body-first[/table-body-first][table]table[/table][table]table[/table][table-body-first]table-body-first[/table-body-first][table]table[/table][table-body-last]table-body-last[/table-body-last]
以下のようなコードを作成すればよい。 ただし、1行1列目に[table-head-first]タグを使い、2行目以降の1列目に[table-body-first]タグを使い、最終行最終列に[table-body-last]タグを使い、それ以外には[table]タグを使うことで、任意の行列数を持った表を作ることができます。なお、コード間で改行すると、改行の数に応じて表全体が下に下がってしまうので、途中で改行しないでください。
コード: 全て選択
<table class="standard"><tr class="thead"><th>table-head-first</th>
<td>table</td>
<td>table</td>
</tr><tr class="tbody"><th>table-body-first</th>
<td>table</td>
<td>table</td>
</tr><tr class="tbody"><th>table-body-first</th>
<td>table</td>
<td>table-body-last</td></tr></table>


だから、以下の四種類の BBCode を作れば、任意の行数の表を作ることができるということになります。

5.1 : 先頭行先頭列

BBCode 作成:
コード: 全て選択
[table-head-first]{TEXT}[/table-head-first]

HTML 表現:
<table class="standard"><tr class="thead"><th>{TEXT}</th>

5.2 : 一般行先頭列

BBCode 作成:
コード: 全て選択
[table-body-first]{TEXT}[/table-body-first]

HTML 表現:
</tr><tr class="tbody"><th>{TEXT}</th>

5.3 : 一般行一般列

BBCode 作成:
コード: 全て選択
[table]{TEXT}[/table]

HTML 表現:
<td>{TEXT}</td>

5.4 : 末端行末端列

BBCode 作成:
コード: 全て選択
[table-body-last]{TEXT}[/table-body-last]

HTML 表現:
<td>{TEXT}</td></tr></table>
アバター
admin
管理人
 
記事: 81
登録日時: 2014年3月26日(水) 3:44 pm

Return to phpBB3

オンラインデータ

このフォーラムを閲覧中のユーザー: なし & ゲスト[1人]

梓文社-中国語教室 〒721-0973 福山市南蔵王町6-25-4
cron