Cocoon

WordPressテーマ「Cocoon（コクーン）」を作成しました。

以前作成したSimplicityの後継となる複数者運営にも対応した無料テーマです（※完全な互換性はないです）。

ただテーマは新しくなりましたが、設計思想はSimplicityの時とほぼ同様です。

2022年9月に安定した開発を継続するため「Cocoon」を「エックスサーバー株式会社」へ事業譲渡し、あわせて業務提携を行いました。

現在も開発・運営・サポートは、引き続き私（わいひら）にて行っています。事業譲渡・業務提携に関する詳細はこちらをご覧ください。

この度、WordPress無料テーマの「Cocoon」事業は、レンタルサーバーやインターネット関連サービス事業を運営する「エックスサーバー株式会社」に事業譲渡させていただきました。それと同時に、今後も私（わいひら）がCocoonの開発・運...

以下の7つが主な特徴となります。

シンプル
内部SEO施策済み
完全なレスポンシブスタイル
手軽に収益化
ブログの主役はあくまで本文
拡散のための仕掛けが施されている
カスタマイズがしやすい

Cocoonでは、これらの基本的な考えは変えずに、Simplicityフォーラムに投稿された「約3500トピック」と「約23000の投稿」から、ご意見を出来る限り参考にさせていただいて、新しいテーマとして再構築しました。

これらについては以下で詳しく説明します。

シンプル

CocoonもSimplicityと同様にシンプルなデザインを心がけました。

テーマ名のCocoon自体にも、以下のような意味があります。

繭
居心地のいい場所
繭に包む
(繭で包むように)保護する
新たな始まり

テーマ名をCocoon（繭）としたのは、繭のように白い、シンプルなテーマを作りたかったからです。

白いテーマが一番読みやすいと思うので。

加えて、WordPressを新たに始める方にも「居心地のいい場所」となれるよう、Cocoonの機能が包む（補完する）形で「面倒事から保護してくれるように」と作成しました。

検索エンジン最適化（SEO）

Googleのフレッドアップデート以降、テーマ側で行って効果のある内部SEO施策も、ほぼほぼ無いのではないかと思います。

もし、あったとしても今後ディープラーニングの発達により、テーマ側が行えるSEO施策なんかより、コンテンツ自体（＆良質リンク）が重視されていくのは確実でしょう。

ただ、料理（コンテンツ）に対して、出来るだけ良い皿（テーマ）となれるように最大限やれることはやったつもりです。

Cocoonでは、主に以下のような内部SEO施策を行っています。

ページ高速化機能搭載（テーマ機能だけでPageSpeed Insights90点後半が取れる）
モバイルファースト（モバイルフレンドリー）
ワンクリックでAMP対応
ワンクリックでPWA対応
PCとモバイルでソースコードが100％同じ完全レスポンシブ
W3CのHTML5バリデーションのエラー0
W3CのCSSバリデーションのエラー0
基本的な構造化データタグの適用
構造化データエラー0
メタディスクリプション記入欄の設置
HTMLアウトラインの最適化

詳細はこちら。

Cocoonで行っている内部SEO施策まとめ

テーマ内で行っているSEO施策まとめです。まず、モバイルファーストで作成してあるため、100％レスポンシブデザインとなっています。HTML5、構造化データエラーもなしで、サイトの高速化機能も備えています。

ページ高速化対応

最近、Googleは「ページ表示の高速化」に対してえらく力を入れているようです。なので出来る限りGoogleの高速化（PageSpeed Insights）に最適化できるように作りこみました。

テーマ側の設定のみで100点～90点台後半は出るかと思います

Lighthouseでもオール100点も取れました。

テーマデフォルトで高速化設定を行った場合です。外部タグ、プラグインにより変わります。

モバイルフレンドリー

また、今後Googleもモバイルファーストインデックスとなるのは確実で、出来る限りモバイルに最適化されるように作成しました。

完全なレスポンシブスタイル

前章SEOの部分で少し触れたのですが、Cocoonテーマは、100％レスポンシブスタイルを採用しています。

100％というのは、「パソコンで見たソースコード」と、「モバイル端末で見たソースコード」が、一致するということです。

