Cocoonの設定　やりたい事の逆引きで編集箇所がわかる50音順一覧

Cocoonで設定できる項目は膨大にあり、いざ何かをしたい時、どこで設定するのか探すのが大変です。

この記事では、やりたい事から設定箇所を探せる逆引きの一覧にまとめています。

Cocoonを始めたばかりの方や、これから使おうという方は、初期設定についてもまとめていますので以下を参考にして下さい。

Cocoonの設定は、Cocoon設定　と　外観→カスタマイズ　から行えます。

あ
か
さ
た
な
- 内部リンクアイコン・リンクの開き方
- No Image画像
は
ま
や・ら・わ

あ

アイキャッチ画像

Cocoon設定→画像タブ

本文上にアイキャッチを表示・非表示
アイキャッチラベルの表示・非表示
アイキャッチの中央寄せ
アイキャッチ自動設定のON/OFF
アイキャッチ画像枠の表示・非表示・形状

Cocoonのアイキャッチサイズはいくつにすればいい？比率ごとのサイズサンプル

テーマによってアイキャッチ画像のサイズ（縦横比率）が適当だと、拡大や縮小されて間延びしたり、画像が切れてしまったりします。 Cocoonの場合は、画像の縦横比を設定する事が出来る為、その設定に沿った比...

アイコンフォント

Cocoon設定→全体タブ

Font Awesome 4　または　Font Awesome 5　選択

通常、５で大丈夫ですが、以前Ver.4を利用していたサイトの場合は注意事項があり。アイコンフォントのバージョンによる注意は公式サイトをご覧ください。

Font Awesome5を利用する方法

サイトで利用されているアイコンフォントをFont Awesome5に変更したり、Font Awesome4に戻したりする方法です。

アドセンス広告

Cocoon設定→広告タブ

表示・非表示
アドセンスコード
広告ラベル
広告表示位置
ショートコード「ad」登録
広告除外カテゴリー設定

設定方法は以下にまとめています。

Cocoonでアドセンス広告の貼り方・設定だけで簡単！

Cocoonは、広告についても非常にきめ細かく設定可能です。 Googleアドセンスのコードも通常レスポンシブコードや、リンクユニット、関連コンテンツのコードをそれぞれセット出来、表示位置も１２か所あ...

アピールエリア

Cocoon設定→アピールエリアタブ

※Cocoonでは「アピールエリア」と呼んでいる、ヘッダー下のエリア

Cocoonのヘッダーアピールエリアを設定する

Cocoonには、色々な便利な機能やエリアが用意されています。今回は、ヘッダーに表示できる「アピールエリア」の使い方についてです。以下、サンプルです。赤枠内が「ヘッダーアピールエリア」になります。 ...

アフィリエイト

Cocoon設定→APIタブ

Amazon、Yahoo、楽天、もしもアフィリエイト
APIキャッシュの設定

CocoonのAPI設定（タブ）の設定方法をすべて解説

CocoonではアフィリエイトのAPI管理が一括で行えてとても便利ですが、たくさん設定項目がありますので、それらを詳細にまとめています。 APIの設定 Cocoon設定→APIタブアフィリエイト用の...

Amazon API

Cocoon設定→APIタブ

AMP化

Cocoon設定→AMPタブ

AMPの有効・無効
AMP用ロゴ
インラインスタイル
サイズ設定
AMP除外カテゴリーの設定

簡単！CocoonをAMP化する方法・ロゴやCSSのサイズとエラー時の対処

CocoonはAMPやPWAにも対応していて、簡単に対応できます。 PWAについては以下にまとめています。 AMPの設定方法とAMPページの確認方法、またCSS内容などによりGoogle Search...

インフォメーションバー

Cocoon設定→通知タブ

※Cocoonでは「通知」と呼んでいる、サイト上部のベルト状のエリア

Cocoonのサイト上部に帯状メッセージエリア（通知）を設定・全ページ表示

Cocoonには、色々な便利な機能やエリアが用意されています。今回は、サイト上部にベルト上に表示できる「通知」の使い方についてです。以下、サンプルです。黒いバーが「通知」エリアになります。このエリ...

ウィジェットを除外

Cocoon設定→ウィジェットタブ

使用しないウィジェットを非表示にできる設定

ウィジェットエリアを除外

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

使用しないウィジェットエリアを非表示にできる設定

SNSシェアボタン

Cocoon設定→SNSシェアタブ

ボタンカラー
表示するページ設定
配列（横にいくつ並べるか）
シェア数の表示・非表示

