決定版!WordPressテーマ「Cocoon」を導入したらはじめに読む記事。

Cocoonカスタマイズ

この記事は無料WordPressテーマCocoonを導入したらはじめに読みたい記事です。


こんにちは。さいとう(@S41T0H)です。

ブログ向け無料WordPressテーマの決定版としても名高い「Cocoon(コクーン)」。さなぎという意味ですね。

このCocoon、わいひらさん作の無料テーマ「Simplicity(シンプリシティ)」の後継というべきテーマで、もうWordPressでブログを運営する上で必要な機能がほぼ全て揃っているといっても過言ではありません

とりあえずCocoonを使っておけば問題ないレベル。

Cocoonは先日Ver.1.0.0として正式リリースされ、名実とも完全体となりました。

しかしこのCocoon、シンプルであるがゆえに見た目を自分好みに整えるのにはすこし手間が必要です。

というわけで、今回はこのWordPressテーマ「Cocoon」を導入したらはじめになにをすべきなのか、ひとつずつ丁寧に解説してみます。

ちなみに、当サイトももちろんCocoonを使用して制作されています。

この記事を読み終わるころには、あなたもCocoonマスターです。

スポンサーリンク

WordPressテーマ「Cocoon」、はじめにしたい設定。

WordPressテーマCocoon

まずはCocoon本体とその子テーマが導入されているか確認してください(Cocoonダウンロードページはこちら)。

このとき必ず、子テーマが有効化されているか確認してくださいね。

「外観」→「テーマ」で「Cocoon Child」が有効になっていればOKです。

子テーマを使用することで、Cocoon本体をアップデートしても設定やカスタマイズが上書きされることはありません。

Cocoonの設定画面は少し特殊です。

 

Cocoonの設定画面は他のテーマとは異なり、少し特殊ですので慣れが必要です。

しかし慣れてしまえばこんなに便利なものはありません。

Cocoonの設定は管理画面メニューの「Cocoon 設定」という項目から行います。

ちなみに「Cocoon 設定」ではその他にも「吹き出し」や「テンプレート」、「アフィリエイトタグ」、「ランキング作成」、「アクセス集計」、「高速化」、「バックアップ」、「キャッシュ削除」などのさまざまな設定が行えますが、まずはこれらにはノータッチで大丈夫です。

「Cocoon 設定」画面では、タブの切り替えによってさまざまな設定を行うことができます。

多機能が故に、初心者はすこし戸惑ってしまうかもしれませんのでひとつずつCocoonの推奨設定を紹介していきます。

「全体」:ブログ全体の設定

「全体」タブではブログ全体に影響を及ぼす設定を行うことができます。

  • キーカラー

ここでまず行いたいのは「キーカラー」の設定。

このキーカラーひとつでブログ全体の印象はがらりと変わります。

色の指定はカラーコードというすこし特殊な記法で行います。

#で始まり、RGB各色の度合いを2桁ずつ00~FFの2桁の16進数で指定するのです。真っ赤(Red)だったら#FF0000、真緑(Green)だったら#00FF00、真っ青(Blue)だったら#0000FFという感じです。

配色サンプルは下記記事が参考になります。

配色パターン見本40選:ベストな色の組み合わせ確認ツール
コピペで使えるオシャレな色の組み合わせを紹介します。それぞれの配色の実際の使用例まで用意しました。

サンプルを参考にカラーコードをコピペしてみてください。

  • サイトフォント

サイトフォントについては「Cocoonのフォント設定、どれがオススメ? Webフォントで表示速度はどうなる?」の記事を参考にしてみてください(こだわりがなければ、デフォルト設定で問題ありません)。

【Cocoon】フォント設定、どれがオススメ? Webフォントで表示速度はどうなる?
こんにちは、さいとう(@S41T0H)です。 今日も今日とて喫茶店でブログ執筆中です。 ところで、サイコーなWordPress用無料テーマ「Cocoon」(→5ステップ簡単Cocoonコピペカスタマイズ公開中です)では、標準機能でWeb...

「ヘッダー」:ブログ上部(ロゴ・メニュー)の設定

「ヘッダー」タブでは、ブログ上部の見た目を設定することができます。

  • ヘッダーレイアウト

「ヘッダーレイアウト」はデフォルトでは「センターロゴ」となっています。

当サイトのようにメニューをスマートにしたい場合は「センターロゴ(スリムメニュー)」がオススメです。

下記カスタマイズを行えば、当サイトのようにメニューバーに影をつけることもできます。

