Gutenbergエディターのスキン対応ブロック一覧

その他
この記事は約4分で読めます。
記事内に広告が含まれています。

はじめに

Gutenbergエディターには多数のブロックがありますが、その中でもスキンが対応しているブロックをまとめます。

ブロック一覧

表1には、WordPress 7.0のブロック一覧を示しています。
また、スキンでCSSを追記している項目も併せて示します。

htmlブロック一覧
項目ブロックスキン対応備考
テキスト 段落
見出し●
リスト
引用●*1
コード●*2
詳細*3
数式WP 6.9
整形済みテキスト●*2
プルクオート●*1
テーブル
詩●*2
クラシック
メディア 画像
ギャラリー
音声
カバー
ファイル
メディアとテキストWP 7.1
プレイリスト
動画
アイコンWP 7.0
デザイン アコーディオンWP 6.9
ボタン
カラム*4
グループ
横並び
縦積み
グリッド
続き*6
ページ区切り
区切り●
スペーサー
タブWP 7.1
ウィジェット アーカイブ*7
カレンダー
ターム一覧
カテゴリー一覧*7
カスタム HTML
最新のコメント
最新の投稿
固定ページリスト
RSS
検索
ショートコード
ソーシャルアイコン
タグクラウド*7
テーマ ナビゲーション
サイトロゴ
サイトのタイトル
サイトのキャッチフレーズ
クエリーループ
アバター
タイトル
抜枠
投稿のアイキャッチ画像
作成者名
コメント数WP 6.9
コメントリンクWP 6.9
日付
投稿日
変更日
カテゴリー
タグ
前の投稿
次の投稿
所要時間WP 6.9
単語数WP 6.9
続きを読む
コメント
投稿コメントフォーム
ログイン / ログアウト
ターム数WP 6.9
タームの説明
ターム名WP 6.9
タームクエリーWP 6.9
アーカイブタイトル
検索結果のタイトル
投稿タイプラベル
作成者のプロフィール情報
パンくずリストWP 7.0
埋め込み 埋め込み
X 埋め込み
YouTube 埋め込み
WordPress 埋め込み
SoundCloud 埋め込み
Spotify 埋め込み
Flickr 埋め込み
Vimeo 埋め込み
Animoto 埋め込み
Cloudup 埋め込み
Crowdsignal 埋め込み
Dailymotion 埋め込み
Imgur 埋め込み
Issuuを め込み
Kickstarter 埋め込み
Mixcloud 埋め込み
Pocket Casts 埋め込み
Reddit 埋め込み
ReverbNation 埋め込み
Scribd 埋め込み
SmugMug 埋め込み
Speaker Deck 埋め込み
TikTok 埋め込み
TED 埋め込み
Tumblr 埋め込み
VideoPress 埋め込み
WordPress.tv 埋め込み
Amazon Kindle 埋め込み
Pinterest 埋め込み
Wolfram 埋め込み
Blueskey 埋め込み
Cocoonブロック アイコンボックス●
案内ボックス●
白抜きボックス●
付箋風ボックス●
タブボックス●
吹き出し●
ブログカード●
ボタン
囲みボタン
アコーディオン(トグル)●
検索案内●
タイムライン●
アイコンリスト●
FAQ●
ランキング●
テンプレート
ボックスメニュー●
広告
プロフィール●
新着記事●
人気記事●
新着情報●
ナビカード●
タブ●Cocoon 2.7.4
CTA●Cocoon 2.7.5
レーダーチャートCocoon 2.7.8
キャンペーンCocoon 2.9.1.2
ログインユーザー限定Cocoon 2.9.1.2
Amazon商品リンクCocoon 2.9.1
楽天商品リンクCocoon 2.9.1
Cocoon汎用ブロック 見出しボックス●Cocoon 2.7.8
タブ見出しボックス●
ラベルボックス●
Cocoonマイクロコピー マイクロバルーン
マイクロテキスト
Cocoonレイアウト 2カラム*5
3カラム*5

  1. <blockquote>タグ
  2. <pre>タグで、「コード」ブロックのときCocoon機能で「言語」を選択可能
  3. <details>タグ
  4. 「モバイルでは縦に並べる」は、画面幅が781px以下で折り返しとなる
  5. 画面幅が834px以下で折り返しとなる
  6. 「続き」ブロックは機能しない
  7. WordPress 6.7対応でウィジェットとブロックで表示が異なり、ブロックはWordPress標準に変更

メニューから不要なブロックを非表示にするには

Gutenbergエディター

以下の手順で不要なブロックをメニューから非表示にすることができます(図1参照)。

  1. 「オプション」をクリックします。
  2. 「設定」をクリックします。
  3. 設定「ブロック」をクリックします。
  4. チェックボックスをクリックし、ブロックの表示・非表示を設定します。

さいごに

Gutenbergエディターには多くのブロックがあり、スキン対応のブロックを活用することで、より魅力的なデザインが可能です。
必要のないブロックは非表示にでき、編集画面の整理が容易になります。
これにより、効率的なコンテンツ制作が可能です。

タイトルとURLをコピーしました