WordPressテーマ「Cocoon」でカスタマイズできる設定項目

Cocoonで設定できるカスタマイズ項目を知りたい皆さん

• Cocoonの設定項目は何があるの？
• Cocoonで何ができるの？

とCocoonの設定項目についてお悩みかと思います。本記事では、Cocoonで用意されている設定項目を一覧で紹介します。

＼本サイトで利用しているWordPressテーマ／

WordPressテーマ【Cocoon】でカスタマイズできる設定項目

WordPressテーマCocoonでは、サイト管理者がブログ運営するために楽にするカスタマイズから、ブログ執筆が捗る設定、ブログパーツの表示形式設定まで幅広くカスタマイズできる。

カスタマイズ項目は無料テーマの中では随一で、テーマ選びの際には有料テーマと競い合うほどに高機能で有名なテーマです。

設定項目の多さから、下手な有料テーマよりも優れているといったポジティブな意見から、多すぎて初心者には扱いづらいと言った意見まである。

今回は、Cocoonのインストールを検討している方や、Cocoonをインストールしたけどどんな機能があるのか把握したい方向けに、機能を一覧化整理しました。

Cocoon設定カラム項目

本記事では説明のしやすさから上記のエリアに列挙されている項目を「カラム項目」として説明します。

Cocoon設定

Cocoonでカスタマイズできる設定項目をタブで一律管理できます。

特にサイトパーツの表示方法に関する設定を多岐にわたってカスタマイズできます。

吹き出し

記事内で利用する会話吹き出しを作成・管理することができます。

作成することで、記事内でブロック選択するだけで利用することができます。

AFFINGER6版ではありますが、以下のイメージです。

テンプレート

記事内でよく使う文章をテンプレートとして作成・管理することができます。

作成したテンプレートは、記事内でショートコードを埋め込むだけで、テンプレート文を表示することができます。

アフィリエイトタグ

アフィリエイトタグを保存・管理することができます。

作成したアフィリエイトタグは、記事内でショートコードを埋め込むだけで、アフィリエイト広告を表示することができます。

ランキング作成

商品やサービスをランキング紹介するバナーボックスを作成・管理することができます。

作成したランキングは、ウィジェット内で選択するだけで、ランキング表示することができます。

アクセス集計

アクセス集計の可否を管理することができます。

アクセス集計をすることによって、人気記事などのアクセス数を計測することができます。

高速化

サイト表示スピードの高速化設定を管理できます。

• ブラウザキャッシュ
• HTML/CSS/JavaScriptソースコードの圧縮（縮小化）
• 画像の遅延読み込み（Lazy Load設定）
• Web/Googleフォントの非同期読み込み
• 事前読み込み設定

バックアップ

バックアップの取得や、バックアップファイルからの復旧を行うことができます。

キャッシュ削除

キャッシュの削除を管理するすることができます。

Cocoon設定詳細タブ

本記事では説明のしやすさから上記のエリアに列挙されている項目を「詳細タブ」として説明します。

スキン

サイトのデザインを着せ替えできる「スキン」を変更できます。

2021年10月現在、スキンは90種類以上存在し、１クリックでサイトのデザインを一新することができます。

このスキンがCocoonのデザインカスタマイズのメイン機能となります。

スキンは、一般ユーザーでも作成できます。出来が良ければCocoonテーマに同梱される可能性もあるので是非興味のある方はチャレンジしてみてください。『オリジナルスキンのCocoonサイト紹介について』

全体

サイト全体にかかる設定を変更することができます。

• カラー
• サイトフォント
• 背景色/背景画像
• サイドバー表示位置
• …

ヘッダー

ヘッダーの設定を変更することができます。

広告

広告設定を管理できます。

• アドセンス広告の設定と、広告表示位置の全体設定
• バリューコマース広告設定（LinsSwitch）
• 広告非表示設定（LPなどへの広告非表示化）

タイトル

タイトルの表示設定を管理できます。

SEO流入時からの検索ページでのサイト・記事のタイトル表示や、メタディスクリプション、メタキーワードの設定ができます。

SEO

SEO設定が管理できます。

• headタグ設定
• noindex設定
• 構造化データ
• 表示日付設定

OGP

OGP（Open Graph protocol）の設定を管理できます。

facebookやTwitterなどからのサイトの見せ方を設定できます。

よく利用される項目としては、Twitterカードのサムネイル表示などがあります。

アクセス解析・認証

アクセス解析の設定管理ができます。

• Googleタグマネージャ
• Google Analytics（グーグルアナリティクス）
• Google Search Console（グーグルサーチコンソール＝サチコ）

サイト管理者をアクセス解析から除く設定などもここでできます。

カラム

カラムの設定管理ができます。

主に、コンテンツエリア・サイドバーエリアの幅や余白、枠線の設定ができます。

