Cocoonテーマの初期設定。サグラダファミリア的マニュアルを攻略せよ。

Cocoonテーマというワードプレス界のサグラダファミリア Cocoon(コクーン)
スポンサーリンク

Photo by Greg Nunes on Unsplash

新しいブログを作っているので初期設定を行います。

この記事の下書きをしている最中、Cocoonの操作インターフェース、マニュアルを見返しています。あらためてみると本当に良いワードプレステーマです。畏敬の念に打たれつつ感じてしまいました。

Cocoonテーマは、サグラダファミリアのようだ…

by チャンビア

そう、Cocoonの機能強化は留まるところを知りません。

その機能が隆々と成長していく姿はあたかもスペイン・バルセロナにあるカトリック教会、ガウディの未完最高傑作・サグラダファミリアのようです。

サグラダ・ファミリア(カタルーニャ語: Sagrada Família)は、日本語に訳すると聖家族贖罪教会(カタルーニャ語: Temple Expiatori de la Sagrada Família)という正式名称を持つ、スペインのバルセロナにあるカトリック教会のバシリカである。日本語では聖家族教会と呼ばれることも多い。

Source: Wikipedia

Cocoonにはじめて触れ、操作インタフェースを見ると最初少し驚くかも知れません。

初期設定という難関?を突破するためには、マニュアルの攻略が必要です。今回の記事では、初期設定のポイントをご紹介します。次のような方にこの記事は参考になる部分があります。

  • 新規にブログを作っている方(他テーマからの移行組ではない)
  • まだ設定がまっさらな方
  • どこから設定していけばよいのか途方にくれている方
  • 「かわいくおしゃれ」にするのは後回しでよい方
  • 早く本題の記事を書き始めたい方

Cocoon導入方法は本家にマニュアルがある

そもそもの話しをしますと、この記事で導入方法を解説するまでもなく、インストール方法から細かな使い方は本家のCocoonサイトに掲載されています。

テーマインストールについては、丁寧な手順で書かれています。よっぽどのことがなければ一人で入れられると思うのですが、肝心なのはその先ですね。

インストールした後の設定。ここからマニュアルを見ない人が出始める。テレビ、洗濯機、スマホのアプリのごとく、説明見ずに使おうとする。そして混乱する。

Cocoonは高機能で素晴らしいテーマですが、高機能が仇(あだ)となり、操作インターフェースの多さに初心者の方は愕然とすることがあります。

マニュアル読まないで設定しようなんて… 正直、無謀です。

初心者の方の中には何を考えたか、行き着く先はCocoonのフォーラムではなく、Yahoo!知恵袋へ駆け込む方が…そして、雑に扱われる。

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

Yahoo!知恵袋にいれたCocoon質問に対する回答
Cocoon質問に対する回答(Yahoo!知恵袋)
スポンサーリンク

Cocoonマニュアルの場所

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

Cocoonトップページからマニュアルへのリンク

▲ ここです。アコーディオンの各リンクが先に目に入ってマニュアルページにいけていない方いませんか?「マニュアル」と書いたボタンを素直にクリック(タップ)するとマニュアルページに入れます。

使い方が分からないときの正しい対処方法
  • Cocoonのマニュアルを見る
  • わからないところはググる「Cocoon+テーマ+(やりたいこと)」
  • ワードプレスの基礎的なことであれば書籍も見てみる
  • フォーラムに同じような悩みがないか検索する
  • フォーラムで質問する

ググる時はこんな感じ。ボタン押せます。

cocoon トップページ
検索
cocoon 表 作り方
検索

Cocoonテーマの初期設定

Cocoonは高機能です。設定のやり方は十人十色、初心者・経験者、新規ブログ・移行ブログなど環境によって様々です。万人におすすめ、という設定はなかなか難しいです。

Cocoonのマニュアルは、新規にブログを作る人、他テーマから移行してくる人、やっておくと良い設定、必要なければ読み流せる設定といった情報が混在しています。マニュアル読むときにどういう観点で書かれているか判断するのがマニュアル攻略のコツ

Cocoon設定で最初に触る領域

