emulsion テーマでは、デフォルトのデザインで、カスタムHTMLブロック等で、HTMLを記述した場合でも、ブロックを使った時との表示の差を出来るだけ小さくするような設定を行っています。

以下は、HTMLコーディングした場合と、ブロックで記述した場合の表示例です。

LINK

http://www.tenman.info/wp3/raindrops/2015/10/05/raindrops1-327がライブになりました/

連続した半角文字列の場合でも、オーバーフローしません

ABBR

HTMLとは、マークアップ言語の1つです。 マークアップとは、文章の構成や役割を示すことを意味します。

段落ブロックで、HTML編集abbr要素を追加したものです。問題なく表示できます。

ブロックエディタではサポートされていない要素

ADDRESS

ブロックエディタではサポートされていない要素

custom html block

<address><a href="https://example.com">example.com</a></address>

example.com

---

BLOCKQUOTE

blockquote block

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

cite

BLOCKQUOTEあいうえおABCあいうえおabc さしす

custom html block

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<cite>cite</cite>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

cite

---

DIV

group block

custom html block

<div>
<h3>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

---

dl datalist

ブロックエディタではサポートされていない要素

custom html block

<dl>
<dt>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG</dt>
<dd>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</dd></dl>

THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

---

heading

heading block

H1     あいうえおABCあいうえおabc さしす

---

H2     あいうえおABCあいうえおabc さしす

---

H3     あいうえおABCあいうえおabc さしす

---

H4     あいうえおABCあいうえおabc さしす

---

H5     あいうえおABCあいうえおabc さしす

---

H6     あいうえおABCあいうえおabc さしす

---

h1-h6

H1     あいうえおABCあいうえおabc さしす

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

H2     あいうえおABCあいうえおabc さしす

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

H3     あいうえおABCあいうえおabc さしす

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

H4     あいうえおABCあいうえおabc さしす

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

H5     あいうえおABCあいうえおabc さしす

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

H6     あいうえおABCあいうえおabc さしす

---

image

image block

custom html block

<img src="https://www.tenman.info/wp3/emulsion/files/2023/06/image-23-1024x576.jpg" alt="" class="wp-image-101621"/>

gallery

gallery block

embed video

IFRAME

ブロックエディタではサポートされていない要素.

custom html block

<iframe
  id="inlineFrameExample"
  title="Inline Frame Example"
  width="300"
  height="200"
  src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik"
>
</iframe>

---

OL

list block

1. OL
2. あいうえお
3. ABCな
4. かきくけ
5. abc
6. さしす

• UL
• あいうえお
• ABCな
• かきくけ
• abc
• さしす

---

P

PあいうえおABCあいうえおabc さしす

たち

---

HR

hr block

---

custom html block

<hr />

---

PRE

preformatted block

 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

custom html block

<pre>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</pre>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

ruby

ブロックエディタではサポートされていない要素

<p><ruby><rb>明日 </rb><rt>(Ashita)</rt></ruby>は晴れる</p>

明日 (Ashita)は晴れる

---

TABLE

table block

OL

あいうえお

ABCな

かきくけ

abc

さしす

custom html block

<table border="1">
<tr><td>OL</td><td>あいうえお</td><td>ABCな</td><td>かきくけ</td><td>abc</td><td>さしす</td></tr>
</table>

OL

あいうえお

ABCな

かきくけ

abc

さしす

---

TABLE THEAD TH TBODY TFOOT TR TD

table block

OL	あいうえお	ABCな	かきくけ	abc	さしす
OL	あいうえお	ABCな	かきくけ	abc	さしす
OL	あいうえお	ABCな	かきくけ	abc	さしす
OL	あいうえお	ABCな	かきくけ	abc	さしす

custom html block

