ブロックエディタ見本 コアブロック

固定ページや投稿ページの記事作成に使用するCocoonブロック、コアのブロックについてスキンで独自スタイルを追加しています。

この記事ではコアブロックの各スタイルについて見本を載せています。（スキンでスタイルを追加しているのは一部のブロックのみになります。）

コアブロックと呼んでいるのは、WordPressのデフォルトで用意されているブロックです。
※段落、見出し、画像、引用などのことです。

Cocoonの独自ブロックである、Cocoonブロックの各見本については、別記事にまとめておりますので、以下ご参照ください。

記事見出し-H2

記事の見出しH2のスタイルです。

記事を作成される場合はH2を最も多く使用するのではないかと思います。

※H1は記事の見出しになるため、記事内では使用しない前提としています。

記事見出し-H3

記事の見出しH3のスタイルです。

記事見出し-H4

記事の見出しH4のスタイルです。

記事見出し-H5

記事の見出しH5のスタイルです。

記事見出し-H6

記事の見出しH6のスタイルです。

段落

すべての文章の基本の構成ブロックです。

段落>スタイルに含まれるアイコンボックスについて、Cocoonブロックのアイコンボックスと同様のスタイルになります。

※案内ボックス、付箋風ボックスのスタイルもご利用可能です。（見本の画像は省略）

見本

情報

質問

アラート

メモ

コメント

OK

NG

グッド

バッド

プロフィール

引用

他サイトに載っている内容を引用したい場合に使用します。

エディタでテキスト、背景色変更が可能です。

見本

ここに引用文

引用元の記載

プルクオート

引用の強調版、といった感じのブロックになります。

当スキンではそれほど引用と違いがないので、どちらを使用するか迷ったら引用をご使用ください。

エディタでテキスト、背景色変更が可能です。
なお、枠線・角丸の設定項目がありますが、当スキンではこちらでのデザイン変更は考慮できておりません。

ここに引用文

引用元の記載

テーブル

表を作成できるブロックです。

スキンで変更したのはCocoon設定 > 本文 > テーブル設定のレスポンシブテーブルがONの時の、スクロールヒントのスタイルになります。

レスポンシブテーブルについては公式のマニュアルより、以下をご参照ください。

公式のマニュアルより画像を引用

テーブルが横スクロール表示になったとき、「スクロールできます」というテキストと、アイコンが表示されます。

このスタイルがスキン独自になります。また、テーブルに付いていたシャドウをOFFにしています。

見本

記事の編集画面では、テーブルの横スクロールとスクロールヒントは表示されません。プレビューでご確認ください。

No	名前	住所	電話番号	好きなアニメ	プロフィール画像
1	なな　ふぁくとりー	〇〇県△市XXXXX	090-XXX-XXXX	キングダム、歴史漫画ならたいていいける
2	ななふ　太郎	〇〇県△市XXXXX	090-XXX-XXXX	ガンダムシリーズ。最近一番良かったのは水星の魔女

参考（テーブルの幅固定）

スキンのスタイルではありませんが、ご参考として。

エディタで「表のセル幅を固定」をONにすると、Cocoon設定 > 本文 > テーブル設定のレスポンシブテーブルをONにしていても、以下のように横スクロール表示ではなくなります。

枠線などのカラー変更も可能です。

No	名前	住所	電話番号	好きなアニメ	プロフィール画像
1	なな　ふぁくとりー	〇〇県△市XXXXX	090-XXX-XXXX	キングダム、歴史漫画ならたいていいける
2	ななふ　太郎	〇〇県△市XXXXX	090-XXX-XXXX	ガンダムシリーズ。最近一番良かったのは水星の魔女
2	2	2	2	2	2

参考（テーブルブロック以外のテーブル）

カスタムHTML等でテーブルを作成された場合も、Cocoon設定 > 本文 > テーブル設定のレスポンシブテーブルがONの時、テーブルが横スクロール表示になったときにテーブルブロックと同様なスタイルのスクロールヒントが表示されます。

v1.0.6以降で適用されます。

以下はカスタムHTMLで作成したサンプルテーブルです。
テーブルブロックと同じスクロールヒントが表示されます。

記事は以上です。