【Cocoon】メニューデザインをマテリアル風にするCSSカスタマイズ
この記事では無料テーマ「Cocoon」のメニューバーをマテリアル風にデザインするカスタマイズをご紹介しています。

メニューを最上部に移動させたい場合は「トップメニュー」を選びましょう。

  • ヘッダーロゴ

「ヘッダーロゴ」ではヘッダー部分(と設定によってはフッター部分)に表示するロゴ画像を選びます。

ここを指定しないとサイトタイトルがテキストで表示されます。

  • キャッチフレーズの配置

「キャッチフレーズの配置」では「設定」→「一般」で設定したキャッチフレーズをどう配置するかを指定できます。

ヘッダー部分がごちゃごちゃしてしまうのも嫌なので、当サイトでは「表示しない」としています。

「表示しない」を選んだ場合でも、「タイトル」タブでの設定でフロントページ(トップページ)のタイトルにキャッチフレーズを含めることができます。

「スキン」:ブログ全体のデザインを手軽に変更

「スキン」タブでは、有志が作成したスキンを使ってブログ全体のデザインを手軽に変更することができます。

ただ、なんとなくこってりしたデザインや一昔前の流行のようなデザインのスキンもあるようなので、こちらはお好みで。

個人的なおすすめはがんちゃんさん作の「おでかけ」シリーズと最近追加されたまとめたるさん作のシンプルな「Metal Styles」です。

「広告」:アドセンスの表示設定

これがマジで便利!!

この「広告」設定の自由度が、個人的に思うCocoonを利用する最大のメリットだと思います。

「広告コード」欄にGoogle AdSenseのHTMLタグを貼り付けてしまえば、あとは「広告の表示位置」でチェックをつけた部分に広告を表示してくれます。

収益を加速すると話題の「自動広告」もチェックひとつで表示してくれます。

煩わしい設定不要。すごすぎる。

  • オススメの「広告の表示位置」設定

これが正解、というものはありませんが、参考までに僕が実際に設定しているものを。

  1. インデックスページの表示位置「ミドル」「記事内広告」
    ……記事一覧ページにインフィード広告のように自然に広告を入れてくれます。
  2. サイドバーの表示位置「サイドバーボトム」「ラージスカイスクレイパー」
    ……サイドバー下部にデカめの縦長広告が入ります。PCビューではインパクト大。
  3. 投稿・固定ページの表示位置→
    1. 「タイトル上」「リンクユニット」
    2. 「本文中」(1つめのH2タグ直前)に「オート(広告ラベル有)」
    3. 「本文下」「ダブルレクタングル(広告ラベル有)」
    4. 「関連記事下」「オート(広告ラベル有)」
      ……記事本文内に挿入されるものには広告ラベルをいれておきましょう。
当設定でAdSense停止などのトラブルが発生しても当サイトは責任を負いません。
自己責任でどうぞ。
また、「[ad]ショートコード」も便利です。
  • 広告除外設定

「広告除外設定」は、アドセンス表示に適しないページ(アダルトや酒・煙草・ギャンブルなど)や、ASP商材を売りたいページなどで活用しましょう(投稿ページからの個別指定も可能です)。

「タイトル」:ページ種別のタイトル・メタ設定

「タイトル」タブではページの種類別にタイトル(titleタグ内)、メタ(metaタグ内)の設定ができます。

この設定は検索結果ではじめに目に触れる部分の設定なのでこだわりたいところです。

特にタイトルやメタタグに適切にキーワードを入れ込むことでSEO効果も狙えます。

基本的にはデフォルト設定で問題ないはずです。

「SEO」:SEO関連の詳細設定

「SEO」タブ内の設定は上級者向けになっています。

デフォルト設定でなんら問題ありませんので、詳しくない方は触れないようにしましょう。

Cocoonデフォルトでは「カテゴリページの2ページ目以降をnoindexとする」以外にはチェックが入っているはずです。
noindexとは、検索エンジンのクローラーに対して「このページは検索結果に出さないでくれ」と意思表示するための設定です。
適切に設定することでSEOに効果があります。

「OGP」:SNSシェア時に表示されるOGPの設定

「OGP」とは、TwitterやFacebook、LINEなどといったSNSに記事がシェアされた場合にURLと併せて表示されるページの情報のことです。

  • Twitterカード設定

特に拡散力の強いTwitterでは、OGPは適切に設定しておきたいもの。

「Twitterカードタイプ」の項目では「大きな画像のサマリー(summary_large_image)」を選んでおくとアイキャッチ画像が大きく表示されてGoodです。