<table border="1">
	<thead>
		<tr>
		<th>OL</th>
		<th>あいうえお</th>
		<th>ABCな</th>
		<th>かきくけ</th>
		<th>abc</th>
		<th>さしす</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>OL</td>
			<td>あいうえお</td>
			<td>ABCな</td>
			<td>かきくけ</td>
			<td>abc</td>
			<td>さしす</td>
		</tr>
		<tr>
			<td>OL</td>
			<td>あいうえお</td>
			<td>ABCな</td>
			<td>かきくけ</td>
			<td>abc</td>
			<td>さしす</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>OL</td>
			<td>あいうえお</td>
			<td>ABCな</td>
			<td>かきくけ</td>
			<td>abc</td>
			<td>さしす</td>
		</tr>
	</tfoot>
</table>

OL	あいうえお	ABCな	かきくけ	abc	さしす
OL	あいうえお	ABCな	かきくけ	abc	さしす
OL	あいうえお	ABCな	かきくけ	abc	さしす
OL	あいうえお	ABCな	かきくけ	abc	さしす

---

TABLE TR TD COLGROUP

ブロックエディタではサポートされていない要素

custom html block

<table border="1">
  <caption>
    Superheros and sidekicks
  </caption>
  <colgroup>
    <col />
    <col span="2" class="batman" />
    <col span="2" class="flash" />
  </colgroup>
  <tr>
    <td> </td>
    <th scope="col">Batman</th>
    <th scope="col">Robin</th>
    <th scope="col">The Flash</th>
    <th scope="col">Kid Flash</th>
  </tr>
  <tr>
    <th scope="row">Skill</th>
    <td>Smarts</td>
    <td>Dex, acrobat</td>
    <td>Super speed</td>
    <td>Super speed</td>
  </tr>
</table>

Superheros and sidekicks

	Batman	Robin	The Flash	Kid Flash
Skill	Smarts	Dex, acrobat	Super speed	Super speed

https://stackoverflow.com/questions/51456383/apply-text-color-to-html-column

colorは、適用されない。

---

TABLE TR TD CAPTION

table block

	Batman	Robin	The Flash	Kid Flash
Skill	Smarts	Dex, acrobat	Super speed	Super speed

custom html block

<table border="1">
  <caption>
    Superheros and sidekicks
  </caption>
  <tr>
    <td> </td>
    <th scope="col">Batman</th>
    <th scope="col">Robin</th>
    <th scope="col">The Flash</th>
    <th scope="col">Kid Flash</th>
  </tr>
  <tr>
    <th scope="row">Skill</th>
    <td>Smarts</td>
    <td>Dex, acrobat</td>
    <td>Super speed</td>
    <td>Super speed</td>
  </tr>
</table>

Superheros and sidekicks

	Batman	Robin	The Flash	Kid Flash
Skill	Smarts	Dex, acrobat	Super speed	Super speed

---

CODE

コードブロックを使用しましょう

<?php echo 'hello world' ?>

インラインのコード

my_function() を使用します。

custom html block

<pre><code> &lt;?php echo 'hello world' ?&gt;</code></pre>

 <?php echo 'hello world' ?>

---

PRE

 PREあいうえおABCあいうえおabc さしす

---

block editerのメニューで使用されるインライン要素

code

my_function() を使用します。

---

STRONG

bold menu

STRONGあいうえおABCあいうえおabc さしす

---

mark

highlight menu

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

---

EM

斜体　メニュー

EMあいうえおABCあいうえおabc さしす

あいうえおあいうえおあいうえおな

---

KBD

キーボード入力　メニュー

<p><kbd>A</kbd></p>

A

k

あいうえおあいうえおな

---

S

打消し線 menu

SあいうえおABCあいうえおabc さしす

---

SUB

10 ₂

---

SUP

10 ²

---

クラッシックエディタのメニューで使用されるインラインタグ

del

classic menu

The XMP element contains preformatted text in which markup other than an end tag is treated as literal text.
delたちdivあいうえおあいうえおあいうえおあいうえおかきくけ

---

ins

classic menu

---

span

classic menu　文字色

paragraph block

red text

custom html block

<p><span style="color:red">red</span> text</p>

red text

---

その他 html編集で挿入可能なインライン要素

