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

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

スポンサーリンク
Cocoon・設定
この記事は約12分で読めます。

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

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

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

 

 

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

スポンサーリンク

アイキャッチ画像

Cocoon設定画像タブ

  • 本文上にアイキャッチを表示・非表示
  • アイキャッチラベルの表示・非表示
  • アイキャッチの中央寄せ
  • アイキャッチ自動設定のON/OFF
  • アイキャッチ画像枠の表示・非表示・形状
Cocoonのアイキャッチサイズはいくつにすればいい?比率ごとのサイズサンプル
テーマによってアイキャッチ画像のサイズ(縦横比率)が適当だと、拡大や縮小されて間延びしたり、画像が切れてしまったりします。 Cocoonの場合は、画像の縦横比を設定する事が出来る為、その設定に沿った比...

アイコンフォント

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

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

サムネイル画像サイズ

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タブ

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設定フッタータブ

ブログカード

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

メタキーワード

Cocoon設定タイトルタブ

目次

Cocoon設定目次タブ

 

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

 

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

Cocoon設定モバイルタブ

や・ら・わ

読む時間表示

記事編集画面ページ設定

404ページ

Cocoon設定404ページタブ

 

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

Cocoon設定本文タブ

リンク色

Cocoon設定全体タブ

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

Cocoon設定本文タブ

レビュー記事

記事編集画面レビュー

ロゴ・ロゴサイズ

Cocoon設定ヘッダータブ

 

 

コメント

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