CocoonとSWELLの機能・設定を徹底比較~Cocoon設定編~

CocoonとSWELLの機能・設定を徹底比較~Cocoon設定編~

乗り換えサポート用プラグインを紹介した記事で「カルーセルは記事スライダーとして引き継がれる」と記載しました。

しかしCocoonには他にもアピールエリアなど優れた機能や設定がたくさんあります。

多くの機能をCocoonはCocoon設定から設定できましたが、SWELLは管理画面のメニューやカスタマイズ画面にまとまっているなど設定場所はかなり違います。

Cocoonのあの設定はSWELLのどこで設定するんだ…?

今回はCocoon設定にある項目をSWELLではどこで設定できるかをまとめました。

新人SWELLERの方はもちろん、SWELLの購入を検討している方にもおすすめです。

そらしど

私が気づいてないだけの事もあると思います。そういう場合はぜひ連絡ください。
「こうやって代替している」という情報も大歓迎です。

目次

このページの見方について

このページを見ていただくにあたっての簡単な説明と注意事項を記載しています。

記載している情報について

このページで記載している情報はこのページの更新日時点のものになります。

テーマが更新されたばかりの間は情報が記載されていない可能性があります。

そらしど

記載内容に漏れや不備がある場合は、まとめに記載している方法で連絡いただけると助かります。

各項目の見方と探し方について

公式サイトのマニュアルがある項目は公式サイトのリンクも貼ってあります。

各項目の見方

CocoonとSWELLの両テーマに項目がある場合は、「Cocoonの設定名⇔SWELLの設定名」がキャプションボックスのタイトルにあります。

Cocoonのみ項目がある場合は、「Cocoonの設定名」のみがキャプションボックスのタイトルにあります。

各項目の探し方

Cocoonの設定が豊富な為、このページはたくさんの設定項目が記載されています。

目次から探しても良いですが、設定項目名をページ内検索Ctrl+F)から探すのが早いと思います。

注意事項

  • 各テーマで全ての設定項目が完全に再現できるわけではありません。
  • 設定や代替案はご本人の責任で実施してください。

関連記事

CocoonとSWELLのブロックを比較

CocoonとSWELLの設定比較

CocoonとSWELLの両方にある機能

WordPress管理画面のメニューのCocoon設定画面にある設定です。Cocoonの各種設定手順を解説した記事はこちら

