ブログ初心者・Web制作の情報サイト
初心者にもおすすめな無料テーマCocoonの特徴【WordPress】

初心者にもおすすめな無料テーマCocoonの特徴【WordPress】

この記事ではWordPressの無料テーマであるCocoonの特徴を紹介します。

無料テーマはたくさんあるけどどれにすればいいか分からない、Cocoonは良いと聞くけどどこがいいのかと思っている人はいるはずです。

Cocoonはコーディングの知識なしでカスタマイズできるように作られたWordPressの無料テーマです。初心者でも扱いやすく多機能なので導入して困ることはありません。この記事を読めばCocoonがどういったテーマなのか分かるので導入の参考にしてください。

Cocoonの特徴

CocoonはSimplicityの後継としてわいひら氏によって作成されたWordPressの無料テーマです。

無料テーマとは思えないほど使いやすく整理された管理画面をもちスキンも多くカスタマイズ性も高いです。見た目はシンプルながら機能は非常に多く、細かいところまで配慮されています。

Cocoon:カスタマイズ

Cocoonのカスタマイズはヘッダーやフッターなどの各パーツごとにいくつかのテンプレートがあり、それらを組み合わせてサイトをデザインしていくスタイルです。

特に他と変わったデザインはありませんがどれもスタンダードでシンプルかつ見やすいスタイルなので万人受けしやすいでしょう。

Cocoonには以下の特徴があります。

Cocoonのメリット
  • 無料テーマとは思えないほど機能が多い
  • 設定画面が使いやすくテーマのカスタマイズがしやすい
  • デザインがシンプルで綺麗、テーマのスキンも多い
  • 細かい設定が不要、インストールするだけですぐ使える
  • グーテンベルク(ブロックエディタ)にも対応
Cocoonのデメリット
  • 設定項目が多くてどこに何があるか分かりづらい

無料テーマとは思えないほど機能が多い

Cocoon:豊富な機能

Cocoonにはブログを書く上で必要な機能はすべて揃っています。Cocoon 設定のメニュー項目は9種類です。

  • Cocoon 設定
  • 吹き出し
  • テンプレート
  • アフィリエイトタグ
  • アクセス集計
  • 高速化
  • バックアップ
  • キャシュ削除

吹き出し

Cocoon:吹き出し編集

Cocoon 吹き出の利用

アクセス集計

Cocoon:アクセス集計設定

Cocoonには独自のアクセス集計機能があります。これは人気記事や管理画面でアクセス数を表示するために使われます。

この機能はサーバー負荷が大きいようなので重い場合は切りましょう。

Cocoon アクセス集計機能

設定画面が使いやすい

Cocoon:多彩な設定項目

Cocoonは各種設定の変更がとても楽です。

なぜならCocoonは独自のテーマ編集画面を持っており視覚的に操作できるからです。この編集画面はWordPressのテーマカスタマイザーよりブラウザでの動作が速くストレスがありません。(WordPressのテーマカスタマイザーは設定変更ごとにプレビューを読込むため遅い)

編集画面は項目ごとにタブ分けされており細かな内容もUI操作だけで行えます。

Cocoon:ヘッダーレイアウト編集

例えばヘッダーのデザインを変更したければCocoon設定のヘッダータブを選びヘッダーレイアウトから好きなレイアウトを選択するだけでいいのです。プレビューもその場で確認できます

一般的にWordPressのカスタマイズはテキストエディタでテーマ内ファイルを開きコードを編集します。これは初心者には難しいですよね。

内容を理解せずに他サイトに載っていたコードをコピーして貼り付けるといったことも多いと思います。これではエラーが起こっても何が間違っているのか分かりません

Cocoonの管理画面で設定すればどういった内容の変更か分かりますし、もし変更が気に入らなくても設定を戻せばいいのです。エラーが起こる心配もありません

Cocoonは初心者にもWordPressに慣れた人にも使いやすい設定画面を持ったテーマと言えるでしょう。

テーマスキンや配色の変更が簡単

Cocoon:テーマスキン変更

Cocoonにはスキンが70種類近くあります。変更はチェックを入れて変更を保存するだけなので手軽にサイトの見たを変えることができます。

CocoonのおすすめスキンSeason(シーズン)が洗練されていて美しい
WordPressの無料テーマCocoonにはスキンと呼ばれるテーマの見た目を変更するデザインパックが多数同梱されています。この記事では数あるCocoonスキンの中でもおすすめのSeason(シーズン)について紹介します。
Cocoon:サイトキーカラー設定

