記事パーツ
サンプル
h1(使うことはないと思うが一応用意)
h2の見出し長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト
h3の見出し長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト
h4の見出し長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト
h5の見出し長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト
h6の見出し長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト
pです。通常のテキストに使います。WordPressのデフォルトの段落ブロックもこれです。長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテ
pの中では色々な装飾が利用できます。
リンク(a要素)を挿入することができます。外部リンク(target="_blank")になることもあります。PDFリンク(リンク先が.pdf)を使うこともあります。WordPressのエディタでは強調(strong要素)や斜体(em要素)も使用できます(CSSを変更して、太字や斜体以外のスタイルを割り当てることも可能です)。
あcodeあEnterあああ上付きあ下付き あ打ち消し線(s)あ
- ul(箇条書きリスト)
- 長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト
-
ネストもできます
-
ulの中のul
- テキスト
- テキスト
-
ulの中のol
- テキスト
- テキスト
-
ulの中のul
- テキスト
- ol(番号付きリスト)
- 長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト
-
ネストもできます
-
olの中のul
- テキスト
- テキスト
-
olの中のol
- テキスト
- テキスト
-
olの中のul
-
一部分の行頭記号を変更する場合、
data-list-marker属性に設定してください。 -
一部分の行頭記号を変更する場合、
data-list-marker属性に設定してください。 - テキスト
テーブル
| 行見出し | テーブルセル |
|---|---|
| 行見出し | 長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト |
区切り線
WordPressの画像・動画・テーブルブロックはfigureで出力されます
| ヘッダー | ヘッダー | ヘッダー |
|---|---|---|
| テーブルセル | ||
| テーブルセル | 長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト | テーブルセル |
| テーブルセル | ||
| フッター | フッター | フッター |
その他、一応考慮しておくWordPressで使用できるブロック
コード
整形済み
引用ブロック
引用元
詩
自前定義するパーツ
勅使河原
本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。
補足が入ります。補足が入ります。補足が入ります。補足が入ります。補足が入ります。補足が入ります。補足が入ります。補足が入ります。補足が入ります。
囲み枠
囲み枠の中のテキスト
囲み枠の中のテキスト
デザイン上の考慮事項
-
長いテキストが入った場合の表示を確認してください。
- このサンプルでは1行までで省略する処理としていますが、あくまで一例であり、これに限る必要はありません。
実装上の考慮事項
-
.article-contentクラス内にあるHTML要素に対してスタイルを適用します。 -
特定の範囲をスタイルの適用から除外したい場合、
.article-content__ignoreを使用してください。
なお、.article-content__ignoreの子要素で.article-contentを用いてもスタイルが適用されないことに気を付けてください。
アクセシビリティ上の考慮事項
- リンクがキーボードでも操作できることを確認してください(達成基準 2.1.1 キーボード (レベル A))。
- フォーカスインジケータが正しく表示されることを確認してください(達成基準 2.4.7 フォーカスの可視化 (レベル AA))。
見出し
-
見出しを
h1-h6タグでマークアップしてください。また、正しい見出しレベルを用いてください(達成基準 1.3.1 情報及び関係性 (レベル A)) - 見出しが、そのセクションの主題を説明していることを確認してください(達成基準 2.4.6 見出し及びラベル (レベル AA))。
- 見出しを用いてコンテンツを整理してください(達成基準 2.4.10 セクション見出し (レベル AAA))。
リンクの表示
- リンクは色のみで表現せず、下線を伴って表現することを推奨します(達成基準 1.4.1 色の使用 (レベル A))
- ただし、「リンクの色が、リンク以外のテキストと3:1のコントラスト比があり」かつ「ホバー・フォーカス時にフォントスタイルの変化(下線など)がある」場合は達成基準1.4.1に適合する(G183: 色が単独でリンク又はコントロールを特定する場所で、周囲のテキストと一緒に 3:1 のコントラスト比を使用し、そのリンク又はコントロールのフォーカスに追加の視覚的な手がかりを提供する)
- 4.5:1以上のコントラスト比が保たれていることを確認してください(達成基準 1.4.3 コントラスト (最低限) (レベル AA))
- 「新しいタブで開く」ことをアイコンによって示す場合、代替テキストが設定されていることを確認してください(達成基準 1.1.1 非テキストコンテンツ (レベル A))