SWELLSEO SIMPLE PACKの機能も「SWELLにある」と判定しています。(使い方ページ

Cocoon設定 スキン

SWELLでは類似する機能が見つかりませんでした。

スキン設定
名称

スキン設定

設定場所

WordPress管理画面のメニューCocoon設定→スキン

SWELL代替案

デモサイトのデザインを着せ替え

そらしど

スキンの解説はこちらの記事から

Cocoon設定 全体

サイトキーテキストカラー↔メインカラー
CocoonSWELL
名称サイトキーカラー・サイトキーテキストカラーメインカラー・テキストカラー
設定場所WordPress管理画面のメニューCocoon設定→全体カスタマイズ→サイト全体設定→基本カラー

Cocoonは本文の文字色を別途設定可能です。

サイトフォント↔フォント設定
CocoonSWELL
名称サイトフォントフォント設定
設定場所WordPress管理画面のメニューCocoon設定→全体カスタマイズ→サイト全体設定→基本デザイン

フォントの選択肢はCocoonの方が豊富です。

文字サイズ↔フォントサイズ
CocoonSWELL
名称文字サイズフォントサイズ(PC・Tab)
設定場所WordPress管理画面のメニューCocoon設定→全体カスタマイズ→サイト全体設定→基本デザイン

サイズの選択肢はCocoonの方が豊富です。

文字色↔テキストカラー
CocoonSWELL
名称文字色テキストカラー
設定場所WordPress管理画面のメニューCocoon設定→全体カスタマイズ→サイト全体設定→基本カラー
モバイルサイトフォント↔フォントサイズ(Mobile)
CocoonSWELL
名称モバイルサイトフォントフォントサイズ(Mobile)
設定場所WordPress管理画面のメニューCocoon設定→全体カスタマイズ→サイト全体設定→基本デザイン

Cocoonはサイズの選択肢は豊富です。
SWELLはデバイス可変にできます。

文字の太さ
Cocoon
名称文字の太さ
設定場所WordPress管理画面のメニューCocoon設定→全体
SWELL代替案CSS(bodyのfont-weight)

SWELLではフォントの種類やデバイスによって文字の太さを個別に設定しています。

CSSの例
body {
	font-weight: 500;
}
サイトアイコンフォント↔Font Awesome
CocoonSWELL
名称サイトアイコンフォントFont Awesome
設定場所WordPress管理画面のメニューCocoon設定→全体WordPress管理画面のメニュー→SWELL設定→Font Awesome

CocoonはFont Awesome 4or5
SWELLIcoMoon

サイト背景色↔背景色
CocoonSWELL
名称サイト背景色背景色
設定場所WordPress管理画面のメニューCocoon設定→全体カスタマイズ→サイト全体設定→基本カラー
サイト背景画像↔ページ背景
CocoonSWELL
名称サイト背景画像ページ背景
設定場所WordPress管理画面のメニューCocoon設定→全体カスタマイズ→サイト全体設定→基本デザイン
サイトリンク色↔リンクカラー
CocoonSWELL
名称サイトリンク色リンクカラー
設定場所WordPress管理画面のメニューCocoon設定→全体カスタマイズ→サイドバー
サイト選択文字色
Cocoon
名称サイト選択文字色
設定場所WordPress管理画面のメニューCocoon設定→全体
SWELL代替案CSS(a:hover・color)
サイト選択背景色
Cocoon
名称サイト選択背景色
設定場所WordPress管理画面のメニューCocoon設定→全体
SWELL代替案CSS(a:hover・background-color)
そらしど

CSSの例はこちらの記事から

サイドバーの位置↔サイドバーの位置
CocoonSWELL
名称サイドバーの位置サイドバーの位置
設定場所WordPress管理画面のメニューCocoon設定→全体カスタマイズ→サイト全体設定→基本カラー
サイドバーの表示状態↔サイドバーの位置
CocoonSWELL
名称サイドバーの表示状態サイドバーを表示するかどうか
設定場所WordPress管理画面のメニューCocoon設定→全体カスタマイズ→サイドバー
ファビコン↔サイトアイコン
CocoonSWELL
名称ファビコンサイトアイコン
設定場所WordPress管理画面のメニューCocoon設定→全体カスタマイズ→WordPress設定→サイト基本情報
日付フォーマット
Cocoon
名称日付フォーマット
設定場所WordPress管理画面のメニューCocoon設定→全体
SWELL代替案WordPress設定の日付形式(WordPress管理画面のメニュー設定→一般)

Cocoon設定 ヘッダー

ヘッダーレイアウト↔ヘッダーのレイアウト
CocoonSWELL
名称ヘッダーレイアウトヘッダーのレイアウト
設定場所WordPress管理画面のメニューCocoon設定→ヘッダーカスタマイズ→サイト全体設定→ヘッダー→レイアウト・デザイン設定

SWELLはPCとスマホで表示を分けることができます。

ヘッダーロゴ↔ロゴ画像の設定
CocoonSWELL
名称ヘッダーロゴロゴ画像の設定
設定場所WordPress管理画面のメニューCocoon設定→ヘッダーカスタマイズ→サイト全体設定→ヘッダー
ヘッダーロゴサイズ↔ヘッダーの画像サイズ
CocoonSWELL
名称ヘッダーロゴサイズ画像サイズ
設定場所WordPress管理画面のメニューCocoon設定→ヘッダーカスタマイズ→サイト全体設定→ヘッダー

SWELLはデバイスや追従の有無で別々に設定可能です。

キャッチフレーズの配置↔キャッチフレーズの表示位置
CocoonSWELL
名称キャッチフレーズの配置キャッチフレーズの表示位置
設定場所WordPress管理画面のメニューCocoon設定→ヘッダーカスタマイズ→サイト全体設定→ヘッダー
ヘッダーの高さ
Cocoon
名称高さ
設定場所WordPress管理画面のメニューCocoon設定→ヘッダー
SWELL代替案CSS(l-headerのheight)

CocoonはPCとモバイルで別々に設定可能です。
SWELLでも画像のサイズは指定できます

CSSの例
.l-header {
	height: 50px;
}
ヘッダー背景画像
Cocoon
名称ヘッダー背景画像
設定場所WordPress管理画面のメニューCocoon設定→ヘッダー
SWELL代替案CSS(l-headerのbackgroundで画像を指定)

Cocoonは画像の固定表示も可能です。

CSSの例
.l-header {
	background: url(画像ファイルのURL) no-repeat center;
}
そらしど

Cocoonですが、backgroundで画像を指定した例はこちらの試作部屋から

ヘッダー全体背景色↔ヘッダー背景色
CocoonSWELL
名称ヘッダー全体背景色ヘッダー背景色
設定場所WordPress管理画面のメニューCocoon設定→ヘッダーカスタマイズ→サイト全体設定→ヘッダー
ヘッダー全体文字色↔ヘッダー文字色
CocoonSWELL
名称ヘッダー全体文字色ヘッダー文字色
設定場所WordPress管理画面のメニューCocoon設定→ヘッダーカスタマイズ→サイト全体設定→ヘッダー
グローバルナビ色↔ヘッダーメニューの背景色
CocoonSWELL
名称グローバルナビ色ヘッダーメニューの背景色
設定場所WordPress管理画面のメニューCocoon設定→ヘッダーカスタマイズ→サイト全体設定→ヘッダー
ロゴエリア背景色
Cocoon
名称ロゴエリア背景色
設定場所WordPress管理画面のメニューCocoon設定→ヘッダー
SWELL代替案CSS(l-header__logoのbackground-color)
CSSの例
.l-header__logo {
	background-color: #ffffff;
}
ロゴ文字色
Cocoon
名称ロゴ文字色
設定場所WordPress管理画面のメニューCocoon設定→ヘッダー
SWELL代替案CSS(l-header__logoのcolor)
CSSの例
.l-header__logo {
	color: #ffffff;
}
グローバルナビ文字色
Cocoon
名称グローバルナビ文字色
設定場所WordPress管理画面のメニューCocoon設定→ヘッダー
SWELL代替案CSS(c-gnavのcolor)
CSSの例
.c-gnav {
	color: #ffffff;
}
グローバルナビメニュー幅
Cocoon
名称グローバルナビメニュー幅
設定場所WordPress管理画面のメニューCocoon設定→ヘッダー
SWELL代替案CSS(c-gnavのwidth)

Cocoonは画像の固定表示も可能です。

CSSの例
.c-gnav {
	width: 50px;
}

Cocoon設定 広告

全ての広告を表示
Cocoon
名称広告の表示
設定場所WordPress管理画面のメニューCocoon設定→広告
SWELL代替案なし

SWELLはカスタマイズ画面の設定やウィジェットで広告を設定します。

広告ラベル
Cocoon
名称広告ラベル
設定場所WordPress管理画面のメニューCocoon設定→広告
SWELL代替案広告コードの前に自分で記述

広告ラベルの表示は必須というわけではありません

アドセンス広告の表示
Cocoon
名称アドセンス広告の表示
設定場所WordPress管理画面のメニューCocoon設定→広告
SWELL代替案なし

SWELLはカスタマイズ画面の設定やウィジェットで広告を設定します。

広告コード↔広告コード
CocoonSWELL
名称広告コード広告コード
設定場所WordPress管理画面のメニューCocoon設定→広告カスタマイズ→ウィジェット

Cocoonリンクユニット用コード入力欄と関連コンテンツ用コード入力欄もある。
SWELLでよく使う場合は「記事内広告 [ad]」に登録するのもおすすめ。インフィード広告入力欄もある。

アドセンス表示方式
Cocoon
名称アドセンス表示方式
設定場所WordPress管理画面のメニューCocoon設定→広告
SWELL代替案なし

自動広告のみか手動広告のみかを設定できる。Adsense管理画面との一致が必要。
モバイル広告の幅を広くする設定も可能。

広告の表示位置↔広告コード
CocoonSWELL
名称広告の表示位置広告コード
設定場所WordPress管理画面のメニューCocoon設定→広告カスタマイズ→ウィジェット

Cocoonもウィジェットからアドセンスを設定することは可能。

[ad]ショートコード↔記事内広告 [ad]
CocoonSWELL
名称[ad]ショートコード記事内広告 [ad]
設定場所WordPress管理画面のメニューCocoon設定→広告WordPress管理画面のメニューSWELL設定→広告コード
LinkSwitch(バリューコマース)
Cocoon
名称LinkSwitch
設定場所WordPress管理画面のメニューCocoon設定→広告
SWELL代替案headタグ終了直前に出力するコード(カスタマイズ→高度な設定)

Cocoonはヘッド用コードでも設定可能
(WordPress管理画面のメニューCocoon設定→アクセス解析・認証→その他のアクセス解析・認証コード設定)

広告除外記事ID
Cocoon
名称広告除外記事ID
設定場所WordPress管理画面のメニューCocoon設定→広告
SWELL代替案なし

CocoonはウィジェットからもIDで非表示設定が可能。
SWELLは目次の広告のみ「投稿ページで表示する」「固定ページで表示する」項目がある。

広告除外カテゴリー
Cocoon
名称広告除外カテゴリー
設定場所WordPress管理画面のメニューCocoon設定→広告
SWELL代替案なし

Cocoonはウィジェットからもカテゴリで非表示設定が可能。

Cocoon設定 タイトル

フロントページタイトル↔「フロントページ」のタイトルタグ
CocoonSEO SIMPLE PACK
名称フロントページタイトル(フロントページ設定)「フロントページ」のタイトルタグ
設定場所WordPress管理画面のメニューCocoon設定→タイトルSEO PACK→一般設定→基本設定
サイトの説明↔「フロントページ」のディスクリプション
CocoonSWELL(SEO SIMPLE PACK
名称サイトの説明(フロントページ設定)「フロントページ」のディスクリプション
設定場所WordPress管理画面のメニューCocoon設定→タイトルSEO PACK→一般設定→基本設定
メタキーワード↔「フロントページ」のキーワード
CocoonSEO SIMPLE PACK
名称メタキーワード(フロントページ設定)「フロントページ」のキーワード
設定場所WordPress管理画面のメニューCocoon設定→タイトルSEO PACK→一般設定→基本設定
投稿・固定ページタイトル↔タイトルタグの形式
CocoonSEO SIMPLE PACK
名称投稿・固定ページタイトル(投稿・固定ページ設定)タイトルタグの形式
設定場所WordPress管理画面のメニューCocoon設定→タイトルSEO PACK→一般設定→投稿

SEO SIMPLE PACKは投稿ページ・固定ページ・LPで別々に設定可能です。

投稿・固定ページメタディスクリプション↔ディスクリプションの形式
CocoonSEO SIMPLE PACK
名称メタディスクリプションディスクリプションの形式
設定場所WordPress管理画面のメニューCocoon設定→タイトルSEO PACK→一般設定→投稿

SEO SIMPLE PACKは投稿ページ・固定ページ・LPで別々に設定可能です。

投稿・固定ページメタキーワード
Cocoon
名称メタキーワード(投稿・固定ページ設定)
設定場所WordPress管理画面のメニューCocoon設定→タイトル
SWELL代替案なし

現状SEO的にはほとんど意味のない設定です。

カテゴリー・タグページタイトル↔タイトルタグの形式
CocoonSEO SIMPLE PACK
名称ページタイトル(カテゴリー・タグページ設定)タイトルタグの形式
設定場所WordPress管理画面のメニューCocoon設定→タイトルSEO PACK→一般設定→タクソノミーアーカイブ

SEO SIMPLE PACKはカテゴリー・タグ・投稿フォーマットで別々に設定可能です。

カテゴリー・タグメタディスクリプション↔ディスクリプションの形式
CocoonSEO SIMPLE PACK
名称メタディスクリプション(カテゴリー・タグページ設定)ディスクリプションの形式
設定場所WordPress管理画面のメニューCocoon設定→タイトルSEO PACK→一般設定→タクソノミーアーカイブ

SEO SIMPLE PACKはカテゴリー・タグ・投稿フォーマットで別々に設定可能です。

カテゴリー・タグメタキーワード
Cocoon
名称メタキーワード(カテゴリー・タグ設定)
設定場所WordPress管理画面のメニューCocoon設定→タイトル
SWELL代替案なし

現状SEO的にはほとんど意味のない設定です。

簡略化したサイト名
Cocoon
名称簡略化したサイト名
設定場所WordPress管理画面のメニューCocoon設定→タイトル
SWELL代替案SIMPLE SEO PACKの各タイトル設定

検索結果ページの制御はSIMPLE SEO PACKでもできなそう。

セパレーター↔区切り文字
CocoonSEO SIMPLE PACK
名称セパレーター区切り文字
設定場所WordPress管理画面のメニューCocoon設定→タイトルSEO PACK→基本設定

Cocoon設定 SEO

canonicalタグの追加
Cocoon
名称canonicalタグの追加
設定場所WordPress管理画面のメニューCocoon設定→SEO
SWELL代替案headタグ終了直前に出力するコード(カスタマイズ→高度な設定)
canonicalタグ

Google は、いくつかの要因(シグナル)に基づいて正規ページを選択します。シグナルには、ページが HTTP と HTTPS のどちらで配信されているか、ページの品質が高いか、サイトマップに該当 URL が存在するか、rel=canonical ラベルが付けられているかなどがあります。

重複した URL を正規 URL に統合する | Google 検索セントラル  |  Google Developers
そらしど

正規ページは「サイト上の重複ページのセットの中で最も代表的なページ」の事です。

トップページやカテゴリページ等にもcanonicalタグが挿入する設定。
投稿ページや固定ページであれば、CocoonでもSIMPLE SEO PACKでも設定可能です。

分割ページにrel=”next”/”prev”タグの追加
Cocoon
名称分割ページにrel=”next”/”prev”タグの追加
設定場所WordPress管理画面のメニューCocoon設定→SEO
SWELL代替案不明

無効にした場合はWordPressデフォルトのnext/prev設定になります。
SWELLの「rel=”prev/next”を出力しない」と異なり無効にしても出力しなくなるわけではありません。

カテゴリページをnoindexとする↔「カテゴリー」のアーカイブページをインデックスさせない
CocoonSEO SIMPLE PACK
名称カテゴリページをnoindexとする「カテゴリー」のアーカイブページをインデックスさせない
設定場所WordPress管理画面のメニューCocoon設定→SEOSEO PACK→一般設定→タクソノミーアーカイブ

Cocoonは「カテゴリページの2ページ目以降をnoindexとする」設定もできます。

タグページをnoindexとする↔「タグ」のアーカイブページをインデックスさせない
CocoonSEO SIMPLE PACK
名称タグページをnoindexとする「タグ」のアーカイブページをインデックスさせない
設定場所WordPress管理画面のメニューCocoon設定→SEOSEO PACK→一般設定→タクソノミーアーカイブ

Cocoonは「タグページの2ページ目以降をnoindexとする」設定もできます。

その他のアーカイブページをnoindexとする↔「○○」のアーカイブページをインデックスさせない
CocoonSEO SIMPLE PACK
名称その他のアーカイブページをnoindexとする「投稿フォーマット」
「著者」
「日付」
「カスタム投稿タイプ」
のアーカイブページをインデックスさせない
設定場所WordPress管理画面のメニューCocoon設定→SEOSEO PACK→一般設定→タクソノミーアーカイブ・その他のアーカイブ

SEO SIMPLE PACKは別々に設定可能です。

添付ファイルページをnoindexとする
Cocoon
名称添付ファイルページをnoindexとする
設定場所WordPress管理画面のメニューCocoon設定→SEO
SWELL代替案不明
JSON-LDを出力↔JSON-LDを自動生成する
CocoonSWELL
名称JSON-LDを出力JSON-LDを自動生成する
設定場所WordPress管理画面のメニューCocoon設定→SEOSWELL設定→構造化データ
表示する日付↔タイトル下に表示する情報
CocoonSWELL
名称表示する日付タイトル下に表示する情報
設定場所WordPress管理画面のメニューCocoon設定→SEOカスタマイズ画面→投稿・固定ぺージ→タイトル
そらしど

SEO的には「datePublished」や「dateModified」かと思いますが、設定にかかわらず記載されているような…?

Cocoon設定 OGP

OGPの有効化
Cocoon
名称OGPの有効化
設定場所WordPress管理画面のメニューCocoon設定→OGP
SWELL代替案不明
Facebook APP ID↔fb:app_id
CocoonSEO SIMPLE PACK
名称Facebook APP IDfb:app_id
設定場所WordPress管理画面のメニューCocoon設定→OGPSEO PACK→OGP設定→Facebook設定
Twitterカードの有効化↔Twitter用のメタタグを使用する
CocoonSEO SIMPLE PACK
名称Twitterカードの有効化Twitter用のメタタグを使用する
設定場所WordPress管理画面のメニューCocoon設定→OGPSEO PACK→OGP設定→Twitter設定
Twitterカードタイプ↔Twitterのカードタイプ
CocoonSEO SIMPLE PACK
名称Twitterカードタイプカードタイプ
設定場所WordPress管理画面のメニューCocoon設定→OGPSEO PACK→OGP設定→Twitter設定
ホームイメージ↔“og:image”の画像
CocoonSEO SIMPLE PACK
名称画像のアップロード“og:image”の画像
設定場所WordPress管理画面のメニューCocoon設定→OGPSEO PACK→OGP設定→OGPタグの基本設定

Cocoon設定 アクセス解析・認証

サイト管理者も含めてアクセス解析する
Cocoon
名称サイト管理者も含めてアクセス解析する
設定場所WordPress管理画面のメニューCocoon設定→アクセス解析・認証
SWELL代替案Googleアナリティクス等から除外
GoogleタグマネージャID
Cocoon
名称タグマネージャID
設定場所WordPress管理画面のメニューCocoon設定→アクセス解析・認証
SWELL代替案headタグ終了直前に出力するコードとbodyタグ開始直後に出力するコードに記述(カスタマイズ画面→高度な設定)
AMP用 GoogleタグマネージャID
Cocoon
名称AMP用 タグマネージャID
設定場所WordPress管理画面のメニューCocoon設定→アクセス解析・認証
SWELL代替案headタグ終了直前に出力するコードとbodyタグ開始直後に出力するコードに記述(カスタマイズ画面→高度な設定)
GA4測定ID
Cocoon
名称GA4測定ID
設定場所WordPress管理画面のメニューCocoon設定→アクセス解析・認証
SWELL代替案headタグ終了直前に出力するコードとbodyタグ開始直後に出力するコードに記述(カスタマイズ画面→高度な設定)

CocoonでGoogleタグマネージャを用いた設定マニュアルはこちら

ユニバーサルアナリティクスID↔「トラッキングID」または「測定ID」
CocoonSEO SIMPLE PACK
名称ユニバーサルアナリティクスID「トラッキングID」または「測定ID」
設定場所WordPress管理画面のメニューCocoon設定→アクセス解析・認証SEO PACK→一般設定→Googleアナリティクス設定

Cocoon2.4.4で名称が「Google AnalyticsトラッキングID」から「ユニバーサルアナリティクスID」に変更されています。

Google Search Console ID↔Googleサーチコンソールの認証コード
CocoonSEO SIMPLE PACK
名称Google Search Console IDGoogleサーチコンソールの認証コード
設定場所WordPress管理画面のメニューCocoon設定→アクセス解析・認証SEO PACK→一般設定→ウェブマスターツール認証コード
ヘッド用コード↔headタグ終了直前に出力するコード
CocoonSWELL
名称ヘッド用コードheadタグ終了直前に出力するコード
設定場所WordPress管理画面のメニューCocoon設定→アクセス解析・認証カスタマイズ画面→高度な設定
ヘッダー用コード↔bodyタグ開始直後に出力するコード
CocoonSWELL
名称ヘッダー用コードbodyタグ開始直後に出力するコード
設定場所WordPress管理画面のメニューCocoon設定→アクセス解析・認証カスタマイズ画面→高度な設定
フッター用コード↔bodyタグ終了直前に出力するコード
CocoonSWELL
名称フッター用コードbodyタグ終了直前に出力するコード
設定場所WordPress管理画面のメニューCocoon設定→アクセス解析・認証カスタマイズ画面→高度な設定

Cocoon設定 カラム

カラムの幅は公式サイトで詳しく説明されています。

コンテンツ幅↔1カラム時の記事コンテンツ幅
CocoonSWELL
名称コンテンツ幅1カラム時の記事コンテンツ幅
設定場所WordPress管理画面のメニューCocoon設定→カラムカスタマイズ画面→高度な設定
コンテンツ余白幅
Cocoon
名称コンテンツ余白幅
設定場所WordPress管理画面のメニューCocoon設定→カラム
SWELL代替案CSS(padding:32pxを任意の値に変更)
そらしど

Cocoonの「コンテンツ幅」+「コンテンツ余白幅」+「コンテンツ枠線幅」がSWELLの「1カラム時の記事コンテンツ幅」のイメージ

コンテンツ枠線幅
Cocoon
名称コンテンツ枠線幅
設定場所WordPress管理画面のメニューCocoon設定→カラム
SWELL代替案CSS(borderを任意の値に変更)
コンテンツ枠線色
Cocoon
名称コンテンツ枠線色
設定場所WordPress管理画面のメニューCocoon設定→カラム
SWELL代替案CSS(border-colorを任意の値に変更)
サイドバー幅
Cocoon
名称サイドバー幅
設定場所WordPress管理画面のメニューCocoon設定→カラム
SWELL代替案CSS
CSSの例
@media (min-width: 960px) {
.-sidebar-on #sidebar {
    width: 316px;
}
そらしど

316pxは私が確認した時のSWELL初期値です。

サイドバー余白幅サイドバー余白幅
Cocoon
名称サイドバー余白幅
設定場所WordPress管理画面のメニューCocoon設定→カラム
SWELL代替案CSS
サイドバー枠線幅
Cocoon
名称サイドバー枠線幅
設定場所WordPress管理画面のメニューCocoon設定→カラム
SWELL代替案CSS
サイドバー枠線色
Cocoon
名称サイドバー枠線色
設定場所WordPress管理画面のメニューCocoon設定→カラム
SWELL代替案CSS
カラム間の幅
Cocoon
名称カラム間の幅
設定場所WordPress管理画面のメニューCocoon設定→カラム
SWELL代替案CSS

Cocoon設定 インデックス

Cocoonのインデックスタブの詳細はこちらの記事で紹介しています。

フロントページタイプ↔リストのレイアウト設定
CocoonSWELL
名称フロントページタイプリストのレイアウト設定
設定場所WordPress管理画面のメニューCocoon設定→インデックスカスタマイズ画面→記事一覧リスト
設定できる内容は各テーマで異なる

Cocoon

  • 一覧(デフォルト)
  • タブ一覧
  • カテゴリごと
  • カテゴリごと(2カラム)
  • カテゴリごと(3カラム)

SWELL

  • カード型
  • リスト型
  • リスト型(左右交互)
  • サムネイル型
  • ブログ型
  • テキスト型
そらしど

SWELLも2カラムや3カラムを選択できます。PCとモバイルで設定を分けることもできます。

枠線の表示
Cocoon
名称枠線の表示
設定場所WordPress管理画面のメニューCocoon設定→インデックス
SWELL代替案CSS?
省略文字列
Cocoon
名称省略文字列
設定場所WordPress管理画面のメニューCocoon設定→インデックス
SWELL代替案不明

Cocoonはテキスト入力で指定できます。
SWELLは「…」固定です。

自動生成抜粋文字数↔抜粋文の文字数
CocoonSWELL
名称自動生成抜粋文字数抜粋文の文字数
設定場所WordPress管理画面のメニューCocoon設定→インデックスカスタマイズ画面→記事一覧リスト

Cocoonは数値をテキスト入力。
SWELLは選択肢から選択。PC・Tab/モバイルで分けることができる。

スニペット(抜粋)の表示↔抜粋文の文字数(PC・Tab)
CocoonSWELL
名称スニペット(抜粋)の表示抜粋文の文字数(PC・Tab)
設定場所WordPress管理画面のメニューCocoon設定→インデックスカスタマイズ画面→記事一覧リスト

SWELLは選択肢に「非表示」がある。

スマホ端末でスニペットを表示↔抜粋文の文字数(Mobile)
CocoonSWELL
名称スマホ端末でスニペットを表示抜粋文の文字数(Mobile)
設定場所WordPress管理画面のメニューCocoon設定→インデックスカスタマイズ画面→記事一覧リスト

SWELLは選択肢に「非表示」がある。

投稿日の表示↔公開日を表示する
CocoonSWELL
名称投稿日の表示公開日を表示する
設定場所WordPress管理画面のメニューCocoon設定→インデックスカスタマイズ画面→記事一覧リスト
更新日の表示↔更新日を表示する
CocoonSWELL
名称更新日の表示更新日を表示する
設定場所WordPress管理画面のメニューCocoon設定→インデックスカスタマイズ画面→記事一覧リスト
投稿者名の表示↔著者を表示する
CocoonSWELL
名称投稿者名の表示著者を表示する
設定場所WordPress管理画面のメニューCocoon設定→インデックスカスタマイズ画面→記事一覧リスト
コメント数の表示
Cocoon
名称コメント数の表示
設定場所WordPress管理画面のメニューCocoon設定→インデックス
SWELL代替案不明

SWELLは「非表示」固定です。

除外カテゴリー↔除外したいカテゴリーのID
CocoonSWELL
名称除外カテゴリー除外したいカテゴリーのID
設定場所WordPress管理画面のメニューCocoon設定→インデックスカスタマイズ画面→記事一覧リスト

Cocoonはチェックボックス、SWELLはIDのテキスト入力です。

Cocoon設定 投稿

カテゴリ・タグ表示↔関連記事を表示
CocoonSWELL
名称表示①タイトル下にカテゴリーを表示する
②タイトル下にタグを表示する
③カテゴリー表示位置
設定場所WordPress管理画面のメニューCocoon設定→投稿①②カスタマイズ画面→投稿・固定リスト→タイトル
③カスタマイズ画面→記事一覧リスト

Cocoonはカテゴリやタグの表示・非表示に加え、1列表示か2列表示かも選択できます。
SWELLは記事一覧のタグは見当たりませんでした。

カテゴリ・タグ表示位置
Cocoon
名称カテゴリ・タグ表示位置
設定場所WordPress管理画面のメニューCocoon設定→投稿
SWELL代替案PHP?

SWELLでもカテゴリの表示位置はカスタマイズ画面の投稿一覧から設定可能です。

関連記事を表示する↔関連記事を表示
CocoonSWELL
名称関連記事を表示する関連記事を表示
設定場所WordPress管理画面のメニューCocoon設定→投稿カスタマイズ画面→記事下エリア

Cocoonは関連記事設定の公式マニュアルはこちら
SWELLの関連記事設定の公式マニュアルはこちら

関連記事設定-関連性↔関連記事の取得方法
CocoonSWELL
名称関連性関連記事の取得方法
設定場所WordPress管理画面のメニューCocoon設定→投稿カスタマイズ画面→記事下エリア

どちらのテーマでも「カテゴリ」「タグ」から選択できます。

関連記事見出し↔関連記事エリアのタイトル
CocoonSWELL
名称関連記事見出し関連記事エリアのタイトル
設定場所WordPress管理画面のメニューCocoon設定→投稿カスタマイズ画面→記事下エリア

Cocoonはサブ見出しも設定可能です。

関連記事設定-表示タイプ↔関連記事のレイアウト
CocoonSWELL
名称表示タイプ関連記事のレイアウト
設定場所WordPress管理画面のメニューCocoon設定→投稿カスタマイズ画面→記事下エリア
設定できる内容は各テーマで異なる

Cocoon

  • エントリーカード(デフォルト)
  • ミニカード
  • 縦型カード3列
  • 縦型カード4列
  • AdSense関連コンテンツユニット

SWELL

  • カード型
  • リスト型
関連記事設定-表示数
Cocoon
名称表示数
設定場所WordPress管理画面のメニューCocoon設定→投稿
SWELL代替案PHP?
関連記事設定-取得期間
Cocoon
名称取得期間
設定場所WordPress管理画面のメニューCocoon設定→投稿
SWELL代替案不明
関連記事設定-枠線の表示
Cocoon
名称枠線の表示
設定場所WordPress管理画面のメニューCocoon設定→投稿
SWELL代替案CSS
関連記事設定-最大自動生成抜粋文字数
Cocoon
名称最大自動生成抜粋文字数
設定場所WordPress管理画面のメニューCocoon設定→投稿
SWELL代替案不明
関連記事設定-投稿関連情報の表示
Cocoon
名称投稿関連情報の表示
設定場所WordPress管理画面のメニューCocoon設定→投稿
SWELL代替案不明
ページ送りナビ設定-表示↔前後記事へのページリンクを表示
CocoonSWELL
名称表示前後記事へのページリンクを表示
設定場所WordPress管理画面のメニューCocoon設定→投稿カスタマイズ画面→記事下エリア
ページ送りナビ設定-表示タイプ↔前後記事へのページリンクのデザイン
CocoonSWELL
名称表示タイプ前後記事へのページリンクのデザイン
ページリンクにサムネイル画像を表示する
設定場所WordPress管理画面のメニューCocoon設定→投稿カスタマイズ画面→記事下エリア
ページ送りナビ設定-表示位置
Cocoon
名称表示位置
設定場所WordPress管理画面のメニューCocoon設定→投稿
SWELL代替案不明
ページ送りナビ設定-カテゴリー
Cocoon
名称カテゴリー
設定場所WordPress管理画面のメニューCocoon設定→投稿
SWELL代替案不明
ページ送りナビ設定-枠線表示
Cocoon
名称枠線表示
設定場所WordPress管理画面のメニューCocoon設定→投稿
SWELL代替案不明
コメント設定-表示↔コメントエリアを表示
CocoonSWELL
名称表示コメントエリアを表示
設定場所WordPress管理画面のメニューCocoon設定→投稿カスタマイズ画面→記事下エリア

Cocoonは投稿・固定ページで個別に設定可能です。
SWELLは投稿・固定ページ合わせての設定です。

パンくずリストの配置↔パンくずリストの位置
CocoonSWELL
名称パンくずリストの配置パンくずリストの位置
設定場所WordPress管理画面のメニューCocoon設定→投稿カスタマイズ画面→記事下エリア

Cocoonは投稿・固定ページで個別に設定可能です。
SWELLは投稿・固定ページ合わせての設定です。

Cocoon設定 固定ページ

コメント設定-表示↔コメントエリアを表示
CocoonSWELL
名称表示コメントエリアを表示
設定場所WordPress管理画面のメニューCocoon設定→固定ページカスタマイズ画面→記事下エリア

Cocoonは投稿・固定ページで個別に設定可能です。
SWELLは投稿・固定ページ合わせての設定です。

パンくずリストの配置↔パンくずリストの位置
CocoonSWELL
名称パンくずリストの配置パンくずリストの位置
設定場所WordPress管理画面のメニューCocoon設定→固定ページカスタマイズ画面→記事下エリア

Cocoonは投稿・固定ページで個別に設定可能です。
SWELLは投稿・固定ページ合わせての設定です。

パンくずリスト設定-記事タイトル
Cocoon
名称記事タイトル
設定場所WordPress管理画面のメニューCocoon設定→固定ページ
SWELL代替案不明

Cocoon設定 本文

本文余白-行の高さ
Cocoon
名称行の高さ
設定場所WordPress管理画面のメニューCocoon設定→本文
SWELL代替案CSS
CSSの例
.post_content{
	line-height: 1.8
}
そらしど

フォーラムにも同様の質問があります。

本文余白-行の余白
Cocoon
名称行の余白
設定場所WordPress管理画面のメニューCocoon設定→本文
SWELL代替案CSS
CSSの例
.post_content{
	margin-bottom: 2em
}
そらしど

私が確認した時点でSWELLのデフォルトは2emでした。

外部リンクの開き方
Cocoon
名称外部リンクの開き方
設定場所WordPress管理画面のメニューCocoon設定→本文
SWELL代替案個別に設定
外部リンク設定-フォロータイプ
Cocoon
名称フォロータイプ
設定場所WordPress管理画面のメニューCocoon設定→本文
SWELL代替案個別に設定
外部リンク設定-アイコン表示
Cocoon
名称アイコン表示
設定場所WordPress管理画面のメニューCocoon設定→本文
SWELL代替案個別に設定

SWELLでアイコンを使う方法はこちら

外部リンク設定-アイコン
Cocoon
名称アイコン
設定場所WordPress管理画面のメニューCocoon設定→本文
SWELL代替案個別に設定

SWELLで使えるアイコンの一覧はこちら

内部リンクの開き方
Cocoon
名称内部リンクの開き方
設定場所WordPress管理画面のメニューCocoon設定→本文
SWELL代替案個別に設定
内部リンク設定-フォロータイプ
Cocoon
名称フォロータイプ
設定場所WordPress管理画面のメニューCocoon設定→本文
SWELL代替案個別に設定
内部リンク設定-アイコン表示
Cocoon
名称アイコン表示
設定場所WordPress管理画面のメニューCocoon設定→本文
SWELL代替案個別に設定

SWELLでアイコンを使う方法はこちら

内部リンク設定-アイコン
Cocoon
名称アイコン
設定場所WordPress管理画面のメニューCocoon設定→本文
SWELL代替案個別に設定

SWELLで使えるアイコンの一覧はこちら

レスポンシブテーブル-横幅の広いテーブルは横スクロール
Cocoon
名称横幅の広いテーブルは横スクロール
設定場所WordPress管理画面のメニューCocoon設定→本文
SWELL代替案個別に設定
そらしど

逆にCocoonは個別に設定ができません。

レスポンシブテーブル-テーブルの1列目を固定表示
Cocoon
名称テーブルの1列目を固定表示
設定場所WordPress管理画面のメニューCocoon設定→本文
SWELL代替案個別に設定
投稿関連情報↔タイトル下に表示する情報
CocoonSWELL
名称投稿関連情報タイトル下に表示する情報
設定場所WordPress管理画面のメニューCocoon設定→本文カスタマイズ画面→タイトル
記事を読む時間
Cocoon
名称記事を読む時間
設定場所WordPress管理画面のメニューCocoon設定→本文
SWELL代替案PHP?

Cocoon設定 目次

目次を表示する↔目次を表示するかどうか
CocoonSWELL
名称目次を表示する目次を表示するかどうか
設定場所WordPress管理画面のメニューCocoon設定→目次カスタマイズ画面→投稿・固定ページ→目次

両テーマとも各投稿ページで個別に設定することも可能。

目次設定-表示ページ↔○○ページに目次を表示
CocoonSWELL
名称表示ページ○○ページに目次を表示
設定場所WordPress管理画面のメニューCocoon設定→目次カスタマイズ画面→投稿・固定ページ→目次

Cocoonは「投稿ページ」「固定ページ」「カテゴリーページ」「タグページ」
SWELLは「投稿ページ」「固定ページ」

目次タイトル↔目次のタイトル
CocoonSWELL
名称目次タイトル目次のタイトル
設定場所WordPress管理画面のメニューCocoon設定→目次カスタマイズ画面→投稿・固定ページ→目次
目次切り替え
Cocoon
名称目次切り替え
設定場所WordPress管理画面のメニューCocoon設定→目次
SWELL代替案PHP・CSS or プラグイン

要望自体は上がってるみたいだが、テーマ本体には実装されなさそう。

表示条件↔見出しが何個以上あれば表示するか
CocoonSWELL
名称表示条件見出しが何個以上あれば表示するか
設定場所WordPress管理画面のメニューCocoon設定→目次カスタマイズ画面→投稿・固定ページ→目次
目次表示の深さ↔どの階層の見出しまで抽出するか
CocoonSWELL
名称表示条件どの階層の見出しまで抽出するか
設定場所WordPress管理画面のメニューCocoon設定→目次カスタマイズ画面→投稿・固定ページ→目次
目次ナンバーの表示
Cocoon
名称目次ナンバーの表示
設定場所WordPress管理画面のメニューCocoon設定→目次
SWELL代替案
目次の中央表示
Cocoon
名称目次の中央表示
設定場所WordPress管理画面のメニューCocoon設定→目次
SWELL代替案デフォルトで中央表示
広告の手前に目次を表示する↔目次広告の位置
CocoonSWELL
名称目次の表示順目次広告の位置
設定場所WordPress管理画面のメニューCocoon設定→目次カスタマイズ画面→投稿・固定ページ→目次
見出し内タグ
Cocoon
名称見出し内タグ
設定場所WordPress管理画面のメニューCocoon設定→目次
SWELL代替案PHP?

Cocoon設定 SNSシェア

SWELLのマニュアルはこちら

トップシェアボタンの表示↔記事上部に表示する
CocoonSWELL
名称トップシェアボタンの表示記事上部に表示する
設定場所WordPress管理画面のメニューCocoon設定→SNSシェアカスタマイズ画面→投稿・固定ページ→SNSシェアボタン
個々のシェアボタンの表示切り替え↔表示するボタンの種類
CocoonSWELL
名称表示切替表示するボタンの種類
設定場所WordPress管理画面のメニューCocoon設定→SNSシェアカスタマイズ画面→投稿・固定ページ→SNSシェアボタン

Cocoonはページ上部とページ下部で個別に設定可能。

表示ページ
Cocoon
名称表示ページ
設定場所WordPress管理画面のメニューCocoon設定→SNSシェア
SWELL代替案CSS
ボタンカラー
Cocoon
名称ボタンカラー
設定場所WordPress管理画面のメニューCocoon設定→SNSシェア
SWELL代替案CSS
カラム数
Cocoon
名称カラム数
設定場所WordPress管理画面のメニューCocoon設定→SNSシェア
SWELL代替案CSS
ロゴ・キャプション配置
Cocoon
名称ロゴ・キャプション配置
設定場所WordPress管理画面のメニューCocoon設定→SNSシェア
SWELL代替案不明
シェア数の表示
Cocoon
名称シェア数の表示
設定場所WordPress管理画面のメニューCocoon設定→SNSシェア
SWELL代替案不明
メンション↔via設定(メンション先)
CocoonSWELL
名称メンションvia設定(メンション先)
設定場所WordPress管理画面のメニューCocoon設定→SNSシェアカスタマイズ画面→投稿・固定ページ→SNSシェアボタン
プロモーション
Cocoon
名称プロモーション
設定場所WordPress管理画面のメニューCocoon設定→SNSシェア
SWELL代替案不明
ハッシュタグ
Cocoon
名称ハッシュタグ
設定場所WordPress管理画面のメニューCocoon設定→SNSシェア
SWELL代替案不明
アクセストークン
Cocoon
名称アクセストークン
設定場所WordPress管理画面のメニューCocoon設定→SNSシェア
SWELL代替案不明
Pinterest共有
Cocoon
名称Pinterest共有
設定場所WordPress管理画面のメニューCocoon設定→SNSシェア
SWELL代替案不明
キャッシュの有効化
Cocoon
名称キャッシュの有効化
設定場所WordPress管理画面のメニューCocoon設定→SNSシェア
SWELL代替案不明
キャッシュ間隔
Cocoon
名称キャッシュ間隔
設定場所WordPress管理画面のメニューCocoon設定→SNSシェア
SWELL代替案不明
別スキームシェア数
Cocoon
名称別スキームシェア数
設定場所WordPress管理画面のメニューCocoon設定→SNSシェア
SWELL代替案不明

Cocoon設定 SNSフォロー

SNSサービスのURL↔表示するボタン(SNSアクションエリア設定)
CocoonSWELL
名称SNSサービスのURL表示するボタン
設定場所WordPress管理画面のメニューCocoon設定→SNSフォローカスタマイズ画面→投稿・固定ページ→記事下エリア

CocoonのSNSアカウント設定方法はこちら。(プロフィールページで設定します。)

フォローボタンの表示
Cocoon
名称フォローボタンの表示
設定場所WordPress管理画面のメニューCocoon設定→SNSフォロー
SWELL代替案一括設定無し(個別設定は可能)
フォローメッセージ
Cocoon
名称フォローメッセージ
設定場所WordPress管理画面のメニューCocoon設定→SNSフォロー
SWELL代替案PHP
表示ページ(フォローボタン)
Cocoon
名称表示ページ
設定場所WordPress管理画面のメニューCocoon設定→SNSフォロー
SWELL代替案CSS

SWELLはアカウントを設定したらプロフィール欄に表示されます。

feedlyの表示
Cocoon
名称feedlyの表示
設定場所WordPress管理画面のメニューCocoon設定→SNSフォロー
SWELL代替案CSS

SWELLはアカウントを設定したらプロフィール欄に表示される

RSSの表示
Cocoon
名称RSSの表示
設定場所WordPress管理画面のメニューCocoon設定→SNSフォロー
SWELL代替案CSS

SWELLはアカウントを設定したらプロフィール欄に表示されます。

ボタンカラー(フォローボタン)
Cocoon
名称ボタンカラー
設定場所WordPress管理画面のメニューCocoon設定→SNSフォロー
SWELL代替案CSS
デフォルトユーザー(フォローボタン)
Cocoon
名称デフォルトユーザー
設定場所WordPress管理画面のメニューCocoon設定→SNSフォロー
SWELL代替案不明
feedly購読者数
Cocoon
名称feedly購読者数
設定場所WordPress管理画面のメニューCocoon設定→SNSフォロー
SWELL代替案プラグイン Feedly Insight
キャッシュの有効化(フォローボタン)
Cocoon
名称キャッシュの有効化
設定場所WordPress管理画面のメニューCocoon設定→SNSフォロー
SWELL代替案フォロー数取得機能がないため不要
キャッシュ間隔(フォローボタン)
Cocoon
名称キャッシュ間隔
設定場所WordPress管理画面のメニューCocoon設定→SNSフォロー
SWELL代替案フォロー数取得機能がないため不要
別スキームフォロー数(フォローボタン)
Cocoon
名称別スキームフォロー数
設定場所WordPress管理画面のメニューCocoon設定→SNSフォロー
SWELL代替案フォロー数取得機能がないため不要

Cocoon設定 画像

本文上にアイキャッチを表示する↔本文の始めにアイキャッチ画像を表示
CocoonSWELL
名称本文上にアイキャッチを表示する本文の始めにアイキャッチ画像を表示
設定場所WordPress管理画面のメニューCocoon設定→画像カスタマイズ画面→投稿・固定ページ→アイキャッチ画像

SWELLは投稿ページと固定ページで別々に設定できる

アイキャッチラベルを表示する
Cocoon
名称アイキャッチラベルを表示する
設定場所WordPress管理画面のメニューCocoon設定→画像
SWELL代替案投稿・固定ページ→タイトル→タイトル下にカテゴリーを表示する
アイキャッチの中央寄せ
Cocoon
名称アイキャッチの中央寄せ
設定場所WordPress管理画面のメニューCocoon設定→画像
SWELL代替案CSS

SWELLは中央寄せ固定です。

アイキャッチをカラム幅に引き伸ばす
Cocoon
名称アイキャッチをカラム幅に引き伸ばす
設定場所WordPress管理画面のメニューCocoon設定→画像
SWELL代替案CSS
アイキャッチにキャプションがある場合は表示する
Cocoon
名称アイキャッチにキャプションがある場合は表示する
設定場所WordPress管理画面のメニューCocoon設定→画像
SWELL代替案不明
アイキャッチ自動設定を有効にする
Cocoon
名称アイキャッチ自動設定を有効にする
設定場所WordPress管理画面のメニューCocoon設定→画像
SWELL代替案不明

SWELLはNO IMAGE画像を設定することができます。

画像の囲み効果↔デフォルトスタイル(画像ブロック)
CocoonSWELL
名称画像の囲み効果デフォルトスタイル
設定場所WordPress管理画面のメニューCocoon設定→画像画像ブロック→スタイル
テーマ全体のサムネイル画像の縦横比↔サムネイル画像の比率設定
CocoonSWELL
名称サムネイル画像サムネイル画像の比率設定
設定場所WordPress管理画面のメニューCocoon設定→画像カスタマイズ画面→記事一覧リスト
NO IMAGE画像↔NO IMAGE画像
CocoonSWELL
名称NO IMAGE画像NO IMAGE画像
設定場所WordPress管理画面のメニューCocoon設定→画像カスタマイズ画面→サイト全体設定→NO IMAGE画像

Cocoon設定 ブログカード

Cocoonのマニュアルはこちら(内部外部
SWELLのマニュアルはこちら

そらしど

設定項目が全然違うので、この記事ではSWELLがしょぼく見えるかもしれません。SWELLもCocoonでは設定できない項目がたくさんあります。

ブログカード表示を有効にする
Cocoon
名称ブログカード表示を有効にする
設定場所WordPress管理画面のメニューCocoon設定→ブログカード
SWELL代替案関連記事ブロック
コメント欄のブログカード表示を有効にする
Cocoon
名称コメント欄のブログカード表示を有効にする
設定場所WordPress管理画面のメニューCocoon設定→ブログカード
SWELL代替案不明
サムネイルスタイル
Cocoon
名称サムネイルスタイル
設定場所WordPress管理画面のメニューCocoon設定→ブログカード
SWELL代替案不明
日付表示
Cocoon
名称日付表示
設定場所WordPress管理画面のメニューCocoon設定→ブログカード
SWELL代替案不明
リンクの開き方↔新しいタブで開く
CocoonSWELL
名称リンクの開き方新しいタブで開く
設定場所WordPress管理画面のメニューCocoon設定→ブログカード編集画面→関連記事ブロック→リンク設定
キャッシュの保存期間↔ブログカードのキャッシュ期間
CocoonSWELL
名称キャッシュの保存期間ブログカードのキャッシュ期間
設定場所WordPress管理画面のメニューCocoon設定→ブログカードSWELL設定→高速化
キャッシュ更新モードを有効にする
Cocoon
名称キャッシュ更新モードを有効にする
設定場所WordPress管理画面のメニューCocoon設定→ブログカード
SWELL代替案キャッシュのクリア(ブログカード)後にアクセスする(?)
SWELL設定→リセット

Cocoon設定 コード

SWELLにはコードに関する設定はありません。「Highlighting Code Block」というプラグインの使用が推奨されています。

ここではHighlighting Code Blockとの比較を紹介します。プラグインの説明ページはこちら

ソースコードの「シンタックスハイライト」機能については、限定的な需要のため、プラグインとして開発いたしました。

プラグインの新規追加画面にて「Highlighting Code Block」と検索していただくか、以下の画像リンクからダウンロードしてご使用ください。

SWELLで使えるテキスト装飾機能(書式)一覧 _ WordPressテーマ SWELL
ソースコードをハイライト表示
Cocoon
名称ソースコードをハイライト表示
設定場所WordPress管理画面のメニューCocoon設定→コード
SWELL代替案「Highlighting Code Block」ブロックを使用しない。
行番号表示↔コードブロックに行数を表示する
CocoonHighlighting Code Block
名称行番号表示コードブロックに行数を表示する
設定場所WordPress管理画面のメニューCocoon設定→コードWordPressサイドバーの設定→CODE BLOCK
ライブラリ↔使用する言語
CocoonHighlighting Code Block
名称ライブラリ使用する言語
設定場所WordPress管理画面のメニューCocoon設定→コードWordPressサイドバーの設定→CODE BLOCK
ハイライトスタイル↔コードカラーリング
CocoonHighlighting Code Block
名称ハイライトスタイルコードカラーリング
設定場所WordPress管理画面のメニューCocoon設定→コードWordPressサイドバーの設定→CODE BLOCK

Cocoonは統合開発環境でよく見るような色んなハイライトスタイルがあります。デモはこちら。
SWELLはLightとDarkの2種類です。

ハイライト表示するCSSセレクタ
Cocoon
名称ハイライト表示するCSSセレクタ
設定場所WordPress管理画面のメニューCocoon設定→コード
SWELL代替案不明

Cocoon設定 コメント

コメントタイプ
Cocoon
名称コメントタイプ
設定場所WordPress管理画面のメニューCocoon設定→コメント
SWELL代替案不明
コメント一覧見出し↔関連記事エリアのタイトル
CocoonSWELL
名称コメント一覧見出し関連記事エリアのタイトル
設定場所WordPress管理画面のメニューCocoon設定→コメントSWELL→投稿・固定ページ→記事下エリア

Cocoonはサブ見出しも設定できます。

コメント入力欄表示
Cocoon
名称コメント入力欄表示
設定場所WordPress管理画面のメニューCocoon設定→コメント
SWELL代替案不明

ボタンを押したらコメント入力欄を表示する設定です。

コメント入力欄見出し
Cocoon
名称コメント入力欄見出し
設定場所WordPress管理画面のメニューCocoon設定→コメント
SWELL代替案不明
コメント入力案内メッセージ
Cocoon
名称コメント入力案内メッセージ
設定場所WordPress管理画面のメニューCocoon設定→コメント
SWELL代替案PHP?
ウェブサイトの表示
Cocoon
名称ウェブサイトの表示
設定場所WordPress管理画面のメニューCocoon設定→コメント
SWELL代替案不明
送信ボタンラベル
Cocoon
名称送信ボタンラベル
設定場所WordPress管理画面のメニューCocoon設定→コメント
SWELL代替案不明

Cocoon設定 通知

Cocoonのマニュアルはこちら
SWELLのマニュアルはこちら

そらしど

Cocoonの通知エリアの当サイト解説はこちら
CocoonでSWELLのようにボタンを使いたい場合はアピールエリアを使うといいかもしれません。

通知エリアの表示↔お知らせバーの表示位置
CocoonSWELL
名称通知エリアの表示お知らせバーの表示位置
設定場所WordPress管理画面のメニューCocoon設定→通知SWELL→サイト全体設定→お知らせバー
通知メッセージ↔お知らせ内容
CocoonSWELL
名称通知メッセージお知らせ内容
設定場所WordPress管理画面のメニューCocoon設定→通知SWELL→サイト全体設定→お知らせバー
通知URL↔リンク先のURL
CocoonSWELL
名称通知URLリンク先のURL
設定場所WordPress管理画面のメニューCocoon設定→通知SWELL→サイト全体設定→お知らせバー
リンクの開き方
Cocoon
名称リンクの開き方
設定場所WordPress管理画面のメニューCocoon設定→通知
SWELL代替案不明
通知タイプ
Cocoon
名称通知タイプ
設定場所WordPress管理画面のメニューCocoon設定→通知
SWELL代替案カラー設定
通知エリア背景色↔お知らせバー背景色
CocoonSWELL
名称通知エリア背景色お知らせバー背景色
設定場所WordPress管理画面のメニューCocoon設定→通知SWELL→サイト全体設定→お知らせバー
通知エリア文字色↔お知らせバー文字色
CocoonSWELL
名称通知エリア文字色お知らせバー文字色
設定場所WordPress管理画面のメニューCocoon設定→通知SWELL→サイト全体設定→お知らせバー

Cocoon設定 アピールエリア

CocoonのアピールエリアをSWELLで再現したい場合は、メインビジュアル機能が近いです。

アピールエリア(Cocoon)の解説ページはこちら
メインビジュアル(SWELL)のマニュアルはこちら

そらしど

この記事では紹介しませんが、SWELLは動画を設定出来たり画像をスライドさせたりできます。

アピールエリアの表示↔メインビジュアルの表示内容
CocoonSWELL
名称アピールエリアの表示お知らせバー文字色
設定場所WordPress管理画面のメニューCocoon設定→アピールエリアSWELL→トップページ→メインビジュアル
高さ↔メインビジュアルの高さ設定
CocoonSWELL
名称高さメインビジュアルの高さ設定
設定場所WordPress管理画面のメニューCocoon設定→アピールエリアSWELL→トップページ→メインビジュアル

Cocoonはpx、SWELLはvwとvhで指定します。(vwとvh…画面幅に対する割合。wが横、hが縦。)

SWELLは数値で指定する以外に、画像に合わせたりウィンドウサイズに合わせる設定も可能です。

エリア画像↔スライド画像
CocoonSWELL
名称エリア画像スライド画像
設定場所WordPress管理画面のメニューCocoon設定→アピールエリアSWELL→トップページ→メインビジュアル

SWELLはPC用とスマホ用で別々に画像を設定できます。

アピールエリア背景画像の固定
Cocoon
名称アピールエリア背景画像の固定
設定場所WordPress管理画面のメニューCocoon設定→アピールエリア
SWELL代替案CSS
エリア背景色
Cocoon
名称エリア背景色
設定場所WordPress管理画面のメニューCocoon設定→アピールエリア
SWELL代替案オーバーレイ設定の不当明度に1.0を設定
テキストメッセージエリアを表示する
Cocoon
名称テキストメッセージエリアを表示する
設定場所WordPress管理画面のメニューCocoon設定→アピールエリア
SWELL代替案メインテキスト入力欄を空白にする
タイトル↔メインテキスト
CocoonSWELL
名称タイトルメインテキスト
設定場所WordPress管理画面のメニューCocoon設定→アピールエリアSWELL→トップページ→メインビジュアル
メッセージ↔サブテキスト
CocoonSWELL
名称メッセージサブテキスト
設定場所WordPress管理画面のメニューCocoon設定→アピールエリアSWELL→トップページ→メインビジュアル
ボタンメッセージ↔ボタンテキスト
CocoonSWELL
名称ボタンメッセージボタンテキスト
設定場所WordPress管理画面のメニューCocoon設定→アピールエリアSWELL→トップページ→メインビジュアル
ボタンリンク先↔リンク先URL
CocoonSWELL
名称ボタンリンク先リンク先URL
設定場所WordPress管理画面のメニューCocoon設定→アピールエリアSWELL→トップページ→メインビジュアル

SWELLは「ボタンテキスト」が未入力の場合に画像全体がリンクになります。

ボタンリンクの開き方
Cocoon
名称ボタンリンクの開き方
設定場所WordPress管理画面のメニューCocoon設定→アピールエリア
SWELL代替案不明
ボタン色↔ボタンカラー
CocoonSWELL
名称ボタン色ボタンカラー
設定場所WordPress管理画面のメニューCocoon設定→アピールエリアSWELL→トップページ→メインビジュアル

Cocoon設定 おすすめカード

CocoonのアピールエリアをSWELLで再現したい場合は、ピックアップバナー機能が近いです。

おすすめカード(Cocoon)の解説ページはこちら
ピックアップバナー(SWELL)のマニュアルはこちら

そらしど

当サイトのおすすめカード解説ページはこちら

おすすめカードの表示↔バナータイトルのデザイン
CocoonSWELL
名称おすすめカードの表示バナータイトルのデザイン
設定場所WordPress管理画面のメニューCocoon設定→おすすめカードカスタマイズ→トップページ→ピックアップバナー

どちらのテーマもトップページだけでなく投稿ページ等にも表示可能です。

メニュー選択↔メニューの位置
CocoonSWELL
名称メニュー選択メニューの位置
設定場所WordPress管理画面のメニューCocoon設定→おすすめカード外観→メニュー→メニュー設定
表示スタイル↔バナーデザイン
CocoonSWELL
名称表示スタイル内側に白線を
バナー画像を少し暗く
設定場所WordPress管理画面のメニューCocoon設定→おすすめカードカスタマイズ→トップページ→ピックアップバナー
おすすめカード毎に余白を設ける
Cocoon
名称おすすめカード毎に余白を設ける
設定場所WordPress管理画面のメニューCocoon設定→おすすめカード
SWELL代替案CSS

Cocoonのデフォルトは余白なし。SWELLは余白ありです。

おすすめカードエリアの左右に余白を設ける
Cocoon
名称おすすめカードエリアの左右に余白を設ける
設定場所WordPress管理画面のメニューCocoon設定→おすすめカード
SWELL代替案CSS

Cocoon設定 カルーセル

CocoonのカルーセルをSWELLで再現したい場合は、記事スライダー機能が近いです。

カルーセル(Cocoon)の解説ページはこちら
記事スライダー(SWELL)のマニュアルはこちら

そらしど

当サイトのカルーセル解説ページはこちら

カルーセルの表示↔記事スライダーを設置するかどうか
CocoonSWELL
名称カルーセルの表示記事スライダーを設置するかどうか
設定場所WordPress管理画面のメニューCocoon設定→カルーセルカスタマイズ→トップページ→記事スライダー
人気記事
Cocoon
名称(設定した期間で)集計した人気記事を含める
設定場所WordPress管理画面のメニューCocoon設定→カルーセル
SWELL代替案人気順:並び順から
期間設定:集計方法の違いから不可能?(リセットは可能)
カテゴリー↔ピックアップ対象-カテゴリー
CocoonSWELL
名称カテゴリー記事スライダーを設置するかどうか
設定場所WordPress管理画面のメニューCocoon設定→カルーセルカスタマイズ→トップページ→記事スライダー

Cocoonはカテゴリーとタグ両方を絞り込む設定が可能です。

タグ↔ピックアップ対象-タグ
CocoonSWELL
名称タグ記事スライダーを設置するかどうか
設定場所WordPress管理画面のメニューCocoon設定→カルーセルカスタマイズ→トップページ→記事スライダー

Cocoonはカテゴリーとタグ両方を絞り込む設定が可能です。

カルーセルの並び替え↔並び順
CocoonSWELL
名称カルーセルの並び替え並び順
設定場所WordPress管理画面のメニューCocoon設定→カルーセルカスタマイズ→トップページ→記事スライダー

Cocoonは「ランダム」「投稿日(降順)」「更新日(降順)」
SWELLは「ランダム」「投稿日」「更新日」「人気順」

最大表示数
Cocoon
名称最大表示数
設定場所WordPress管理画面のメニューCocoon設定→カルーセル
SWELL代替案不明
枠線の表示
Cocoon
名称枠線の表示
設定場所WordPress管理画面のメニューCocoon設定→カルーセル
SWELL代替案CSS
オートプレイ
Cocoon
名称オートプレイ
設定場所WordPress管理画面のメニューCocoon設定→カルーセル
SWELL代替案不明

SWELLはオートプレイのみで、速度や時間の変更のみ可能です。

オートプレイインターバル↔スライドが切り替わる間隔
CocoonSWELL
名称オートプレイインターバルスライドが切り替わる間隔
設定場所WordPress管理画面のメニューCocoon設定→カルーセルカスタマイズ→トップページ→記事スライダー

Cocoonの単位は「秒」
SWELLの単位は「ミリ秒(1/1000秒)」

Cocoon設定 フッター

SWELLのマニュアルはこちら

フッター背景色↔フッター背景色
CocoonSWELL
名称フッター背景色フッター背景色
設定場所WordPress管理画面のメニューCocoon設定→フッターカスタマイズ→フッター
フッター文字色↔フッター文字色
CocoonSWELL
名称フッター文字色フッター文字色
設定場所WordPress管理画面のメニューCocoon設定→フッターカスタマイズ→フッター
フッター表示タイプ
Cocoon
名称フッター表示タイプ
設定場所WordPress管理画面のメニューCocoon設定→フッター
SWELL代替案不明
フッターロゴ
Cocoon
名称フッターロゴ
設定場所WordPress管理画面のメニューCocoon設定→フッター
SWELL代替案CSS
クレジット表記↔コピーライトのテキスト
CocoonSWELL
名称クレジット表記コピーライトのテキスト
設定場所WordPress管理画面のメニューCocoon設定→フッターカスタマイズ→フッター
フッターメニュー幅
Cocoon
名称フッターメニュー幅
設定場所WordPress管理画面のメニューCocoon設定→フッター
SWELL代替案CSS
そらしど

両テーマともフッターにメニューやウィジェットも設定できます。
設定場所がCocoon設定ではないためこのページでは割愛します。

Cocoon設定 ボタン

トップへ戻るボタンの表示↔ページトップボタンの表示設定
CocoonSWELL
名称トップへ戻るボタンの表示ページトップボタンの表示設定
設定場所WordPress管理画面のメニューCocoon設定→ボタンカスタマイズ→サイト全体設定→下部固定ボタン・メニュー
ボタンのアイコンフォント
Cocoon
名称ボタンのアイコンフォント
設定場所WordPress管理画面のメニューCocoon設定→ボタン
SWELL代替案CSS
ボタン色
Cocoon
名称ボタン色
設定場所WordPress管理画面のメニューCocoon設定→ボタン
SWELL代替案CSS
ボタン画像
Cocoon
名称ボタン画像
設定場所WordPress管理画面のメニューCocoon設定→ボタン
SWELL代替案CSS

Cocoon設定 モバイル

モバイルメニュー
Cocoon
名称モバイルメニュー
設定場所WordPress管理画面のメニューCocoon設定→モバイル
SWELL代替案Cocoonのヘッダーモバイルボタンに当たる設定は「カスタマイズ→ヘッダー」で設定可能
Cocoonのフッターモバイルボタンに当たる設定は「カスタマイズ→サイト全体設定→下部固定ボタン・メニュー」で設定可能
そらしど

SWELLは各コンテンツの設定にSP設定も置いている印象です。

モバイルボタンの固定表示↔ヘッダーを追従させる(SP)
CocoonSWELL
名称モバイルボタンの固定表示ヘッダーを追従させる(SP)
設定場所WordPress管理画面のメニューCocoon設定→モバイルカスタマイズ→ヘッダー
サイトヘッダーロゴを表示する
Cocoon
名称サイトヘッダーロゴを表示する
設定場所WordPress管理画面のメニューCocoon設定→モバイル
SWELL代替案CSS
モバイルボタン時コンテンツ下のサイドバーを表示
Cocoon
名称モバイルボタン時コンテンツ下のサイドバーを表示
設定場所WordPress管理画面のメニューCocoon設定→モバイル
SWELL代替案共通サイドバー【スマホ】に空白のテキストを設置する

Cocoon設定 404ページ

投稿日時点でSWELLには404ページに関する設定はありません。
編集したい場合はプラグインを使用するなりPHPの編集が必要になります。

そらしど

SWELLユーザーでレイアウトが気になる場合は、存在しないパーマリンクでアクセスして確認してみましょう。
例:https://soracidblog.com/subtheme/hoge/

各種設定
Cocoon
名称404画像
404ページタイトル
404ページメッセージ
設定場所WordPress管理画面のメニューCocoon設定→404ページ
SWELL代替案404ページを固定ページで作成する

Cocoon設定 AMP

投稿日時点でSWELLにはAMPに関する設定はありません。
編集したい場合はプラグインを使用する必要があります。
なお、以下のツイートよりプラグインを使用しても厳しい可能性があります。

Cocoonのマニュアルはこちら

そらしど

個人の感想ですが、AMPは小難しくエラーが頻発する割にメリットが感じられないです。
SWELLユーザーは無理に設定する必要はないかもしれません。

各種設定
Cocoon
名称AMP機能を有効化する
AMPロゴ
インラインスタイル
スキンのスタイルを有効にする
子テーマのスタイルを有効にする
AMP除外カテゴリー
設定場所WordPress管理画面のメニューCocoon設定→AMP
SWELL代替案プラグインで設定する

Cocoon設定 管理者画面

投稿日時点でSWELLには管理画面に関する設定はありません。

アドミンバーに独自管理メニューを表示
Cocoon
名称アドミンバーに独自管理メニューを表示
設定場所WordPress管理画面のメニューCocoon設定→管理画面
SWELL代替案不明

SWELLでは表示固定です。

投稿一覧設定
Cocoon
名称カラム表示
設定場所WordPress管理画面のメニューCocoon設定→管理画面
SWELL代替案投稿画面の表示オプション
管理者パネル
Cocoon
名称管理者パネルの表示
PVの表示
編集エリアの表示
AMPエリアの表示
チェックツールエリアの表示
レスポンシブツールエリアの表示
設定場所WordPress管理画面のメニューCocoon設定→管理画面
SWELL代替案不明

Cocoon設定 ウィジェット

投稿日時点でSWELLにはウィジェットに関する設定はありません。

除外ウィジェット
Cocoon
名称除外ウィジェット
設定場所WordPress管理画面のメニューCocoon設定→ウィジェット
SWELL代替案PHP

Cocoon設定 ウィジェットエリア

投稿日時点でSWELLにはウィジェットエリアに関する設定はありません。

除外ウィジェットエリア
Cocoon
名称除外ウィジェットエリア
設定場所WordPress管理画面のメニューCocoon設定→ウィジェットエリア
SWELL代替案PHP

Cocoon設定 エディター

Gutenberg
Cocoon
名称Gutenbergエディターを有効にする
設定場所WordPress管理画面のメニューCocoon設定→エディター
SWELL代替案プラグイン「Classic Editor」
エディタースタイル
Cocoon
名称エディターにテーマスタイルを反映させる
設定場所WordPress管理画面のメニューCocoon設定→エディター
SWELL代替案不明
エディター色
Cocoon
名称背景色
文字色
設定場所WordPress管理画面のメニューCocoon設定→エディター
SWELL代替案不明
タグ
Cocoon
名称タグ選択をチェックリスト形式にする
設定場所WordPress管理画面のメニューCocoon設定→エディター
SWELL代替案不明
ボタン
Cocoon
名称「ふりがな(ルビ)」ボタン表示
「書式のクリア」ボタン表示
設定場所WordPress管理画面のメニューCocoon設定→エディター
SWELL代替案不明
スタイルドロップダウン
Cocoon
名称文字スタイル表示
マーカー表示
バッジ表示
文字サイズ表示
設定場所WordPress管理画面のメニューCocoon設定→エディター
SWELL代替案不明
ショートコードドロップダウン
Cocoon
名称汎用ショートコード表示
テンプレート表示
アフィリエイト表示
ランキング表示
設定場所WordPress管理画面のメニューCocoon設定→エディター
SWELL代替案不明
ブロックオプション
Cocoon
名称スタイル表示
設定場所WordPress管理画面のメニューCocoon設定→エディター
SWELL代替案不明
拡張カラーパレット色↔カラーパレット設定
CocoonSWELL
名称拡張カラーパレット色カラーパレット設定
設定場所WordPress管理画面のメニューCocoon設定→エディターSWELL設定→エディター設定→
文字カウンター
Cocoon
名称タイトル等の文字数カウンター表示
設定場所WordPress管理画面のメニューCocoon設定→エディター
SWELL代替案不明
確認ダイアログ
Cocoon
名称ページ公開前に確認アラートを出す
設定場所WordPress管理画面のメニューCocoon設定→エディター
SWELL代替案不明

Cocoon設定 API

投稿日時点でSWELLには各種APIやアフィリエイトIDに関する設定はありません。
公式サイト推奨プラグインPochippで代用可能です。

そらしど

私がPochippは無料版しか使っておらず比較が困難な為、割愛します。

Cocoon設定 その他

そらしど

基本的に使用する機会が少ない設定と認識していますが、必要な場合はCocoonを使用した方が良いかもしれません。

簡単SSL対応
Cocoon
名称内部URLをSSL対応(簡易版)
設定場所WordPress管理画面のメニューCocoon設定→その他
SWELL代替案不明
ファイルシステム認証
Cocoon
名称認証を有効にする
設定場所WordPress管理画面のメニューCocoon設定→その他
SWELL代替案不明
Simplicity設定
Cocoon
名称Simplicityから投稿設定を引き継ぐ
設定場所WordPress管理画面のメニューCocoon設定→その他
SWELL代替案不明
日本語スラッグ
Cocoon
名称日本語スラッグを半角英数字にする
設定場所WordPress管理画面のメニューCocoon設定→その他
SWELL代替案不明
jQuery
Cocoon
名称jQuery Core X.X.X
設定場所WordPress管理画面のメニューCocoon設定→その他
SWELL代替案不明

SWELLはjQueryに依存していません。読み込むかどうかの設定はSWELL設定にあります。

jQuery Migrate
Cocoon
名称jQuery Migrate X.X.X
設定場所WordPress管理画面のメニューCocoon設定→その他
SWELL代替案不明

SWELLはjQueryに依存していません。読み込むかどうかの設定はSWELL設定にあります。

Cocoon設定 リセット

全ての設定をリセットする↔カスタマイザーのリセット
CocoonSWELL
名称全ての設定をリセットするカスタマイザーのリセット
設定場所WordPress管理画面のメニューCocoon設定→リセットSWELL設定→リセット

リセットを行う前にバックアップしておくことをおすすめします。

Cocoon設定 テーマ情報

環境情報↔サイト情報
CocoonSWELL
名称環境情報サイト情報
設定場所WordPress管理画面のメニューCocoon設定→テーマ情報ダッシュボード→ホーム

記載内容はCocoonの方が豊富です。

Cocoon設定 寄付

そらしど

無料テーマであるCocoon特有のコンテンツです。

Cocoon設定 吹き出し

吹き出し↔ふきだし
CocoonSWELL
名称吹き出しふきだし
設定場所WordPress管理画面のメニュー→吹き出しWordPress管理画面のメニュー→ふきだし

設定できる項目はあまり変わらないが、SWELLの方が色の自由度が高い

Cocoon設定 テンプレート

テキストテンプレート↔ブログパーツ
CocoonSWELL
名称テキストテンプレートブログパーツ
設定場所WordPress管理画面のメニュー→テンプレートWordPress管理画面のメニュー→ブログパーツ

設定画面はCocoonはビジュアルエディター、SWELLはブロックエディター

Cocoon設定 アフィリエイトタグ

アフィリエイトタグ管理↔広告タグ
CocoonSWELL
名称アフィリエイトタグ管理広告タグ
設定場所WordPress管理画面のメニュー→アフィリエイトタグWordPress管理画面のメニュー→広告タグ

Cocoonはタグを管理のみ。SWELLは豊富な設定あり

Cocoon設定 ランキング作成

ランキング↔広告タグ
CocoonSWELL
名称ランキング広告タグ(ランキング)
設定場所WordPress管理画面のメニュー→ランキング作成WordPress管理画面のメニュー→広告タグ

SWELLは順位ごとに別々の広告タグとして作成する。ブログパーツを使用してまとめるのが推奨。

Cocoon設定 高速化

ブラウザキャッシュ↔キャッシュ機能
CocoonSWELL
名称ブラウザキャッシュキャッシュ機能
設定場所WordPress管理画面のメニュー→高速化WordPress管理画面のメニュー→SWELL設定→高速化タブ

SWELLのキャッシュはブラウザではなくデータベース保存。

HTML縮小化
Cocoon
名称HTML縮小化
設定場所WordPress管理画面のメニューCocoon設定→その他
SWELL代替案不明
CSS縮小化↔SWELLのCSSをインラインで読み込む
CocoonSWELL
名称CSS縮小化SWELLのCSSをインラインで読み込む
設定場所WordPress管理画面のメニュー→高速化WordPress管理画面のメニューSWELL設定→高速化

両テーマとも余計な改行を除いたCSSがHTMLにインラインで読み込まれます。

インラインで読み込む

CSSファイルをリンクで参照せず、生成するHTMLファイルに直接CSSを記載すること

Lazy Load設定↔遅延読み込み機能
CocoonSWELL
名称Lazy Load設定遅延読み込み機能
設定場所WordPress管理画面のメニュー→高速化WordPress管理画面のメニュー→SWELL設定→高速化タブ
キャッシュ削除↔キャッシュのクリア
CocoonSWELL
名称キャッシュ削除キャッシュのクリア
設定場所WordPress管理画面のメニュー→キャッシュ削除WordPress管理画面のメニュー→SWELL設定→リセット

まとめ

Cocoon設定から設定できる項目をほぼ網羅してSWELLとの比較を紹介しました。

豊富なCocoonの設定項目は、SWELLにはない独特なものが多かったですね。

カルーセルだけではなくアピールエリアや通知バーもSWELLに類似機能があるのはこの記事を作成している中で発見しました。

今回はCocoon設定にフォーカスして紹介したため、SWELLの情報を紹介しきれていませんでした。SWELL設定にフォーカスした記事も作成予定なので、そちらで紹介したいと思います。

そらしど

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


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

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

よかったらシェアお願いします
  • URLをコピーしました!
  • URLをコピーしました!
目次
トップへ
目次
閉じる