CocoonとSWELLの機能名・設定比較対照表～ブロック編～

2022年5月6日

乗り換えサポート用プラグインを紹介した記事で「プラグインでデザインが維持されているブロックも修正推奨」と記載しました。

しかし乗り換えたばかりの時はSWELLの機能名や設定場所を覚えてないため戸惑ってしまいがちです。

Cocoonのあの機能はSWELLでどうやって出すんだ…

今回はCocoonとSWELLで類似しているブロック機能の名称と設定をまとめました。

新人SWELLERの方や、ド忘れしてしまう方に向けた内容になります。

WordPress標準の機能は割愛します。表示場所や設定場所が特殊な場合のみ記載しています。

私が気づいてないだけの事もあると思います。そういう場合はぜひ連絡ください。

「こうやって代替している」という情報も大歓迎です。

Cocoon 2.4.3とSWELL – ver. 2.6.1までの情報を記載しています。

CocoonとSWELLの両方にある機能

「SWELLにも存在するブロックのはずなのに「/」入力しても見つからない。」

そんな移行組あるある（？）を減らすための比較表です。

テキスト装飾

入力した文字に色やマーカーをつける機能です。

スクロールできます

Cocoon での名称	Cocoonでのグループ	SWELL での名称	SWELLでのグループ	備考
マーカー	文字（右側）	マーカー線	SWELL装飾	色の選択しは同じだがカラーコードは異なる。SWELLは塗りつぶしじゃなく斜線の集合で少しおしゃれ（背景色との差別化？）。
フォントサイズ	フォントサイズ	フォントサイズ	SWELL装飾
広告	ショートコード	記事内広告	ショートコード	両方ともadショートコードが追加される。
新着記事一覧	ショートコード	投稿リスト	SWELLブロック（ブロック挿入ツール）	Cocoonはオプションを全てデフォルト値で表示してくれる。SWELLの方がマウスで感覚的にできる。
人気記事一覧	ショートコード	投稿リスト	SWELLブロック（ブロック挿入ツール）	Cocoonはオプションを全てデフォルト値で表示してくれる。SWELLの方がマウスで感覚的にできる。
評価スター	ショートコード	評価用スター	ショートコード	Cocoonは数値の表示もできる。
ログインコンテンツ	ショートコード	制限エリア	SWELLブロック（ブロック挿入ツール）	SWELLはログイン時限定コンテンツショートコードもあるが、制限エリアブロックの方が設定が豊富
期間限定（campaign）	ショートコード	制限エリア	SWELLブロック（ブロック挿入ツール）	Cocoonのcampaignはリストに表示されていない
アフィリエイトタグ	アフィリエイトタグ	広告タグ	SWELLブロック（ブロック挿入ツール）	SWELLはテキスト型、バナー型、アフィリエイト型、Amazon型、ランキング型など表示形式を選択可能。乗り換えプラグインではCocoonの再現可能
ランキング	ランキング	広告タグ	SWELLブロック（ブロック挿入ツール）
書式のクリア	続きを読む（ブロックツールバー）	書式のクリア	SWELL装飾

ボックス系

補足情報(i)など文字を囲むブロックです。

Cocoonではブロックとして独立していたボックス系ですが、SWELLでは段落の設定から設定します。

SWELLのアイコンボックスはSWELL設定からアイコンや背景色の変更が可能です。

スクロールできます

Cocoon での名称	Cocoonでのグループ	SWELL での名称	SWELLでのグループ	備考
アイコンボックス	COCOONブロック	スタイル	段落ブロックの設定	一部は乗り換えプラグインのみ再現可能
白抜きボックス	COCOONブロック	ボーダー設定	段落ブロックの設定	背景色はブロックツールバーから
付箋風ボックス	COCOONブロック	付箋（スタイル）	段落ブロックの設定
タブボックス	COCOONブロック	キャプションボックス（スタイル：小）	SWELLブロック（ブロック挿入ツール）	SWELLはアイコンや文字などを自分で設定可能
見出しボックス	COCOON汎用ブロック	キャプションボックス（スタイル：デフォルト）	SWELLブロック（ブロック挿入ツール）	「スタイル：浮き出し」も似ている
タブ見出しボックス	COCOON汎用ブロック	キャプションボックス（スタイル：小）	SWELLブロック（ブロック挿入ツール）	SWELLは枠内なども設定可能
ラベルボックス	COCOON汎用ブロック	キャプションボックス（スタイル：枠上）	SWELLブロック（ブロック挿入ツール）	どちらもアイコンを設定可能。SWELLはキャプションに背景色を設定可能

