無料WordPressテーマ「Cocoon(コクーン)」の魅力をざっくりと紹介!

WordPressテーマ「Cocoon」

本日は当ブログ「むぎろぐ」をお読みいただきありがとうございます。
どうも、むぎ(@mugiblog)です。

3月19日、あの「寝ログ」のわいひら(@MrYhira)さんより新テンプレートが発表されました!
それが「Cocoon」。

わいひらさんと言えば、無料テンプレートの「Simplicity」が有名です。
このテーマも使用している方をよく見かける大人気のテンプレートですね。

そんな方が今回新たなテンプレートを発表されたということで、さっそく変更してざっくりとレビューしていきたいと思います。

注意
2018年5月現在、テーマを変更したため当ブログではCoconnを使用しておりません。
参考までにご覧いただければと思います。
現在はSANGOを使用しており、紹介記事も書いています。

WordPressテーマSANGOで初心者でも簡単におしゃれなデザインに。

今回はあくまでもざっくりとしたレビュー記事なので、カスタマイズの方法など、詳しくは紹介していません。簡単に雑感を書いていく感じになると思います。

以下に色の設定についての記事を書いてみました。超初心者向けです。

WordPressテーマ「Cocoon」デザインを設定だけで変更!

WordPressテンプレート「Cocoon」とは?

先ほど説明した通り、わいひらさんが作成したWordPressのテンプレートです。

CocoonもSimplicityと同様にシンプルなデザインを心がけました。
テーマ名のCocoon自体にも、以下のような意味があります。

  • 居心地のいい場所
  • 繭に包む
  • (繭で包むように)保護する

テーマ名をCocoon(繭)としたのは、繭のように白い、シンプルなテーマを作りたかったからです。
白いテーマが一番読みやすいと思うので。
加えて、WordPressユーザーにとって「居心地のいい場所」となれるよう、Cocoonの機能が包む(補完する)形で「面倒事から保護してくれるように」と作成しました。

引用:Cocoonの特徴

「Simplicity」もその名の通りシンプルでありながら使い勝手が良さそうな印象のテーマでしたが、「Cocoon」もシンプルなデザインで好感が持てます。

「白いテーマが一番読みやすい」と制作者のわいひらさんもおっしゃっているように、読者が記事の内容に集中できるテンプレートなのではないでしょうか。

ミニマルなデザインでぼくはすごく好きです。

せっかくミニマルなデザインなのでSNSのシェアボタンもデフォルトのものを変更しちゃいました(管理画面から数秒でできる)。

以下でデフォルト↓

cocoon②

タイトルの下に出ていると思いますが、以下が当ブログのシェアボタン(切り抜きデザイン)↓

cocoon③

よりミニマルな感じでいい感じでしょ?

WordPressテンプレート「Cocoon」の魅力を紹介!

WordPress初心者なもので詳しい解説のようなことはできませんが、ぼくが気になった「Cocoon」の魅力を紹介していきます。
詳しい解説記事は以下の公式ページをご覧いただいた方が百倍分かりやすいです。

Cocoon公式ページ

  • カスタマイザー設定を使わなくて済むように!
  • 目次すら不要!標準装備の機能が充実しているため、プラグインを減らせる
  • 超高速!!
  • ワンクリックでAMP対応!!
  • 豊富なショートコードで記事作成がめちゃくちゃ簡単!!
  • 100%レスポンシブ
  • アドセンスの広告を記事中に手軽に入れることができ、収益化が期待できる!

他にもたくさんあるんですが、ぼくが説明できそうなのはこの辺りだけです。

カスタマイザー設定を使わなくて済むように

他のテーマの場合は「外観」「カスタマイズ」で基本情報やデザインを変更するようになりますが、「Cocoon」の場合には「Cocoon設定」という専用の設定項目が。

cocoon⑥

これがまためちゃくちゃ使いやすいです。

1つの画面で主要な設定が済んでしまうので劇的に楽することができます。

  • アナリティクス
  • サーチコンソール

などの設定も「Cocoon設定」からできます。

移行した場合にはまずここから設定した方がいいのかもしれません。

Google Analyticsでアクセス解析する方法

Google Search Consoleに登録する方法

初心者だとカスタマイザー設定だけですごく時間がかかることになると思いますが、「Cocoon」なら10分程度ちょっといじるだけでもう記事が投稿できる状態まで持っていくことができますからね!

目次すら不要!標準装備の機能が充実しているため、プラグインを減らすことができる!