B

あいうえおABCあいうえおabc さしす

あいうえおあいうえおあいうえおあいうえおあいうえおSTRONG

---

I

IあいうえおABCあいうえおabc さしす

---

CITE

CITEあいうえおABCあいうえおabc さしす

html 編集で追加

あいうえおあいうえおあいうえおさしす

---

VAR

VARあいうえおABCあいうえおabc さしす

あいうえおあいうえおあいうえおな

---

TT

TTあいうえおABCあいうえおabc さしす

あいうえおあいうえおあいうえおあいうえおあいうえおCODEなSAMPなKBDな

---

SAMP

SAMPあいうえおABCあいうえおabc さしす

かきくけ

---

BIG

BIGあいうえおABCあいうえおabc さしす

---

SMALL

SMALLあいうえおABCあいうえおabc さしす

---

STRIKE

STRIKEあいうえおABCあいうえおabc さしす

sたちdivあいうえおあいうえおあいうえおあいうえおかきくけ

---

form要素

FORM

ブロックエディタではサポートされていない要素

custom html block

Enter your name:

Enter your email:

---

FORM disabled

ブロックエディタではサポートされていない要素

custom html block

Enter your name:

Enter your email:

---

datalist

ブロックエディタではサポートされていない要素

custom html block

エリア:

form radio

ブロックエディタではサポートされていない要素

custom html block

Select a maintenance drone:

Huey

Dewey

Louie

---

checkbox

ブロックエディタではサポートされていない要素

custom html block

Choose your monster’s features:

Scales

Horns

---

select

Tブロックエディタではサポートされていない要素

custom html block

–Please choose an option– Dog Cat Hamster Parrot Spider Goldfish

---

legend

かきくけ FORM あいうえお ABC さしす abc さしす

---

required

disabled

readonly

---

SELECT NAME=”SAMPLE1″ SIZE=”7″ MULTIPLE

ブロックエディタではサポートされていない要素

custom html block

Choose a pet: –Please choose an option– Dog Cat Hamster Parrot Spider Goldfish

---

FORM SELECT NAME=”SAMPLE1″ SIZE=”1″ MULTIPLE

ブロックエディタではサポートされていない要素

custom html block

Choose a pet: –Please choose an option– Dog Cat Hamster Parrot Spider Goldfish

---

submit type=”reset”

ブロックエディタではサポートされていない要素

custom html block

---

type password

ブロックエディタではサポートされていない要素

custom html block

Username:

Password (8 characters minimum):

---

type file

ブロックエディタではサポートされていない要素

custom html block

Choose a profile picture:

---

type email

ブロックエディタではサポートされていない要素

custom html block

Enter your globex.com email:

---

type button

ブロックエディタではサポートされていない要素

custom html block

---

type number

ブロックエディタではサポートされていない要素

custom html block

Number of tentacles (10-100):

---

type date

ブロックエディタではサポートされていない要素

custom html block

Start date:

type color

ブロックエディタではサポートされていない要素

custom html block

Choose your monster’s colors:

Head

Body

---

type range

ブロックエディタではサポートされていない要素

custom html block

Audio settings:

Volume

Cowbell

---

type month

ブロックエディタではサポートされていない要素

custom html block

Start month:

---

type week

ブロックエディタではサポートされていない要素

custom html block

Choose a week in May or June:

---

type time

ブロックエディタではサポートされていない要素

custom html block

Choose a time for your meeting:

Office hours are 9am to 6pm

---

type datetime-local

ブロックエディタではサポートされていない要素

custom html block

Choose a time for your appointment:

---

type search

ブロックエディタではサポートされていない要素

custom html block

Search the site:

Search

---

type tell

ブロックエディタではサポートされていない要素

custom html block

Enter your phone number:

Format: 123-456-7890

---

type url

ブロックエディタではサポートされていない要素

custom html block

Enter an https:// URL:

---

textarea

ブロックエディタではサポートされていない要素

custom html block

Tell us your story:

It was a dark and stormy night…

---