インデックス

リスト（記事一覧）の表示形式の設定ができます。

タブ形式・カテゴリ形式（２カラム化）や、カードタイプの種類も変更できます。

投稿

投稿記事の設定ができます。

• カテゴリ・タグ表示形式設定
• 関連記事設定
• ページ送りナビ設定
• コメント設定
• パンくずリスト設定

固定ページ

固定ページの設定ができます。

• コメント設定
• パンくずリスト設定

本文

本文の設定ができます。

• 本文行間設定
• 外部リンク設定
• 内部リンク設定
• テーブル設定
• 投稿情報表示設定（登校日/更新日/投稿者名/読了時間）

目次

目次の設定・管理ができます。

この設定により、Cocoonでは人気目次プラグイン「Table of contents」が不要です。

SNSシェア

サイトのSNSシェア情報を管理できます。

• トップシェアボタン
• ボトムシェアボタン
• ツイート設定
• Facebook設定
• キャッシュ設定

SNSフォロー

サイト管理者のSNSのフォローを促す機能の設定を管理できます。

• フォローボタン
• キャッシュ設定

画像

サイトで利用する画像の設定を一括で管理することができます。

• 本文画像設定（アイキャッチ画像/画像枠線など）
• 全体画像設定
• NO IMAGE設定

ブログカード

内部ブログカード設定、外部ブログカードの設定ができます。

コード

ソースコードのハイライト表示設定を管理できます。

エディターを開いた時に、ソースコードを読みやすくするための設定です。

エンジニアの方はお気に入りのハイライトスタイルがあると思うので、適宜修正したいかもしれませんが、そうでない方は特に気にしなくて良い設定です。

コメント

読者のコメント入力フォーム周りの設定を管理することができます。

通知

ページ上部に表示できる通知バーの設定を管理することができます。

アピールエリア

ヘッダー下にアピールしたい商品やサービスの表示設定を管理することができます。

おすすめカード

おすすめの記事やカテゴリーのリンク集設定を作成・管理することができます。

この機能で、おすすめ記事一覧などを作ることができます。

カルーセル

ヘッダー下にカルーセルの表示設定を管理できます。

イメージとしては、ヘッダー下に記事のスライドショーのようなものを表示できます。

フッター

フッターの設定を管理できます。

ボタン

トップへ戻るボタンの設定を管理できます。

モバイル

モバイルメニュー・モバイルボタンの設定を管理できます。

404ページ

ページが見つからなかった場合の404ページの表示設定を管理できます。

AMP

AMP（Accelerated Mobile Pages）の設定を管理できます。

PWA

PWA（Progressive Web Apps）の設定を管理できます。

CocoonのPWAは現在ベータ版なので、非推奨です。

管理者画面

管理画面の表示項目をカスタマイズすることができます。

ウィジェット

外観＞ウィジェットで表示できる項目の表示設定を管理できます。

ウィジェットの項目数は、テーマで管理できる機能数と言われます。

しかし機能数が多すぎると、逆に使い勝手が悪くなるため、基本的に使わない機能は、ここで非表示にすることができます。

ウィジェットエリア

外観＞ウィジェットで選択できるエリアの表示設定を管理できます。

上のウィジェットとの違いを例にあげると、

• ウィジェット：最近の投稿
• ウィジェットエリア：サイドバー

表示できるモノがウィジェットで、表示できる場所がウィジェットエリアです。

エディター

エディターの設定、特にブロックエディター（Gutenberg）の設定を管理できます。

API

物販広告のAPIを管理することができます。

イメージとしては以下のような、物販広告を作成することができます。

（↑この広告はPochipで作ったものです）

この機能が用意されていることで、Cocoonでは商品リンク管理の人気プラグインであるPochipやRinkerが不要です。

リセット

サイト管理者が設定した内容を全て初期の値にリセットできます。

まとめ：Cocoonでできること

トップページのカスタマイズ性能が抜群

カルーセル設定や、記事リストのブログカード表示や２列表示などシンプルながらもおしゃれに見せる機能がたくさん用意されている

プラグインいらず

テーマ内で既に優秀な機能が標準装備されているため、WordPressの人気プラグインであるTable of contents（目次）や、PochipやRinker（商品管理プラグイン）が不要。

Googleアドセンスの広告表示位置の管理が簡単

Cocoon設定＞広告タブで、Googleアドセンスの広告をどこに表示するか一律で細かく管理することができるため、読者に簡単に広告を訴求できる。

機能数が有料テーマ含めても上位

Cocoon設定のタブを見ても分かる通り、設定できる項目数が種類豊富。

テーマによっては有料テーマよりも多いカテゴリの設定項目もある。ただし、いわゆる初心者向けでよくおすすめされている有料テーマは、こういった設定できる細かい機能を意図的に隠されている。