みやゆうのPROFILE・お問い合わせはこちら
美容研究家忍者みやゆうの最新情報・裏情報が届くLINE@

限定クーポン!抽選会!ドキわくコンテンツ盛り沢山!

無料登録はこちら

【Cocoon設定】おすすめ初期設定《34項目》まとめて公開するよ

この記事を書いた人
美容研究家忍者 みやゆう

山口県生まれ愛知県育ち。マジック+人相鑑定の《エンターテイメント忍法》で世界に挑むノマドフリーランス忍者。名古屋を中心に日本全国で活動中!「人生を楽しみきる」をテーマにした超エンタメ雑記ブログ『にんぽて』管理人。

詳しいPROFILE・お問い合わせ

活動内容(NEW)

Twitter / Youtube / Instagram

WordPressテーマ『Cocoon』で僕が行ったおすすめ初期設定34項目を全て公開します!!

 

【Cocoon設定】おすすめ初期設定《34項目》まとめて公開するよ

お前がどんな設定したかわからなくなるから、まとめてメモっただけだろ!ってのは言わないでねっ!笑

最新 本当は読まれたくない『ブログ運営の向こう側』はこちら

無料WordPressテーマ『Cocoon』とは

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

以前作成したSimplicityの後継となる複数者運営にも対応した無料テーマです(※完全な互換性はないです)。

ただテーマは新しくなりましたが、設計思想はSimplicityの時とほぼ同様です。

以下の7つが主な特徴となります。

  1. シンプル
  2. 内部SEO施策済み
  3. 完全なレスポンシブスタイル
  4. 手軽に収益化
  5. ブログの主役はあくまで本文
  6. 拡散のための仕掛けが施されている
  7. カスタマイズがしやすい

Cocoonでは、これらの基本的な考えは変えずに、Simplicityフォーラムに投稿された「約3500トピック」と「約23000の投稿」から、ご意見を出来る限り参考にさせていただいて、新しいテーマとして再構築しました。

引用 Cocoon

2015年の末にアメブロからワードプレスに引っ越しして、わいひらさんのSimplicity、Simplicity2を使わせて頂いておりました。

いやっ!これマジで無料でいいの?!

と言う衝撃を受け、そのままCocoonへ移行!!

 

もっと便利になって震えましたね。

わいひらさんありがとうございます!!

【Cocoonの初期設定】全て公開します!!

ダッシュボード > Cocoon設定

で表示される、、、

この部分のCocoonの初期設定を全て公開します!!

正直いじってない部分もあると思いますが、色々カスタマイズした結果、2018年12月の時点でベストな状態かなと。

 

僕のブログ『にんぽて』っぽくしたい人は参考にしてみて下さい♪

※設定の変更は自己責任でお願いしやす!

全体設定

Cocoon設定 > 全体

ページ全体の表示に関する設定です。

サイトのメインになる、キーカラーや背景、フォント、サイドバーの設定をしていきます。

キーカラー

サイトキーカラー > #000000

サイトキーテキストカラー > #ffffff

サイトフォント

源ノ角ゴシック(WEBフォント)

18px

モバイルサイトフォント

16px

文字の太さ

400

サイト背景色

#ffffff

サイト背景画像

なし

サイト幅の均一化

サイト幅を揃える > チェックなし

サイトリンク色

#228abf

サイト選択文字

変更なし

サイト選択背景色

変更なし

サイドバーの位置

サイドバー右

サイドバーの表示状態

インデックスページで非表示

サムネイル表示

サイト全体のサムネイルを表示する > チェック

日付フォーマット

Y.m.d

ヘッダー設定

Cocoon設定 > ヘッダー

ヘッダーの表示設定を行います。

ブログ上部のヘッダーやメニューの色やサイズの設定です。

ヘッダーレイアウト

センターロゴ(デフォルト)

高さ

デフォルト

高さ(モバイル)

デフォルト

ヘッダーロゴ

サイズ 800×300

ヘッダーロゴサイズ

空欄

キャッチフレーズの配置

表示しない

ヘッダー背景画像

ヘッダー背景画像の固定 > チェックなし

サイズ 1600×413

ヘッダー全体色

ヘッダー全体背景色 > #000000

ヘッダー全体文字色 > デフォルト

ヘッダー色(ロゴ部)

ロゴエリア背景色 > デフォルト

ロゴ文字色 > デフォルト

グローバルメニュー色

