これはブロックエディタのデザイン確認用に作成したサンプル記事です。記事詳細テンプレート(single.php)が見出し・引用・リスト・画像・テーブル・コードなどの各ブロックをどのように表示するかを一覧でチェックできます。

本文中の太字(strong)斜体(em)サイト内リンク外部リンク の表示も確認できます。inline code のスタイリングもこのとおり。

見出し2(h2)— 大見出し

見出し2の下に来る段落です。見出し2は記事の章立てに使います。下線色はテラコッタ系で、上下に十分な余白を確保しています。

見出し3(h3)— 中見出し

見出し3は章の中の節として使う想定です。左端にテラコッタの縦線が入ります。短くシャープに、目に止まりやすく。

見出し4(h4)— 小見出し

見出し4は項目をさらに細かく分けたいときの保険として用意しています。

  • 箇条書きリスト1:これは順序のないリストです
  • 箇条書きリスト2:主に並列の項目を並べるのに使います
  • 箇条書きリスト3:複数行にわたる長めの項目も入れ子の階層も表示できます
    • 入れ子リスト A
    • 入れ子リスト B
  1. 番号付きリスト1:これは順序のあるリストです
  2. 番号付きリスト2:手順や時系列のあるものに
  3. 番号付きリスト3:自動でナンバリングされます

引用ブロックです。本のひとことや、取材した相手の言葉、別の記事からの引用を入れるときに使います。テラコッタの縦バー+ベージュ背景で、本文と一線を画す視覚デザインに。

— 引用元の名前

画像とキャプション

東大阪の工場街並み
画像キャプションのサンプル。写真の下に注釈を入れられます。

テーブル

出来事備考
2013工場を記録する会 設立3月
2018展示場「東大阪モノづくりミュージアム」開設大和リース大阪本店内
2024Instagramによる発信を開始8月

コードブロック

// preformatted code
function helloFactory() {
    return "東大阪モノづくり";
}
console.log(helloFactory());

区切り線

下に区切り線(separator)が入ります。文章の区切りに。


区切りの後の段落。雰囲気が切り替わります。

プルクオート(強い引用)

大きく目立つ引用。記事のキメ台詞・キーメッセージに使います。

記事冒頭から

ボタン

サンプル記事は以上です。各ブロックの見え方・余白・色のチェックにお使いください。

お知らせ一覧へ トップへ戻る