Photo by Greg Nunes on Unsplash
新しいブログを作っているので初期設定を行います。
この記事の下書きをしている最中、Cocoonの操作インターフェース、マニュアルを見返しています。あらためてみると本当に良いワードプレステーマです。畏敬の念に打たれつつ感じてしまいました。
そう、Cocoonの機能強化は留まるところを知りません。
その機能が隆々と成長していく姿はあたかもスペイン・バルセロナにあるカトリック教会、ガウディの未完最高傑作・サグラダファミリアのようです。
サグラダ・ファミリア(カタルーニャ語: Sagrada Família)は、日本語に訳すると聖家族贖罪教会(カタルーニャ語: Temple Expiatori de la Sagrada Família)という正式名称を持つ、スペインのバルセロナにあるカトリック教会のバシリカである。日本語では聖家族教会と呼ばれることも多い。
Source: Wikipedia
Cocoonにはじめて触れ、操作インタフェースを見ると最初少し驚くかも知れません。
初期設定という難関?を突破するためには、マニュアルの攻略が必要です。今回の記事では、初期設定のポイントをご紹介します。次のような方にこの記事は参考になる部分があります。
- 新規にブログを作っている方(他テーマからの移行組ではない)
- まだ設定がまっさらな方
- どこから設定していけばよいのか途方にくれている方
- 「かわいくおしゃれ」にするのは後回しでよい方
- 早く本題の記事を書き始めたい方
Cocoon導入方法は本家にマニュアルがある
そもそもの話しをしますと、この記事で導入方法を解説するまでもなく、インストール方法から細かな使い方は本家のCocoonサイトに掲載されています。
テーマインストールについては、丁寧な手順で書かれています。よっぽどのことがなければ一人で入れられると思うのですが、肝心なのはその先ですね。
インストールした後の設定。ここからマニュアルを見ない人が出始める。テレビ、洗濯機、スマホのアプリのごとく、説明見ずに使おうとする。そして混乱する。
Cocoonは高機能で素晴らしいテーマですが、高機能が仇(あだ)となり、操作インターフェースの多さに初心者の方は愕然とすることがあります。
初心者の方の中には何を考えたか、行き着く先はCocoonのフォーラムではなく、Yahoo!知恵袋へ駆け込む方が… そして、雑に扱われる。

画面が真っ白になっちゃった。解決方法を教えてください。

Cocoonマニュアルの場所
マニュアルを読み進める中でワードプレスの知識も向上します。マニュアルの場所はしっかりと把握しましょう。

▲ ここです。アコーディオンの各リンクが先に目に入ってマニュアルページにいけていない方いませんか?「マニュアル」と書いたボタンを素直にクリック(タップ)するとマニュアルページに入れます。
- Cocoonのマニュアルを見る
- わからないところはググる「Cocoon+(やりたいこと)」
- ワードプレスの基礎的なことであれば書籍や動画も見てみる
- 何気に Udemyのワードプレス動画 が安くて便利(セール時)
- フォーラムに同じような悩みがないか検索する
- フォーラムで質問する
Cocoonテーマの初期設定
Cocoonは高機能です。設定のやり方は十人十色、初心者・経験者、新規ブログ・移行ブログなど環境によって様々です。万人におすすめ、という設定はなかなか難しいです。
Cocoonのマニュアルは、新規にブログを作る人、他テーマから移行してくる人、やっておくと良い設定、必要なければ読み流せる設定といった情報が混在しています。マニュアル読むときにどういう観点で書かれているか判断するのがマニュアル攻略のコツ。
Cocoon設定で最初に触る領域
以下は、コクーンの設定画面をイメージしています。まず初期段階で、触る設定、触らなくて良い設定を明確にします。グレーアウトしたところは今回は触れません。
全体 | ヘッダー | スキン | 広告 | タイトル | SEO |
OGP | アクセス解析・認証 | カラム | インデックス | 投稿 | 固定ページ |
本文 | 目次 | SNSシェア | SNSフォロー | 画像 | ブログカード |
コード | コメント | 通知 | アピールエリア | カルーセル | フッター |
ボタン | モバイル | 404ページ | AMP | PWA | 管理者画面 |
ウィジット | ウィジットエリア | エディター | API | その他 |
初期設定の着地点
触り出すとキリがないので、この記事では次の方針で設定していきます。考え方の一例にしてください。
- 外観・デザインを決める
- SEOに強い設定を行う
- SNSで拡散する設定を行う
- 高速化設定を取り入れる
- 吹き出しアイコン準備
外観・デザインを決める
最初に「かわいくおしゃれ」は後回しにすると定義したので、基本的にはコクーンで用意されたスキンを使います。CSSで手を加えることはしません。見た目はいじり出すと非常に時間が消費されます。個人的にはブログに慣れて、気分転換に触る事を勧めます。
コクーンで外観・デザインを決める要素は次の通りです。
- スキン
- サイト全体の配色
- サイト全体のフォント設定
- ヘッダー
- メインカラム(コンテンツエリア)
- インデックス(記事一覧の見た目)
- 画像
スキン
最初にスキンを決めましょう。サイト全体の配色、およびサイト全体のフォント設定はスキンを元に設定するか決めます。
[Cocoon 設定] → [スキン]

