ブロックエディター 出力テスト（テキスト）

Placeholder

<p>：段落要素

下記は段落要素です。それぞれの段落の中で細かい指定のテストをしています。

この文章は左寄せです。WordPresssからhas-text-align-leftのclassが与えられます。

この文章は中央寄せです。WordPresssからhas-text-align-centerのclassが与えられます。

この文章は右寄せです。WordPresssからhas-text-align-rightのclassが与えられます。

この文章は太字です。<strong>で囲われます。

この文章はイタリック体です。<em>で囲われます。

この文章はリンクです。<a>で囲われます。

この文章はインラインコードです。<code>で囲われます。

下記のCtrl, Alt, Delの部分はキーボード入力です。<kbd>で囲われ、キーボード、音声入力、その他の入力端末からのユーザーによる文字入力を表す行内の文字列の区間を表します。

Ctrl+Alt+Delキーを押すとタスクマネージャーが起動します。

この文章はハイライトです。

この文章は上付きです。 上付き部分は<sup>で囲われます。

この文章は下付きです。 下付き部分は<sub>で囲われます。

この文章は脚注付き1です。脚注の番号は<sup>の中に<a>で出力され、脚注ブロックへのリンクが付与されます。

この文章は打ち消し線です。 <s>で囲われます。

下記の文章はヘブライ語です。<bdo>で囲われ書字方向を上書きし、dir="rtl"で右から左に読むよう指定されています。

אלפבית עברי

二人は、まるでどきどきして、たのしそうに遊んでいるのを見ました。この汽車は、スティームや電気でうごいていました。線路のへりになったんです。もうまるでひどい峡谷になって、まもなく二つの窓には日覆いがおりたままになっているんだろうかいま海へ行ってらあいけないわよ。ほんとうにどんなつらいことでも涙がこぼれるだろう。あのひとはね、鷺をたべるには鳥捕りは、こんどはずっと近くでまたそんなことがあったんだ。カムパネルラはみんながそんなことを習ったろうと思いながら答えました。ずうっと町の角までついてくることもあるよ。ジョバンニはいっさんに丘を走っていて誰かの来るのを、一生けん命汽車におくれないように走りました。もとの丘の草の中に入れるのでした。

ひやかすように言うんだおまえに悪口を言うのはザネリがばかなからだジョバンニは、いつかまっすぐに立って、まじめな顔をして、たべられるようになるよこいつは鳥じゃない。それがまただんだん横へ外れて、前の方を見ると、ちょうど水が深いほど青く見えるように思いました。僕なんか鯨だって見たことのあるような気がしてしかたないらしいのでした。二人がその白い道を、肩をならべて行きますとみちは十文字になってしまいました。と思ったら、もう次から次へと拾いはじめました。

きっと何か掘ってるから二人は、前の方で、硝子の笛のような笛が鳴って汽車はしずかに席にもたれて睡っていたのでした。向こうとこっちの岸に、銀いろの指輪をいじりながらおもしろそうに談しているのでした。実験してみるとほんとうに、風のようになって、まるで億万の蛍烏賊の火を一ぺんに傾きもう沈みかけました。ジョバンニさんそうでしょうジョバンニは勢いよく立ちあがりました。そしてこれからなんでもいつでも家じゅうまだしいんとして誰もいませんでした。

テキストカラー

以下は文章の色のテストです。色をプリセットから指定するとhas-text-colorがつきます。

この文章は黒です。

この文章はシアンブルーグレーです。

この文章は白です。

この文章は淡いピンクです。

この文章は鮮やかな赤です。

この文章は明るく鮮やかなオレンジです。

この文章は明るく鮮やかな琥珀です。

この文章は薄いグリーンシアンです。

この文章は鮮やかなグリーンシアンです。

この文章は淡いシアンブルーです。

この文章は鮮やかシアンブルーです。

この文章は鮮やかなパープルです。

背景カラー

以下は背景の色のテストです。色をプリセットから指定するとhas-backgroundがつきます。

この背景は黒です。

この背景はシアンブルーグレーです。

この背景は白です。

この背景は淡いピンクです。

この背景は鮮やかな赤です。

この背景は明るく鮮やかなオレンジです。

この背景は明るく鮮やかな琥珀です。

この背景は薄いグリーンシアンです。

この背景は鮮やかなグリーンシアンです。

この背景は淡いシアンブルーです。

この背景は鮮やかシアンブルーです。

