カテゴリー
極端な例

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

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

Pneumonoultramicroscopicsilicovolcanoconiosis

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

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

チェックすべき項目:

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

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

-ms-word-wrap: break-word;

word-wrap: break-word;
カテゴリー
極端な例

タイトルのない投稿。

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

カテゴリー
極端な例

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

カテゴリー
あさひ いろは うえの えいご おおさか かわせ きって くらぶ けしき こども さくら しんぶん すずめ せかい そろばん ほげ A アメリカ イタリア ウクライナ エジプト オーストラリア カテゴリー 1 カテゴリー 2 カテゴリー 3 カテゴリー A カテゴリー B カテゴリー C カナダ キューバ クロアチア ケニア コスタリカ サブ チャンピオンシップ テンプレート ブログロール マークアップ メディア 北海道 墾田永年私財法 子カテゴリー 01 子カテゴリー 02 子カテゴリー 03 子カテゴリー 04 子カテゴリー 05 孫カテゴリー 実習 宮城 山形 岩手 平等院鳳凰堂 建武の新政 征夷大将軍 御家人 応仁の乱 懲らしめる 投稿フォーマット 未公開 栃木 極端な例 気が進まない 消毒 福島 秋田 群馬 茨城 親ほげ 親カテゴリー 購入 配置 青森

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

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

カテゴリー
極端な例

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

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

カテゴリー
極端な例

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

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

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

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

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

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

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

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

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

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

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