つまりCocoonでは、is_mobile()系の関数で条件分岐は一切行っていません。

これによりGoogleは、PCとモバイルを分けることなく一度のクロールでページ情報の取得が可能になります。

Google公式にあるレスポンシブデザインの利点を挙げるとこんな感じ。

URL が 1 つなのでユーザーによるコンテンツの共有やリンクが簡単になる
対応するパソコン＆モバイル用ページが存在することを Googleに伝える必要がない
ページへのインデックスプロパティの割り当てが正確に行われる
同じコンテンツのページをいくつも維持管理する手間が省ける（利用者側）
ユーザーをデバイスごとに最適化したページにリダイレクトする必要がない（読み込み時間の短縮化）
Googlebot がサイトをクロールするために必要なリソースを節約できる
サイト内のより多くのコンテンツがインデックスに登録され、適切な間隔で更新される

Learn Responsive Design | web.dev

A course exploring all aspects of responsive design. Learn how to make sites that look great and work well for everyone.

上記のように、Google自体もレスポンシブデザインを推奨しています。

ただ、レスポンシブ化したからといって、ランキングに影響するかというと、ほぼないかと思います。当然ながら、コンテンツを強化する方が全然影響が出るかと。

とは言え、Googleが推奨するものを取り入れておくのは、この先WEBで生きていく上で悪いことはないと思っています。

手軽に収益化

Cocoonでは、手軽に収益化が行えるように「広告を貼る仕組み」を充実させました。

Google アドセンスも簡単

特にアドセンス広告では、1つの広告コードを貼るだけで、様々な広告フォーマットを自由に選択できるようにしました。

アドセンス自動広告（手動設定と併用可）
レスポンシブ広告
バナー広告
レクタングル広告
ダブルレクタングル広告
ラージスカイスクレーパー
記事広告
リンクユニット広告

こんな感じで、「広告の表示位置」によって、自由に表示する広告を変更できます。

広告（AdSense）を手っ取り早く設定する方法

Cocoonテーマ利用時における、最も簡単なAdSense広告設定方法の紹介です。

また、adショートコードを利用することで、本文中の好きな場所に手軽に広告を貼れるようにもなっています。

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

広告用のショートコードを用いて投稿者が「広告を出したい！」という場所にズバリ広告を表示させる方法です。

もちろん、ウィジェットを用いて好きなエリアに広告を挿入することも出来るようになっています。

ウィジェットを利用して広告（AdSense）を表示する方法

広告ウィジェットを使用することにより、さらに自由度の高いAdSense設定をする方法です。個別の広告ユニットごとにパフォーマンス計測をしたい場合は、ウィジェットを利用する必要があります。

Amazon商品リンクの作成も簡単

また、ショートコードを利用すれば、以下のようなAmazon商品リンクも手軽に作成することが可能です。

Coca-Cola(コカ・コーラ)

利用方法はこちら。

Amazon商品リンクの初期設定方法と使い方

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

楽天商品リンクも作成可能

Amazon以外にも、楽天市場の商品リンクも作成することができます。

コカ・コーラ( 500ml×24本入)【コカコーラ(Coca-Cola)】[炭酸飲料]

楽天24 ヘルスケア館

利用方法はこちら。

楽天商品リンク機能を利用するには、事前準備が必要です。特に、「楽天アプリケーションID」と「楽天アフィリエイトID」は必須となります。加えて、楽天商品の商品番号の取得方法の紹介です。

ブログの主役はあくまで本文

内部SEOとか、なんだかんだあったとしても、結局一番大事なのはコンテンツです。

ただ、コンテンツ自体は、ユーザーさんが作成するもなので、テーマ側が何とかできるものではありません。

けれど、「コンテンツを作成するのであればできる限り簡単に使いやすく」ということで、様々なコンテンツ作成を補助する仕組みを装備しています。

吹き出し機能

例えば、以下のような吹き出し機能は、訪問者の目を引いたり、読みやすくする上で有用な働きをします。

わいひら

吹き出しをうまく使うと楽しいページが作れる

こんなふうに会話形式も可能です。

風が騒がしいな…

でも少し…この風…泣いています