以下は、コクーンの設定画面をイメージしています。まず初期段階で、触る設定、触らなくて良い設定を明確にします。グレーアウトしたところは今回は触れません。

全体ヘッダースキン広告タイトルSEO
OGPアクセス解析・認証カラムインデックス投稿固定ページ
本文目次SNSシェアSNSフォロー画像ブログカード
コードコメント通知アピールエリアカルーセルフッター
ボタンモバイル404ページAMPPWA管理者画面
ウィジットウィジットエリアエディターAPIその他 

ここから記事が長いのでサイドバーの目次を見ながらご覧ください。

初期設定の着地点

触り出すとキリがないので、この記事では次の方針で設定していきます。考え方の一例にしてください。

  1. 外観・デザインを決める
  2. SEOに強い設定を行う
  3. SNSで拡散する設定を行う
  4. 高速化設定を取り入れる
  5. 吹き出しアイコン準備

外観・デザインを決める

最初に「かわいくおしゃれ」は後回しにすると定義したので、基本的にはコクーンで用意されたスキンを使います。CSSで手を加えることはしません。見た目はいじり出すと非常に時間が消費されます。個人的にはブログに慣れて、気分転換に触る事を勧めます。

コクーンで外観・デザインを決める要素は次の通りです。

  • スキン
  • サイト全体の配色
  • サイト全体のフォント設定
  • ヘッダー
  • メインカラム(コンテンツエリア)
  • インデックス(記事一覧の見た目)
  • 画像

スキン

最初にスキンを決めましょう。サイト全体の配色、およびサイト全体のフォント設定はスキンを元に設定するか決めます。

[Cocoon 設定] → [スキン]

▲ スキン名左の写真アイコンをマウスホバーすると、スキンのサムネイルがポップアップされます。一つずつ見ながらお気に入りを探します。

実際に見てみたい場合は、「変更をまとめて保存」を押し、実際のブログ画面を見てみます。

サイト全体の配色・フォント設定

[Cocoon 設定] → [全体]

キーカラー

サイト全体でポイントとなるところの色を決める設定です。スキンを使う場合は上書きされるので触らなくて良いと思います。

フォントの種類(サイトフォント)

サイト全体で使われるフォントの設定。「游ゴシック体、ヒラギノ角ゴ」がデフォルトです。ウィンドウズ向けだと「メイリオ、ヒラギノ角ゴ」が良いと思います。

それ以外はWebフォントで見た目が独特なものもありますが、サイトスピードにこだわる場合は遅くなる原因になるのでWebフォント指定は避けた方が良いです。

フォントのサイズ(PC、モバイル)

大きさは好みですね。私は標準設定より少し小さくしました。

サイトフォントの変更
 変更前変更後
PC/タブレット18px16px
モバイル(480px以下)16px15px
サイト背景色
Cocoonサイト背景色の指定
Cocoonサイト背景色の指定

▲ の部分の背景色です。私は少し柔らかい印象にしたいので薄いグレーを使っています。

文字色(リンク色、選択文字色、選択背景色)

好みで文字の色が変更できます。でもリンクの色は標準設定のままが良いです。

リンクの色はデフォルトをオススメします。ここは好みではなく、人から「リンク」と視認されるのが標準設定の青色です。多くのブロガーが読む、次の書籍に記載されています。

サイドバーの位置

右か左で指定可能です。よくあるのは右ですね。左も試すことがあるのですが、視線の動きが左から右へ動く都合、広告を入れると少しうるさい印象になります。なので私は右にします。

サイドバーの表示状態

どこのページでサイドバーを表示させるか。とりあえず「全てのページ」にしておいて、コンテンツが増えたら目的に応じて変更すると良いと思います。

オリジナルのヘッダーとロゴ

[Cocoon 設定] → [ヘッダー]

オリジナルのヘッダーとロゴの作り方を次の記事にしています。

SEOに強い設定を行う

[Cocoon 設定] → [SEO]

headタグ設定

HTMLコード上のheadタグの中に追加するlinkタグの設定です。私はデフォルトのままです。

Cocoon設定「SEO」headタグ部分
Cocoon設定「SEO」headタグ部分

