フォーラムで使うHTML＆BBcode置き場／HTML & BBcode storage used in forums

情報交換/Connect with fellow Hunters
1

HTMLタグ＆BBcodeまとめ置き場。
知ってるのあったらここに置いていただけたら、他の方も使いやすくなると思います。

一応、discobotからチュートリアルを受けて分かるものも多いですが、チュートリアルを受けられなかった＆受けてない方もいるかと思われますので。

★

[ と ] を使うのがBBcode
<>と</> を使うのがHTML
間違えやすいので注意されたし。
書き込む時の注意点
BBcodeの例

例えば太字テキストの説明をする際、そのまま書き込むと

太字テキスト

……のようにタグが機能してしまいます。そこで、

**太字テキスト**

空白を入れたり[○○]で文字を囲うと発動しなくなる可能性がありますので、プレビューを見ながら書き込んでもらえたらと思います。

★追記

・`×3で無効化できる(ただし半角のみ)
・コピー＆ペースト(貼り付け)ができる

ここに書き込む際は覚えておくと便利です。

HTMLの例 
<b>太字テキスト</b>

HTMLと同じく、`×3で挟むと無効化できる。
やはり`は「半角のみ」なので注意。
文章の確認をしたい時

念の為の復習。

  • HTMLやBBcodeが機能しているかを確認したい時
  • 写真のサイズを変えたい時(100%・75%・50%)
  • 複数の写真をコンパクトにまとめたい時などに。

Screenshot_20240814-210607~3
Screenshot_20240814-210607~31080×1678 153 KB

丸の中に、モニターみたいなものがあります。
そこからタグが作動しているかも見られますので、確認しながら打つとわかりやすいです。

水平線について

複数のタグを書き込むなら下の

<hr>

をコピー＆貼り付け(ペースト)してお使いください。
水平線で区切ることが可能です。

書き方の例 
##タイトル
機能の説明
コード

あくまでも一例ですので、他の方の投稿を参考に書き込んでいってください。

A collection of HTML & BBcode.
If you know of it, please post it here, I think it will be easier for other people to use it.

There are many things you can learn by taking the tutorial from discobot, but I think there are some people who couldn’t get the tutorial and haven’t taken it yet.

BBcode uses [ and ]
HTML uses <> and </>
Be careful as it is easy to make a mistake.

(I used Google Translate.)

Points to note when posting to this topic
For BBcode

For example, when explaining bold text, if you write it as is,

bold text

The tag will function like this. So,

**bold text**

If you insert spaces or surround the characters with [○○], it may not be activated, so I would like you to write while looking at the preview.

★Postscript

English Translation

By sandwiching the top and bottom with "```", markdown other than "```'' can be disabled and written like this. 

・Can be disabled with `×3 (however, only half-width characters).
・You can copy and paste the sandwiched sentences.

It will be useful to remember this when writing here.

For HTML 
<b>Bold text</b>

