BBCode ガイド

はじめに

BBCode とは?
BBCode はユーザーの利便性・システムの安全性のためにシステム側が用意した簡単なマークアップ方法です。BBCode を使用できるか否かは掲示板の設定によります。BBCode を使用できる場合でも投稿時に投稿画面で BBCode を無効にできます。 BBCode はマークアップ言語である点で HTML と似ていますが、タグは < > ではなく角カッコ [ ] で括られます。 BBCode を使用することによって文章の見栄えをコントロールしたり画像やリンクを文章に挿入したりできるようになります。掲示板のスタイルによりますが、テキストエリアの真上に BBCode ボタンがずらりと並んでいるはずです。これらのボタンをクリックすれば簡単に BBCode をテキストエリア内に挿入できます。 BBCode をさらに詳しく知るには以下のガイドをご覧ください。
ページトップ

テキストの書式

ボールド(太字)、イタリック(斜体)、アンダーライン(下線)の作成方法
文字のスタイルを変更する BBCode です。スタイルの変更について:
  • ボールド(太字)で表すには [b][/b] で囲みます。

    [b]Hello[/b]

    Hello となります。
  • アンダーライン(下線)を引くには [u][/u] で囲みます。

    [u]Good Morning[/u]

    Good Morning となります。
  • イタリック(斜体)で表すには [i][/i] で囲みます。

    This is [i]Great![/i]

    は This is Great! となります。