グローバルナビ色 > デフォルト

グローバル文字色 > デフォルト

グローバルナビメニュー幅

トップメニュー幅 > 176

メニュー幅をテキストに合わせる > チェック

サブメニュー幅 > 240

スキン設定

Cocoon設定 > スキン

スキンを変更することで、サイトのデザインを手軽に変更できます。

スキン一覧

なし

表示スキン

全てのスキンを表示

広告設定

Cocoon設定 > 広告

広告全般に関する設定です。

アドセンス設定や、ウィジェットの設定も含みます。

広告の表示

全ての広告を表示 > チェック

広告ラベル

スポンサーリンク

アドセンス広告の表示

全てのアドセンス広告を表示 > チェック

広告コード

アドセンスのレスポンシブ広告コードを入力

アドセンス表示方式

マニュアル広告設定(自前で位置を設定)> チェック

広告の表示位置

投稿・固定ページの表示位置

本文中/本文下/関連記事下 > チェック

[ad]ショートコード

[ad]ショートコードを有効にする > チェック

広告除外記事ID

デフォルト(記事ごとに設定しています。)

広告除外カテゴリー

チェックなし

タイトル設定

Cocoon設定 > タイトル

フロントページ、投稿・固定ページ、カテゴリーページの設定をしていきます。

フロントページタイトル

サイト名|キャッチフレーズ > チェック

サイトの説明

未入力(プラグインにて設定)

メタキーワード

未入力

投稿・固定ページタイトル

ページタイトル|サイト名 > チェック

メタディスクリプションの出力

メタディスクリプションタグを出力する > チェック

メタキーワードの出力

メタキーワードタグを出力する > チェック

カテゴリーページタイトル

ページタイトル|サイト名 > チェック

メタディスクリプションの出力

メタディスクリプションタグを出力する > チェック

メタキーワードの出力

メタキーワードタグを出力する > チェック

セパレーター

|(パイプ)> チェック

SEO設定

Cocoon設定 > SEO

headタグ内に追加するlinkタグの設定です。

headタグに挿入

canonicalタグの追加 > チェック

分割ページにrel=”next”/”prev”タグの追加 > チェック

カテゴリページの2ページ目以降をnoindexとする > チェックなし

タグページをnoindexとする > チェック

その他のアーカイブページをnoindexとする > チェック

添付ファイルページをnoindexとする > チェック

表示する日付

投稿日・更新日を表示 > チェック

OGP設定

Cocoon設定 > OGP

OGPとは「Open Graph protocol」の略称です。 FacebookやTwitterなどのSNSでシェアされた際に、そのページのタイトル・URL・概要・アイキャッチ画像(サムネイル)を意図した通りに正しく表示させる仕組みです。

OGPの有効化

OGPタグの挿入 > チェック

Facebook APP ID

未入力

Twitterカードの有効化

Twitterカードタグの挿入 > チェック

Twitterカードタイプ

サマリー(summary)> チェック

画像のアップロード

1766×650(サイズ適当です)

アクセス解析設定

Cocoon設定 > アクセス解析

アクセス解析全般に適用される設定です。

Googleタグマネージャー、アナリティクス、サーチコンソール、その他アクセス解析等、簡単に設定できます。

解析全般

サイト管理者も含めてアクセス解析する > チェック

タグマネージャーID

未入力

AMP用 タグマネージャーID

未入力

Google Analytics トラッキングID

トラッキングIDを入力

Google Search Console ID

サイト認証IDを入力

アクセス解析タグ(ヘッド用)

未入力

アクセス解析タグ(ヘッダー用)

未入力

アクセス解析タグ(フッダー用)

未入力

カラム設定

Cocoon設定 > カラム

メインカラム・サイドバーの幅、余白幅、枠線、間隔の設定です。

コンテンツ幅

680

コンテンツ余白幅

29

コンテンツ枠線幅

0

コンテンツ枠線色

デフォルト

サイドバー幅

336

サイドバー余白幅

9

サイドバー枠線幅

1

サイドバー枠線色

デフォルト

カラム間の幅

20

インデックス設定

Cocoon設定 > インデックス
リスト表示の設定です。
並び順

投稿日 > チェック

カードタイプ

縦型カード3列 > チェック

枠線の表示

カードの枠線を表示する > チェックしない

自動生成抜粋文字数

0

省略文字列

デフォルト

投稿関連情報の表示

スニペット(抜粋)の表示 > チェックなし