この吹き出し装飾は、ビジュアルエディターでも反映され、ほぼ公開ページと同様に表示されます。

これにより、記事の完成形を意識しながら利用することが出来ると思います。

もちろん「吹き出し作成機能」もデフォルトで装備されていて、自由に何個でも作成可能です。

自作の吹き出しを作成して利用する方法

サイト訪問者にわかりやすく表示できる吹き出し機能の利用方法です。アイコンのセリフのように表示させることで、訪問者に分かりやすく説明できるかもしれません。

定型文のテンプレート化機能を装備

ブログ記事を書いていて、以下のようなことはないでしょうか？

あれ、この文章、前も同じようなのを書いていたな…。

そんな時Cocoonでは、テンプレートに登録して、ショートコードで呼び出して何度でも使いまわしできるようになっています。

いわば、テキストの関数化とでも言いましょうか。

テンプレート文（定型文）を登録して使い回す方法

テーマ内に定型文を登録してショートコードで何度でも使い回す方法です。

これにより、似たような文章を何度も書く必要はなくなり、何度でも同じテキストを使い回すことが出来るようになります。

わいひら

自分で使ってみても、この機能がかなり便利。

アフィリエイトタグの一元管理

あと、収益サイトを運営していると、アフィリエイトタグの管理が非常に面倒です。

タグのリンク切れ・仕様変更や、広告リンクの差し替えによって複数の記事にわたって修正した経験はないでしょうか？

Cocoonの場合、以下のようなショートコードを挿入することで、

何度でも同じアフィリエイトタグを使い回すことができます。

表示例がこちら。

例：エックスサーバー

当サイトで使われている「エックスサーバー」表記のタグは、全て一元管理機能によって同じタグが出力されています。なので、「エックスサーバー」を「XServer」に変更する必要が出てきた場合でも、元を変更すればすべてに適用されます。

これにより、「タグの修正」が必要になったときは、管理元を1ヶ所修正するだけで全ページに反映されます。

アフィリエイトタグの一元管理機能の使い方

アフィリエイトタグのマネージャー機能の使い方です。広告タグを一元管理することで、タグの張り替えや、テキスト修正などを容易に行えるようになります。

ブログカード機能

Cocoonも、Simplicityと同様に本文中にURLを挿入するだけで、内部リンク・外部リンクともブログカード機能が使えます。

ブログカード機能とは、先程からも出ている以下のようなカードリンク表示機能です。

内部ブログカードを表示する方法

内部ブログカードを記事本文内に表示させる方法です。URLを記入するだけで利用できます。

外部ブログカードの表示方法

投稿・固定ページに外部リンクブログカードを表示させる方法の紹介です。外部ブログカードは、キャッシュを利用して表示を高速化しているので、キャッシュの更新方法も紹介しています。

ブログカード機能を使ってしまうと、「普通のリンクを貼るのが面倒になってしまう」という難点もありますが、個人的にはもはや必須機能です。

文章の装飾スタイルがあらかじめ用意

ブログ文章を読みやすくする上で、装飾も重要かと思います。

当テーマでは、よく利用する装飾があらかじめ用意してあり、ビジュアルエディターから手軽に挿入できるようになっています。

例えば、太字にしたり、赤い太字にしたり、マーカーにしたり、アンダーラインマーカーといった装飾をすることができます。

記事作成に使える拡張スタイル。インライン編。

Wordpress本文を彩る拡張スタイル（拡張クラス）の紹介です。見た目とソースコードをあわせて紹介しています。

また、以下のような補足説明をするボックススタイルも。

補足説明

注意的補足説明

拡張スタイル「アイコンボックス」と「案内ボックス」の表示サンプル。

Cocoonにデフォルトで用意されているボックスタイプの拡張スタイルの使い方と、サンプルコードです。

その他にも、ボタン、バッジ等いろいろな拡張スタイルがあります。

記事作成に使える拡張スタイル。ボタン編。

スタイル拡張ボタンの使い方。サンプルコードと表示例です。

記事作成に使える拡張スタイル。バッジ編。

リンク前のワンポイントなどに利用するためのバッジ拡張スタイルの表示サンプルとコードです。