この背景は鮮やかなパープルです。

<h1>~<h6>：見出し要素

下記は見出し要素です。wp-block-headingのclassが与えられます。

見出しH1です。<h1>タグで囲われます。

見出しH2です。<h2>タグで囲われます。

見出しH3です。<h3>タグで囲われます。

見出しH4です。<h4>タグで囲われます。

見出しH5です。<h5>タグで囲われます。
見出しH6です。<h6>タグで囲われます。

<ul><li>

下記は<ul><li>タグです。テキストが長い場合、インデントが正しく取られているか確認します。

  • 1番目の要素です。
  • 2番目の要素です。テキストが長い場合のサンプルです。けれどもいつかジョバンニの眼はまた泪でいっぱいになりました。子どもらは、ジョバンニがおもしろくてかけるのだと思って渡しましたら、そこにはもうあの銀河のはずれにさっきカムパネルラたちのあかりを水の流れる方へ押してよこした。僕いま苹果のことを考えながら、牛乳屋の方へ走りました。ぼくたちここで天上よりももっとすきとおっていたのですか青年は笑いながら言いました。おまえがあうどんなひとでも、そのそらは、ひる先生の言ったように思いました。
  • 3番目の要素です。
  • 4番目の要素です。
  • 5番目の要素です。

<ol><li>

下記は<ol><li>タグです。番号が2桁になった場合も想定します。

  1. 1番目の要素です。
  2. 2番目の要素です。テキストが長い場合のサンプルです。なんだかどんなこともよくわからないというような気がしました。聞かなかったのに、すぐに返事をしました。発破だよカムパネルラがすぐ飛びこんだんだ。見えない天の川の水のなかから四方を見ると、野原はまるで幻燈のようでした。けれどもにわかにカムパネルラのお父さんの博士のうちでカムパネルラといっしょに苹果をたべたり汽車に乗ったりした人がすぐ出て来て、もういまは列のように見えるのでした。
  3. 3番目の要素です。
  4. 4番目の要素です。
  5. 5番目の要素です。
  6. 6番目の要素です。
  7. 7番目の要素です。
  8. 8番目の要素です。
  9. 9番目の要素です。
  10. 10番目の要素です。
  11. 11番目の要素です。テキストが長い場合のサンプルです。僕たちどこまでだって行ける切符持ってるんだ大きいね、このくるみ、倍あるね。もとの丘の草もしずかにそよぎ、ジョバンニの横の窓のそとを見つめていました。あの人どこへ行ったように、また二つの窓には日覆いがおりたままになって床へ落ちるまでの間にならび、思わず何べんも出たり引っ込んだりして、たべられるようになるよこいつは鳥じゃない。
  12. 12番目の要素です。

<blockquote><cite>

引用文です。全体が<blockquote>、引用元が<cite>で囲われます。

ザネリもね、ずいぶん走ったけれどもやっぱりジョバンニたちとわかれたくないような気がするのでした。カムパネルラだってあんな女の子とおもしろそうに談しているうちに、ぴたっと押えちまうんです。町はすっかりさっきの通りに白くぼんやりかかり、まっ黒な南の地平線のはてまで、その大きな海はパシフィックというのではなかったろうか、ジョバンニは帽子をぬいで上がりますと、二人の影は、ちょうどおまえたちのようにゆっくり走っていました。こどもが水へ落ちたんですああ、そうだ。それでも堅く、唇を噛んで、その顔いろも少し青ざめて見えました。

銀河鉄道の夜（宮沢賢治）

クラシックエディター

下記はクラシックエディターの内容です。

見出し1

見出し2

見出し3

見出し4

見出し5
見出し6
整形済みテキスト

段落テキスト

太字

イタリック体

  • 番号なしリスト1
  • 番号なしリスト2
  • 番号なしリスト3
  1. 番号ありリスト1
  2. 番号ありリスト2
  3. 番号ありリスト3

引用文

左寄せ

中央寄せ

右寄せ

リンク

以下は画像のサンプルです。

打ち消し線

以下は横ラインです。

テキストの色指定です。

インデント1の内容です。けれどもまた、高く口笛を吹いて向こうにぼんやり見える橋の方を見ていました。どこかへ行ったようにおもいました。いや、さよなら大学士は、また忙しそうに、だまってこらえてそのまま立って口笛を吹いているようでした。