投稿日の表示 > チェック

更新日の表示 > チェックなし

投稿者名の表示 > チェックなし

投稿設定

Cocoon設定 > 投稿
投稿時のカテゴリ・タグ、関連記事、ページ送りナビ、コメント、パンくずリストの表示設定です。
カテゴリー・タグ表示

カテゴリ・タグ2列

表示

関連記事を表示する > チェック

関連性

カテゴリー

関連記事見出し

見出し > 関連記事

サブ見出し > ,未入力

表示タイプ

縦型カード3列(推奨表示数:6, 12, 18…)> チェック

表示数

6

枠線の表示

カードの枠線を表示する > チェックなし

最大自動生成抜粋文字数

0

投稿関連情報の表示

スニペット(抜粋)の表示 > チェック

スマホ端末でスニペットを表示(480px以下)> チェック

投稿日の表示 > チェックなし

更新日が存在しない場合は投稿日を表示 > チェック

更新日の表示 > チェックなし

投稿者名の表示 > チェックなし

表示

ページ送りナビを表示する > チェック

表示タイプ

デフォルト > チェック

枠線表示

ページ送りナビの枠線を表示する > チェック

表示

コメントを表示する > チェックなし

パンくずリストの配置

メインカラムボトム(デフォルト)> チェック

記事タイトル

パンくずリストに記事タイトルを含める > チェックなし

固定ページ設定

Cocoon設定 > 固定ページ

固定ページのコメント、パンくずリスト表示の設定です。

表示

コメントを表示する > チェックなし

パンくずリストの配置

メインカラムボトム(デフォルト)> チェック

記事タイトル

パンくずリストに記事タイトルを含める > チェックなし

本文設定

Cocoon設定 > 本文

外部リンク、内部リンク、テーブル、投稿情報表示の設定です。

外部リンクの開き方

変更しない

フォロータイプ

変更しない

追加rel属性

noopenerを追加 > チェックなし

noreferrerを追加 >チェックなし

externalを追加 > チェックなし

アイコン表示

アイコンの表示 > チェックなし

アイコン

デフォルト

内部リンクの開き方

変更しない

フォロータイプ

変更しない

追加rel属性

noopenerを追加 > チェックなし

noreferrerを追加 >チェックなし

アイコン表示

アイコンの表示 > チェックなし

アイコン

デフォルト

レスポンシブテーブル

横幅の広いテーブルは横スクロール > チェックなし

投稿関連情報の表示

投稿日の表示 > チェック

更新日の表示 > チェック

投稿者名の表示 > チェック

目次設定

Cocoon設定 > 目次
Table of contentsライクな目次設定です。
目次の表示

目次を表示する > チェック

表示ページ

投稿ページ > チェック

固定ページ > チェック

目次タイトル

目次

目次切り替え

目次の表示切替機能を有効にする > チェック

開 > 開く

閉 > 閉じる

最初から目次内容を表示する > チェックなし

表示条件

2

目次表示の深さ

H5見出しまで

目次ナンバーの表示

数字(デフォルト)

目次の表示順

広告の手前に目次を表示する> チェックなし

SNSシェア設定

Cocoon設定 > SNSシェア
本文上下シェアボタン、Twitter上でのツイート動作、Pinterestの「保存」ボタン、シェア数取得時のキャッシュ利用の設定です。
本文上シェアボタンの表示

メインカラム本文上シェアボタンを表示 > チェック

表示切り替え

Twitter > チェック

Facebook > チェック

はてなブックマーク > チェック

Google > チェック

Pocket > チェック

LINE@ > チェック

ボタンカラー

ブランドカラー

カラム数

6列

ロゴ・キャプション配置

ロゴ・キャプション上下

シェア数の表示

シェア数を表示 > チェックなし

本文下シェアボタンの表示

メインカラム本文下シェアボタンを表示 > チェック

シェアメッセージ

▼この記事を今すぐSNSでシェアする▼

表示切替

Twitter > チェック

Facebook > チェック

はてなブックマーク > チェック

Google > チェック

Pocket > チェック

LINE@ > チェック

ボタンカラー

ブランドカラー

カラム数

3列

ロゴ・キャプション配置

ロゴ・キャプション左右

シェア数の表示

シェア数を表示 > チェックなし

メンション

ツイートにメンションを含める > チェック

プロモーション

ツイート後にフォローを促す > チェック

ハッシュタグ