▲ スキン名左の写真アイコンをマウスホバーすると、スキンのサムネイルがポップアップされます。一つずつ見ながらお気に入りを探します。
実際に見てみたい場合は、「変更をまとめて保存」を押し、実際のブログ画面を見てみます。
サイト全体の配色・フォント設定
[Cocoon 設定] → [全体]
キーカラー
サイト全体でポイントとなるところの色を決める設定です。スキンを使う場合は上書きされるので触らなくて良いと思います。
フォントの種類(サイトフォント)
サイト全体で使われるフォントの設定。「游ゴシック体、ヒラギノ角ゴ」がデフォルトです。ウィンドウズ向けだと「メイリオ、ヒラギノ角ゴ」が良いと思います。
それ以外はWebフォントで見た目が独特なものもありますが、サイトスピードにこだわる場合は遅くなる原因になるのでWebフォント指定は避けた方が良いです。
フォントのサイズ(PC、モバイル)
大きさは好みですね。私は標準設定より少し小さくしました。
変更前 | 変更後 | |
---|---|---|
PC/タブレット | 18px | 16px |
モバイル(480px以下) | 16px | 15px |
サイト背景色

▲ の部分の背景色です。私は少し柔らかい印象にしたいので薄いグレーを使っています。
文字色(リンク色、選択文字色、選択背景色)
好みで文字の色が変更できます。でもリンクの色は標準設定のままが良いです。
サイドバーの位置
右か左で指定可能です。よくあるのは右ですね。左も試すことがあるのですが、視線の動きが左から右へ動く都合、広告を入れると少しうるさい印象になります。なので私は右にします。
サイドバーの表示状態
どこのページでサイドバーを表示させるか。とりあえず「全てのページ」にしておいて、コンテンツが増えたら目的に応じて変更すると良いと思います。
オリジナルのヘッダーとロゴ
[Cocoon 設定] → [ヘッダー]
オリジナルのヘッダーとロゴの作り方を次の記事にしています。


SEOに強い設定を行う
[Cocoon 設定] → [SEO]
headタグ設定
HTMLコード上のheadタグの中に追加するlinkタグの設定です。私はデフォルトのままです。

通常の投稿記事ではない、ワードプレスが自動で出力する「カテゴリ」、「タグ」、「アーカイブ」のページをインデックス(検索エンジン)に認識させるべきかという議論があります。
SEOの考え方については「バズ部」の記事をよく拝見するのですが、価値がない記事であればインデックスすべきではないという考え方のようです。一方でワードプレスの初期設定ではカテゴリはインデックス、それ以外はインデックスしない設定となっています。
このあたりインターネット上の記事を見る限り、次のような結論を多く見ます。
- 「カテゴリ」はインデックスさせる
- 「タグ」、「アーカイブ」はさせない
私もそれにならっています。なお、カテゴリ記事自体も編集が可能です。なるべく価値を持たせるようにまとめっぽく編集しています。リンクはカテゴリ・フライトの例。
カテゴリ・タグ設計
Cocoonの設定ではないのですが、カテゴリとタグを効果的に使うようにしましょう。いくつか考え方がありますが、私は下記のイメージで運用しています。
カテゴリーやタグは、投稿記事を書くときではなく、設定画面から作りましょう。サイドバーの「投稿一覧」以下に「カテゴリー」や「タグ」の設定画面があります。

▲ カテゴリーの設定画面。タグ設定画面も似たような画面です。スラッグは英語にしておいた方がSEO的に有利になります。
投稿する記事パーマリンクのルール化
Cocoon設定ではなく、ワードプレスの設定になりますがパーマリンクは次のようなものが現在は主流です。ひとまずこれにしておくのが無難。

あとは、投稿する際にパーマリンクを決める訳です。記事の内容と合致した英語名称のタイトルが推奨されています。
SNSで拡散する設定を行う
CocoonではSNSに関する設定が2種類あります。
SNSシェア

