当ブログのテーマを「Cocoon」に変更しました!

無料WordPressテーマ「Cocoon(コクーン)」に変更!ざっくりレビュー!

スポンサーリンク
WordPressテーマ「Cocoon」 theme

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

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

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

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

3月20日、高速化についての情報を一部追記しています。
「Pagespeed insights」で計測したところなんとモバイル100点を叩き出しました!
3月19日現在はまだβ版なのでユーザー登録が必要です。不具合などの修正後に無料で一般公開となるようです。

詳しくは以下公式ページをご覧ください。

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

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

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

WordPressテーマ「Cocoon」デザインを設定だけで変更!【超初心者向け】
WoedPressテンプレート「Cocoon」の色を変える方法を紹介しています。超初心者向けに書いているのでデザインやカスタマイズに詳しい方には向かないかもしれません。

んじゃ、ドヤ顔で紹介していくぜぇー!

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

まずは「Cocoonとは?」というところから!

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

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

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

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

引用:Cocoonの特徴

 

うさぎ
うさぎ

テンプレートに対する制作者のこだわり、愛着を感じてなんかカッコいい!!

「Simplicity」もその名の通りシンプルでありながら使い勝手が良さそうな印象のテーマでしたが、「Cocoon」もシンプルですよね!

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

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

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

以下でデフォルト↓

cocoon②

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

cocoon③

よりミニマルな感じでかっけーでしょ?

 

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

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

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

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

んじゃ、説明していきますね。

うさぎ
うさぎ

急に弱気になったなこいつ!

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

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

cocoon⑥

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

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

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

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

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

Google Analyticsでアクセス解析する方法
Google AnalyticsのトラッキングIDをテーマに登録する方法です。
Google Search Consoleに登録する方法
Google Search Console用のサイト認証タグを表示させてサイト登録を行う方法です。

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

うさぎ
うさぎ

これは本当に初心者には嬉しい機能!製作者さんの解説記事も丁寧だし!

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

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

プラグインを利用せずとも目次機能を利用できます
Cocoonでは、テーマが保有する独自機能で目次表示することが可能です。目次には、ページ内リンクが貼られるので目的の場所にすぐさま飛ぶことができます。

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

その他にも「最新記事」や「人気記事」の表示も標準装備されています(記事の最後の方で載せています)。

  • Newpost Catch
  • WordPress Popular Posts

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

うさぎ
うさぎ

マジすげぇ!痒い所に手が届く感……。

読み込み速度が超高速!

cocoon④

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

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

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

cocoon⑧

まさかのモバイル100点!

ねこ
ねこ

速すぎぃぃぃ!!!

GTmetrixで計測

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

cocoon⑩

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

ねこ
ねこ

Cocoon速すぎぃぃぃぃ!

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

cocoon⑤

うさぎ
うさぎ

あれっ、これ確か無料テーマだよね?

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

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

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

無料WordPressテーマ「Cocoon(コクーン)」を公開しました
SEO・高速化・モバイルフレンドリーに最適化した無料テーマCocoonの紹介記事。

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

cocoon⑦

うさぎ
うさぎ

あれーっ、このテーマ確か無料だったよねぇー(2度目)!

 

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

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

簡単に例を挙げていきますね!

吹き出しも簡単に!

できちゃうんだ。

さらにボタンの種類も豊富。

ボタン

ボタン

button

ぼぉたぁん

文字の装飾も簡単にできる。
補足説明や注意書きのボックスもデフォルトで。
補足説明のボックスも簡単。
でんじゃぁあ!!
うさぎ
うさぎ

あれっ、これたしか無料テーマ…(定期)

100%レスポンシブ対応

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

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

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

cocoon⑧

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

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

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

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

こんな感じです(表示されてますかね?)。

スポンサーリンク

詳しくは以下をどうぞ。

[ad]ショートコードで広告を本文中の好きな場所に表示する方法
広告用のショートコードを用いて投稿者が「広告を出したい!」という場所にズバリ広告を表示させる方法です。
うさぎ
うさぎ

あっこry……

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

まとめになります。

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

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

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

というかぼく自身が気に入ってしまったので、しばらくは「Cocoon」を使ってみようと思います。
もし気が乗ればまた詳しいレビュー記事でも書いてみようかな。

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

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

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

あっ、ちなみにこんな感じで最新記事と人気記事まで記事中に放り込めちゃいます。

最新記事↓

【作業用YouTuber】勉強や作業が捗るYouTuberの動画を集めてみた
mixhostでWordPressサイトを開設する方法まとめ!【超初心者向け】
mixhostに無料体験登録後、本契約までの全手順【超初心者向け】
mixhostでWordPressをインストールする方法【超初心者向け】
ムームードメインで取得したドメインをmixhostで設定するまで【超初心者向け】

人気記事↓

無料WordPressテーマ「Cocoon(コクーン)」に変更!ざっくりレビュー!
WordPressテーマ「Cocoon」デザインを設定だけで変更!【超初心者向け】
首や肩の凝りや痛みに優しい「SATEOBA」のヘルスケア低反発枕を購入!レビュー
語れるモノを持とう。「人生を変えるモノ選びのルール」を読んで
当ブログ「むぎろぐ」と運営者情報について

まじすげぇよこのテーマ!!

プロフィール
この記事を書いた人
アラサーのモノ大好きブロガーです。 僕が「実際に使って良かった、試して良かったガジェットモノやサービス」について紹介していきます。
mugiをフォローする
theme
スポンサーリンク
mugiをフォローする
むぎろぐ

コメント

  1. waon より:

    Cocoon、素晴らしいですよね!

    早速のレビュー記事、ありがどうございます。私も導入したばかりなので、実際のブログを拝見できて大変勉強になります。

    現在、スマホ版だとタイトルの文字がやや大きいな、と思うものの、設定のどこをいじれば小さくなるか分からず悪戦苦闘中。自分のサイト、タイトルが長いので、こういう時は困ります。

    • mugi より:

      waonさん、コメントありがとうございます。
      Cocoon、本当に素晴らしいテーマです。
      スマホの文字設定は「Cocoon設定」の「全体」のところから大きさを変更できるようですよ!
      試してみて下さい。

      • waon より:

        やっぱりそこしか無いですよね。ブログタイトル文字部分だけを変えるのは、cssいじるしか無さそうなので、勉強します。
        みなさんコンピュータに詳しい方が多く、わいひらさんも今はお忙しいだろうから、フォーラムで見当違いの質問したらあかんと思って、ついついこちらにコソッと書いてしまいました。お返事ありがとうございます。
        それにしてもCocoonすごい反響です。はてなでもワイヒラさんの記事が1000以上もブクマされて大騒ぎ。simplicity時代からのファンにとってはわいひらさんがメジャーになって嬉しいです。