その他ブロック

スクロールできます

Cocoon での名称	Cocoonでのグループ	SWELL での名称	SWELLでのグループ	備考
吹き出し	COCOONブロック	ふきだし	SWELLブロック（ブロック挿入ツール）	Cocoon：漢字、SWELL：ひらがな。「/」入力注意
ブログカード	COCOONブロック	関連記事	SWELLブロック（ブロック挿入ツール）	Cocoonはラベル毎にアイコンが変わる。SWELLはキャプション（ラベル）が自由記述。
ボタン	COCOONブロック	SWELLボタン	SWELLブロック（ブロック挿入ツール）	みんな大好きSWELLボタン。SWELLの方が設定は豊富。
囲みボタン	COCOONブロック	SWELLボタン	SWELLブロック（ブロック挿入ツール）	SWELLボタンは「広告タグを直接入力」で再現可能。
アコーディオン(トグル)	COCOONブロック	アコーディオン	SWELLブロック（ブロック挿入ツール）	SWELLは開いた状態から表示を設定可能。
タイムライン	COCOONブロック	ステップ	SWELLブロック（ブロック挿入ツール）	Cocoonはステップの文字に文字装飾できる。SWELLはステップの文字を一括で設定できる。
アイコンリスト	COCOONブロック	リスト	テキスト（ブロック挿入ツール）	SWELLは通常のリストにアイコンなどを設定する項目が追加されている SWELL推奨のUseful Blocksを使用するのも手
クエリーループ（投稿一覧）	テーマ（ブロック挿入ツール）	投稿リスト	SWELLブロック（ブロック挿入ツール）	Cocoonは投稿一覧と同機能。
テーブルスクロール設定方法左側列固定設定方法	テキスト（ブロック挿入ツール）	テーブル	テキスト（ブロック挿入ツール）	SWELLはデザインが豊富で縦並びもできる。スクロールは両テーマできる。
3カラム	COCOONレイアウト（ブロックツールバー）	カラム	デザイン（ブロック挿入ツール）	デザインはSWELLの方が豊富。Cocoonは2カラムと違い、設定ができない。乗り換えプラグインでは再現可能
カラーパレット	Cocoon設定→エディター→拡張カラーパレット色	カラーパレット	SWELL設定→エディター設定→カラーセット	Cocoonは6枠、SWELLは濃いと淡い各4枠
ボックスメニュー	ショートコード	ボックスメニュー	SWELLブロック（ブロック挿入ツール）	SWELLは投稿画面で編集可能 Cocconは説明の記載が可能

Cocoonに有ってSWELLに無い機能

探せばプラグインで再現することも可能かもしれません。

「乗り換えプラグインでは再現可能」と備考に記述している機能は、プラグインを有効化している場合のみ再現されます。

どうしてもCocoonの見た目が良い場合はプラグインを無効化しないようにしてください。

テキスト装飾

ブロックツールバーから設定できる装飾についてです。代替機能は一例です。

スクロールできます