リンクボタン

Twitter
Facebook
はてなブックマーク
Pocket
LINE@
Pinterest
LinkedIn
タイトルとURLをコピー

SNSフォローボタン

Cocoon設定→SNSフォロータブ

フォローメッセージ
ボタンカラー
表示するページ設定
feedly、RSSボタンの表示・非表示
フォロー数の表示・非表示
キャッシュ設定

リンクボタン

ウェブサイト
Twitter
Facebook
はてなブックマーク
Instagram
Pinterest
YouTube
LinkedIn
note
Flickr
Amazon欲しい物リスト
楽天ROOM
Slack
GitHub
CodePen

コピペで！CocoonのSNSフォローボタンデザインカスタマイズ

Cocoonで表示できるSNSフォローボタンやシェアボタンの色やデザインをカスタマイズする方法です。初期デザインカスタマイズ方法簡単なCSS追記のみです。 CSS追記は以下のいずれかから行って下...

OGP画像

Cocoon設定→OGPタブ

OGPタグの有効・無効
OGP画像設定
Twitterカード設定

か

外部リンクアイコン・リンクの開き方

Cocoon設定→本文タブ

新しいタブで開く
同じタブで開く

カテゴリーの色や説明

投稿→カテゴリー

WordPress標準の「カテゴリー名」「スラッグ」「親カテゴリー」「説明文」以外に以下の設定が可能です。

カテゴリーの色・文字色
カテゴリータイトル・本文
アイキャッチ
メタディスクリプション
メタキーワード

Cocoonで簡単にカテゴリーごとのページをデザイン設定

Cocoonはカテゴリーのデザインを編集し、カテゴリーアーカイブページの上部を簡単にカスタマイズする機能があります。カテゴリーアーカイブページの上部表示例カテゴリー名の背景色、文字色を任意の色に変...

カルーセル

Cocoon設定→カルーセルタブ

表示するページ設定
人気記事の集計期間
表示するカテゴリー設定
表示順序の設定
最大表示数
枠線の表示・非表示
オートプレイの有効・無効・時間設定

管理者パネル

Cocoon設定→管理者画面タブ

管理バーの表示・非表示
表示する内容の設定

詳細は以下をご覧ください。

Cocoon管理者パネルの設定とサンプル＋表示ボタンのリンク先一覧

Cocoonには、色々な便利な機能やエリアが用意されています。今回は、PV数、編集リンクや、スピードチェック、レスポンシブチェックなどのチェックツールへのリンクを表示できる管理者パネルについてです。 ...

管理者画面

Cocoon設定→管理者画面タブ

表示するカラム設定

作成者
カテゴリー
タグ
コメント
日付
投稿ID
文字数
アイキャッチ
メモの内容

キーカラー

Cocoon設定→全体タブ

キーテキストカラー

Cocoon設定→全体タブ

記事の行間・余白

Cocoon設定→本文タブ

記事一覧の並び順・表示カード形式・表示項目

Cocoon設定→インデックスタブ

記事を読む時間の表示・非表示

Cocoon設定→本文タブ

キャッチフレーズ

外観→カスタマイズ→サイト基本情報

ブラウザに表示するサイト名とキャッチフレーズの表示方法は以下です。

Cocoon設定→タイトルタブ

キャッチフレーズの配置（ヘッダー）

Cocoon設定→ヘッダータブ

サイト上に表示するキャッチフレーズの表示・非表示・位置

Googleアナリティクスコード

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

GoogleタグマネージャーID

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

Googleサーチコンソール認証ID

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

グローバルナビメニューの色・幅

Cocoon設定→ヘッダータブ

広告除外記事・カテゴリー設定

Cocoon設定→広告タブ

更新日の表示

Cocoon設定→本文タブ

コメント表示設定

Cocoon設定→投稿タブ

※固定ページのコメント表示設定は「固定ページタブ」

コメント入力欄

Cocoon設定→コメントタブ

コンテンツ幅・余白・枠線・色

Cocoon設定→カラムタブ

さ

サイト背景色・画像

Cocoon設定→全体タブ

サイト幅

Cocoon設定→全体タブ

サイドバーの位置・表示ページ

Cocoon設定→全体タブ

サイドバーの幅・余白・枠線・色

Cocoon設定→カラムタブ

サイトの説明

Cocoon設定→タイトルタブ

サムネイル画像サイズ

Cocoon設定→画像タブ

