Cocoonの設定画面「Cocoon設定」の使い方・38個のタブ一覧まとめ

Cocoon設定画面から出来る設定項目のまとめです。

Cocoon設定

スキン

スキンとはあらかじめ用意されたデザインファイルです。

70種類近くあるスキンから選択するだけで、あらかじめデザインしたサイトが簡単に作れます。スキンの自作も可能です。

スキンの詳細については以下を参考にして下さい。

全体

設定項目

キーカラー
キーテキストカラー
フォント
フォントサイズ
フォントカラー
アイコンフォント
サイト背景色
サイト背景画像
サイト幅
リンク色
サイドバーの位置・表示ページ設定
ファビコン
サムネイル表示
日付フォーマット

フォントのサンプルと設定方法は以下にまとめています。

ヘッダー

設定項目

ヘッダーレイアウト
ヘッダーの高さ・モバイルヘッダーの高さ
ヘッダーロゴ
ロゴサイズ
キャッチフレーズの配置
ヘッダー背景画像
ヘッダー全体色
ヘッダーロゴ部の背景色
グローバルナビメニューの色
グローバルナビメニューの幅

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

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

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

※もちろん、ここで設定する以外にウィジェットエリアで表示する事も可能。

設定項目

広告の表示・非表示
広告ラベル
アドセンス広告の表示・非表示
アドセンス広告コード
（レスポンシブ、リンクユニット、関連コンテンツ）
アドセンス広告表示位置
- トップ
- ミドル
- ボトム
- サイドバートップ
- サイドバーボトム
- タイトル上
- タイトル下
- 本文中
- 本文下
- SNSボタン上
- SNSボタン下
- 関連記事下
アドセンスショートコードの有効・無効
バリューコマースの設定
広告除外設定（表示しない記事ID、カテゴリー）

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

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

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

タイトル

設定項目

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

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

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アナリティクスの新規設定解説 | 綾糸.net

Google Analyticsとは Googleが提供するWebページのアクセス解析サービスで、無料ながら高機能で、サイト運営には欠かせないツールと言えます。（※...

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

Google Serch Consoleとは Googleが提供するGoogle 検索結果でのサイトパフォーマンスを監視、管理できる無料ツールです。 Googleアナ...

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

Googleタグマネージャー設定

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

Googleアドセンスコードの設定

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

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

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

Google Adsence（アドセンス）とは Googleが提供する広告サービスで、サイト運営者はサイト上に広告を表示し、サイトを訪れた人が広告をクリ...

カラム

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

設定項目

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

インデックス

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

設定項目

フロントページタイプ設定（Ver.2.1.6～）

表示形式
表示カテゴリー

フロントページ設定サンプルは以下にまとめています。

Cocoonはトップページを作らず簡単にフロントページを設定！サンプルも

Cocoonでは、フロントページ（トップページ）の記事一覧を、カテゴリー単位に横並びやタブメニューで表示する事が出来ます。 2020/05/25　Ver.2.1.6.x～　の新機能 WordPres...

記事一覧の設定

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

除外カテゴリー（Ver.2.1.9～）

投稿

設定項目

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

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

固定ページ

設定項目

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

本文

設定項目

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

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

SNSシェア

ページをシェアしてもらうSNSシェアの設定です。

設定項目

メイントップと、ボトムに以下のそれぞれ設定可能です。

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

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

SNSフォロー

設定項目

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

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

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

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

画像

設定項目

アイキャッチの表示
アイキャッチの自動設定有効・無効
画像の囲み枠選択
画像の拡大効果
サムネイル画像比率
サムネイルの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

設定項目

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

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

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

PWA

設定項目

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

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

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

管理者画面

設定項目

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