投稿のレイアウトを綺麗にしましょう-BBcodeの使い方

投稿のレイアウトを綺麗にしましょう-BBcodeの使い方

投稿記事by admin » 2014年6月18日(水) 10:01 am

[heading][highlight=lightgreen]はじめに[/highlight][/heading]

BBCode とは?

BBCodeとは、HTMLを利用したphpBB3独自の実装によるマークアップ言語です。あなたが実際にBBCodeを使用できるか否かは掲示板の設定によります。BBCodeを使用できる場合でも投稿する時に投稿画面でBBCodeを無効にできます。BBCodeはマークアップ言語である点でHTMLと似ていますが、タグは < > でなく角カッコ [ ] で括られます。BBCodeを使用することによって文章の見栄えをコントロールしたり画像やリンクを文章に挿入したりできるようになります。掲示板のスタイルによりますが、メッセージ入力フォームの真上にBBCodeボタンがずらりと並んでいるはずです。これらのボタンをクリックすればフォームに直接BBCodeタグを入力することなく簡単にBBCodeを挿入できます。BBCodeをさらに詳しく知るには以下のガイドを参照してください。


[heading][highlight=lightgreen]テキストの書式[/highlight][/heading]

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

コード: 全て選択
[b]Hello[/b]


Hello となります。
アンダーライン(下線)を引くには
コード: 全て選択
 [u][/u]
で囲みます。

コード: 全て選択
[u]Good Morning[/u]


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

コード: 全て選択
This is [i]Great![/i]


は This is Great!! となります。

文字の色と大きさを変える方法
文字の色や大きさを変えるには以下のタグを使用します。どのように表示されるかはブラウザとシステムによって異なる場合があるので注意してください:
文字の色を変えるには
コード: 全て選択
[color=][/color]
で囲みます。色の特定は(red, blue, yellow)といった単語または十六進数(例: #F5CA09 )で指定することができます:

コード: 全て選択
[color=red]Hello![/color]


または

コード: 全て選択
[color=#FF0000]Hello![/color]


Hello! となります。
文字の大きさを変えるには
コード: 全て選択
 [size=][/size]
で囲みます。このタグはユーザーが使用する掲示板のスタイルに依存しますが、お勧めの形式はテキストサイズを元の大きさのパーセント数値で指定する方法です。数値は 20 から 200 まで指定可能です:

コード: 全て選択
[size=50]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]



[heading][highlight=lightgreen]引用と固定幅データの表示[/highlight][/heading]

文章を引用付きで返信する方法

文章を引用するには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コードが読みやすくなるのでお勧めです。


[heading][highlight=lightgreen]リストの作成[/highlight][/heading]

番号なしリストの作成方法

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

コード: 全て選択
[list]
[*]Red
[*]Blue
[*]Yellow[/list]


上記のようにすると次のリストが表示されます:
  • Red
  • Blue
  • Yellow

番号付きリストの作成方法
番号付きリストを作成するには
    を用います。番号順の代わりにアルファベット順にしたい場合は
    コード: 全て選択
     [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


    [heading][highlight=lightgreen]リンクの作成[/highlight][/heading]

    他サイトへのリンクの作成方法

    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:// さえ不要です。例えば http://www.phpbb.com と入力すると自動的に http://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]http://www.google.com/intl/en_ALL/images/logo.gif[/url][/img]


    上記の例は誤った並べ方なので注意してください。


    [heading][highlight=lightgreen]画像の表示[/highlight][/heading]

    他サイトの画像を表示させる方法

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

    コード: 全て選択
    [img]http://www.google.com/intl/en_ALL/images/logo.gif[/img]


    リンクの作成でも述べていますが、画像にリンクを張るには上記を
    コード: 全て選択
    [url][/url]
    で囲みます:

    コード: 全て選択
    [url=http://www.google.com/][img]http://www.google.com/intl/en_ALL/images/logo.gif[/img][/url]



    画像
    となります。

    添付画像を表示させる方法

    記事に添付(アップロード)した画像を文章の中で表示(インライン表示)させるには
    コード: 全て選択
     [attachment=][/attachment]
    を用います。ただし管理人がファイルの添付機能を許可していて尚且つあなたにファイル添付のパーミッションが与えられている必要があります。記事に画像ファイルを添付すると、添付画像をインライン表示するためのドロップダウンボックス(または各添付画像のインライン表示ボタン)が投稿画面内に表示されます。
    アバター
    admin
    管理人
     
    記事: 81
    登録日時: 2014年3月26日(水) 3:44 pm

    Return to 中国語ドラマ

    オンラインデータ

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

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