広告の表示・非表示
広告ラベル
アドセンス広告の表示・非表示
アドセンス広告コード
（レスポンシブ、リンクユニット、関連コンテンツ）
アドセンス広告表示位置
- トップ
- ミドル
- ボトム
- サイドバートップ
- サイドバーボトム
- タイトル上
- タイトル下
- 本文中
- 本文下
- SNSボタン上
- SNSボタン下
- 関連記事下
アドセンスショートコードの有効・無効[ad] 解説ページ
ads.txt編集解説ページ
PR表記の設定：消費者庁の景品表示法の指定告示（通称：ステマ規制）に対応するための「PR表記」に関する設定
バリューコマースの設定
広告除外設定（表示しない記事ID、カテゴリー）

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

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

タイトル

設定項目

フロントページタイトルの表示形式
サイトの説明
メタキーワード

「フロントページタイトル」の部分で、表示形式を設定します。

SEO

設定項目

HEADタグ内に挿入するリンク設定
構造化データ設定
表示日付設定

知識のある方はカスタマイズ。そうでない方は特に変更しなくてOK。

OGP

OGP画像は、SNSなどに投稿したり共有されたりした際に、アイキャッチ画像が設定されていないページの場合に表示される画像になります。

「Cocoon設定」の「OGP」タブから行います。

設定項目

OGPの有効・無効
Facebook APP ID
Twitterカードの有効・無効
Twitterカードタイプ
OGP画像

デフォルトではCocoonの画像になっているので、必ず自身の画像に変更しましょう！

アクセス解析・認証

設定項目

解析対象にサイト管理者を含むか
GoogleタグマネージャーID、AMP用ID
Googleアナリティクストラッキングコード
Googleアナリティクススクリプト
Google SerchConsoleののサイト認証タグ
<head></head>内に記述するコード
<body>タグ直後に挿入するコード
</body>タグ直前に挿入するコード

Googleアナリティクスやタグマネージャー、サーチコンソールの設定も簡単に行えますので、最初にセットしておきます。

アナリティクスを新規に設定する際は以下をご覧ください。

初心者向け！Googleアナリティクスの新規設定解説

Google Analyticsとは Googleが提供するWebページのアクセス解析サービスで、無料ながら高機能で、サイト運営には欠かせないツールと言えます。（※有料版もありますが、無料版で問題なし）取得できる主な情報は以下です。【...

初心者向け！Google Serch Consoleの新規設定とアナリティクス連携

Google Serch Consoleとは Googleが提供するGoogle 検索結果でのサイトパフォーマンスを監視、管理できる無料ツールです。 Googleアナリティクスもサイト運営に欠かせない無料のアクセス解析ツールですが、Goog...

Googleタグマネージャー、Googleアナリティクスコードと、Google SerchConsoleの認証コードは以下に入力するだけでOKです。
Googleタグマネージャー設定

Googleアナリティクスコード・SerchConsoleの認証コード

Googleアドセンスコードの設定
アドセンスコードも上記同様「Cocoon設定」→「アクセス解析」タブで行います。

Googleアドセンスについては以下をご覧ください。

Googleアドセンスとは？申請方法～コードの貼り付け場所や報酬

Google Adsence（アドセンス）とは Googleが提供する広告サービスで、サイト運営者はサイト上に広告を表示し、サイトを訪れた人が広告をクリックすると報酬が発生するシステムです。多種多様な広告があり、内容や表示形式、表示位置も...

カラム

サイト全体のカラム幅などの設定です。
設定項目

コンテンツ幅・余白幅・枠線幅・枠線色
サイドバー幅・余白幅・枠線幅・枠線色
メインとサイドバーの間隔幅

インデックス

記事一覧ページでの表示設定です。
設定項目

記事一覧の並び順（投稿日or更新日）
記事一覧のデザイン（７種より選択）
枠線の表示
自動生成枠文字数
省略文字数
投稿関連情報の表示項目

投稿

設定項目

カテゴリ・タグ表示、非表示・表示位置
関連記事表示、非表示、関連性
関連記事見出し、表示デザイン、表示数
関連記事の取得期間、枠線の表示、最大自動生成枠文字数
関連記事の投稿関連情報の表示項目

ページ送りナビ表示・非表示、表示タイプ、表示位置
ページ送りナビを同一カテゴリーで表示するかの設定
ページ送りナビの枠線表示・非表示
コメントの表示、非表示
パンくずリストの表示・非表示、表示位置
パンくずリストの記事タイトルを含めるか