Twitterでシェアされた際のプレビューはCard validatorにページURLを入力することで確認することができます。

  • ホームイメージ

こちらはトップページのアイキャッチ設定。

トップページがシェアされることはあまりないかもしれませんが、適当に設定しておくと吉です(デフォルトだとCocoonのアイキャッチ画像ですので、設定しない場合も「クリア」はしておきましょう)。

「アクセス解析」:アナリティクス・サーチコンソールの設定

この「アクセス解析」タブでは、読んで字のごとくアクセス解析に関する設定ができます。

AnalyticsのトラッキングIDSearch Consoleのサイト認証IDは最低限設定しておきたいところです。

また、今後head内やbody内にスクリプトを入れる必要があれば、こちらの画面から設定できますので覚えておきましょう。

「カラム」:カラムの幅、余白幅、枠線の設定

こちらではメインカラムおよびサイドバーの幅や余白の詳細設定が可能です。

必要があればいじってみてください(僕はデフォルトです)。

「インデックス」:インデックスリストの表示設定

「インデックス」タブではインデックスリストの表示設定が可能です。

  • カードタイプ

当サイトでは「縦型カード2列」を採用しています。

お好みでどうぞ。

【関連CSSカスタマイズ】

【Cocoon】で記事一覧をSWALLOW風にぼかしながらフェードインさせるCSSカスタマイズ
こんにちは、さいとう(@S41T0H)です。 最近リリースされたWordPressテーマ「スワロー」 をご存知でしょうか。 有名ブロガー八木仁平さんが監修した有料WordPressテーマで、STORK(ストーク) やハミングバード とい...
【Cocoon】記事一覧をふわっと浮き上がらせるマテリアルデザイン「SANGO」風カスタマイズ
こんにちは。さいとう(@S41T0H)です。 今回は無料WordPressテーマ「Cocoon」の記事一覧をSANGO風にマウスオーバーでふわっと浮き上がらせるマテリアルデザイン風カスタマイズをご紹介します。 Cocoonをマテリアルデ...
  • 投稿関連情報の表示

当サイトではごちゃごちゃしてしまうので「スニペット(抜粋)の表示」「投稿日の表示」などすべてチェックは外しています。

こちらもお好みで。

「投稿」:投稿ページの表示設定

「投稿」タブでは投稿ページの表示設定が可能です。

  • 関連記事設定

投稿下部の「関連記事設定」についてもこのタブで設定できます。

こちらもお好みでどうぞ。

  • ページ送りナビ設定

ページ送りナビゲーションの表示設定ができます。

「表示タイプ」はデフォルトでは場所を取ってしまいますので「サムネイル正方形」がおすすめです。

  • パンくずリスト設定

パンくずリストはページの現在位置をしめすものです。

配置は「メインカラムトップ」が定番でいいと思います(ファーストビューが圧迫されるのでお好みで)。

「固定ページ」:固定ページの表示設定

こちらは固定ページの表示設定が可能です。

……といっても設定項目も多くないですので、デフォルトで良いと思います。

【Cocoon】特定の固定ページのみ投稿日・更新日表示を消す方法
こんにちは。 「お問い合わせ」や「プロフィール」、「プライバシーポリシー」ページなどで投稿日・更新日の表示を消したいことがあるかと思います。 その場合、追加CSSで対応することが可能です。 全固定ページの投稿日・更新日を消す方法 ま...

「本文」:本文部分の設定

この「本文」タブでは、リンクの表示設定やテーブル表示設定などができます。

外部リンクに関しては「新しいタブで開く」「アイコン表示」とすると外部リンクであることがわかりやすくていいと思います。

内部リンクはそのままで大丈夫です。

「目次」:TOCライクな目次設定

TOCプラグインを使わないといけなかった目次も、簡単に表示させることができます。

そう、Cocoonならね。

……設定はデフォルトでOKです。

目次タイトルに小洒落たアイコンを表示させる方法はこちら。

【Cocoon】目次タイトルにFontAwesomeアイコンをつけるカスタマイズ
Cocoonユーザーのみなさん、こんにちは。 今回はコメントで問い合わせのあった、目次タイトルにFontAwesomeアイコンをつけるカスタマイズを紹介します。 目次タイトルにFontAwesomeアイコンをつけるCocoonカスタマイ...

「SNSシェア」:SNSシェアボタン設定

トレンド系のブログなど、SNSのシェアが見込まれるブログではとくにこだわりたいのがSNSのシェアボタン設定。

当サイトでは日本でポピュラーな「Twitter」「Facebook」「はてなブックマーク」「LINE」の4種類を表示させています。