なし

Pinterest共有

Pinterestで画像をシェアする > チェックなし

キャッシュの有効化

キャッシュを有効にする > チェック

キャッシュ間隔

6時間

SNSフォロー設定

Cocoon設定 > SNSフォロー

フォローボタンの表示、フォロー数取得時のキャッシュ利用設定です。

フォローボタンの表示

本文下のフォローボタンを表示する > チェック

フォローメッセージ

美容研究家忍者#{author}をフォローする

feedlyの表示

feedlyフォローボタンを表示する > チェック

RSSの表示

RSS購読ボタンを表示する > チェック

ボタンカラー

ブランドカラー

デフォルトユーザー

みやゆう

フォロー数の表示

フォロー数を表示する > チェックなし

feedly購読者数

デフォルト

キャッシュの有効化

キャッシュを有効にする > チェック

キャッシュ間隔

6時間

画像設定

Cocoon設定 > 画像
投稿・固定ページの本文部分に関する画像、アイキャッチの存在しない投稿のサムネイル画像設定です。
アイキャッチの表示

本文上にアイキャッチを表示する > チェックなし

アイキャッチの自動設定

アイキャッチ自動設定を有効にする > チェックなし

画像の囲み効果

なし

画像の拡大効果

baguetteBox(スマホ向け)

NO IMAGE画像

なし

ブログカード設定

Cocoon設定 > ブログカード
内部、外部のURLやURLリンクをブログカード形式で表示するための設定です。、
ブログカード表示

ブログカード表示を有効にする > チェック

サムネイルスタイル

左側

日付表示

投稿日

リンクの開き方

新しいタブで開く > チェック

ブログカード表示

ブログカード表示を有効にする > チェック

サムネイルスタイル

左側

リンクの開き方

新しいタブで開く > チェック

キャッシュの保存期間

3

キャッシュの更新

キャッシュ更新モードを有効にする > チェック

コード設定

Cocoon設定 > コード

ソースコードのハイライト表示の設定です。

ハイライト表示

ソースコードをハイライト表示 > チェックなし

ハイライトスタイル

monokai

ハイライト表示するCSSセレクタ

.entry-content pre

コメント設定

Cocoon設定 > コメント
コメント一覧や入力欄のみタグに関する設定です。
コメントタイプ

デフォルト

コメント一覧見出し

見出し > コメント

サブ見出し > 空欄

コメント入力欄表示

ボタンで表示切り替え

コメント入力欄見出し

コメントをどうぞ

コメント入力案内メッセージ

デフォルト

ウェブサイトの表示

ウェブサイト入力ボックスを表示する > チェックなし

送信ボタンラベル

コメントを送信

通知設定

Cocoon設定 > 通知

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

通知表示

通知エリアの表示 > チェック

通知メッセージ

みやゆうのPROFILE・お問い合わせはこちら

通知URL
美容研究家忍者みやゆうとは
高校生からプロマジシャンとして活動、メイクの専門学校を卒業後、日本初の男性ボーテコンシェルジュとして百貨店の化…

↑プロフィールページのURLです。

通知タイプ

通知(緑色)

通知エリア背景色 > #b52929

通知エリア文字色 > デフォルト

アピールエリア設定

Cocoon設定 > アピールエリア

ヘッダー下でアピールしたい内容を入力します。

アピールエリアの表示

投稿・固定ページ以外で表示

高さ

200

エリア画像

サイズ 3000×2003(適当です)

エリア背景色

デフォルト

タイトル

美容研究家忍者みやゆうの最新情報・裏情報が届くLINE@

メッセージ

限定クーポン!抽選会!ドキわくコンテンツ盛り沢山!

ボタンメッセージ

無料登録はこちら

ボタンリンク先
LINE

↑LINE@の登録URLにしてます。

ボタン色

#13c42e

カルーセル設定

Cocoon設定 > カルーセル

ヘッダー下でカルーセル表示させたい投稿の設定を行います。

カルーセルの表示

フロントページのみで表示

表示カテゴリー

表示したいカテゴリーをチェックして下さい。

オートプレイ

オートプレイを実行 > チェック

オートプレイインターバル

5秒

フッター設定

Cocoon設定 > フッター

フッターやクレジット表示設定です。

フッター色

フッター背景色 > デフォルト

フッター文字色 > デフォルト

フッター表示タイプ

メニュー&クレジット(左右)

クレジット表記