Cocoon での名称	Cocoonでのグループ	SWELL 代替機能	SWELLでの設定場所	備考
太字（boldクラス指定）	文字（ブロックツールバー）	カスタム書式	SWELL設定→エディター設定→カスタム書式	一度設定すればブロックツールバーから呼び出せる
バッジ	バッジ（ブロックツールバー）	カスタム書式	SWELL設定→エディター設定→カスタム書式	乗り換えプラグインでは再現可能
プロフィールボックス	ショートコード（ブロックツールバー）	著者情報エリア	カスタマイズ→投稿・固定ページ	Cocoonは好きな場所に配置できる
Amazon・楽天リンク	ショートコード（ブロックツールバー）	Pochipp	プラグイン	SWELL公式推奨プラグイン。了さんも開発を手伝っている
過去日時	ショートコード（ブロックツールバー）	不明	不明	乗り換えプラグインでは再現可能
過去日時（年）	ショートコード（ブロックツールバー）	不明	不明	乗り換えプラグインでは再現可能
年齢	ショートコード（ブロックツールバー）	不明	不明	乗り換えプラグインでは再現可能
ページ読み込みの日付	ショートコード（ブロックツールバー）	不明	不明	プラグインならできるかも？ショートコードを自作してもいいかも。
ページ更新日	ショートコード（ブロックツールバー）	不明	不明	Cocoonは寄付特典機能。プラグインならできるかも？
カウントダウン	ショートコード（ブロックツールバー）	不明	不明	乗り換えプラグインでは再現可能
テンプレート	Cocoon設定→テンプレート	ブログパーツ	WordPress管理画面→ブログパーツ	SWELLは用途を指定するとカテゴリー設定などでも使用可能。
HTML挿入	続きを読む（ブロックツールバー）	カスタムHTML	ウィジェット（ブロック挿入ツール）	Cocoonの寄付特典
ふりがな（ルビ）	続きを読む（ブロックツールバー）	WP-Yomigana	プラグイン

そらしど

CocoonのプロフィールボックスはCSSカスタマイズもちゃんと反映されます。
カスタム書式は自身でCSSを記述すること、設定できる上限があることに注意です。

ボックス系

スクロールできます

Cocoon での名称	Cocoonでのグループ	SWELL 代替機能	SWELLでの設定場所	備考
案内ボックス	COCOONブロック（ブロックツールバー）	色（文字色・背景色）	段落ブロック設定

その他ブロック

スクロールできます

Cocoon での名称	Cocoonでのグループ	SWELL 代替機能	SWELLでの設定場所	備考
検索案内	COCOONブロック（ブロックツールバー）	不明	不明	乗り換えプラグインでは再現可能
マイクロバルーン	COCOONマイクロコピー（ブロックツールバー）	不明	不明	乗り換えプラグインでは再現可能
マイクロテキスト	COCOONマイクロコピー（ブロックツールバー）	不明	不明	乗り換えプラグインでは再現可能
2カラム	COCOONレイアウト（ブロックツールバー）	リッチカラム	SWELLブロック（ブロック挿入ツール）	比率パターンはCocoonの方が豊富。デザインはSWELLの方が豊富。乗り換えプラグインでは再現可能。
サイトロゴ	デザイン（ブロックツールバー）	画像	メディア（ブロック挿入ツール）	画像で代替した場合はロゴを変えたら使用したページも手動で更新が必要。ショートコードを自作してもいいかも？
サイトのキャッチフレーズ	デザイン（ブロックツールバー）	ブログパーツ	WordPress管理画面→ブログパーツ	ブログパーツはキャッチフレーズを変えたら手動で変える必要あり。ショートコードを自作してもいいかも？
サイトのタイトル	デザイン（ブロックツールバー）	ブログパーツ	WordPress管理画面→ブログパーツ	ブログパーツはサイトのタイトルを変えたら手動で変える必要あり。ショートコードを自作してもいいかも？
投稿カテゴリー	デザイン（ブロックツールバー）	ブログパーツ	WordPress管理画面→ブログパーツ	ブログパーツをカテゴリー毎に作成。ショートコードを自作してもいいかも？
投稿タグ	デザイン（ブロックツールバー）	ブログパーツ	WordPress管理画面→ブログパーツ	ブログパーツをタグ毎に作成。ショートコードを自作してもいいかも？
投稿タイトル	テーマ（ブロック挿入ツール）	不明	不明	ショートコードを自作してもいいかも？
投稿コンテンツ	テーマ（ブロック挿入ツール）	不明	不明	そもそも使い方を理解してない…
投稿日	テーマ（ブロック挿入ツール）	不明	不明	ショートコードを自作してもいいかも？
ログイン/ログアウト	テーマ（ブロック挿入ツール）	不明	不明	そもそも使い方を理解してない…
コードのハイライト	コード（ブロック挿入ツール）	Highlighting Code Block	プラグイン	Cocoonの設定はCocoon設定→コード。プラグインはSWELL公式ツール。
サイトマップ（HTML）	ショートコード	PS Auto Sitemap	プラグイン
ナビカード	ショートコード	投稿リスト	ショートコード	自由度はCocoonが高い。Cocoonはリボンも付けることができる。 SWELLはカテゴリー一覧リンクボタンを作れる
RSS記事一覧	ショートコード	RSS	SWELLブロック（ブロック挿入ツール）
ボックスメニュー	ショートコード	ボックスメニュー	function.phpとstyle.css
ランキング	ショートコード	広告タグ	SWELLブロック（ブロック挿入ツール）	Cocoonのランキング作成方法。 SWELLでまとめて管理するにはブログパーツを使うのがおすすめ。

