投稿フォーマット　チャット　TEST4 ユニットテスト

この投稿は、Raindropsテーマ1.454の投稿フォーマットのテストです。

ちょっとわかりにくいかもしれませんが、このテーマでは、更新ごとにこんなテストをしています。 会話形式　投稿フォーマット　チャット - CSS note 投稿フォーマットチャット　画像表示 - CSS note 投稿フォーマット　チャットの3回目テスト - CSS note 投稿フォーマット　チャット　TEST4 ユニットテスト - CSS note 発言者の幅が不足する時のCSS
default decode:true ">.raindrops-post-format-chat > dd { margin-left: 160px; }

div　blockquote等のブロック要素

多くのブロック要素で、WordPressはその子要素に対して、wpautop()関数で、p要素を自動的に追加します。このような場合チャット形式の表示は崩れます。
また、
必須 
<ins datetime="2003-10-18T22:22:08+09:00">彼の友人と共に、</ins>
のようなコロンの含まれるもの、インラインスタイル等は使わないでください。
どうしても必要なら、&#x3a;等で置換してください。
どうしても必要な場合は、
TEST
ブロック要素をチャットに含めたい

子要素1

子要素2

子要素3 

TEST:ブロック要素をチャットに含めたい
<div>
<p class="div-child">子要素1</p>
<p class="div-child">子要素2</p>
<p class="div-child">子要素3</p>
</div>
.loophole{
 margin:1em;
 padding:1em;
 box-sizing:border-box;
 border:1px dashed #aaa;
 color:green;
 background:Beige;
}
TEST
ブロック要素をチャットに含めたい2

子要素1

子要素2

子要素3 

TEST:ブロック要素をチャットに含めたい2
<blockquote class="loophole">
<p class="div-child">子要素1</p>
<p class="div-child">子要素2</p>
<p class="div-child">子要素3</p>
</blockquote>

主要要素別表示例

LINK
リンク文字列のデコードチェック//www.tenman.info/wp3/raindrops/2015/10/05/raindrops1-327がライブになりました/
ADDRESS
連絡先
ADDRESSあいうえおABC　ＡＢＣ　abc ａｂｃ
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.
DDATALIIST
データリスト DL　DT DD
DTあいうえおABC　ＡＢＣ　abc ａｂｃ
DD
あいうえお
ABC　
ＡＢＣ　
abc
ａｂｃ
FIELDSET
フォームグループ フィールドセット LEGEND
FIELDSET
FIELDSETあいうえおABC　ＡＢＣ　abc ａｂｃ
TABINDEXは指定できません
FORM
フォーム
FORMあいうえおABC　ＡＢＣ　abc ａｂｃ
HEDDING
見出し　リンクなし

H1     あいうえおABC　ＡＢＣ　abc ａｂｃ

H2     あいうえおABC　ＡＢＣ　abc ａｂｃ

     あいうえおABC　ＡＢＣ　abc ａｂｃ

H4     あいうえおABC　ＡＢＣ　abc ａｂｃ

H5     あいうえおABC　ＡＢＣ　abc ａｂｃ
H6     あいうえおABC　ＡＢＣ　abc ａｂｃ
HEDDING
見出し　リンクあり

H1     あいうえおABC　ＡＢＣ　abc ａｂｃ

H2     あいうえおABC　ＡＢＣ　abc ａｂｃ

     あいうえおABC　ＡＢＣ　abc ａｂｃ

H4     あいうえおABC　ＡＢＣ　abc ａｂｃ

H5     あいうえおABC　ＡＢＣ　abc ａｂｃ
H6     あいうえおABC　ＡＢＣ　abc ａｂｃ
IFRAME
インラインフレーム
OBJECT
オブジェクト
画像切り替え　等価な内容の記述
OL
番号付リスト
  1. OL
  2. あいうえお
  3. ABC　
  4. ＡＢＣ　
  5. abc
  6. ａｂｃ
UL
番号なしリスト
  • OL
  • あいうえお
  • ABC　
  • ＡＢＣ　
  • abc
  • ａｂｃ
HR
ヘアーライン
PRE
整形済みテキスト 
 PREあいうえおABC　ＡＢＣ　abc ａｂｃ
TABLE
表
OL あいうえお ABC　 ＡＢＣ　 abc ａｂｃ
FORM
INPUT type=text






FORM
INPUT type=radio
FORM:
FORM
あいうえお
ABC
ＡＢＣ
abc
ａｂｃ
FORM
INPUT type=radio + Label


FORM
INPUT type=radio + Label( wrapped )
FORM:



FORM
type="checkbox"
FORM
あいうえお
ABC
ＡＢＣ
abc
ａｂｃ
FORM
INPUT type=radio + Label


FORM
INPUT type=radio + Label( wrapped )



FORM
SELECT NAME="SAMPLE1" SIZE="7" MULTIPLE
FORM
SELECT NAME="SAMPLE1" SIZE="1" MULTIPLE
form
type="submit" type="reset"








FORM
type="password"

FORM
type="file"

FORM
type="email"

FORM
type="button"

FORM
type="number"

FORM
type="date"

FORM
type="color"

FORM
type="range"

FORM
type="month"

FORM
type="week"

FORM
type="time"

FORM
type="datetime"

FORM
type="datetime-local"

FORM
type="search"

FORM
type="tell"

FORM
type="url"

FORM
textarea

STRONG
強調 STRONGあいうえおABC　ＡＢＣ　abc ａｂｃ
EM
強調の意味で使用し、イタリック EMあいうえおABC　ＡＢＣ　abc ａｂｃ
VAR
変数の意味で使用し、イタリック体 VARあいうえおABC　ＡＢＣ　abc ａｂｃ
CODE
プログラムコードの意味で使用し、等幅フォント CODEあいうえおABC　ＡＢＣ　abc ａｂｃ
KBD: ユーザが入力する文字列 KBDあいうえおABC　ＡＢＣ　abc ａｂｃ
SAMP
サンプル SAMPあいうえおABC　ＡＢＣ　abc ａｂｃ
BIG
... BIGあいうえおABC　ＡＢＣ　abc ａｂｃ
SMALL
小さめの文字 SMALLあいうえおABC　ＡＢＣ　abc ａｂｃ
SUB
下付き文字 1 SUBあいうえおABC　ＡＢＣ　abc ａｂｃ
SUP
上付き文字 1 SUP
DEL
削除 The XMP element contains preformatted text in which markup other than an end tag is treated as literal text.
INS
挿入 第一通報者の少年は、彼の友人と共に、警察署から表彰された。 insは、divないでは使用できませんが、便宜上表示しています。
END
以上です。


新着記事