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

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

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

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

 

 

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

あ

アイキャッチ画像

Cocoon設定→画像タブ

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

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

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

ayaito.net

アイコンフォント

Cocoon設定→全体タブ

• Font Awesome 4　または　Font Awesome 5　選択

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

 

アドセンス広告

Cocoon設定→広告タブ

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

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

 

ads.txt編集

Cocoon設定→広告タブ

• 解説ページ

アピールエリア

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

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

アフィリエイト

Cocoon設定→APIタブ

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

Amazon API

Cocoon設定→APIタブ

 

AMP化

実際には2024年2月に公開された Ver.2.7.0 で廃止になりました。

Cocoon 2.7.0公開。ads.txt編集・リファラー設定機能の追加。AMP・PWA・HTML縮小化機能の廃止

Cocoon 2.6.9からの変更点です。 作者がちょっと体調不良でトータル1ヶ月ほど入院してたためアップデートを行えず、その分溜まった変更や修正が多くなりました。 機能追加 ads.txt編集機能の追加 Cocoon設定の「SEO」タブに

wp-cocoon.com

 

Cocoon設定→AMPタブ

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

インフォメーションバー

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追記は以下のいずれかから行って下さい。 外観→カスタマイズ→追加CSS ...

ayaito.net

OGP画像

Cocoon設定→OGPタブ

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

おすすめカード

Cocoon設定→おすすめカードタブ

※Cocoonでは「おすすめカード」と呼んでいる、ヘッダー下のおすすめ記事などを表示できるエリア

か

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

Cocoon設定→本文タブ

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

カテゴリーの色や説明

投稿→カテゴリー

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

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

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

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

ayaito.net

カルーセル

Cocoon設定→カルーセルタブ

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

管理者パネル

Cocoon設定→管理者画面タブ

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

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

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

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

ayaito.net

 

管理者画面

Cocoon設定→管理者画面タブ

表示するカラム設定

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

関連記事設定

Cocoon設定→投稿タブ

• 関連記事の表示・非表示
• 表示するカードのタイプ
• 関連性の設定
• 表示数・取得期間の設定
• 枠線の表示・非表示

キーカラー

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設定→タイトルタブ

サムネイル画像サイズ

Cocoon設定→画像タブ

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

 

サムネイル表示

Cocoon設定→全体タブ

CSS

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

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

 

シェア数のキャッシュ

Cocoon設定→SNSシェアタブ

スキン

Cocoon設定→スキンタブ

設定のリセット

Cocoon設定→リセットタブ

ソースコード表示

Cocoon設定→コードタブ

た

タイトル

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

タイトルの表示形式

Cocoon設定→タイトルタブ

通知

Cocoon設定→通知タブ

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

Twitterカード

Cocoon設定→OGPタブ

Twitter動作設定

Cocoon設定→SNSシェアタブ

投稿情報の表示項目

Cocoon設定→本文タブ

トップへ戻るボタン

Cocoon設定→ボタンタブ

な

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

Cocoon設定→本文タブ

No Image画像

Cocoon設定→画像タブ

 

は

背景画像

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

バリューコマースの設定

Cocoon設定→広告タブ

パンくずリスト

Cocoon設定→投稿タブ

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

PWA化

Cocoon設定→PWAタブ

CocoonのPWA機能は廃止になりました。（2023/2/5）

2024年2月5日にサポート終了・機能廃止 2023年12月31日にサポート終了・機能廃止。 実際には2024年2月に公開された Ver.2.7.0 で廃止になりました。 以下、PWAについてまとめていましたが、 機能廃止となった為、どうし...

ayaito.net

PV表示設定

実際には2024年2月に公開された Ver.2.7.0 で廃止になりました。

Cocoon 2.7.0公開。ads.txt編集・リファラー設定機能の追加。AMP・PWA・HTML縮小化機能の廃止

Cocoon 2.6.9からの変更点です。 作者がちょっと体調不良でトータル1ヶ月ほど入院してたためアップデートを行えず、その分溜まった変更や修正が多くなりました。 機能追加 ads.txt編集機能の追加 Cocoon設定の「SEO」タブに

wp-cocoon.com

 

Cocoon設定→管理者画面タブ

簡単！Cocoonでアドセンス広告・関連記事を表示する方法

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

ayaito.net

PR表記の設定

Cocoon設定→投稿タブ

消費者庁の景品表示法の指定告示（通称：ステマ規制）に対応するための「PR表記」に関する設定

 

日付フォーマット

Cocoon設定→全体タブ

表示する日付の形式

Cocoon設定→SEO

ファビコン

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

Facebook APP ID

Cocoon設定→OGPタブ

Facebook シェア数

Cocoon設定→SNSシェアタブ

フォント・サイズ・色

Cocoon設定→全体タブ

 

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

Cocoon設定→フッタータブ

フッタークレジット

Cocoon設定→フッタータブ

ブログカード

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

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

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

Cocoon設定→エディタタブ

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

Cocoon設定→エディタタブ

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

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

プロフィールエリア

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

 

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

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

ayaito.net

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

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

ayaito.net

 

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

Cocoon設定→タイトルタブ

ページ送りナビ

Cocoon設定→投稿タブ

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

Cocoon設定→ボタンタブ

ヘッダーアピールエリア

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

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

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

Cocoon設定→ヘッダータブ

ヘッダーレイアウト

Cocoon設定→ヘッダータブ

 

ヘッダーロゴ・背景色

Cocoon設定→ヘッダータブ

ヘッダーにコード挿入

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

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

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

フッターにコード挿入

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

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

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

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

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

ま

メインカテゴリー

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

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

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

ayaito.net

メタキーワード

Cocoon設定→タイトルタブ

目次

Cocoon設定→目次タブ

 

Cocoonの目次設定とデザインカスタマイズ

Cocoonには目次を表示する機能が標準であるので、プラグインなどを使う必要はありませんが、少しデザインを変更してみました。 前提 Cocoon設定→目次タブから、表示の設定を行います。 設定項目 目次の表示・非表示、表示するページ設定 目...

ayaito.net

Cocoonで目次の非表示をページ単位に設定する方法

Cocoonには目次を表示する機能が標準であるので、プラグインなどを使う必要はありません。 個別に目次を表示したくないページがある場合の設定も簡単に行えます。 目次設定 Cocoon設定→目次タブから、表示の設定を行います。 設定項目 目次...

ayaito.net

 

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

Cocoon設定→モバイルタブ

や・ら・わ

読む時間表示

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

404ページ

Cocoon設定→404ページタブ

 

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

Cocoon設定→本文タブ

リンク色

Cocoon設定→全体タブ

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

Cocoon設定→本文タブ

レビュー記事

記事編集画面→レビュー

ロゴ・ロゴサイズ

Cocoon設定→ヘッダータブ