テンプレート: コメント

2012年1月3日 2020年4月15日

この記事では、以下の場合のコメントをテストしています。

  • 10レベルの深さのコメント
  • コメントをページ送り (設定の仕方 ダッシュボード > 設定 > ディスカッション > 1ページあたり5件のコメントを含む複数ページに分割し、最初のページをデフォルトで表示する
  • マークアップを使ったコメント / フォーマット例
  • 画像のあるコメント
  • 動画のあるコメント
  • 作者によるコメント
  • グラバターがある場合とグラバターが無い場合の初期設定の画像

38件のコメント

  1. 山田太郎

    見出しのテスト

    見出し壱

    見出し弐

    見出し参

    見出し四

    見出し五
    見出し六

    引用 (Blockquote) テスト

    一行だけの引用:

    笑う門には福来たる

    この行は引用ではありません。以下は長い引用:

    その途端でございます。今まで何ともなかった蜘蛛の糸が、急に※(「特のへん+廴+聿」、第3水準1-87-71)陀多のぶら下っている所から、ぷつりと音を立てて断きれました。ですから※(「特のへん+廴+聿」、第3水準1-87-71)陀多もたまりません。あっと云う間まもなく風を切って、独楽こまのようにくるくるまわりながら、見る見る中に暗の底へ、まっさかさまに落ちてしまいました。
     後にはただ極楽の蜘蛛の糸が、きらきらと細く光りながら、月も星もない空の中途に、短く垂れているばかりでございます。
    芥川 竜之介 – 「蜘蛛の糸」より

    テーブル

    社員 給料
    山田太郎 1ドル スティーブ・ジョブズが必要なサラリーと同じ額。
    田中花子 1,000万円 ブログを書くために必要になる資金。
    山本次郎 1億円 百聞は一見にしかず、ということで、カメラマンはブロガーの100倍。
    中山愛子 10億円 特に理由は要りません。

    リストタイプのテスト

    定義リストタイトル
    これは定義リストです。
    定義
    物事、領域、何かについての意味の正確な文章や説明: 詩を構成するものの定義。
    ギャラリー
    WordPress 2.5 から導入された、投稿に添付された画像を展示するための機能です。同じように、投稿を編集中にアップロードすると、そのファイルは「投稿に添付」されます。
    Gravatar (グラバター)
    グラバターとはグローバルに認識されるアバター (あるユーザーを表すグラフィックイメージや写真) です。グラバターはメールアドレスと紐づいていて、Gravatar.com サービスによって管理されています。このサービスを利用すると、ブログ所有者は自分のブログを設定することによりコメント欄にユーザーのグラバターを表示させることができます。

    非順序リスト (ネスト化)

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

    順序リスト (ネスト化)

    1. リスト項目 1
      1. リスト項目 1
        1. リスト項目 1
        2. リスト項目 2
        3. リスト項目 3
        4. リスト項目 4
      2. リスト項目 2
      3. リスト項目 3
      4. リスト項目 4
    2. リスト項目 2
    3. リスト項目 3
    4. リスト項目 4

    HTML 要素タグテスト

    他の HTML タグは FAQ をご覧ください。

    住所タグ
    以下は住所の例です。<address> タグを使用しています:

    〒100-0000
    東京都千代田区1-1-1
    日本

    anchor タグ (リンク)
    これは <anchor> (もしくはリンクとも呼ばれます) の例です。

    abbr タグ
    この abbr は文章の中にある <abbr> タグの例です。

    Acronym タグ (HTML5 では非推奨)
    これは <acronym> タグを使用した TLA です。

    Big タグ(HTML5 では非推奨)
    このテストは大きな文字を表す <big> タグの例ですが、このタグは HTML5 ではサポートされていません。

    Cite タグ
    “Code is poetry.” —WordPress

    Code タグ
    <code> タグはこのように使います: word-wrap: break-word;

    Delete タグ
    <del> タグは打ち消し線などで表現されますが、このタグは HTML5 ではサポートされていません (代わりに <strike> を使ってください)。

    Emphasize タグ
    <em> タグは文章の強調に使われます。欧文では斜体になっていることがよくあります。

    Insert タグ
    <ins> タグは挿入されたコンテンツを意味します。

    Keyboard タグ
    このあまり知られていない <kbd> タグは Ctrl のようにキーボードテキストをエミュレートします。通常、<code> タグと同じようにスタイリングされます。

    Preformatted タグ
    <pre> タグは複数行のコードのスタイリングに使います。

    .post-title {
    	margin: 0 0 5px;
    	font-weight: bold;
    	font-size: 38px;
    	line-height: 1.2;
    	and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows;
    }

    Quote タグ
    デベロッパーズ、デベロッパーズ, デベロッパーズ… –スティーブ・バルマー

    Strike タグ (HTML5 では非推奨)
    このタグは打ち消し線を表しています。

    Strong タグ
    このタグは太字テキストを表しています。

    Subscript タグ
    Subscript タグ <sub> を使うと H2O のような表示の際に「2」が下付きになります。

    Superscript タグ
    Superscript タグ <sup> を使うと E = MC2 のような表示の際に「2」が上付きになります。

    Teletype タグ (HTML5 では非推奨)
    <tt> はあまり使われないタグですが、テレタイプテキスト として通常 <code> タグのようにスタイル

    Variable タグ
    変数や引数を表す variables タグです。

  2. 山田太郎

    見出しのテスト

    見出し壱

    見出し弐

    見出し参

    見出し四

    見出し五
    見出し六

    引用 (Blockquote) テスト

    一行だけの引用:

    笑う門には福来たる

    この行は引用ではありません。以下は長い引用:

    その途端でございます。今まで何ともなかった蜘蛛の糸が、急に※(「特のへん+廴+聿」、第3水準1-87-71)陀多のぶら下っている所から、ぷつりと音を立てて断きれました。ですから※(「特のへん+廴+聿」、第3水準1-87-71)陀多もたまりません。あっと云う間まもなく風を切って、独楽こまのようにくるくるまわりながら、見る見る中に暗の底へ、まっさかさまに落ちてしまいました。
     後にはただ極楽の蜘蛛の糸が、きらきらと細く光りながら、月も星もない空の中途に、短く垂れているばかりでございます。
    芥川 竜之介 – 「蜘蛛の糸」より

    テーブル

    社員 給料
    山田太郎 1ドル スティーブ・ジョブズが必要なサラリーと同じ額。
    田中花子 1,000万円 ブログを書くために必要になる資金。
    山本次郎 1億円 百聞は一見にしかず、ということで、カメラマンはブロガーの100倍。
    中山愛子 10億円 特に理由は要りません。

    リストタイプのテスト

    定義リストタイトル
    これは定義リストです。
    定義
    物事、領域、何かについての意味の正確な文章や説明: 詩を構成するものの定義。
    ギャラリー
    WordPress 2.5 から導入された、投稿に添付された画像を展示するための機能です。同じように、投稿を編集中にアップロードすると、そのファイルは「投稿に添付」されます。
    Gravatar (グラバター)
    グラバターとはグローバルに認識されるアバター (あるユーザーを表すグラフィックイメージや写真) です。グラバターはメールアドレスと紐づいていて、Gravatar.com サービスによって管理されています。このサービスを利用すると、ブログ所有者は自分のブログを設定することによりコメント欄にユーザーのグラバターを表示させることができます。

    非順序リスト (ネスト化)

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

    順序リスト (ネスト化)

    1. リスト項目 1
      1. リスト項目 1
        1. リスト項目 1
        2. リスト項目 2
        3. リスト項目 3
        4. リスト項目 4
      2. リスト項目 2
      3. リスト項目 3
      4. リスト項目 4
    2. リスト項目 2
    3. リスト項目 3
    4. リスト項目 4

    HTML 要素タグテスト

    他の HTML タグは FAQ をご覧ください。

    住所タグ
    以下は住所の例です。<address> タグを使用しています:

    〒100-0000
    東京都千代田区1-1-1
    日本

    anchor タグ (リンク)
    これは <anchor> (もしくはリンクとも呼ばれます) の例です。

    abbr タグ
    この abbr は文章の中にある <abbr> タグの例です。

    Acronym タグ (HTML5 では非推奨)
    これは <acronym> タグを使用した TLA です。

    Big タグ(HTML5 では非推奨)
    このテストは大きな文字を表す <big> タグの例ですが、このタグは HTML5 ではサポートされていません。

    Cite タグ
    “Code is poetry.” —WordPress

    Code タグ
    <code> タグはこのように使います: word-wrap: break-word;

    Delete タグ
    <del> タグは打ち消し線などで表現されますが、このタグは HTML5 ではサポートされていません (代わりに <strike> を使ってください)。

    Emphasize タグ
    <em> タグは文章の強調に使われます。欧文では斜体になっていることがよくあります。

    Insert タグ
    <ins> タグは挿入されたコンテンツを意味します。

    Keyboard タグ
    このあまり知られていない <kbd> タグは Ctrl のようにキーボードテキストをエミュレートします。通常、<code> タグと同じようにスタイリングされます。

    Preformatted タグ
    <pre> タグは複数行のコードのスタイリングに使います。

    .post-title {
    	margin: 0 0 5px;
    	font-weight: bold;
    	font-size: 38px;
    	line-height: 1.2;
    	and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows;
    }

    Quote タグ
    デベロッパーズ、デベロッパーズ, デベロッパーズ… –スティーブ・バルマー

    Strike タグ (HTML5 では非推奨)
    このタグは打ち消し線を表しています。

    Strong タグ
    このタグは太字テキストを表しています。

    Subscript タグ
    Subscript タグ <sub> を使うと H2O のような表示の際に「2」が下付きになります。

    Superscript タグ
    Superscript タグ <sup> を使うと E = MC2 のような表示の際に「2」が上付きになります。

    Teletype タグ (HTML5 では非推奨)
    <tt> はあまり使われないタグですが、テレタイプテキスト として通常 <code> タグのようにスタイル

    Variable タグ
    変数や引数を表す variables タグです。

  3. 匿名ユーザー

    このユーザーは匿名で投稿しようとしています。

    偽のメールを使っているため、関連付けられた Gravatar はありません。
    サイト URL を指定していないため、コメント内でそのリンクが表示されないようにしてください。

  4. 匿名ユーザー

    このユーザーは匿名で投稿しようとしています。

    偽のメールを使っているため、関連付けられた Gravatar はありません。
    サイト URL を指定していないため、コメント内でそのリンクが表示されないようにしてください。

  5. 紫式部

    コメント ? コメント大好き !

  6. 紫式部

    コメント ? コメント大好き !

  7. 光源氏

    このテストはすごい !

  8. 山田太郎

    このテストはすごい !

  9. 山田太郎

    投稿者のコメントです。

  10. 山田太郎

    投稿者のコメントです。

  11. 山田太郎

    コメントスレッドのテスト。1階層目のコメント。

    1. 紫式部

      2階層目のコメント。

      1. 桐壺帝

        3階層目のコメント。

        1. 桐壺帝

          4階層目のコメント。

          1. 光源氏

            5階層目の深さのスレッド。

            これは投稿者のコメントです。

          2. 紫式部

            6階層目のコメント。

          3. 光源氏

            7階層目のコメント。

          4. 紫式部

            8階層目のコメント。

          5. 光源氏

            9階層目のコメント。

          6. 山田太郎

            10階層目の深さのスレッド。

            これは投稿者のコメントです。

  12. 山田太郎

    コメントスレッドのテスト。1階層目のコメント。

    1. 紫式部

      2階層目のコメント。

      1. 桐壺帝

        3階層目のコメント。

        1. 桐壺帝

          4階層目のコメント。

          1. 紫式部

            6階層目のコメント。

            これも投稿者のコメントです。

          2. 紫式部

            6階層目のコメント。

          3. 光源氏

            7階層目のコメント。

          4. 紫式部

            8階層目のコメント。

          5. 光源氏

            9階層目のコメント。

          6. 光源氏

            10階層目のコメント。

            これも投稿者のコメントです。

  13. 紫式部

    画像つきコメント

  14. 紫式部

    画像つきコメント

  15. 山田太郎

    このテストについて絶対ブログを書こうと思います !

  16. 山田太郎

    このテストについて絶対ブログを書こうと思います !

  17. 山田太郎

    このテストはとても便利です ! いつも活用してます !

  18. 山田太郎

    このテストはとても便利です ! いつも活用してます !

  19. 紫式部

    みんなコメントありがとう!

  20. 紫式部

    みんなコメントありがとう!