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

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

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

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

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

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

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

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

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

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

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

目次

CocoonとSWELLの両方にある機能

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に有って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記事一覧ショートコードRSSSWELLブロック(ブロック挿入ツール)
ボックスメニューショートコードボックスメニューfunction.phpとstyle.css
ランキングショートコード広告タグ SWELLブロック(ブロック挿入ツール) Cocoonのランキング作成方法
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クラス」の方が良い

ボックス系

スクロールできます
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ブロック(ブロック挿入ツール) FAQCOCOONブロック(ブロック挿入ツール)Cocoonは寄付の特典機能。
フルワイドSWELLブロック(ブロック挿入ツール)カスタムCSS記事作成画面下部カスタムCSSを使った簡単な例
ブログパーツSWELLブロック(ブロック挿入ツール)テンプレートテンプレート(ブロックツールバー)
投稿リストSWELLブロック(ブロック挿入ツール)ショートコードショートコード(ブロックツールバー)ランダムは代替不可。
テーブルテーブル

まとめ

Cocoonは目的別にブロックを分けて、SWELLは一つのブロックにたくさん設定を盛り込むイメージでした。

無料なのにここまでSWELLと並ぶ機能を持ちオリジナルのブロックもあるCocoonはやはりすごいですね。ショートコードが豊富なので使いこなせば自由度が高いです。

今回は表形式で機械的に比べたため分かりにくいかもしれませんが、SWELLはデザインの設定が豊富でした。ブロックの設定をスクロールしてみると気づいてなかった設定が数多くありました。マウス一つでそれらを利用できるのは強みですね。

分からないことや質問があれば下記から気軽に連絡ください。

そらしど

最後まで読んでいただきありがとうございました。


[改訂版]WordPress 仕事の現場でサッと使える! デザイン教科書[WordPress 5.x対応版] Webデザイナー養成講座
CocoonとSWELLの機能名・設定比較対照表~ブロック編~

この記事が気に入ったら
フォローをお願いします!

よかったらシェアお願いします
  • URLをコピーしました!
  • URLをコピーしました!
目次