As with HTML, you can disable it by putting it between ｀x3.
Note that ` is “half-width characters only” after all.

When you want to check the text

A review just in case.

  • When you want to check whether HTML or BBcode is working
  • When you want to change the size of the photo (100%, 75%, 50%)
  • When you want to compactly organize multiple photos.

Screenshot_20240814-210607~3
Screenshot_20240814-210607~31080×1678 153 KB

There is something like a monitor inside the circle.
You can see if the tag is working from there, so it’s easier to understand if you check while typing.

About the horizontal line

If you want to write multiple tags, please see below.

<hr>

Please copy and paste.
It can be separated by a horizontal line.

Example how to write 
##title
Function description
code

This is just an example, so please refer to other people’s posts when writing.

13 Likes
2

とりあえず使えるHTML紹介。

引用1(他の方からの引用)

[quote="名前,ポスト,トピック,full:true"]文章[/quote]

特定の誰かの文を引用する際に使える。
しかし、実は

[quote="名前"]文章[/quote]

でもオッケー。

太字

**文章**

太字テキスト

アスタリスク(*)を使います。
文字を太くして強調できます。

**と文字の間に空白は入れません。

斜体

*文章*

斜体テキスト

太字テキストとの違いはアスタリスクが一つだけ。
文字通り斜め。

先頭の*と文字の間に空白を入れると別のタグに変わります。

ハイパーリンク

[オプションのタイトル](URL)

モンスターハンターNOW―MONSTER HUNTER NOW

特定のサイトへと誘導したい時に使える。
上の例だとモンハンNOWの公式サイトへと移動。

タイトルとURLの間に空白は入れません。

引用2(ブロック引用)

> 引用したい文章

ブロック引用

他サイトとかから引用する際に便利。
またはフォーラム内での発言の際、発言者 or 発言したトピックを隠せるのも便利。

[>]と文字の間に空白を入れても、入れなくても機能します。
ただし[>○○]のように [ と ] で挟むとと機能しません。

9 Likes
3

取り消し線

~~ ~~(空白内に文字を入れる)

~~こんな感じ~~
→ こんな感じ

過去の投稿を取り消したい、でも修正したことをわかりやすく伝えたい時に便利です。
ノリツッコミにも使えます。 汎用性高し。

上手くいかないなって時は半角スペースを前後に入れるとgood.

10 Likes
4

2個以上の『#』の後に半角スペースをつけることで見出しの表記ができます。(1個だとカテゴリやタグへのリンクになります。) → 情報交換/Connect with fellow Hunters ジンオウガzinogre

[## 大見出し]

[### 見出し]

[#### 小見出し]

[##### もっと小さい見出し]

[###### こんな感じで#6個まで小さくできるようです！]

これが

大見出し

見出し

小見出し

もっと小さい見出し
こんな感じで#6個まで小さくできるようです！
8 Likes
5

簡単にフォーラム内リンクを貼る

フォーラム内のリンクになっている箇所を選択し、コピーペーストすることで、書式やリンクを維持したまま貼り付けができます。

[AIROULOVEYOU](/u/AIROULOVEYOU)
[クアリリさんに涼しい服を](/t/topic/29540) 
[ご存知でしたか？/Did you know?](/c/faq/did-you-know/27)
[ライセンス取得](/badges/101/-)
間に半角スペースが入っていると機能しません。

AIROULOVEYOU ユーザー名や
クアリリさんに涼しい服を トピック名
ご存知でしたか？/Did you know? カテゴリ名に
ライセンス取得 バッジなんかも。

8 Likes
6

マークダウンを無効にする(コード記法)

上下を「```」で挟むことによって、このように「```」以外のマークダウンを無効にして記載できます。
あくまでプログラムのコードを記載するための記法なので、文字折り返しが無効になるのと、上や下のように一部の記号によって装飾が付くのが難点ですが…

## 見出し

**太字**

~~取り消し~~

このトピックでしか使い所がなさそうですが、マークダウンを紹介する時にぜひ。

5 Likes
7

表を作ってみよう

|名前|別名|属性|
|---|---|---|
|ジンオウガ|雷狼竜|雷|
|タマミツネ|泡狐竜|水|
|アイルー|白猫(うそ)|武器次第？？|

このように書くことによって、以下のような表が作れます。

名前 別名 属性
ジンオウガ 雷狼竜 雷
タマミツネ 泡狐竜 水
アイルー 白猫(うそ) 武器次第？？

2列目の|---|---|---|の列は必ず必要なようです。
その他、中央揃えにするなど表に関するいろいろな記法があるので、Discourseの公式フォーラム(英語)を確認してみてください。

確証が持てないので余談

自分が投稿した表のみかしら…表の下に「テーブルの編集」ボタンが出てきますが、 同じ投稿に表が2個以上あるとバグって最初の表しか編集できないようです 。
このボタンは使わずに、投稿を直接編集した方が良いと思います。

7 Likes
9

BBcodeは[と]でコードを囲み、htmlは<と>でコードを囲んで使用する。
括弧内のコードは基本全て半角。
ここに出しているのは装飾したい文字の前に<>文字の後に終わりを示す</>を入れる。
BBcodeとhtmlを混同して[b]太字</b>な使い方はしないように〜必ずそろえてね。
使う時は右側のマークでコピペできると思う。

◯太字

[b]太字[/b]

これは太字BBcode

<b>太字</b>

これは太字html

◯斜体

[i]斜体[/i]

これは斜体BBcode

<i>斜体</i>

これは斜体html

◯下線

[u]下線[/u]

これは下線BBcode

<u>下線</u>

これは下線htmlは非対応

◯取り消し線

[s]取り消し[/s]

これは取り消しBBcode

<s>取り消し</s>

これは取り消しhtml

◯大きく

[big]大きく[/big]

これは[big]大きく[/big]BBcodeは非対応

<big>大きく</big>

これは大きくhtml

◯小さく

[small]小さく[/small]

これは[small]小さく[/small]BBcodeは非対応

<small>小さく</small>

これは小さくhtml

◯上つき文字

※上つき文字は上下の幅を取るので行間が乱れます。上つき文字は小さいです。

[sup]上つき文字[/sup]

これは[sup]上つき文字[/sup]BBcodeは非対応

<sup>上つき文字</sup>

これは上つき文字html

使用例
πｒ２

◯下つき文字

※下つき文字は上下の幅を取るので行間が乱れます。下つき文字は小さいです。

[sub]下つき文字[/sub]

これは[sub]下つき文字[/sub]BBcodeは非対応

<sub>下つき文字</sub>

これは下つき文字html

使用例
Ｈ２Ｏ

◯ルビをふる

※振り仮名は上下左右大きく取るので行間が乱れます。振り仮名は小さいです。稀に古い機種だと対応してない事もあるかも。
(注意)文章が乱れるのでお遊びの一環として使いあまり多様しない方がいい。 
<ruby>振り仮名<rt>ふりがな</rt></ruby>

これは振り仮名ふりがなhtml

使用例

宿敵とも

邪王炎殺黒龍波じゃおうえんさつこくりゅうは

嵐あらしが誘いざなう泡沫うたかたの宴うたげ
<ruby>嵐<rt>あらし</rt></ruby>が<ruby>誘<rt>いざな</rt></ruby>う<ruby>泡沫<rt>うたかた</rt></ruby>の<ruby>宴<rt>うたげ</rt></ruby>

とりあえずここまで、

8 Likes
10

This topic needs to be pinned.

4 Likes
11

リスト

「コード」
「結果」
で書きますので、ご使用時はコード部分コピペでお使いください。

* リスト項目1
* リスト項目2
* リスト項目3
  • リスト項目1
  • リスト項目2
  • リスト項目3

(以降すべてHTML)です。

▼箇条書きリスト

<ul>
<li>ベリオロス</li>
<li>レイギエナ</li>
<li>クシャルダオラ</li>
</ul>
  • ベリオロス
  • レイギエナ
  • クシャルダオラ

▼番号順リスト(HTML)

<ol>
<li>ベリオロス</li>
<li>レイギエナ</li>
<li>クシャルダオラ</li>
</ol>
  1. ベリオロス
  2. レイギエナ
  3. クシャルダオラ

▼箇条書きのみli単体でも使えます(段落入れたくない方向け)

<li>ベリオロス</li>
<li>レイギエナ</li>
<li>クシャルダオラ</li>
  • ベリオロス
  • レイギエナ
  • クシャルダオラ

    • リスト応用編(長いので閉じてます)

    リストの終了コード</ul>や</ol>の前に<ul>又は<ol>を入れると、別のリストを作成できます。
    リストの最後に開始(<ul><ol>)した数だけ終了(</ul></ol>)することをお忘れなく～

    ▼箇条書きリスト(3連)

    <ul>
<li>ベリオロス</li>
<li>レイギエナ</li>
<li>クシャルダオラ</li>
<ul>
<li>ベリオロス</li>
<li>レイギエナ</li>
<li>クシャルダオラ</li>
<ul>
<li>ベリオロス</li>
<li>レイギエナ</li>
<li>クシャルダオラ</li>
</ul>
</ul>
</ul>
    • ベリオロス
    • レイギエナ
    • クシャルダオラ
      • ベリオロス
      • レイギエナ
      • クシャルダオラ
        • ベリオロス
        • レイギエナ
        • クシャルダオラ

    ▼番号付きリスト(3連)

    <ol>
<li>ベリオロス</li>
<li>レイギエナ</li>
<li>クシャルダオラ</li>
<ol>
<li>ベリオロス</li>
<li>レイギエナ</li>
<li>クシャルダオラ</li>
<ol>
<li>ベリオロス</li>
<li>レイギエナ</li>
<li>クシャルダオラ</li>
</ol>
</ol>
</ol>
    1. ベリオロス
    2. レイギエナ
    3. クシャルダオラ
      1. ベリオロス
      2. レイギエナ
      3. クシャルダオラ
        1. ベリオロス
        2. レイギエナ
        3. クシャルダオラ

    ▼複合リスト(3連)

    途中で終了(</ul></ol>)を入れると同じ段落で別のリストを並べることができます。
    <ul>
<li>ベリオロス</li>
<li>レイギエナ</li>
<li>クシャルダオラ</li>
<ol>
<li>ベリオロス</li>
<li>レイギエナ</li>
<li>クシャルダオラ</li>
</ol>
<ul>
<li>ベリオロス</li>
<li>レイギエナ</li>
<li>クシャルダオラ</li>
<ol>
<li>ベリオロス</li>
<li>レイギエナ</li>
<li>クシャルダオラ</li>
</ol>
<ul>
<li>ベリオロス</li>
<li>レイギエナ</li>
<li>クシャルダオラ</li>
</ul>
</ul>
</ul>
    • ベリオロス
    • レイギエナ
    • クシャルダオラ
      1. ベリオロス
      2. レイギエナ
      3. クシャルダオラ
      • ベリオロス
      • レイギエナ
      • クシャルダオラ
        1. ベリオロス
        2. レイギエナ
        3. クシャルダオラ
        • ベリオロス
        • レイギエナ
        • クシャルダオラ

    7 Likes
    12

    コード無効化(コピペ不可)

    HTMLでのみ使用可能です。

    コード

    ＆lt;(コード)＆gt;文章＆lt;/(コード)gt;

    例

    ＆lt;b＆gt;文章＆lt;/bgt;

    結果
    <b>文章</b>

    ブログがHTMLを使うタイプだったので気がついて追記。でも使うなら`×3の方がコピペできるので便利だったりする。打つのも大変なので、余談程度に。

    リンク(HTML)

    コード

    <a href="URL">タイトル</a>

    例

    <a href="https://community.monsterhunternow.com/">モンスターハンターNOW コミュニティフォーラム</a>

    結果
    モンスターハンターNOW コミュニティフォーラム

    URLとタイトルがBBcode版と逆になっているので要注意。また、こちらも使う機会は少ないかも。
    (例に使ったURLはコミュニティフォーラムのホーム)

    3 Likes
    13

    サムネイル付きの動画のurlのやりかたを教えてください

    2 Likes
    16

    コード

    https://youtube.com/watch?v=3tQN3Lx479U&si=HnQ9ULkCVJN7cqQ_

    結果

    URLを貼り付けるだけです。
    タグを使わなくていいので、便利です。

    4 Likes
    17

    タグ使うからダメだったのですね！ありがとうございます！

    3 Likes
    18

    改行

    ※一応このフォーラムでは、これを使わなくても改行はできます。以下が入力内容

    <br>

    一例、以下を入力

    ここで→<br>改行

    結果↓
    ここで→
    改行

    使い道
    このフォーラムでは改行がHTMLなしで機能するため、基本的に使用機会はありません。
    極稀に改行がうまくいかないときに…使えるかもしれない？たぶんない。

    4 Likes
    20

    見出し(HTML)

    コード

    <h1>見出しの内容</h1>