そらしど

リボンはナビカード以外にトップページで使いまわす方法もあります。
ボックスメニューは動きをつけるとさらに目に留まりやすいです。

Cocoonに無くてSWELLに有る機能

探せばプラグインで再現することも可能かもしれません。

テキスト装飾

ブロックツールバーから設定できる装飾についてです。

スクロールできます

SWELL での名称	SWELLでのグループ	Cocoon 代替機能	Cocoonでの設定場所	備考
デバイスコントロール	デバイスコントロール（ブロックツールバー）	カスタムCSS	記事作成画面下部	サイト全体ならstyle.cssに記載して「追加CSSクラス」の方が良い
ブロックしたの余白量	ブロックしたの余白量（ブロックツールバー）	スペーサー	デザイン（ブロック挿入ツール）
ソースコード(DIR)	SWELL書式	キーボード入力+HTML挿入+Font Awesome	–	アイコンを準備すればCSSで再現できるかも
ソースコード(FILE)	SWELL書式	キーボード入力+HTML挿入+Font Awesome	–	アイコンを準備すればCSSで再現できるかも
背景色	SWELL装飾	マーカー	文字（ブロックツールバー・右側）	やってみると微妙かも
インラインボタン	SWELL装飾	カスタムHTML	ブロック挿入ツール
注釈	SWELL装飾	下付き	続きを読む（ブロックツールバー）	注釈は文字の下側が横並びになる。
折り返し禁止	SWELL装飾	カスタムCSS	記事作成画面下部	サイト全体ならstyle.cssに記載して「追加CSSクラス」の方が良い

そらしど

style.cssをテーマエディタで編集する際はいくつか注意が必要です。
また、カスタマイズは子テーマで行いましょう。

ボックス系

スクロールできます

SWELL での名称	SWELLでのグループ	Cocoon 代替機能	Cocoonでの設定場所	備考
タブ	SWELLブロック（ブロック挿入ツール）	カスタムHTML	ブロック挿入ツール	Cocoonのタブ（見出し）ボックスはタブ切り替えができない。
リスト入りグループ	SWELLブロック（ブロック挿入ツール）	ラベルボックス＋アイコンリスト	COCOONブロック	Cocoonのアイコンボックスを使うのも有用

その他ブロック

スクロールできます

SWELL での名称	SWELLでのグループ	Cocoon 代替機能	Cocoonでの設定場所	備考
ABテスト	SWELLブロック（ブロック挿入ツール）	不明	不明	プラグインならできるかも？
バナーリンク	SWELLブロック（ブロック挿入ツール）	カバー+ボタン	ブロック挿入ツール	画像自体をリンクにするならカスタムHTMLなど。
リッチカラム	SWELLブロック（ブロック挿入ツール）	2カラム・3カラム	SWELLはカラムに余白を作れ、デバイスによってコントロールもできる。 Cocoonでも2カラムなどを入れ子にすれば3個以上のカラムを作ることはできる。
説明リスト	SWELLブロック（ブロック挿入ツール）	見出しボックスなど	COCOON汎用ブロック（ブロック挿入ツール）	箇条書きならアイコンリストも候補
FAQ	SWELLブロック（ブロック挿入ツール）	FAQ	COCOONブロック（ブロック挿入ツール）	Cocoonは寄付の特典機能。
フルワイド	SWELLブロック（ブロック挿入ツール）	カスタムCSS	記事作成画面下部	カスタムCSSを使った簡単な例
ブログパーツ	SWELLブロック（ブロック挿入ツール）	テンプレート	テンプレート（ブロックツールバー）
投稿リスト	SWELLブロック（ブロック挿入ツール）	ショートコード	ショートコード（ブロックツールバー）	ランダムは代替不可。
テーブル		テーブル