グリッドシステム

等幅

PCのみ横並び

SPでも横並び

列サイズ

PCのみ横並び

SPでも横並び

レイアウト

回り込み（float）

左回り込み

右回り込み

回り込み解除

コンテナぶち抜き（1カラム向け）

画像に微妙に重ねる（1カラム向け）

画像が左側

恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。

画像が右側

恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。

タイポグラフィ

見出し（h2）

恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。

<h2>見出し2</h2>

見出し（h3）

恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。

<h3>見出し3</h3>

見出し（h4）

恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。

見出し4

見出し（h5）

恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。

見出し5

リード文

恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。

注意書き

恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。

ボックス

インラインテキスト

意味的な強調（strong）

強調

アクセント（em）

アクセント

リンクアイコン

リンクアイコン

PDFファイル

エクセルファイル

Wordファイル

引用（blockquote）

引用元表示なし

恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。

引用元表示あり

恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。

宮沢賢治『ポラーノの広場』

リスト

装飾なしリスト

• 恥の多い生涯を送って来ました。
• 恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。
  • 入れ子のリスト
• 恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。

非順序リスト

• 恥の多い生涯を送って来ました。
• 恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。
  • 入れ子のリスト
• 恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。

順序リスト

1. 恥の多い生涯を送って来ました。
2. 恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。
   1. 入れ子のリスト
3. 恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。

※つきリスト

• ※恥の多い生涯を送って来ました。
• ※恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。
• ※恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。

リンクリスト

• 恥の多い生涯を送って来ました。
• 恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。
  • 入れ子のリスト
• 恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。

テーブル（プラグイン「Flexible Table」を使用）

通常のテーブル

SPのみ縦並び

SPのみスクロール

画像

ポップアップ表示

コンポーネント

ページ内リンク

• 見出し
• テキスト
• パーツ
• レイアウト
• リスト
• テーブル
• ヘルパークラス
• フォーム

<ul class="toc">
  <li><a href="#"></a></li>
</ul>

ボタン

一覧を見る

別タブリンク

PDFリンク

<a href="#" class="wp-block-button__link">リンク文字

FAQ

ここに質問が入りますここに質問が入りますここに質問が入りますここに質問が入りますここに質問が入りますここに質問が入りますここに質問が入りますここに質問が入りますここに質問が入ります＋

ここに回答が入りますここに回答が入りますここに回答が入りますここに回答が入りますここに回答が入りますここに回答が入りますここに回答が入りますここに回答が入りますここに回答が入ります

  

    
      hoge
      ＋
    
  
  

    
hoge
  

外部サービス埋め込み

YouTube

Googleマップ

※カスタムHTMLブロックを想定。JSでURL判定しラッパー付与

フォーム

入力画面

1. ご入力
2. ご確認
3. 送信完了

  
ご入力
  
ご確認
  
送信完了

確認画面

1. ご入力
2. ご確認
3. 送信完了

  
ご入力
  
ご確認
  
送信完了

完了画面

1. ご入力
2. ご確認
3. 送信完了

  
ご入力
  
ご確認
  
送信完了

ヘルパークラス

装飾なし

見出しが画像の場合など、CSSの装飾を無くす場合に使用

テキスト

小さい文字

さらに小さい文字

大きい文字

さらに大きい文字

左寄せ

中央寄せ

右寄せ

テキストの上端揃え

テキストの中央揃え

テキストの下端揃え

テキストを折り返す

テキストを折り返さない

余白

上マージン

上マージンなし

更に細かい余白

.mt10～.mt100まで10刻みで上マージン
.pt10～.pt100まで10刻みで上パディング

下マージン

下マージンなし

下マージンデフォルト

下マージン デフォルトの半分

下マージン デフォルトの倍