1行分しか想定されていない見出しのデザインだと文字がはみ出してしまってあら大変。ものすごく長い日本語のタイトルが付いた記事の表示テストです。複数行になっても問題ないデザインだといいですね。あと前後の記事へのリンクを出力している場合や、パンくずリストを実装している場合なども表示にズレがないか確認しておきましょう。

• 記事タイトル部分の見出しデザインが崩れていないか、文字が背景からはみ出していたりしないか確認しましょう。
• the_post_navigation() などで前後の記事のタイトルを出力する場合も、レイアウト崩れが発生していないか確認しましょう。
• その他、ウィジェットやプラグイン等でいろいろな場所に記事タイトルが出力されるケースが多いので併せて確認しましょう。
• 用途に応じて、wp_trim_words() 関数を使って文字列をトリミングするという手もあります。

Pneumonoultramicroscopicsilicovolcanoconiosis

タイトルが長い英単語の時、コンテンツエリアをはみ出すべきではない。

ラテン文字45字で書かれるこの単語は、辞書に記載されている中では最も長い実用的な英単語とされている。

チェックすべき項目:

• タイトル・コンテンツ・コメント内の改行なしテキストが、レイアウトや機能に悪影響を及ぼしてはなりません。
• ブラウザのウインドウやタブのタイトルをチェックしてください。
• プラグインやウィジェットの開発者の方は、このテキストにより何かが崩れたりしていないかチェックしてください。

改行なしテキストにうまく対応するために、以下の CSS プロパティが役立つでしょう。

-ms-word-wrap: break-word;

word-wrap: break-word;

タイトルのない投稿。

しかし、この投稿へのリンクは表示されなければならない。

極端な例: コンテンツのない投稿

極端な例: たくさんのカテゴリー

多すぎるほどのカテゴリーに属している投稿。

極端な例: たくさんのタグ

多すぎるほどのタグを持つ投稿。

極端な例: ネスト化された混合リスト

ネスト化された混合リストでは以下が正しく表示されるようにしてください。

• リストの中のリストは番号付きリストの順番を壊さないこと
• 箇条書きのスタイルの深さは十分であること

番号付きリスト – 番号なしリスト – 番号付きリスト

1. 番号付きリストアイテム
2. 番号付きリストアイテム
   • 番号なし
   • 番号なし
     1. 番号付きリストアイテム
     2. 番号付きリストアイテム
3. 番号付きリストアイテム
4. 番号付きリストアイテム

番号付きリスト – 番号なしリスト – 番号なしリスト

1. 番号付きリストアイテム
2. 番号付きリストアイテム
   • 番号なし
   • 番号なし
     • 番号なしリストアイテム
     • 番号なしリストアイテム
3. 番号付きリストアイテム
4. 番号付きリストアイテム

番号なしリスト – 番号付きリスト – 番号なしリスト

• 番号なしリストアイテム
• 番号なしリストアイテム
  1. 番号付き
  2. 番号付き
     • 番号なしリストアイテム
     • 番号なしリストアイテム
• 番号なしリストアイテム
• 番号なしリストアイテム

番号なしリスト – 番号なしリスト – 番号付きリスト

• 番号なしリストアイテム
• 番号なしリストアイテム
  • 番号なし
  • 番号なし
    1. 番号付きリストアイテム
    2. 番号付きリストアイテム
• 番号なしリストアイテム
• 番号なしリストアイテム