検索を促す検索ボックスをスタイルで表示する方法

訪問者に検索を促すためのスタイルの使い方。詳しくは○○で検索的な。

カラムレイアウトも手軽に

2カラム、3カラムレイアウトもビジュアルエディターから手軽にできるようになっています。

2カラムとショートコードを併用して、以下のような表現も可能です。

拡散のための仕掛けが施されている

もちろん、SNS拡散ボタンも実装してあります。

SNSシェアボタン

Cocoonでは、設定画面から以下のように様々なデザインに変更可能です。

SNSシェア数も、簡易的にキャッシュされるようになっているので、1度取得したシェア数は次回は素早く表示されます。

SNSフォローボタン

SNSフォローボタンも以下のものに対応しています。

ウェブサイト
Twitter
Facebook
Google+
はてなブックマーク
instagram
Pinterest
YouTube
Flickr
LINE@
Amazon欲しい物リスト
GitHub
feedly
RSS

カスタマイズがしやすい

最後に、テーマのカスタマイズも出来る限り素早く手軽に設定できるようにしました。

管理画面での設定

管理画面側で行う設定も、出来る限りやりやすいものにしたつもりです。

テーマカスタマイザー使用をなるべく控えテーマ独自設定に

基本的に、WordPressテーマの設定といえばテーマカスタマイザーを使います。

ただ、テーマカスタマイザーを使うと「設定エリアが狭い」とか「設定動作が遅い」など個人的に結構不満がありました。

そこで、当テーマでは出来る限り設定を独自設定に入れ替え、大きな設定エリアをタブでサクサク切り替えてまとめて保存出来るようにしました。

このような設定画面にした詳しい理由はこちら。

Cocoonはテーマカスタマイザーを使用しない仕様にした理由

Cocoonでは、独自に作成したオリジナル設定画面を使用しています。テーマカスタマイザーは極力使用しないようにしました。その理由についての説明です。

豊富なウィジェットエリア

Cocoonは、あらかじめ多数のウィジェットエリアを用意しています。

これは、「テンプレートファイルをカスタマイズするよりは、ウィジェットエリアで手軽に挿入できた方が利便性が高い」という考えのもとこのような仕様にしています。

これにより、「入れたい場所にウィジェットを挿入できる」というのはもとより、「テンプレートをカスタマイズして失敗するリスクを減らす」なんてメリットもあります。

ウィジェットエリア以外に、独自ウィジェットも豊富に取り揃えてあります。

Cocoonデフォルトのウィジェット機能まとめ

Cocoonのデフォルト状態で利用できるウィジェット機能を見やすくまとめてみました。

また、ウィジェットごとに表示条件を設定することも可能です。

ウィジェットの表示を制御する方法

個々のウィジェットを「表示させたい場所」のみに表示させる表示設定機能の紹介です。表示設定機能を利用することで、表示条件を制御できます。

テンプレート自体もカスタマイズしやすいように

上記のように、管理画面もカスタマイズしやすいようにしましたが、テンプレートファイル側でも出来る限りカスタマイズしやすくしたつもりです。

Cocoonは、ファイル側でカスタマイズしやすいように、以下のように作成されています。

動作部分はテーマで、デザイン部分はスキンで行える
使用している全ての関数は子テーマでオーバーロード（上書き変更）可能
基本的にDRY「Don’t repeat yourself（同じ記述を繰り返さない）」になるように

なるべく、同様の処理は1ヶ所に集中させたつもりです。

なので、表示上は複数箇所に利用されていても、関数やテンプレートどれか1つを編集すれば反映されるようになっていると思います。

もちろん、完全にできてるわけではないと思います。

ダウンロード

このように、Simplicityテーマで得た経験や、ご意見を出来る限り反映し、必要な機能は残すor追加し、不要な機能は削除して、良い方向に再構築できたと思っています。

よろしければダウンロードしてご利用ください。

Cocoonテーマのダウンロードはこちら。

テーマのダウンロード

Wordpressテーマ「Cocoon」の親テーマと子テーマのダウンロードページです。

親テーマ、子テーマともダウンロードできますので、双方インストールして子テーマを有効化してご利用ください。

Cocoonの特徴