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

名称

スキン設定

設定場所

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

SWELL代替案

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

そらしど

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

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

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

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

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

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

body {
	font-weight: 500;
}

CocoonはFont Awesome 4or5
SWELLはIcoMoon

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

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

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

.l-header {
	height: 50px;
}

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

.l-header {
	background: url(画像ファイルのURL) no-repeat center;
}

そらしど

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

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

.c-gnav {
	width: 50px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

canonicalタグ

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

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

そらしど

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

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

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

Cocoon

SEO設定のrel=”next”/”prev”タグの仕様を教えてください。 Cocoonを使わせていただいております。素晴らしいテーマ、本当にありがとうございます。 SEO設定にある「分割ページにrel=”next”/”prev”タグの追加」という項目について、…

そらしど

なおrel=”prev/next” は、Google自体サポートを終了しているようです。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

SWELLは中央寄せ固定です。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Cocoonの単位は「秒」
SWELLの単位は「ミリ秒（1/1000秒）」

SWELLでは表示固定です。

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

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

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

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

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

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

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

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

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

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

インラインで読み込む

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