本文上にアイキャッチを表示・非表示
アイキャッチラベルの表示・非表示
アイキャッチの中央寄せ
アイキャッチ自動設定のON/OFF
アイキャッチ画像枠の表示・非表示・形状
サムネイル画像比率
No Image画像設定

サムネイル表示

Cocoon設定→全体タブ

CSS

外観→カスタマイズ→追加CSS

外観→テーマエディター→style.css

シェア数のキャッシュ

Cocoon設定→SNSシェアタブ

スキン

Cocoon設定→スキンタブ

設定のリセット

Cocoon設定→リセットタブ

ソースコード表示

Cocoon設定→コードタブ

Cocoonでシンタックスハイライトを使う方法（ソースコード表示）

シンタックスハイライト（構文強調 ) とは、テキストエディタの機能で、テキスト中の一部分を、コードの種類・その分類ごとに異なる色やフォントで表示するもので、サイト上でソースコードを表示したい際などに、...

た

タイトル

外観→カスタマイズ→サイト基本情報

タイトルの表示形式

Cocoon設定→タイトルタブ

通知

Cocoon設定→通知タブ

※Cocoonでは「通知」と呼んでいる、サイト上部のベルト状のエリア

Cocoonのサイト上部に帯状メッセージエリア（通知）を設定・全ページ表示

Twitterカード

Cocoon設定→OGPタブ

Twitter動作設定

Cocoon設定→SNSシェアタブ

投稿情報の表示項目

Cocoon設定→本文タブ

トップへ戻るボタン

Cocoon設定→ボタンタブ

な

内部リンクアイコン・リンクの開き方

Cocoon設定→本文タブ

No Image画像

Cocoon設定→画像タブ

は

背景画像

外観→カスタマイズ→背景画像

バリューコマースの設定

Cocoon設定→広告タブ

パンくずリスト

Cocoon設定→投稿タブ

※固定ページのパンくずリスト表示設定は「固定ページタブ」

PWA化

Cocoon設定→PWAタブ

PWAって？Cocoonで簡単にPWA対応する方法詳細と動作確認方法

CocoonはAMPやPWAにも対応していて、簡単に対応できます。 AMPについては以下にまとめています。 PWAって？ PWAとはサイト内で、AppStoreなどを経由することなくインストールでき、...

PV表示設定

Cocoon設定→管理者画面タブ

Cocoonで記事閲覧数（PV）を表示・非表示設定

Cocoonの独自機能、管理者パネル設定から簡単に閲覧の多い記事を把握する事が出来ます。それらを表示する・非表示にする方法についてまとめています。記事一覧に出る以下の部分は、該当サイトのWordP...

日付フォーマット

Cocoon設定→全体タブ

表示する日付の形式

Cocoon設定→SEO

ファビコン

外観→カスタマイズ→サイト基本情報

Facebook APP ID

Cocoon設定→OGPタブ

Facebook シェア数

Cocoon設定→SNSシェアタブ

フォント・サイズ・色

Cocoon設定→全体タブ

Cocoonのフォント設定方法と字体サンプル一覧

Cocoonは、サイト全体のフォントを字体、サイズ、太さや、行間、行の高さなど細かく設定する事が出来ます。 Webフォントもいくつか用意されていて、選択するだけで利用可能です。 Cocoonの設定画面...

フッター色・ロゴ・メニュー幅

Cocoon設定→フッタータブ

フッタークレジット

Cocoon設定→フッタータブ

ブログカード

Cocoon設定→ブログカードタブ

※内部リンク、外部リンクを別々に設定可能です。

ブロックエディタの有効・無効

Cocoon設定→エディタタブ

ブロックエディタのカラーパレット拡張

Cocoon設定→エディタタブ

プロフィール画像・情報・SNS

ユーザー→あなたのプロフィール

プロフィールエリア

外観→ウィジェット→「(C)プロフィール」

Cocoonでプロフィール欄を表示する方法と設定

Cocoonは、ウィジェットを使って記事の下や、サイドバーなど任意の場所にプロフィール欄を簡単に設置出来ます。プロフィール用画像も、通常は「Gravatar」を使うかプラグインなどを利用しますが、...

Cocoonのプロフィール欄のSNSボタンをカラーにするなどのカスタマイズ

Cocoonは、ウィジェットを使って記事の下や、サイドバーなど任意の場所にプロフィール欄を簡単に設置出来ますが、そのエリアのカスタマイズ方法です。プロフィール欄の使い方は以下をご覧ください。デフォ...

フロントページタイトル表示形式

Cocoon設定→タイトルタブ

ページ送りナビ

Cocoon設定→投稿タブ