カラム数は表示させるボタン数に合わせましょう。

SNSシェアボタンをフローティングさせて常に画面下部に表示させておくカスタマイズは以下です。

【Cocoon】スマホ固定フッターにSNSシェアボタンを表示する方法
WordPress用無料テーマCocoonでスマホ表示時にSNSシェアボタンをフッター固定する方法をご紹介します。 読んでる途中にいつでもシェアしやすくなるのでSNS流入の増加が見込めそうです。 Cocoonでスマホ表示時にSNSシェア...

「シェア数を表示」シェア数が少ないうちはオフにしておくほうが無難です。

SNS流入が多いブログに育ってきたら表示させてみましょう。

「SNSフォロー」:フォローボタン表示設定

こちらもそのまんまです。

Cocoonがすごいのが、このSNSフォローボタンのリンク先を自分のアカウントのプロフィール設定から指定できること。

複数人でブログを運営している場合に特に役に立ちます。

プロフィールボックスのカスタマイズについては下記。

【Cocoon】プロフィールボックスをオシャレにカスタマイズしてみたッ!!
CocoonでプロフィールボックスのデザインをTwitter風にオシャレにデザインするCSSカスタマイズです。コピペで使えます。

「画像」:本文画像の表示設定

基本、デフォルトでOKです。

「アイキャッチの表示」では、投稿ページのアイキャッチ画像を中央寄せさせたりカラム幅に引き伸ばしたりとできます(自由度高すぎですね)。

当サイトでは「アイキャッチラベルを表示する」「アイキャッチの中央寄せ」にチェックを入れています。

「画像の拡大効果」Lightbox設定が簡単にできるのも魅力的。

当サイトでは「baguetteBox(スマホ向け)」を使用しています。

「ブログカード」:ブログカード表示設定

Cocoonでは、投稿本文に直接URLを書き込むことでブログカードに自動変換してくれます。

こちらもデフォルト設定で問題ありません。

ブログカードのデザインは下記記事を参考にカスタマイズすることができます。

【Cocoon】ブログカードに「続きを読む」を入れてクリック率上げよう大作戦!
2018/7/24更新 クールなカスタマイズはこちら↓ こんにちは。 最高の無料WordPressテーマ、Cocoon。最近はスキンも充実してきてついに本格リリースか!?と浮足立ってきている昨今である。 今回はそんなCocoonの...
【Cocoon】シンプルでクールな「ハミングバード風」ブログカードを実装してみよう!
WordPressテーマCocoonむけ、オシャレなブログカードカスタマイズ方法を公開中です。

「コード」:ソースコード表示設定

プログラミング系のブログでなければ触れなくて問題ありません。

「コメント」:コメント設定

こちらも特にこだわりがなければデフォルトでOKです。

「通知」&「アピールエリア」&「カルーセル」

サイト上部にイチオシのページへのユニークなリンクを貼ることができます。

こちらもはじめはそのままでOK

必要に応じて使ってみてください。

「フッター」:フッター部分の表示設定

フッター(footer)とは、サイト最下部のこと。

こちらもデフォルトで問題ありません。

フッターにメニューを表示させたい場合は「外観」→「メニュー」から、当該メニューの「メニューの位置」を「フッターナビ」に指定しましょう。

お問い合わせページやプライバシーポリシーのリンクを置くと便利です。

「ボタン」:トップに戻るボタン設定

デフォルトでOKです。

「モバイル」:モバイル表示時のボタン設定

デフォルトでは「スライドインボタン」です。

このスライドインボタン、便利なのですがデフォルトだとCocoon感がすごく出てしまいます。

当サイトではSNSシェアボタンをフローティング表示させてこのスライドインボタンは「ボタンを表示しない」にしています。

お好みでどうぞ。

「404」:404ページ設定

サイト内でリンク切れがあった際に表示されるのがこの404エラーページ。

できればユーザーには見せたくないページです。

デフォルトで大丈夫です。

「AMP」:AMP設定

Googleが開発したモバイル高速表示のための機能がこの「AMP(アンプ)」

SEOにも影響があるとのことで、デフォルトでAMPに対応してくれるCocoonは素晴らしい。

とりあえずONにしておいて、表示が崩れるなど悪影響が出た場合はOFFにするといいでしょう。

「管理者画面」:管理者画面の設定

  • 管理者パネル

Cocoon独自の機能である「管理者パネル」

ログインしているときにブログを見るとフッター部分に薄い灰色で出るものです。