サイト開設年 > 2015(自分のブログ開設年です)

© 2015-2018 にんぽて.

フッターメニュー幅

120

メニュー幅をテキストに合わせる > チェックなし

ボタン設定

Cocoon設定 > ボタン

ページトップにスクロール移動するボタンの設定です。

トップへ戻るボタンの表示

トップへ戻るボタンを表示する > チェック

ボタンのアイコンフォント

デフォルト

ボタン色

背景色 > デフォルト

文字色 > デフォルト

ボタン画像

サイズ 120×120

モバイル設定

Cocoon設定 > モバイル

モバイル環境で表示するレイアウトの設定です。

モバイルボタンレイアウト

ボタンを表示しない(ミドルメニューのみ)

404ページ設定

Cocoon設定 > 404ページ

ページが見つからなかった場合の404ページの表示設定です。

404ページ画像

デフォルト

404ページタイトル

404 NOT FOUND

404ページメッセージ

お探しのページは見つかりませんでした。

AMP設定

Cocoon設定 > AMP
AMP(Accelerated Mobile Pages)に関する設定です。
AMPの有効化

AMP機能を有効化する > チェックなし

AMPロゴ

デフォルト

画像の拡大効果

AMPギャラリー(複数画像ギャラリー表示対応)

AMP除外カテゴリー

除外したいカテゴリーをチェックして下さい。

管理者画面設定

Cocoon設定 > 管理者画面
管理画面の機能、投稿一覧ページ、PV表示、編集リンクの設定です。
管理者メニュー

アドミンバーに独自管理メニューを表示 > チェック

カラム表示

作成者を表示する > チェック

カテゴリーを表示する > チェック

タグを表示する > チェック

コメントを表示する > チェック

日付を表示する > チェック

アイキャッチを表示する > チェック

メモの内容を表示する > チェックなし

管理者パネルの表示

全て表示

PVの表示

PVエリアを表示する > チェック

テーマ独自

編集エリアの表示

編集エリアを表示する > チェック

投稿編集リンクの表示 > チェック

WLW編集リンクの表示 > チェックなし

AMPエリアの表示

AMPエリア表示する > チェック

Google AMPテストを表示 > チェック

The AMP Validatorを表示 > チェック

AMPBenchを表示 > チェック

チェックツールエリアの表示

チェックツールエリアを表示する > チェックなし

PageSpeed Insightsを表示する > チェック

GTmetrixを表示する > チェック

モバイルフレンドリーテストを表示する > チェック

構造化データチェックを表示する > チェック

HTML5チェックを表示する > チェック

HTML5アウトラインチェックを表示する > チェック

SEOチェキを表示する > チェック

ツイートチェックを表示する > チェック

レスポンシブツールエリアの表示

レスポンシブチェックを表示する > チェック

Responsinatorチェックを表示する > チェック

Sizzyチェックを表示する > チェック

ScreenResolutionチェックを表示する > チェック

エディター設定

Cocoon設定 > エディター

投稿・固定ページ管理画面の設定です。

文字カウンター

タイトル等の文字数カウンター表示 > チェック

エディタースタイル

ビジュアルエディターにテーマスタイルを反映させる > チェック

確認ダイアログ

ページ公開前に確認アラートを出す > チェック

API設定

Cocoon設定 > API
各種APIやアフィリエイトIDの設定です。
Amazon/楽天/Yahoo!ショッピング

設定していません。

その他設定

Cocoon設定 > その他
その他の設定です。よくわからない場合は、変更しないことをおすすめします。
各項目

変更していません。

リセット設定

Cocoon設定 > リセット

全テーマ設定の内容をリセットします。

リセットを行う前にバックアップ機能を用いて設定の保存をしておくことをおすすめします。そうすれば、リストアも可能です。

テーマ情報設定

Cocoon設定 > 環境情報

Cocoon環境に関する情報です。

【感想】Cocoonの初期設定は簡単!!

ざーーーっと僕が行ったCocoonの初期設定書き出してみました!!

いや〜設定はめちゃくちゃ簡単なんですけどね、記事にするの疲れました。

 

とりあえずこれでベースはできたので、ブログ運営頑張っていきます♪

Cocoon最高っっう!!

▼ 合わせて読みたい ▼

【10年間ネット収益0円】それでも僕がブログを継続できた理由

最新 本当は読まれたくない『ブログ運営の向こう側』はこちら

トップへ戻る