スキン以外でもサイトキーカラーを変更できます。これはサイトの特定箇所の色を変更する設定です。

サイトの色合いを変更したければCocoon設定の全体タブからキーカラーを選択し好きな色を選ぶだけで変更できます。

テキストエディタでCSSを開き body { background-color: #efefef; } のように書き込む必要はないので楽ですね。

Cocoon:サイトキーカラー設定プレビュー

オレンジにするとこんな感じ。手軽にテーマの見た目を変更できて便利です。

Cocoonのサイトキーカラーで変わる箇所と使われるCSSクラス名
この記事ではCocoonのサイトキーカラーで変わる場所と変更が適用されるCSSクラスを紹介します。各所を変更できるCSSのセレクタを把握しておきましょう。Webサイトのデザインや独自カスタマイズに活用できます。

細かい設定が不要

WordPressには設定しておくべき細かな設定がたくさんありますがCocoonではそれらを気にする必要はありません。

Cocoonでは以下のような必要項目は始めから設定されています。

  • SEO関連のメタタグ出力
  • 関連ページや関連タグの表示
  • SNSボタンの表示
  • モバイル画面でのツールバー表示

例としてSEO(検索エンジン最適化)関連の項目。インデックスして欲しくないページのnoindex設定やタイトルタグの出力などがこれにあたります。

これら項目は初心者には難しいため放置されがちですが、タイトルタグの出力のような重要項目もあるので設定の有無による影響はとても大きいです。

これはCocoonの投稿編集画面の下に表示される設定パネルです。

CocoonにはSEOタイトル、メタディスクリプション、noindexなどSEO関連のタグを編集する機能が組込まれています。

これらは投稿の編集画面で設定でしておけばHTMLに自動で出力してくれます。

WordPressデフォルトではSEO関係はほとんど設定されていません。一般的にテーマ側で設定するのが基本になっています。

最近の有料テーマではこれらは当たり前のように設定されています。

しかし無料テーマの中には未設定のテーマもあるでしょう。その点、Cocoonではしっかりと対策・設定されておりさらに変更もしやすいです。Cocoonは細かな設定が不要でインストールしやすい無料テーマと言えます。

グーテンベルク(ブロックエディタ)に対応

Cocoonはグーテンベルクに対応しています

グーテンベルクとはWordPressの新しいビジュアルエディタでWordPress 5.0のアップデートでクラシックエディタに代わり正式に導入されました。(クラシックエディタはプラグインによりサポートされています)

グーテンベルクに対応しているかどうかは有料テーマ無料テーマ問わず重要なことです。

なぜならクラシックエディタの公式サポートは2021年末までとアナウンスされているからです。

クラシックエディタのプラグインは2021年12月31日まで公式にサポートはされます。

参照:Classic Editor Plugin Support

グーテンベルクの使い勝手はWordPressのアップデートに伴い確実に使いやすくなっています。これからWordPressを始める初心者はクラシックエディタではなくグーテンベルクを使のがおすすめです

新規の人は古いものを使わないと思います。スマートフォンも2010年頃はあまり欲しがる人がいませんでしたが、その後急速に増えましたからね。

CMS(コンテンツマネジメントシステム)におけるWordPressの利用率はここ数年で急速に増加しています。

つまりWordPressの利用者は今も増え続けているということです。今後グーテンベルクの使用率は徐々に上がっていくでしょう。

CocoonはCocoonブロック(Cocoonで独自実装したブロック)を使うことによってグーテンベルクに対応しています。使用可能なブロックは公式サイトを参照してください。

Cocoonのグーテンベルク対応について

2019年11月にはアップデートでCocoonブロックの色機能が強化され多彩な色表現が可能になっています。

Cocoon 2.0 で色表現を強化

最後に

WordPressの無料テーマCocoonの特徴を紹介しました。

個人的にCocoonは無料とは思えない素晴らしいWordPressテーマだと思います。アップデートも早く安定感があります。無料のWordPressテーマを探している人、Cocoonの導入を検討している人はぜひCocoonを導入してみてはいかがでしょうか。

公式サイトでも言われていますがCocoonを使用する際は子テーマのCocoon Childもダウンロードしましょう。直接親テーマを編集するとアップデート時に編集内容が消し飛んでしまいますよ。