この後紹介する高速化に一役買っているのが標準装備の充実さ。
なんと「Cocoon」は目次設定でおなじみの「Table of contents Plus」すら不要です。

プラグインを利用せずとも目次機能を利用できます

テーマを移行後停止しておけば目次がすでに表示されています。

その他にも「最新記事」や「人気記事」の表示も標準装備されています。

  • Newpost Catch
  • WordPress Popular Posts

などの「Stork」のテーマで使っている人が多いプラグインも不要になってしまいますね!

読み込み速度が超高速!

cocoon④

上の画像は当ブログを「Cocoon」に移行後「PageSpeed Insights」で計測したものです。
「めっちゃ速っ!!」とはなりませんが、充分な速度ではないでしょうか。
プラグイン等との兼ね合いもあるので整理すればもっと速くなると思います。

プラグインを見直しPagespeed insightsで計測

プラグインを整理しAMP対応させた結果、爆速になりました(笑)↓

cocoon⑧

まさかのモバイル100点!

GTmetrixで計測

GTmetrixでも計測してみました。

cocoon⑩

分かる方にはお分かりいただけるかと思うんですが、この結果はかなり凄いと思います。
Yahooが74%といまいちですが、Googleは堂々のAですからね!

ちなみに「Cocoon」はテーマ側で高速化できるようになっています。

cocoon⑤

ワンクリックでAMP対応。しかも見た目ほぼ変わらず

さらにさらに、「Cocoon」はAMP対応。
有料テーマでもAMP対応していないテーマもあるというのに、まさに神対応です。

しかも、AMP対応の記事になるとデザインが崩れてしまって普通は残念な感じになりますが「Cocoon」はほとんど見た目が変わらないように作られています。
詳しくは以下のページをご覧ください。

無料WordPressテーマ「Cocoon(コクーン)」を公開しました

ワンクリックで、すべての記事をAMP対応の記事にすることが可能↓

cocoon⑦

豊富なショートコード。ビジュアルエディター上から簡単に記事の装飾が可能!

通常はAddquicktagにあらかじめコードを入れておく形になりますが「Cocoon」はビジュアルエディター上である程度の記事の装飾が簡単にできてしまいます。

吹き出しやボタン、ボックスなど、記事の装飾を行う時によく使うものが手軽に使えるのは嬉しいポイントですね。

100%レスポンシブ対応

以下公式ページより引用。

Cocoonのレスポンシブデザインは、PCで見てもスマホで見ても、同じページを見た場合は100%同じソースコードが出力されます。

ですので、Googleのクロールも「1ページあたり1度」で済むような作りになっています。

cocoon⑧

スマホからの見た目もシンプルですが本当にきれいです。

アドセンスの広告を記事中に気軽に入れることができ、収益化が期待できる!

収益化にアドセンスを使っているブロガーさんは多いと思うので、これは嬉しい機能ではないでしょうか。

「Cocoon」はショートコードで記事の中のどこでも簡単にアドセンスの広告を表示させることができます。
詳しくは以下をどうぞ。

[ad]ショートコードで広告を本文中の好きな場所に表示させる方法

「Cocoon」は無料でもユーザー目線、読者目線の超優良テーマ。初心者にこそおすすめ!

まとめになります。

ぼく実は「Cocoon」の前に「SANGO」をこのブログで使用していたんですけど、有料のテーマである「SANGO」を選んだ理由はカスタマイズの手間が省けておしゃれなデザインにできたり、WordPressを始めたばかりで自信がなかったりしたのが理由なんですよね。

でもこの「Cocoon」は、完全な初心者でも扱えるくらいユーザー目線のテーマだと思います。
もちろん有料テーマには有料テーマの良さがあるのでどっちが良いとかはここでは言いませんし、使い人によると思います。

表示速度が速かったり見た目がシンプルなことは読者目線のテーマであるとも言えますし、初心者の方に本当におすすめできるテーマです。

ぼくはWordPress初心者なのでこの程度のレビューしかできないのが申し訳ないですけど、「Cocoon」は絶対人気になるテーマだと思うので今度どんどん詳しいレビュー記事やカスタマイズ記事が出てくるんでしょうね!

長くなってしまいましたが「Cocoon」は本当におすすめのテーマです。
もしテーマ選びに迷っていて「Cocoon」が気になっているかたはこれを機に変更を検討されてみてはいかがでしょうか。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.