この記事でわかること
- テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。
- テキスト2です。テキスト2です。テキスト2です。テキスト2です。テキスト2です。テキスト2です。テキスト2です。テキスト2です。テキスト2です。
- テキスト3です。テキスト3です。テキスト3です。テキスト3です。テキスト3です。テキスト3です。テキスト3です。テキスト3です。テキスト3です。テキスト3です。テキスト3です。テキスト3です。
目次
大見出し（H2）のテスト
ここは通常の段落（pタグ）です。テキストの行間や文字サイズ、文字色が指定通りに適用されているか確認するためのダミーテキストです。WordPressの wpautop 機能により、HTMLエディタ上ではpタグを省略して改行するだけでも自動的に段落として認識されます。
中見出し（H3）のテスト：背景色付き
H3タグは背景色が敷かれ、角丸になるようにデザインを適用しています。見出しの上下の余白（マージン）も綺麗に取られているはずです。
リスト（箇条書き・番号付き）のテスト
以下は、今回新しく枠線と背景色（#f9f9f9）を付与したリストデザインのテストです。
- 箇条書きリストのテスト項目1
- 箇条書きリストのテスト項目2
- 入れ子（ネスト）されたリスト1
- 入れ子（ネスト）されたリスト2
- 箇条書きリストのテスト項目3
- 番号付きリストのテスト項目1
- 番号付きリストのテスト項目2
- 番号付きリストのテスト項目3
画像回りのCSSテスト（キャプション付き）
キャプション
画像の中央揃え、およびキャプション（グレー文字・中央揃え）のテストです。
画像の回り込み（左揃え・右揃え）のテスト
このテキストは左寄せ画像の右側に回り込んで表示されます。PC表示では画像が左、テキストが右に回り込みますが、SP（スマホ）表示にした際にはこの回り込みが自動的に解除され、画像とテキストが縦に１列に並ぶようにCSSを設定しています。文章が短い場合でも、下に続く見出し（h2やh3）がフロートを解除（clear:both）するため、レイアウト崩れは起きません。
続いてこちらは右寄せ画像のテストです。テキストが画像の左側に配置されます。こちらも同じく、スマホで見た際には回り込みが解除されて中央配置になります。
テーブル（表組）のテスト
TinyMCE Advanced 等で入力される想定の標準的なテーブルです。上下のドット線や、見出しセル（th）の背景色が適用されます。
| 項目名（TH） | データセル（TD）のテスト内容が入ります。 |
|---|---|
| 費用について | 100,000円〜（税込） |
| 対応エリア | 関東全域 |
あわせて読みたい（ショートコード）のテスト
ショートコードブロックです。※ id="1" の部分は、実際のテスト環境に存在する記事のIDに変更してからプレビューしてください。
この記事のライター
admin@user
プロフィール情報です