Cocoonの特徴
TwitterFacebook399はてブ208Pocket546LINEコピー
2022.10.092022.09.07
この記事は約14分で読めます。
WordPressテーマ「Cocoon（コクーン）」を作成しました。
以前作成したSimplicityの後継となる複数者運営にも対応した無料テーマです（※完全な互換性はないです）。
ただテーマは新しくなりましたが、設計思想はSimplicityの時とほぼ同様です。
2022年9月に安定した開発を継続するため「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アウトラインの最適化
ページ高速化対応
最近、Googleは「ページ表示の高速化」に対してえらく力を入れているようです。なので出来る限りGoogleの高速化（PageSpeed Insights）に最適化できるように作りこみました。
テーマ側の設定のみで100点～90点台後半は出るかと思います
Lighthouseでもオール100点も取れました。
テーマデフォルトで高速化設定を行った場合です。外部タグ、プラグインにより変わります。
モバイルフレンドリー
また、今後Googleもモバイルファーストインデックスとなるのは確実で、出来る限りモバイルに最適化されるように作成しました。
AMP対応
モバイルファーストの一環として、AMP機能も手軽に利用できるようにしました。
Cocoonの、AMPページは、通常ページと、ほぼほぼ見た目を変えず表示できるようにもなっています。
通常ページ
AMPページ
上記のように、ほぼほぼ違いはないかと思います。
各種ツールのスコアなどは、あくまでCocoonデフォルトでチェックしたものです。プラグインのインストールや、広告、ユーザーによるカスタマイズは、テーマ側からはどうしようもできない部分なので、外的要因によるスコアの変化はあると思います。
完全なレスポンシブスタイル
前章SEOの部分で少し触れたのですが、Cocoonテーマは、100％レスポンシブスタイルを採用しています。
100％というのは、「パソコンで見たソースコード」と、「モバイル端末で見たソースコード」が、一致するということです。
つまりCocoonでは、is_mobile()系の関数で条件分岐は一切行っていません。
これによりGoogleは、PCとモバイルを分けることなく一度のクロールでページ情報の取得が可能になります。
Google公式にあるレスポンシブデザインの利点を挙げるとこんな感じ。
- URL が 1 つなのでユーザーによるコンテンツの共有やリンクが簡単になる
- 対応するパソコン＆モバイル用ページが存在することを Googleに伝える必要がない
- ページへのインデックス プロパティの割り当てが正確に行われる
- 同じコンテンツのページをいくつも維持管理する手間が省ける（利用者側）
- ユーザーをデバイスごとに最適化したページにリダイレクトする必要がない（読み込み時間の短縮化）
- Googlebot がサイトをクロールするために必要なリソースを節約できる
- サイト内のより多くのコンテンツがインデックスに登録され、適切な間隔で更新される
レスポンシブ ウェブ デザイン | 検索セントラル | Google Developers
上記のように、Google自体もレスポンシブデザインを推奨しています。
ただ、レスポンシブ化したからといって、ランキングに影響するかというと、ほぼないかと思います。当然ながら、コンテンツを強化する方が全然影響が出るかと。
とは言え、Googleが推奨するものを取り入れておくのは、この先WEBで生きていく上で悪いことはないと思っています。
手軽に収益化
Cocoonでは、手軽に収益化が行えるように「広告を貼る仕組み」を充実させました。
Google アドセンスも簡単
特にアドセンス広告では、1つの広告コードを貼るだけで、様々な広告フォーマットを自由に選択できるようにしました。
- アドセンス自動広告（手動設定と併用可）
- レスポンシブ広告
- バナー広告
- レクタングル広告
- ダブルレクタングル広告
- ラージスカイスクレーパー
- 記事広告
- リンクユニット広告
こんな感じで、「広告の表示位置」によって、自由に表示する広告を変更できます。
Cocoonテーマ利用時における、最も簡単なAdSense広告設定方法の紹介です。
また、adショートコードを利用することで、本文中の好きな場所に手軽に広告を貼れるようにもなっています。
広告用のショートコードを用いて投稿者が「広告を出したい！」という場所にズバリ広告を表示させる方法です。
もちろん、ウィジェットを用いて好きなエリアに広告を挿入することも出来るようになっています。
広告ウィジェットを使用することにより、さらに自由度の高いAdSense設定をする方法です。個別の広告ユニットごとにパフォーマンス計測をしたい場合は、ウィジェットを利用する必要があります。
Amazon商品リンクの作成も簡単
また、ショートコードを利用すれば、以下のようなAmazon商品リンクも手軽に作成することが可能です。
Echo Show (エコーショー) 第2世代 – スクリーン付きスマートスピーカー with Alexa、チャコール
Amazon
Cocoonの「Amazon商品リンクタグ作成ショートコード」機能の使い方を詳しく解説しています。
楽天商品リンクも作成可能
Amazon以外にも、楽天市場の商品リンクも作成することができます。
マツモトキヨシ楽天市場店
楽天商品リンク機能を利用するには、事前準備が必要です。特に、「楽天アプリケーションID」と「楽天アフィリエイトID」は必須となります。加えて、楽天商品の商品番号の取得方法の紹介です。
ブログの主役はあくまで本文
内部SEOとか、なんだかんだあったとしても、結局一番大事なのはコンテンツです。
ただ、コンテンツ自体は、ユーザーさんが作成するもなので、テーマ側が何とかできるものではありません。
けれど、「コンテンツを作成するのであればできる限り簡単に使いやすく」ということで、様々なコンテンツ作成を補助する仕組みを装備しています。
吹き出し機能
例えば、以下のような吹き出し機能は、訪問者の目を引いたり、読みやすくする上で有用な働きをします。
わいひら
吹き出しをうまく使うと楽しいページが作れる
こんなふうに会話形式も可能です。
風が騒がしいな…
でも少し…この風…泣いています
この吹き出し装飾は、ビジュアルエディターでも反映され、ほぼ公開ページと同様に表示されます。
これにより、記事の完成形を意識しながら利用することが出来ると思います。
もちろん「吹き出し作成機能」もデフォルトで装備されていて、自由に何個でも作成可能です。
サイト訪問者にわかりやすく表示できる吹き出し機能の利用方法です。アイコンのセリフのように表示させることで、訪問者に分かりやすく説明できるかもしれません。
定型文のテンプレート化機能を装備
ブログ記事を書いていて、以下のようなことはないでしょうか？
あれ、この文章、前も同じようなのを書いていたな…。
そんな時Cocoonでは、テンプレートに登録して、ショートコードで呼び出して何度でも使いまわしできるようになっています。
テーマ内に定型文を登録してショートコードで何度でも使い回す方法です。
これにより、似たような文章を何度も書く必要はなくなり、何度でも同じテキストを使い回すことが出来るようになります。
わいひら
自分で使ってみても、この機能がかなり便利。
アフィリエイトタグの一元管理
あと、収益サイトを運営していると、アフィリエイトタグの管理が非常に面倒です。
タグのリンク切れ・仕様変更や、広告リンクの差し替えによって複数の記事にわたって修正した経験はないでしょうか？
Cocoonの場合、以下のようなショートコードを挿入することで、
何度でも同じアフィリエイトタグを使い回すことができます。
表示例がこちら。
例：エックスサーバー
当サイトで使われている「エックスサーバー」表記のタグは、全て一元管理機能によって同じタグが出力されています。なので、「エックスサーバー」を「Xserver」に変更する必要が出てきた場合でも、元を変更すればすべてに適用されます。
これにより、「タグの修正」が必要になったときは、管理元を1ヶ所修正するだけで全ページに反映されます。
アフィリエイトタグのマネージャー機能の使い方です。広告タグを一元管理することで、タグの張り替えや、テキスト修正などを容易に行えるようになります。
ランキング作成
アフィリエイトサイトを運営している場合は、ランキングを作成し掲載したい場合もあるかと思います。
そういった場合にも、当テーマは、ランキングを何個でも作成し、その中から手軽に掲載できるようになっています。
作成したランキングは、ビジュアルエディターのドロップダウンリストから選択するだけで挿入できます。
実際の挿入例がこちら。
高速かつ高い安定性を誇る高性能レンタルサーバー【エックスサーバー】稼働率99.99％以上の高い安定性で、業界トップクラスの高コストパフォーマンスを誇る高品質レンタルサーバーです。
まずは無料お試し10日間。
サービス運営期間：19年
ランキングは何位まででも作成できます（実際は5位ぐらいまで作れれば十分とは思いますが）。
商品ランキングをショートコードで本文中に挿入する方法です。ランキングはウィジェットでも表示できますが、本文中の自由な箇所に表示させる場合は、ショートコードです。
また、作成したランキングをウィジェットとして配置することも可能となっています。
商品やサービスなどの独自ランキングを作成してウィジェットで配置する方法の紹介です。ランキング機能の使い方。
ランキングでもアフィリエイトタグ管理機能で登録したショートコードを利用出来るようになっています。
ブログカード機能
Cocoonも、Simplicityと同様に本文中にURLを挿入するだけで、内部リンク・外部リンクともブログカード機能が使えます。
ブログカード機能とは、先程からも出ている以下のようなカードリンク表示機能です。
内部ブログカードを記事本文内に表示させる方法です。URLを記入するだけで利用できます。
2018.11.06外部ブログカードの表示方法投稿・固定ページに外部リンクブログカードを表示させる方法の紹介です。外部ブログカードは、キャッシュを利用して表示を高速化しているので、キャッシュの更新方法も紹介しています。wp-cocoon.com2018.11.06
ブログカード機能を使ってしまうと、「普通のリンクを貼るのが面倒になってしまう」という難点もありますが、個人的にはもはや必須機能です。
文章の装飾スタイルがあらかじめ用意
ブログ文章を読みやすくする上で、装飾も重要かと思います。
当テーマでは、よく利用する装飾があらかじめ用意してあり、ビジュアルエディターから手軽に挿入できるようになっています。
例えば、太字にしたり、赤い太字にしたり、マーカーにしたり、アンダーラインマーカーといった装飾をすることができます。
WordPress本文を彩る拡張スタイル（拡張クラス）の紹介です。見た目とソースコードをあわせて紹介しています。
また、以下のような補足説明をするボックススタイルも。
補足説明
注意的補足説明
拡張スタイル「アイコンボックス」と「案内ボックス」の表示サンプル。
Cocoonにデフォルトで用意されているボックスタイプの拡張スタイルの使い方と、サンプルコードです。
その他にも、ボタン、バッジ等いろいろな拡張スタイルがあります。
2018.09.17記事作成に使える拡張スタイル。バッジ編。リンク前のワンポイントなどに利用するためのバッジ拡張スタイルの表示サンプルとコードです。wp-cocoon.com2018.03.05検索を促す検索ボックスをスタイルで表示する方法訪問者に検索を促すためのスタイルの使い方。詳しくは○○で検索的な。wp-cocoon.com2018.03.02
カラムレイアウトも手軽に
2カラム、3カラムレイアウトもビジュアルエディターから手軽にできるようになっています。
2カラムとショートコードを併用して、以下のような表現も可能です。