[Cocoon 設定] → [SNSシェア]
SNSシェアは記事を見た人に拡散してもらう設定です。これはデフォルト設定のままで減らす理由はあまりないかと思います。ピンタレストはお好みですね。拡散力ないです(苦笑
当ブログのケースは、Facebook、LINEでシェアされることがあります。Pocketはシェアというか個人用のブックマークみたいなものですが一番多いですね。
ツイッターはあまり・・・なので、この記事が役にたったらお願いします…w
シェアボタンはこだわりなければ記事の上下に出しておけば閲覧者の目に入りやすいです。
- 「本文上シェアボタンの表示」にチェック
- 「本文下シェアボタンの表示」にチェック
SNSフォロー
[Cocoon 設定] → [SNSフォロー]
シェアに対してこれは自分へフォローしてもらう設定。なので、自分が使っているSNSにリンクすることになります。使っていないSNSではフォローさせられません。
SNSフォローを使うことによって、固定アクセスを確保することができます。SNSを使っているなら是非設定を。使っていなくてもブログ用に作っても良いと思います。
SNSフォローで使えるサービスはコクーンの設定ではなく、ワードプレスの「ユーザー」→「プロフィール」から設定します。
ボタン配色とメッセージ
ボタンの色が変更できます。メッセージも工夫して拡散を促すと良いと思います。私はボタンはシェアボタンをブランドカラー(白抜き)、フォローボタンをモノクロにしました。

高速化設定を取り入れる
[Cocoon 設定] → [高速化設定](サイドバーにあります)
サイトの表示速度を最適化する設定です。以下、全て有効にします。
- ブラウザキャッシュの有効化
- HTMLを縮小化する
- CSSを縮小化する
- JavaScriptを縮小化する
- LazyLoadを有効にする
- アイコンフォントの非同期読み込みを有効にする

AMP設定
AMP(Accelerated Mobile Pages)とはGoogleとTwitterで共同開発されている、モバイル端末でウェブページを高速表示するためのプロジェクト、またはそのためのフレームワーク(AMP HTML)のことです。
この設定はやるやらないはサイト方針で決めた方が良いと思います。
この設定を行うことでJavaScriptが使えなくなります(投稿ページ単位での無効化は可能)。またデザインがやや簡素になります。
最近の有料テーマはおしゃれなデザインが多いですが、JS使えないことが背景でSANGOテーマとかはAMP採用を見送っています。
また、この設定を有効にするとサーチコンソールでエラーがたくさん出ることがあります。一つずつググって解決することになりますが、面倒な方は設定しない方が良いかも。

▲ 設定自体はチェックボックス入れるだけ。他の項目はサーチコンソールのエラー状況を見ながら調整することになります。このブログは無効化しています。新しいブログ側は有効化することにしました。
吹き出しアイコン準備
Cocoonには、吹き出しの機能が備わっています。標準で10種類のアイコンが入っています。

上記以外に自分で追加することも可能です。

せっかく吹き出しを追加するならぜひオリジナルのものを作りましょう。プロの絵師さんに依頼して作ってもらうのがオススメです。
初期設定が終わったら
Cocoonテーマでのプラグインとの付き合い方
Cocoonテーマを使う場合に推奨できるプラグインを次の記事で紹介しています。Cocoonは高機能なため事前に機能が重複していないか調べないと干渉して不具合の要因になります。
記事投稿をしよう
一通りの初期設定やプラグイン導入が終わったら、記事を書きましょう。Cocoonの見た目はそのままで十分シンプルでいい感じです。見た目いじりに終始しないうちに、最初の記事を投稿しましょう。
広告を貼る準備をしよう
ブログの体裁が整ったら広告を貼る準備です。
アフィリエイトの良質なコツ・ノウハウをまとめているASPをまとめました。まだ、どことも提携していないようであれば記事内のASPから提携してみましょう。
基本的なアフィリエイトタグの貼り方を記事にしました。私も最初はつまづきました。
ブログが完成したら宣伝しよう
Cocoonのフォーラムに宣伝用のスレッドがあったので掲載します。
ブログを作っても最初は検索からの流入なんてまずありません。
ツイッターをはじめとして、自分から露出するようにしましょう。Cocoonのフォーラムを使うのも一つの方法です。案外、見てもらえるかも。
最後に
Cocoonは一度設定したら終わりではなく、頻繁にアップデートが行われます。公式サイトをなんらかの方法でフォローしておくことをオススメします(Feedly, RSS, Facebook, Twitter等々)。
フォローしておくと、ときおり光臨する神アプデを見逃さなくてすみます。
- Cocoon公式サイトをFeedlyへ登録する
- 製作者わいひらさんのツイッター(寝ログ&コクーン)
- ついでにうちもどうぞ(笑
コメント