ページトップへ戻るボタン

Cocoon設定→ボタンタブ

ヘッダーアピールエリア

Cocoon設定→アピールエリアタブ

※Cocoonでは「アピールエリア」と呼んでいる、ヘッダー下のエリア

Cocoonのヘッダーアピールエリアを設定する

ヘッダー高さ・背景画像・色

Cocoon設定→ヘッダータブ

ヘッダーレイアウト

Cocoon設定→ヘッダータブ

図解！Cocoonのヘッダーまわり、管理者メニューの設定方法

Cocoonのヘッダーまわりの設定についてエリアごとの設定方法をまとめています。以下の図の番号順に記載していますので下図を参考にご覧ください。はじめにすべての設定は「Cocoon設定」から行え...

ヘッダーロゴ・背景色

Cocoon設定→ヘッダータブ

Cocoonでヘッダーレイアウトやロゴを設定する方法と表示パターン

Cocoonでヘッダーレイアウトを設定する方法と、レイアウトパターンサンプル紹介、ロゴの設定方法などを解説していきます。ヘッダー設定「Cocoon設定」から行います。「ヘッダー」タブを開きます。...

ヘッダーにコード挿入

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

＜HEAD></HEAD>内にコード挿入

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

フッターにコード挿入

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

＜BODY>タグ直後にコード挿入

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

＜/BODY>タグ直前にコード挿入

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

ま

メインカテゴリー

記事編集画面→ページ設定

Cocoonで複数カテゴリー設定時のメインカテゴリー指定方法

CocoonのVer.2.2～の新機能です。ひとつの記事に複数のカテゴリーを指定した場合、アイキャッチに出る「カテゴリーラベル」や、パンくずリストに意図したものが表示されない事があります。そういっ...

メタキーワード

Cocoon設定→タイトルタブ

モバイルメニュー・ボタン

Cocoon設定→モバイルタブ

や・ら・わ

読む時間表示

記事編集画面→ページ設定

404ページ

Cocoon設定→404ページタブ

Cocoon　404 Not Foundページの設定方法・画像サンプルサイトも

Cocoonには、ページが見つからない時に表示される404 Not Foundページを自動生成してくれる機能があります。簡単に設定出来、好みの画像やデザインにする事も出来ます。サイト内検索窓や、メ...

リンクアイコン・リンクの開き方

Cocoon設定→本文タブ

リンク色

Cocoon設定→全体タブ

レスポンシブテーブル設定

Cocoon設定→本文タブ

レビュー記事

記事編集画面→レビュー

ロゴ・ロゴサイズ

Cocoon設定→ヘッダータブ

Cocoonでヘッダーレイアウトやロゴを設定する方法と表示パターン

あ

アイキャッチ画像

アイコンフォント

アドセンス広告

アピールエリア

アフィリエイト

Amazon API

AMP化

インフォメーションバー

ウィジェットを除外

ウィジェットエリアを除外

SNSシェアボタン

SNSフォローボタン

OGP画像

おすすめカード

か

外部リンクアイコン・リンクの開き方

カテゴリーの色や説明

カルーセル

管理者パネル

管理者画面

関連記事設定

キーカラー

キーテキストカラー

記事の行間・余白

記事一覧の並び順・表示カード形式・表示項目

記事を読む時間の表示・非表示

キャッチフレーズ

キャッチフレーズの配置（ヘッダー）

Googleアナリティクスコード

GoogleタグマネージャーID

Googleサーチコンソール認証ID

グローバルナビメニューの色・幅

広告

広告除外記事・カテゴリー設定

更新日の表示

コメント表示設定

コメント入力欄

コンテンツ幅・余白・枠線・色

さ

サイト背景色・画像

サイト幅

サイドバーの位置・表示ページ

サイドバーの幅・余白・枠線・色

サイトの説明

サムネイル画像サイズ

サムネイル表示

CSS

シェア数のキャッシュ

スキン

設定のリセット

ソースコード表示

た

タイトル

タイトルの表示形式

通知

Twitterカード

Twitter動作設定

投稿情報の表示項目

トップへ戻るボタン

な

内部リンクアイコン・リンクの開き方

No Image画像

は

背景画像

バリューコマースの設定

パンくずリスト

PWA化

PV表示設定

日付フォーマット

表示する日付の形式

ファビコン

Facebook APP ID

Facebook シェア数

フォント・サイズ・色

フッター色・ロゴ・メニュー幅

フッタークレジット

ブログカード

ブロックエディタの有効・無効

ブロックエディタのカラーパレット拡張