Cocoonの使い方やカスタマイズとオリジナルスキン

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

スポンサーリンク
設定

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

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

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

 

 

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

スポンサーリンク

アイキャッチ画像

Cocoon設定画像タブ

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

アイコンフォント

Cocoon設定全体タブ

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

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

 

アドセンス広告

Cocoon設定広告タブ

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

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

 

アピールエリア

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

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

アフィリエイト

Cocoon設定APIタブ

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

Amazon API

Cocoon設定APIタブ

 

AMP化

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

OGP画像

Cocoon設定OGPタブ

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

おすすめカード

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

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

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

Cocoon設定本文タブ

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

カテゴリーの色や説明

投稿カテゴリー

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

  • カテゴリーの色・文字色
  • カテゴリータイトル・本文
  • アイキャッチ
  • メタディスクリプション
  • メタキーワード
Cocoonで簡単にカテゴリーごとのページをデザイン設定
Cocoonはカテゴリーのデザインを編集し、カテゴリーアーカイブページの上部を簡単にカスタマイズする機能があります。 カテゴリーアーカイブページの上部表示例 カテゴ...

カルーセル

Cocoon設定カルーセルタブ

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

管理者パネル

Cocoon設定管理者画面タブ

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

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

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

 

管理者画面

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設定画像タブ

  • 本文上にアイキャッチを表示・非表示
  • アイキャッチラベルの表示・非表示
  • アイキャッチの中央寄せ
  • アイキャッチ自動設定の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タブ
https://sec.ayaito.net/cocoon/setting/15653/

PV表示設定

Cocoon設定管理者画面タブ

日付フォーマット

Cocoon設定全体タブ

表示する日付の形式

Cocoon設定SEO

ファビコン

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

Facebook APP ID

Cocoon設定OGPタブ

Facebook シェア数

Cocoon設定SNSシェアタブ

フォント・サイズ・色

Cocoon設定全体タブ

 

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

Cocoon設定フッタータブ

フッタークレジット

Cocoon設定フッタータブ

ブログカード

Cocoon設定ブログカードタブ

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

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

Cocoon設定エディタタブ

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

Cocoon設定エディタタブ

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

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

プロフィールエリア

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

 

Cocoonでプロフィール欄を表示する方法と設定
Cocoonは、ウィジェットを使って記事の下や、サイドバーなど 任意の場所にプロフィール欄を簡単に設置出来ます。 プロフィール用画像も、通常は「Gravatar」を使うかプラグインなどを利...
Cocoonのプロフィール欄のSNSボタンをカラーにするなどのカスタマイズ
Cocoonは、ウィジェットを使って記事の下や、サイドバーなど任意の場所にプロフィール欄を簡単に設置出来ますが、そのエリアのカスタマイズ方法です。 プロフィール欄の使い方は以下をご覧ください。 ...

 

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

Cocoon設定タイトルタブ

ページ送りナビ

Cocoon設定投稿タブ

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

Cocoon設定ボタンタブ

ヘッダーアピールエリア

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

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

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

Cocoon設定ヘッダータブ

ヘッダーレイアウト

Cocoon設定ヘッダータブ

 

ヘッダーロゴ・背景色

Cocoon設定ヘッダータブ

ヘッダーにコード挿入

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

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

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

フッターにコード挿入

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

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

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

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

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

メタキーワード

Cocoon設定タイトルタブ

目次

Cocoon設定目次タブ

 

Cocoonの目次設定とデザインカスタマイズ
Cocoonには目次を表示する機能が標準であるので、プラグインなどを使う必要はありませんが、少しデザインを変更してみました。 前提 Cocoon設定→目次タブから、表示の設定を行います。 ...
Cocoonで目次の非表示をページ単位に設定する方法
Cocoonには目次を表示する機能が標準であるので、プラグインなどを使う必要はありません。 個別に目次を表示したくないページがある場合の設定も簡単に行えます。 目次設定 Cocoon設定→目次タ...

 

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

Cocoon設定モバイルタブ

や・ら・わ

404ページ

Cocoon設定404ページタブ

 

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

Cocoon設定本文タブ

リンク色

Cocoon設定全体タブ

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

Cocoon設定本文タブ

ロゴ・ロゴサイズ

Cocoon設定ヘッダータブ

 

 

コメント

タイトルとURLをコピーしました