<h2>見出しの内容</h2>
<h3>見出しの内容</h3>
<h4>見出しの内容</h4>
<h5>見出しの内容</h5>
<h6>見出しの内容</h6>

    結果

    見出しの内容

    見出しの内容

    見出しの内容

    見出しの内容

    見出しの内容
    見出しの内容

    上で紹介された## 〜##### を使うBBcode版と
    同じく、h1〜h6まで有効です。
    h7以降は反応しません。

    「固定」が出来るようになったので……

    ★有識者の皆さん、コード集めのご協力、
    ありがとうございます！

    これに関連してか、固定というものが出来るようになりました。
    初めて見た者なので仕組みが分からないです。
    説明だとトピックの一番上に固定できるとか
    何とか……？

    さて、HTMLもBBcodeも沢山あるので、恐らくここのトピックは未完成になるかと思われます。
    ここのフォーラムを使う方々がこれからも快適に使えるように、皆さんのお力添えを頼み申し上げます。
    これからもこのトピックをよろしくお願いします。

    (文章がおかしかったらごめんなさい)

    4 Likes
    21

    引用を簡単に使えていいんよう・・・・

    引用タグについてはこちら

    ここのフォーラムでは文章をドラッグする事で

    IMG_0482
    IMG_0482750×727 96.9 KB

    とこのように引用の選択が出てきます。
    そのまま引用コピぺすれば、

    [quote="Spear8958, post:1, topic:36404"]
    HTMLタグ＆BBcodeまとめ置き場。
    知ってるのあったらここに置いていただけたら、他の方も使いやすくなると思います。
    [/quote]

    と簡単に引用できる。

    6 Likes
    22

    みんな先生だ！

    私はこういうのが全く分からないので、ものすごく勉強になります！m(_ _)m💦

    3 Likes
    23

    私なんぞ、小説投稿サイトで小説を書き始めてから知った程度でしたが、ゲーム作りを試したりとか、ブログやったりとか、フォーラムで書き込んだりとかしていて「コード」についてほえーとなった者です。

    因みに元々はプログラムに使います。
    ゲーム作りで、プログラムコードを書いたことがありましたが、コードまみれで目が痛かったのを覚えてます……
    目がぁぁ〜！目がぁぁぁぁあっ！！:melting_face:

    2 Likes