固定ページ

設定項目

固定ページにコメント表示・非表示
パンくずリストの表示・非表示、表示位置
パンくずリストに記事タイトルを含めるか

本文

設定項目

本文行間設定（行の高さ・行の余白）
外部リンク設定（ターゲット、フォロータイプ、追加rel属性）
外部リンクアイコンの表示・非表示（アイコンフォント選択）
内部リンク設定（ターゲット、フォロータイプ、追加rel属性）
内部リンクアイコンの表示・非表示（アイコンフォント選択）
テーブル設定（横スクロールするか）
投稿情報表示設定（投稿日・更新日・投稿者名の表示、非表示）
記事を読む時間の目安の表示・非表示

目次の表示・非表示、表示するページ設定
目次のタイトル
目次表示切り替え機能の有効・無効
目次表示切り替えボタンのタイトル
表示条件（見出しの数で設定）
見出しの深さ
目次ナンバーの表示・非表示
目次の中央表示or左側表示
目次を広告の手前に表示するか否か
見出し内のタグの有効・無効

SNSシェア

ページをシェアしてもらうSNSシェアの設定です。
設定項目
メイントップと、ボトムに以下のそれぞれ設定可能です。

シェアボタンを表示・非表示
表示ボタンの選択
- Twitter
- Facebook
- はてブ
- Pocket
- LINE＠
- Pinterest
- Linkedln
- タイトルとURLコピー
表示するページの選択
ボタンのカラー（モノクロ、ブランドカラー、白抜き）
カラム数
ロゴキャプション表示位置

Twitter動作設定
Facebookシェア数設定
Ponterest「保存」ボタン設定
キャッシュの有効・無効
キャッシュ間隔
別スキームシェア数をキャッシュするか否か

SNSフォロー

設定項目

本文下のフォローボタンの表示・非表示
フォローメッセージ設定
表示するページの設定
feedly、RSSの表示・非表示
ボタンカラー設定
デフォルトユーザー名
フォロー数の表示・非表示
feedly購読者数
キャッシュの有効・無効
キャッシュ間隔
別スキームフォロー数をキャッシュするか否か

SNSのURL設定はプロフィール設定から行います。

画像

設定項目

アイキャッチの表示
アイキャッチの自動設定有効・無効
画像の囲み枠選択
画像の拡大効果
サムネイル画像比率
サムネイルのReitinaディスプレイ対応
アイキャッチがない時にセットする画像を指定

ブログカード

設定項目

ブログカードの有効・無効
サムネイルの位置（左右）
日付表示（なし・更新日・投稿日）
リンクの開き方（新しいタブで開くか）
外部ブログカードの有効・無効
外部ブログカードのサムネイル位置
外部ブログカードのリンクの開き方（新しいタブで開くか）
外部ブログカードのキャッシュ保存期間、更新の有効無効

ブログカードは、URLアドレスを１行に記述するだけで、内部リンク・外部リンクを自動判定してブログカードで表示されます。

コード

設定項目

ソースコードをハイライト表示するか
ライブラリ選択（軽量版orすべて）
ハイライトスタイル（デザイン選択）
ハイライト表示するCSSセレクタ

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

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

設定項目

コメント表示形式
コメント一覧見出し
コメント入力欄の表示方法
コメント入力欄の見出し
コメント入力欄のメッセージ
コメント入力時にサイトURL入力ボックスを表示するか
コメント送信ボタンの設定

通知

サイト上部ベルト状に表示される通知メッセージの設定です。全ページ表示。

設定項目

通知エリアの表示
通知メッセージの設定
通知URL
リンクの開き方
通知タイプ・色

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

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

アピールエリア

サイトヘッダーに表示されるアピールエリアの設定です。

設定項目

アピールエリアの表示、非表示
アピールエリアの高さ、画像、背景色
アピールエリアのタイトル、メッセージ
ボタンメッセージ、リンク先、リンクの開き方、ボタンの色

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

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

カルーセル

設定項目

カルーセルの表示・非表示・表示するページ
表示内容（人気記事・カテゴリー選択）
カルーセルの並び変え（ランダム・投稿日・更新日）
最大表示数
枠線の表示
オートプレイの実行をするか・オートプレイ秒数

フッター

設定項目

フッター背景色・文字色
フッター表示タイプ
フッターロゴ
クレジット表記形式（サンプル選択か独自表記も可能）
フッターメニュー幅

ボタン

設定項目