ページトップ
文字の色と大きさを変える方法
文字の色や大きさを変えるには以下のタグを使用します。どのように表示されるかはブラウザによって異なる場合がある点にご注意ください:
  • 文字の色を変えるには [color=][/color] で囲みます。色の特定は red, blue, yellow といった単語または十六進数 (例: #FFFFFF, #000000) で指定することができます:

    [color=red]Hello![/color]

    または

    [color=#FF0000]Hello![/color]

    Hello! となります。
  • 文字の大きさを変えるには [size=][/size] で囲みます。掲示板のスタイルにもよりますが、お勧めの形式はテキストサイズを元の大きさのパーセント数値で指定する方法です。数値は 20 から 200 まで指定可能です:

    [size=30]SMALL[/size]

    SMALL となります。

    同様に

    [size=200]HUGE![/size]

    HUGE! となります。
ページトップ
タグを組み合わせることはできますか?
もちろんできます:

[size=150][color=red][b]LOOK AT ME![/b][/color][/size]

LOOK AT ME! となります。

ただしあまりにもたくさんのタグを組み合わせることはお勧めしません。またタグの配置は正しく行ってください。次の例は間違ったタグの配置です :

[b][u]This is wrong[/b][/u]
ページトップ

引用と固定幅のテキスト表示

文章を引用付きで返信する方法
文章を引用するには2つの方法があります。
  • 引用したい文章を [quote=""][/quote] で囲みます。"" の中には引用に関する情報 (引用文章を書いた人物、引用した書籍など) を入力します。例えば Mr. Blobby が書いたテキストの一部を引用する場合、このように入力します:

    [quote="Mr. Blobby"]Mr. Blobby の文章[/quote]

    上記のようにすることで "Mr. Blobby さんが書きました:" が自動的に追加されます。名前を引用符 "" で必ず囲んでください。省略することはできません。
  • 2つ目の方法はただ単に文章を [quote][/quote] で囲みます。この場合、引用した文章は誰によるものなのかは判りません。
ページトップ
コードまたは整形済みデータの表示
プログラムのコード や タブ・スペースなどの固定幅を使用した整形済みデータ を表示するには、そのテキストを [code][/code] で囲みます:

[code]echo "これはプログラムのコードです";[/code]

[code][/code] で囲まれた部分が固定幅で表示されます。 [code=php][/code] とすると if(){} や while(){} などの PHP構文 をハイライト表示することができ、PHPコード が読みやすくなるのでお勧めです。
ページトップ

リストの作成

番号なしリストの作成方法
BBCode は 番号なしリスト と 番号付きリスト をサポートしています。BBCode のリストは HTML の <li> と同じように機能します。番号なしリストは各項目の先頭に丸い点が置かれます。番号なしリストを作成するには [list][/list] タグの中で [*] を使って各項目を指定します。例えば自分の好きな色をリスト表示するには次のようにします:

[list]
[*]レッド
[*]ブルー
[*]イエロー
[/list]

上記のようにすると次のリストが表示されます:
  • レッド
  • ブルー
  • イエロー

以下のマークアップを使うことで、リストの先頭のマークをスタイル指定できます。 [list=disc][/list], [list=circle][/list], [list=square][/list].
ページトップ
番号付きリストの作成方法
2つ目のリストタイプは番号付きリストで、各アイテムの出力表示をコントロールできます。 番号付きリストを作成するには [list=1][/list] を用います。番号順の代わりにアルファベット順にしたい場合は [list=a][/list] を用います。番号なしリストと同様に各項目を指定するには [*] を使用します。簡単な例を紹介します:

[list=1]
[*]Go to the shops
[*]Buy a new computer
[*]Swear at computer when it crashes
[/list]

上記のようにすると次のリストが表示されます:
  1. Go to the shops
  2. Buy a new computer
  3. Swear at computer when it crashes
一方、アルファベット付きリストを表示するには、以下のように記載します:

[list=a]
[*]The first possible answer
[*]The second possible answer
[*]The third possible answer
[/list]

出力結果(アルファベット小文字)
  1. The first possible answer
  2. The second possible answer
  3. The third possible answer

[list=A]
[*]The first possible answer
[*]The second possible answer
[*]The third possible answer
[/list]

出力結果(アルファベット大文字)
  1. The first possible answer
  2. The second possible answer
  3. The third possible answer

[list=i]
[*]The first possible answer
[*]The second possible answer
[*]The third possible answer
[/list]

出力結果(ローマ数字小文字)
  1. The first possible answer
  2. The second possible answer
  3. The third possible answer

[list=I]
[*]The first possible answer
[*]The second possible answer
[*]The third possible answer
[/list]

出力結果(ローマ数字大文字)
  1. The first possible answer
  2. The second possible answer
  3. The third possible answer
ページトップ

リンクの作成

他サイトへのハイパーリンクの作成方法
BBCode は URI (Uniform Resource Indicators の略、URL と同義) を作成する方法をいくつかサポートしています。
  • リンクしたい文字を [url=][/url] で囲みます。 = の後にリンク先の URL を入力します。例えば phpBB.com へのリンクを作る場合は次のようにします:

    [url=http://www.phpbb.com/]Visit phpBB![/url]

    上記のようにすると Visit phpBB! と表示されます。リンククリック時に同じウィンドウで開くか新しいウィンドウで開くかはブラウザの設定に依存する点にご注意ください。
  • URL そのものをリンクにしたい場合は単純に次のようにします:

    [url]http://www.phpbb.com/[/url]

    上記のようにすれば http://www.phpbb.com/ と表示されます。
  • phpBB には マジックリンク と呼ばれる機能が備わっています。マジックリンクは構文的に正しい URL をタグなしで自動的にリンク化する機能です。http:// さえ不要です。例えば www.phpbb.com と入力すると自動的に www.phpbb.com と表示されます。
  • 同じ事がメールアドレスにも言えます:

    [email]no.one@domain.adr[/email]

    上記のようにすれば no.one@domain.adr と表示されます。そしてタグをつけずに no.one@domain.adr と入力するだけで自動的にリンク化されます。
URLタグ は [img][/img] (このタグについては次の項目をご参照ください)、[b][/b] など他の全ての BBCodeタグ を囲むことができます。複数のタグを使用する場合は開始タグと終了タグを正しく並べてください。次のタグの使い方は間違っている例です:

[url=http://www.google.com/][img]https://www.phpbb.com/theme/images/logos/blue/160x52.png[/url][/img]

上記の例は誤った並べ方なのでご注意ください。
ページトップ

画像の表示

他サイトの画像を表示させる方法
BBCode には他サイトの画像を記事に表示させるタグが存在します。このタグを使用する上で大切なことが2つあります。1つ目は、大抵の人は画像を大量に表示させるページを嫌がる事です。2つ目は、表示する画像がインターネット上で常に利用可能である事です(ローカルコンピュータにのみ存在する画像を記事に表示させる事はできません。もしできるとすればそのコンピュータがウェブサーバである場合だけです!)。画像を記事に表示させるには画像の URL を [img][/img] で囲みます:

[img]https://www.phpbb.com/theme/images/logos/blue/160x52.png[/img]

画像にリンクを張るには上記を [url][/url] で囲みます:

[url=https://www.phpbb.com/][img]https://www.phpbb.com/theme/images/logos/blue/160x52.png[/img][/url]



となります。
ページトップ
添付画像を表示させる方法
記事に添付(アップロード)した画像を文章の中で表示(インライン表示)させるには [attachment=][/attachment] を用います。ただし管理人がファイルの添付機能を許可していて尚且つあなたにファイル添付のパーミッションが与えられている必要があります。記事に画像ファイルを添付すると、添付画像をインライン表示するためのドロップダウンボックス(または各添付画像のインライン表示ボタン)が投稿画面内に表示されます。
ページトップ

Generating Spoilers

Adding a spoiler into a post
A basic spoiler consist in a text wrapped in [spoiler][/spoiler]. For example:

[spoiler]Details about the movie narrative[/spoiler]

This would generate:
Spoiler

Details about the movie narrative

ページトップ
Adding a spoiler with title into a post
A spoiler can optionally show a custom title, to do so the text need to be wrapped in [spoiler title=][/spoiler]. For example:

[spoiler title=Plot summary]Details about the movie narrative[/spoiler]

This would generate:
Plot summary

Details about the movie narrative

ページトップ

Embedding Media

How to embed media from other sites into posts
Users can embed content such as videos and audio from allowed sites using the [media][/media] tags, or from simply posting a supported URL in plain text. For example:

[media]

https://youtu.be/QH2-TGUlwu4

[/media]

As noted above, the link could also be used without the [media] tags.

The example shown here would generate:



The following sites are supported:
abcnews, amazon, audioboom, audiomack, bandcamp, bbcnews, bitchute, bleacherreport, break, brightcove, cbsnews, cnbc, cnn, cnnmoney, collegehumor, comedycentral, coub, dailymotion, democracynow, dumpert, eighttracks, espn, facebook, flickr, foxnews, foxsports, funnyordie, gamespot, gametrailers, getty, gfycat, gifs, gist, globalnews, gofundme, googledrive, googleplus, googlesheets, hudl, hulu, ign, imdb, imgur, indiegogo, instagram, internetarchive, izlesene, jwplatform, khl, kickstarter, libsyn, liveleak, livestream, mailru, medium, metacafe, mixcloud, mlb, mrctv, msnbc, natgeochannel, natgeovideo, nbcnews, nbcsports, nhl, npr, nytimes, orfium, pastebin, pinterest, podbean, prezi, reddit, rutube, scribd, sendvid, slideshare, soundcloud, sportsnet, spotify, steamstore, stitcher, strawpoll, streamable, streamja, teamcoco, ted, telegram, theatlantic, theguardian, theonion, tiktok, tmz, traileraddict, tumblr, twentyfoursevensports, twitch, twitter, ustream, vbox7, veoh, vevo, videodetective, vimeo, vine, vk, vocaroo, vox, washingtonpost, wshh, wsj, xboxclips, xboxdvr, youku, youtube.

For complete documentation on supported sites and example URLs, visit the MediaEmbed Plugin Documentation.
ページトップ

その他

独自の BBCodeタグ を追加できますか?
もしあなたが Adminユーザー で且つ BBCode作成 のパーミッションを与えられていれば、AdminCP で新しい BBCode を追加できます。
ページトップ