通常の投稿記事ではない、ワードプレスが自動で出力する「カテゴリ」、「タグ」、「アーカイブ」のページをインデックス(検索エンジン)に認識させるべきかという議論があります。

SEOの考え方については「バズ部」の記事をよく拝見するのですが、価値がない記事であればインデックスすべきではないという考え方のようです。一方でワードプレスの初期設定ではカテゴリはインデックス、それ以外はインデックスしない設定となっています。

このあたりインターネット上の記事を見る限り、次のような結論を多く見ます。

  • 「カテゴリ」はインデックスさせる
  • 「タグ」、「アーカイブ」はさせない

私もそれにならっています。なお、カテゴリ記事自体も編集が可能です。なるべく価値を持たせるようにまとめっぽく編集しています。リンクはカテゴリ・フライトの例。

カテゴリ・タグ設計

Cocoonの設定ではないのですが、カテゴリとタグを効果的に使うようにしましょう。いくつか考え方がありますが、私は下記のイメージで運用しています。

  • 主要にするカテゴリーは5, 6つくらい。
  • カテゴリーの階層は2階層まで、それ以下は各カテゴリーの強さが弱まる。
  • 基本的に、投稿する記事に対してカテゴリーは一つ(例外もある)。
  • カテゴリー間でトピックが跨ぎそうな場合は、タグを使う。
  • タグは増えやすいのでたまに整理する。

カテゴリーやタグは、投稿記事を書くときではなく、設定画面から作りましょう。サイドバーの「投稿一覧」以下に「カテゴリー」や「タグ」の設定画面があります。

ワードプレスのカテゴリー設定画面。スラッグを英語で書くのが大事。
ワードプレスのカテゴリー設定画面。

▲ カテゴリーの設定画面。タグ設定画面も似たような画面です。スラッグは英語にしておいた方が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)のことです。

SEO HACKS

この設定はやるやらないはサイト方針で決めた方が良いと思います。

この設定を行うことでJavaScriptが使えなくなります(投稿ページ単位での無効化は可能)。またデザインがやや簡素になります。

最近の有料テーマはおしゃれなデザインが多いですが、JS使えないことが背景でSANGOテーマとかはAMP採用を見送っています。

また、この設定を有効にするとサーチコンソールでエラーがたくさん出ることがあります。一つずつググって解決することになりますが、面倒な方は設定しない方が良いかも。

CocoonのAMP設定

▲ 設定自体はチェックボックス入れるだけ。他の項目はサーチコンソールのエラー状況を見ながら調整することになります。このブログは無効化しています。新しいブログ側は有効化することにしました。

吹き出しアイコン準備

Cocoonには、吹き出しの機能が備わっています。標準で10種類のアイコンが入っています。

Cocoonの吹き出し一覧画面
Cocoonの吹き出し一覧画面

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

Cocoonの吹き出し追加画面
Cocoonの吹き出し追加画面

せっかく吹き出しを追加するならぜひオリジナルのものを作りましょう。プロの絵師さんに依頼して作ってもらうのがオススメです。

初期設定が終わったら

Cocoonテーマでのプラグインとの付き合い方

Cocoonテーマを使う場合に推奨できるプラグインを次の記事で紹介しています。Cocoonは高機能なため事前に機能が重複していないか調べないと干渉して不具合の要因になります。

記事投稿をしよう

一通りの初期設定やプラグイン導入が終わったら、記事を書きましょう。HTML/CSSに明るくない人はCSSで見た目いじり始めるのはよくない… そこで萎えちゃうかも。

最後に

Cocoonは一度設定したら終わりではなく、頻繁にアップデートが行われます。公式サイトをなんらかの方法でフォローしておくことをオススメします(Feedly, RSS, Facebook, Twitter等々)。

フォローしておくと、ときおり光臨する神アプデを見逃さなくてすみます。

Cocoonやブログ関連でこんな記事が読みたい

View Results

Loading ... Loading ...
Cocoon(コクーン)
スポンサーリンク
ご覧いただき感謝です。記事の品質がブースト的に向上するボタンは次の通りです。
スポンサーリンク
バジェットな旅行記ロク
タイトルとURLをコピーしました