PV数や編集画面へのリンク、AMPチェックやSEOツールへのリンクなど、管理に役立つさまざまな機能が搭載されています。

僕は(申し訳ないですが)非表示にしています(「管理者パネルの表示」「表示しない」とする)。

お好みでどうぞ。

「エディター」:エディター画面の設定

デフォルトでOKです。

「API」:AmazonなどのAPI設定

Cocoon1.0.6から、Amazonや楽天、Yahoo!ショッピングの商品リンク機能が搭載されました。

Amazon商品リンクの初期設定方法と使い方
Cocoonの「Amazon商品リンクタグ作成ショートコード」機能の使い方を詳しく解説しています。

これ、いままではカエレバやRinker、WPAPなどの外部ツールやプラグインを使用していたものです。

これをテーマの機能として備えているのはかなり珍しいのではないでしょうか。

Cocoon標準の商品リンク機能を利用する場合はこちらに各種情報を入力してください。

二大商品紹介プラグインRinkerとWPアソシエイトポストR2を徹底比較してみた。
この記事では、無料で使えるWordPress用商品紹介プラグイン「Rinker(リンカー)」と「WPアソシエイトポストR2(WPAP)」を徹底比較しています。 無料テーマCocoonであればプラグインなしで実装できます。 こんにちは...

「その他」:その他設定

そのままでOKです。

WordPressテーマ「Cocoon」、次にしたい設定

お疲れ様でした。

次に、高速化設定だけ行っておきましょう。

おすすめのCocoon高速化設定。

「Cocoon 設定」→「高速化」から、高速化設定が可能です。

といっても、全部にチェックを入れておけばOKです。

プラグインなどに不具合が出たらチェックを外してみましょう。

Cocoonに入れておきたいおすすめプラグイン

Cocoonはすごすぎて、追加でプラグインを入れる必要がほとんどなくなってきています。

以下プラグインは入れておくと便利かな、と思います(それぞれの使い方はググってください)。

  • Akismet Anti-Spam
  • Contact Form 7
  • EWWW Image Optimizer
  • Google XML Sitemaps
  • Lazy Load
  • LiteSpeed Cache(mixhostなどのLiteSpeedサーバー用 サーバーキャッシュプラグイン)
  • TinyMCE Advanced
  • WP Multibyte Patch

当サイトの例です。お好みでどうぞ。

当サイトでは商品リンク用に「Rinker」と「WPアソシエイトポストR2」も導入していますが、Cocoon標準機能でも十分事足ります。

管理を楽にしたい場合は「Rinker」、料率を確認してから商品をいれたい場合は「WPアソシエイトポストR2」を入れるといいでしょう。

二大商品紹介プラグインRinkerとWPアソシエイトポストR2を徹底比較してみた。
この記事では、無料で使えるWordPress用商品紹介プラグイン「Rinker(リンカー)」と「WPアソシエイトポストR2(WPAP)」を徹底比較しています。 無料テーマCocoonであればプラグインなしで実装できます。 こんにちは...

Cocoonのカスタマイズをしてみよう!

これで基本的な設定はほぼ終わりです。

ただ、これだけだとデザインに不満が残るかもしれません。

そこで、当サイトではCocoon向けのCSSカスタマイズを掲載しています。

よろしければ、ご覧ください。

» 【5ステップ】「Cocoon」まるごとカスタマイズ講座【コピペ可】

よかったらTwitterフォローしてくださいね~! お役立ち情報を発信中です。

では。

コメント

  1. はじめまして。いきなりすみません。質問があるのですがよろしいでしょうか?cocoonでグーグルサーチコンソールを使用するとモバイルユーザビリティエラーが出てしまいました。
    エラー内容としては、「コンテンツの幅が画面の幅を超えています」「ビューポートが設定されていません」「テキストが小さすぎて読めません」以上の3点です。対処法がわかれば教えていただけないでしょうか?

    • コメントありがとうございます!
      そちらのエラーコメントは通常Cocoonでは出ないものだと見受けられます(Cocoonはもともと完全レスポンシブデザインのため)。
      ビューポートはおそらくhead内のviewport指定についてですが、それもCocoonでは最初から記載されています。
      もし問題なければURLとともに再度コメント頂ければ幸いです。

  2. 色々な記事参考にさせて頂きました。ありがとうございました。

    • コメントありがとうございます!
      お役に立てて幸いです、今後共よろしくお願いします!

  3. コウさんコメントありがとうございます。
    返信遅れて申し訳ございません。
    以下、URLになります。
    https://solare.biz
    教えて頂けると幸いです。