課題解決、品質向上、技術向上のセミナーならTH企画セミナーセンター

【1】WordPress表示確認用テスト記事

この記事はWordPressのブロックエディタで作成された様々なブロックの表示確認用です。見出し、段落、リスト、引用、画像、テーブルなど、主要なブロックが含まれています。

見出しのテスト

これは見出し3(H3)です

通常の段落テキストです。この段落には太字斜体のテキストが含まれています。また、リンクテキストも含まれています。

これは見出し4(H4)です

段落内の様々な装飾をテストしています。

リストのテスト

箇条書きリスト(UL)

  • リスト項目1
  • リスト項目2
  • リスト項目3
    • ネストされた項目A
    • ネストされた項目B
  • リスト項目4

番号付きリスト(OL)

  1. 番号付き項目1
  2. 番号付き項目2
  3. 番号付き項目3
  4. 番号付き項目4

引用のテスト

これは引用ブロックです。引用符で囲まれた重要な文章や、他の人の言葉を引用する際に使用します。

引用元の名前

画像の配置テスト

画像を左寄せ、中央寄せ、右寄せで配置した場合の表示を確認できます。

左寄せ画像
画像キャプション(左寄せ)

左寄せの画像の横にテキストが回り込みます。この段落は画像の右側に表示されます。テキストの量が多い場合は、画像の下にも続いて表示されます。

段落を続けることで、回り込みの動作を確認できます。複数の段落がある場合でも、画像の高さまで回り込みが続きます。


中央寄せ画像
画像キャプション(中央寄せ)

右寄せ画像
画像キャプション(右寄せ)

右寄せの画像の横にテキストが回り込みます。この段落は画像の左側に表示されます。左寄せの場合と同様に、テキストが画像の高さを超える場合は下に続きます。

このようにして、画像とテキストのレイアウトを確認することができます。


テーブルのテスト

ヘッダー1ヘッダー2ヘッダー3
データ1-1データ1-2データ1-3
データ2-1データ2-2データ2-3
データ3-1データ3-2データ3-3
データ4-1データ4-2データ4-3

コードのテスト

インラインコード:const example = "Hello World";

function greet(name) {
    console.log(`Hello, ${name}!`);
}

greet("World");

ボタンのテスト

カラムのテスト

カラム1

これは1つ目のカラムです。複数のカラムを並べて表示することができます。

カラム2

これは2つ目のカラムです。レスポンシブ対応で、画面幅が狭い場合は縦に並びます。

カラム3

これは3つ目のカラムです。カラム数は自由に設定できます。

テキスト配置のテスト

これは左寄せのテキストです。

これは中央寄せのテキストです。

これは右寄せのテキストです。

区切り線のテスト

セクションを分けるために区切り線を使用できます。


区切り線の後のコンテンツです。

スペーサーのテスト

スペーサーブロックで余白を調整できます。

上に50pxの余白があります。

まとめ

以上が主要なWordPressブロックの表示確認用サンプルです。このテスト記事を使用して、テーマのスタイルが正しく適用されているか確認してください。

  • すべての見出しレベルが正しく表示される
  • テキストの装飾(太字、斜体、リンク)が機能する
  • リストが適切にインデントされる
  • 画像の配置(左、中央、右)が正しく動作する
  • テーブルが読みやすく表示される
  • ボタンのスタイルが適用される
  • カラムがレスポンシブに動作する

問題があれば、CSSを調整してください。