トップへ戻るボタンの表示・非表示
ボタンのアイコンフォント選択（10種）
ボタンの背景色・文字色
ボタン画像

モバイル

設定項目

モバイルメニューの表示・非表示
モバイルメニュー表示形式
モバイルボタンの固定表示・非表示
サイトヘッダーロゴの表示・非表示
モバイルボタン時コンテンツ下のサイドバー表示・非表示

404ページ

設定項目

404ページ画像
404ページタイトル
404ページメッセージ

サイトを訪れた人が表示しようとしたページが何らかの原因で存在しない際に表示される「404 Not Found」のページも簡単に設定出来ますので、はじめにセットしておきます。

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

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

AMP

2023年12月31日にサポート終了・機能廃止。

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

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

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

設定項目

AMP有効・無効
AMPロゴ設定
画像の拡大効果
インラインスタイル有効・無効
スキンスタイル有効・無効
子テーマのスタイル有効・無効
AMP除外カテゴリー指定

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

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

PWA

2023年12月31日にサポート終了・機能廃止。

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

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

設定項目

PWAの有効・無効
アプリ名・短いアプリ名・説明文
アイコン
テーマカラー・背景色
表示モード
画面の動き

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

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

管理者画面

設定項目

管理者メニューの表示・非表示
投稿一覧に表示する項目（作成者・カテゴリー・タグ・コメント・日付・投稿ID・文字数・アイキャッチ・メモの内容）
管理者パネルの表示・非表示
PVエリアの表示・非表示
インデックスPV表示・非表示
編集エリアの表示・非表示
AMPエリアの表示・非表示
チェックツールエリアの表示・非表示
- PageSpeed Insights
- GTmetrix
- モバイルフレンドリーテス
- 構造化データチェック
- HTML5チェック
- HTML5アウトラインチェック
- SEOチェキ
- ツイートチェック

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

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

ウィジェット

設定項目
除外したいウィジェットを選択する。

ウィジェットエリア

設定項目
除外したいウィジェットエリアを選択する。

エディター

設定項目

Gutenbergエディターの有効・無効
エディターにテーマスタイルを反映させるか
エディター背景色・文字色
ブロックエディターのボタンにルビ
スタイルドロップダウンの表示形式
ショートコードドロップダウンの表示形式
拡張カラーパレットの色設定（６色可能）
旧エディターで文字カウンター表示・非表示
旧エディターで公開前に確認ダイアログを出すか

ブロックエディタの無効化については以下にまとめています。

Cocoonでクラシックエディタを使う方法（ブロックエディタ無効）

ワードプレス　バージョン5.0以降、新しいエディタGutenberg（グーテンベルク）というブロックエディタが導入されましたが、今までのエディタとは見た目が変わってしまう上、使い方も違うので使いにくい場合、エディタを元に戻す（クラシックエデ...

API

アフィリエイト用のAPI設定です。
設定項目

AmazonアクセスキーID、シークレットキー、トラッキングID
楽天アプリケーションID、アフィリエイトID
Yahoo!ショッピング用バリューコマースsid、pid
もしもアフィリエイト経由にするか
キャッシュ保存期間
商品リンク切れをメール通知するか

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

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

その他

よくわからない場合は、変更しないようにとの事です。
設定項目

簡単SSL対応
ファイルシステム認証
Simlicityから投稿設定を引き継ぐ
日本語スラッグを半角英数字にする
jQueryライブラリーバージョン選択
jQuery Migateライブラリーバージョン選択

リセット

設定項目

全ての設定をリセットする
リセット動作の確認

テーマ詳細

Cocoon環境に関する情報です。不具合報告など質問する際にもこちらの情報を開発者の方に伝えると良いそうです。

Next Read: コピペで！Cocoonの記事タイトルや見出し(H1～H5）をカスタマイズ »

綾糸: 綾糸　主婦 1990年代、汎用機時代のエンジニア趣味で長くやっていたweb制作は、未だにエディタでの手コーティング現在は自宅でゆるりとweb制作やライターをしています

Cocoon設定

スキン

全体

ヘッダー

広告

タイトル

SEO

OGP

アクセス解析・認証

カラム

インデックス

投稿

固定ページ

本文

目次

SNSシェア

SNSフォロー

画像

ブログカード

コード

コメント

通知

アピールエリア

おすすめカード

カルーセル

フッター

ボタン

モバイル

404ページ

AMP

PWA

管理者画面

ウィジェット

ウィジェットエリア

エディター

API

その他

リセット

テーマ詳細