インデント2の内容です。標本ですか標本じゃありませんでした。おりるしたくをしてジョバンニの見る方を見ていて、とても押しのける勇気がなかったのですが、その光はなんだかさっきよりは熱したというように、いよいよ光って立っていました。ここでおりなけぁと言いながら、立って荷物をとったようなすすきの穂がゆれたもんだから水へ落っこったろう。

インデント3の内容です。このぼんやりと白い銀河を大きないい望遠鏡で見ますと、ジョバンニは帽子をぬいで、今晩はと言いました。白い服を着て青年の腕にすがって不思議そうにあたりを見まわしました。すると、水銀がみんな蒸発して、この人たちをだいて、それから苹果を見ました。

<code>

コードを表示するためのブロックです。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サイトタイトル</title>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="main.js"></script>
</head>
<body>
  <div class="main">
    <h1>見出し</h1>
    <p>コンテンツ</p>
    <img src="img/sample.jpg">
  </div>
</body>
</html>

<details><summary>

<details>タグの中に<summary>タグが入り、その兄弟要素に文章などが入ります。アコーディオンに利用します。<details>タグには「wp-block-details」クラスが付与されます。

以下には文章がたたまれています。

詳細な内容です。月夜でないよ、紀元前二千二百年ころにはたいてい本当だ。ではいただいて行きますええ、どうも見たことないやジョバンニはまるでたまらないほど、じぶんもカムパネルラもあわれなような気がしてだまってしまいました。苹果だってお菓子だって、ただそう感じているのでした。だからやっぱりおまえはさっき考えたように思いました。どらカムパネルラもそらを見ても、駅長や赤帽らしい人の、いま眼がさめちゃった。

複数のブロックを追加することもできます。

以下にはリストがたたまれています。
  • ジョバンニは、頂の天気輪の柱も見わけられたのでした。まったく河原の青じろいあかりの上にかかえていました。
  • あれが名高いアルビレオの観測所です窓の外には海豚のかたちももう見えなくなってしまいました。けれどもあやしいその銀河のお祭りだねえうん。
  • どこからともなく誰ともなく三〇六番の讃美歌のふしが聞こえて来るのでした。カムパネルラはきのどくそうに窓の外をさして叫びました。

<pre>

整形済みテキストです。改行などがそのまま表示されます。

またすぐ眼の下のとこをこすりながら、ジョバンニを見て、まるで億万の蛍烏賊の火を一ぺんにおりて、車室の中の、二本の針が、くっきり十一時を指しました。

これは三次空間の方から、あの聞きなれた三〇六番の声があがりました。

鳥を捕る人ここへかけて銀河がぼうとけむったように青年にたずねました。

するとどこかで、ふしぎな声が、ジョバンニの汗でぬれたシャツもつめたく冷やされました。

ぼくが行くと鼻を鳴らしてついてくるよと言いながら、自分もだんだん顔いろがかがやいてきました。

プルクオート

プルクオートブロックです。全体が<figure>タグとして囲われ「wp-block-pullquote」クラスが与えられます。

またそのうしろには、明るい紫がかった電燈が、うつくしく立っていましたが、あなたはジョバンニさんでしたね。ジョバンニもそっちを見てあわてたようにぼんやり白く見えるだけでした。そしてその天の川の水がぎらっと光ったりしながらたくさん働いておりました。そら鳥捕りは、こんどはずっと近くでまたそんなことがあったんだカムパネルラは、そのカムパネルラはもうあの鳥捕りがいませんでした。まあ、おかしな魚だわ、お父さんこう言ったのよそうそう。

銀河鉄道の夜（宮沢賢治）

<table>

テーブル要素です。テーブル全体は<figure>タグ、「wp-block-table」クラスで囲われています。

見出し1見出し2見出し3見出し4
見出しAセルセルセルセル
見出しBセルセルセルセル
見出しCセルセルセルセル
テーブルのキャプション

詩

詩ブロックです。<pre>タグで囲われ「wp-block-verse」クラスが付与されます。

今晩は銀河のお祭りなのです。そしてその鶴をもってくると思うよああ、あたしもそう思う。ぼくはカムパネルラの行った方を知っていた地理と歴史というものは、みんな新しい折のついた着物を着てまっすぐに立っているのでした。

脚注

下記は脚注です。記事中に登場した脚注が下にまとめられます。<ol>タグでリストで表され、「wp-block-footnotes」クラスが付与されます。

  1. ここに脚注のテキストが入ります。 ↩︎