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

Cocoon

WordPressの無料テーマCocoonを作成しました。

SEO・高速化・モバイルファースト対応済みの無料Wordpressテーマ

以前公開したSimplicityの後継となるテーマです(※後釜ということで完全な互換性はないです)。

新しくテーマを作成したのは、Simplicity自体元々、個人用に作成したものを公開したテーマだったので、機能を増設するにつれて、多少の無理も出てきて、動作確認が大変になってきたからです。

また、Simplicityは、約4年前に公開したものなんですが、「当時のWEB状況」と「最近のWEB状況」に乖離もでてきました。ですので、一度現在の状況に合わせて作り直しておきたかったからです。

元々Simplicity自体、僕が初めてPHPで作成したプログラムだったので、当時はPHPの作法などをよくわかっておらず、書き直したい部分もいろいろ出できたというのもあります。

こういった複合的な理由から、今回作成したのが無料テーマCocoonです。

以下では、Cocoonの主な特徴について説明します。

スポンサーリンク
レクタングル(大)広告

Cocoonの内部SEO施策

4年前と比較して、SEO状況もかなり変わったような気がします。

特に、いわゆるフレッドアップデート以降、有用なコンテンツ以上に「テーマ側で行って有効なSEO」も、ほぼほぼないのではないかと個人的には思っています。

ただ、もちろん「内部SEOが整ってないテーマ」よりは、整っていた方が良いとは思うので、以下のような内部SEO施策を行っています。

  • ページ高速化機能搭載(テーマ機能だけでPageSpeed Insights90点後半が取れる)
  • モバイルファースト(モバイルフレンドリー)
  • ワンクリックでAMP対応
  • PCとモバイルでソースコードが100%同じ完全レスポンシブ
  • W3CのHTML5バリデーションのエラー0
  • W3CのCSSバリデーションのエラー0
  • 基本的な構造化データタグの記入
  • 構造化データエラー0
  • 投稿ごとにメタディスクリプション記入欄の設置
  • HTMLアウトラインの最適化
上記はあくまでテーマ自体を基準としたものです。サーバーの強弱、プラグインのインストールや外部タグの利用で変わってくると思います。

ページ高速化設定

なんか最近Google自体、ページの高速化にはかなり力を注いでいるようです。

ページの表示速度をモバイル検索のランキング要素として組み込むことを Google はアナウンスした。名称は、“Speed Update”(スピードアップデート)。モバイル検索においてページ速度をランキング要因に使う。2018年7月に導入を予定。影響を受けるクエリはごくわずかになる見込み。
Google フレンドリーなサイト制作・運営に関するウェブマスター向け公式情報
Google フレンドリーなサイト制作・運営に関するウェブマスター向け公式情報

なので、テーマ側にも高速化機能をつけました。

僕の環境で言えば、テーマ側の設定だけで、PageSpeed Insightsの90点後半ぐらいは獲得できるようになったかと思います(※プラグイン、外部リソース利用除く)。

Cocoonと相性の良いページの高速化設定方法の紹介です。Cocoonデフォルト機能だけでも十分にPageSpeed Insightsで高得点が狙えます。加えて、ページキャッシュプラグインや、画像最適化プラグインを利用すれば、より良い良いパフォーマンスを目指すことも可能かと思います。

モバイルファースト・フレンドリー

また、Google自体モバイルファーストインデックス(MFI)の導入も既に一部始まっています。

Google フレンドリーなサイト制作・運営に関するウェブマスター向け公式情報
Google フレンドリーなサイト制作・運営に関するウェブマスター向け公式情報

なので、Cocoonでは、モバイルファーストとなるようなデザインを心がけて作成しました。

Cocoonのモバイルフレンドリーテスト結果

また、Googleが推奨しているレスポンシブデザインにも対応しています。

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

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

AMP対応

これも、モバイルファーストに含まれる部分もあるのですが、Cocoonは設定1つでAMP対応できるように作成してあります。

CocoonのAMPテスト結果

また、通常ページとAMPページの表示上の差がほとんどないように作成したつもりです。

通常ページの表示

Cocoon標準投稿ページ

AMPページの表示

AMPページは標準ページと表示がほぼほぼ変わらない

通常ページとAMPページの比較はこちら。

https://wp-cocoon.com/(通常)

https://wp-cocoon.com/?amp=1(AMP)

AMP対応するには、仕様の差があるので完全に同じではありません。

フレキシブルな収益化機能

ブログを始めるに当たって、収益化を視野に入れて始める方も多いかと思います。

その中でも多数の方が、まずはアドセンス利用を検討されると思います。

Cocoonでは、そんなアドセンスに慣れていない方でも、「簡単かつ手軽に設定できるように」広告機能を作りました。

基本的な使い方では、「レスポンシブ広告ユニットコード」を1つ設定するだけで、「収益性の高い位置に好みの広告フォーマットを何個でも選択して表示できる作り」にしました。

広告の表示位置の変更

設定から手軽に変更できるフォーマットはこちら。

  • アドセンス自動広告(手動設定と併用可)
  • レスポンシブ広告
  • バナー広告
  • レクタングル広告
  • ダブルレクタングル広告
  • ラージスカイスクレイパー
  • 記事広告

詳しくは、広告の設定ページに書いてあります。

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

加えて、「個々の広告それぞれのパフォーマンスを計測したい」なんて場合にも対応できるようにウィジェットで個別に広告設定できるようにもなっています。

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

さらに、投稿本文中の好きな場所に広告を表示できるようにショートコード表示も可能です。

adショートコードを本文中に挿入する

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

以前アドセンスは、「1ページあたりに表示する広告ユニットは3つまで」という制約がありました。

けれど2016年8月以降、広告数の制約はなくなりました。

なのでCocoonでは、この規約変更に対応し「コンテンツの内容に合わせて自由に広告を表示できるように」と広告機能を強化しました。

これにより、AdSenseポリシー対応は、ほぼブログ運営者さんに任せる形としました。

目玉となる機能

Simplicityと比較して、Cocoonでは多くの機能強化をしました。

その一例を紹介します。

吹き出し機能

以下のような吹き出しを手軽に作成・利用できるようにしました。

Cocoonの吹き出し表示例

吹き出しは、以下のようにビジュアルエディター上から手軽に挿入できるようにしました。

ビジュアルエディターで吹き出し装飾例

ビジュアルエディター上に、吹き出しスタイルも適用されるため、完成形を意識しながら本文を書くことが出来るかと思います。

また、必要な吹き出しが欲しくなったら、管理画面上から何個でも作成できるようにもなっています。

吹き出しは無制限に作成可能

いらすとやさんのアイコンの吹き出しは、「利用方法デモ」のためあらかじめ登録してあります。※許可をいただく形で利用させていただいています。詳しくは利用規約を参照してください。

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

定型文をテンプレート登録可能

また、自分自身ブログを書いていてよくあるのがこんなこと。

あれ?この文章前も同じこと書いたな。

こんな文章を、すべてテンプレートにまとめてショートコードで使い回すことができるようにしました。

定型文テンプレートの使用例

「テキストの関数化」といった感じ。

これにより、何度も同じ文章を書く(コピペする)必要はなくなります。

また、修正がある場合も、1箇所を修正するだけで利用箇所すべてに反映されます。

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

アドセンスタグの一元管理

あと、サイト運営をする上で面倒なのが、アドセンスタグの管理です。

ページ毎にタグを直接貼っていると、貼り替えの必要が出てきた場合は、全てのページを修正しなければなりません。

そんなアドセンスタグを一元管理できるような機能をCocoonには搭載し、エディターからショートコードで使い回せるようにしました。

アフィリエイトタグ機能の使用例

これにより、「提供が終了したASPから他のASPのタグに変更する」もしくは「リンク切れを修正する」なんて場合でも、管理しているタグを修正すれば、全てに適用されるようになっています。

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

ランキング表示機能

アフィリエイトサイトなどでは、本文下のランキングも効果的かと思います。

Cocoonには、ランキングを作成し、ショートコードで呼び出したり、ウィジェットで表示したりなんて使い方ができます。

ビジュアルエディターでランキングショートコードを挿入する

こんな感じのランキングを作成し、本文中、サイドバー、ウィジェットエリアも自由な位置に表示することが可能です。

Cocoonのランキング表示例

商品やサービスなどの独自ランキングを作成してウィジェットで配置する方法の紹介です。ランキング機能の使い方。
商品ランキングをショートコードで本文中に挿入する方法です。ランキングはウィジェットでも表示できますが、本文中の自由な箇所に表示させる場合は、ショートコードです。

ランキングは、何位まででも、何個でも作成できます。

ブログカード機能

Simplicityで好評だった内部・外部ブログカード機能ももちろんあります。

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

これがあると、見栄えよく手軽にリンクが貼れるので個人的には必須機能です。

カード表示に慣れていない人にはリンクっぽく見えないという難点もあるかと思います。

文章装飾機能

文章を装飾する上でよく利用するスタイルを拡張スタイルとしてビジュアルエディターから手軽に利用できるようにもなっています。

ビジュアルエディターで拡張スタイルの装飾例

Wordpress本文を彩る拡張スタイル(拡張クラス)の紹介です。見た目とソースコードをあわせて紹介しています。
Cocoonにデフォルトで用意されているボックスタイプの拡張スタイルの使い方と、サンプルコードです。
リンク前のワンポイントなどに利用するためのバッジ拡張スタイルの表示サンプルとコードです。
スタイル拡張ボタンの使い方。サンプルコードと表示例です。

カラム分け機能

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

Cocoonのカラムレイアウト作成方法

投稿記事内に手軽に2カラム・3カラムレイアウトを挿入する方法です。ビジュアルエディターからクリック操作のみで入力可能です。

カラム分けの実例は、テーマのマニュアルページで確認できます。

テーマの利用方法を見やすく一覧にしたマニュアルです。

ウィジェットごとの表示条件変更機能搭載

WordPressのウィジェットを利用していて「ウィジェットはページ毎に出したいときと出したくない時がある」なんてことが結構あります。

なので、Cocoonには「ウィジェット表示条件設定機能」を標準搭載しました。

ウィジェットの表示条件指定

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

個別にカテゴリページを編集可能

検索エンジンなどから、カテゴリページへの流入は結構あります。

そんな流入訪問者をできるだけ逃さないように、カテゴリページ自体を作りこめるようにしました。

こんな感じでカテゴリページに対してアイキャッチやコンテンツを盛り込めます。

カテゴリページを詳細に作り込める

カテゴリページに集客した訪問者をある程度留めておけるように、カテゴリページをコンテンツ化する方法です。

カテゴリー毎に「カテゴリ色」を設定することも可能なので、エントリーカードも色別で見やすくなります。

カテゴリーを色別に設定できる

その他の機能

その他にも、主な機能を紹介しておきます。

独自の目次機能。

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

内部リンク・外部リンク設定(開き方設定)。

内部リンクと、外部リンクで、それぞれ、リンクの開き方、フォロー状態、付加するrel属性、リンクアイコンを設定する方法です。

ソースコードハイライト機能。

テーマ内でソースコードをハイライト表示し、見やすくする方法の紹介です。highlight.jsプラグインのみを利用したシンプルなものを実装しています。

CTAボックス機能。

Call To Actionは日本語で言えば「行動喚起」。ウェブサイトで、訪問者に訪れて欲しいページに誘導するためのボタンつきボックスです。

この他にも、いろいろな機能があるので詳しくはマニュアルや機能一覧を参照してください。

テーマの利用方法を見やすく一覧にしたマニュアルです。
Cocoonテーマの主な機能・仕様の一覧です。手っ取り早くテーマの概要を把握したい場合などに。

まとめ

こんな感じで、僕がこれまでWordpressでブログ運営をしてきた経験から「この機能があるとブログ運営がはかどる」という機能を、ほぼほぼ取り入れました。

最初から機能豊富に作成するつもりだったので、そのことを念頭において作成したので今のところは無理しているところはほぼないです。

なので、機能豊富でもパフォーマンス的な影響はほぼないかと思っています(※パフォーマンスが悪そうな部分を見つけたらフォーラムで教えていただければ修正します)。

現在、テストバージョンとして、こちらからダウンロードできるようになっています。

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

ただ現在は、「不具合があった場合の修正」を重視したいので、登録ユーザーのみに公開しています。

メールアドレスのみで無料登録できるので、動作確認にご協力いただける場合は、登録するとダウンロードできるようになっています。

当サイトのフォーラム用にユーザー登録を行って、サイト情報、SNSページ等をプロフィールページに表示する方法です。

しばらくテストバージョンとして様子を見た後で、パブリック状態でもダウンロードできるようにしようと思っています。

サイト 無料WordpressテーマCocoon

『無料WordPressテーマ「Cocoon(コクーン)」を公開しました』へのコメント

  1. 名前:SF映画 投稿日:2018/03/19(月) 17:39:03 ID:050bd82b2

    すげー
    思わず生唾コクーンです

    古いものに
    いつまでもしがみつくのでなく
    廃れる前に
    勇気を持って切り捨てないとね

    検索アルゴリズムだって
    どんどん進化していくし

  2. わいひら 名前:わいひら 投稿日:2018/03/19(月) 18:50:32 ID:2116864d2

    うまい(笑)
    ありがとうございます。

    当サイトは当分Simplicityを使うつもりなので、Simplicityは完全に切り捨てるわけではなく、今後も不具合対応などは行なっていくつもりです。

  3. 名前:マタスー 投稿日:2018/03/19(月) 19:52:50 ID:7cfb500e8

    Simplicity2を愛用させていただいております。

    Cocoonはさらに使いやすく、魅力的なものになりそうですね…!スゴイ!

    いつも素晴らしいツールを作成・公開して頂き、ありがとうございます。

  4. 名前:ボヘミアン 投稿日:2018/03/19(月) 21:53:08 ID:0a2369180

    コクーンのリリースおめでとうございます。

    ぜひ利用させていただきます。

  5. 名前:わいひら様に足を向けて寝られない 投稿日:2018/03/19(月) 22:02:56 ID:5bd2fe908

    いつも素晴らしい作品を有難うございます。感謝。

  6. 名前:けしけし 投稿日:2018/03/20(火) 00:19:38 ID:0c9938ba3

    わいひらさん、またまたありがたいテンプレートを作成しましたね!
    Simplicity2から移行する場合に気をつける点などはありますでしょうか?

  7. 名前:ひまわり 投稿日:2018/03/20(火) 00:41:30 ID:e8de43c03

    コクーンのリリースおめでとうございます。
    Simplicityがとても素晴らしいテーマなので、
    後継?のCocoonには期待度MAXです。ヾ(*≧∀≦)ノ゙
    繭(まゆ)という意味なんですね。もしかしてお蚕様からかな?

    ページ毎のウィジェットはプラグインを使ってるのですが、標準装備は
    うれしい!吹きだし機能も欲しかった!!

  8. わいひら 名前:わいひら 投稿日:2018/03/20(火) 00:54:07 ID:39a4bb09a

    みなさん、ありがとうございます!
    少しでもお役に立てるテーマになれば嬉しいです。

    Simplicity2から移行する場合に気をつける点などはありますでしょうか?

    HTML構造が変わっている部分があるので、子テーマで行ったstyle.cssの変更は適用されない可能性もあります。
    また、PHPテンプレートの変更も同様です。
    全く別物のテーマとして移行を考える必要があるかもしれません。

    繭(まゆ)という意味なんですね。もしかしてお蚕様からかな?

    基本的には、「繭のような白いシンプルなテーマ」ということと、「Cocoonには居心地の良い家」という意味があるということからつけました。
    あと、Cocoonという響きも格好いいので(←これ重要・笑)

  9. 名前:Aya 投稿日:2018/03/20(火) 08:19:09 ID:c3bc99fb7

    いつもありがとうございます。
    Simplicityに続き、とても素晴らしいテーマですね。

    ユーザー参加させていただきます!

  10. 名前:副ブロ 投稿日:2018/03/20(火) 08:28:58 ID:d3f9f66e2

    はじめまして!

    Cocoon すげぇ~!! 
    というのが、第一印象です。

    先ほどスマホで
    「そろそろ2つ目のブログ立ち上げ準備始めようかなかなぁ…」
    と思って検索してた時に、愛用しているテーマ

    Simplicity2(子)についておさらいのつもりで訪問したら、
    グットタイミング!!

    サラッとみて、
    マジすげぇ~!!

    と感動しております。
    私が初めてブログを知って情報商材を買った時と同じくらい、
    いや、それ以上にワクワクしてきました。

    HTMLとかPHPとか全くウトイ私にピッタリです。
    これからも勉強する気は有りません。よぅ分からんので。

    そんな私ですが、4月あたりに立ち上げ予定の第2ブログで
    Cocoon を使わせて頂きます。

  11. わいひら 名前:わいひら 投稿日:2018/03/20(火) 08:40:29 ID:39a4bb09a

    皆様のお役に立てるテーマに成長できれば嬉しいです。
    もし、不具合等ありましたらフォーラムにご連絡いただければ幸いです!

  12. 名前:もりとも 投稿日:2018/03/20(火) 08:53:19 ID:8461089fe

    繭のような文字ですね

    スマホは読めるけど
    PCでは
    ちょっと読みづらいなー

    左右のマージンはちょうどいい
    画像のマージンはなくしたい

    以上は個人の感想で要望ではありません

  13. わいひら 名前:わいひら 投稿日:2018/03/20(火) 20:51:00 ID:39a4bb09a

    今回デフォルトで使った、フォントは確かにちょっとぼやっとしているかもしれません。

    一応、テーマ設定からフォントは変更できるようにはなっているのですが、デフォルトって大事ですものね。

    参考にさせていただきます。
    ありがとうございます。

  14. 名前:ヒロ 投稿日:2018/03/22(木) 09:50:01 ID:d9484fb2d

    いつも技術系情報拝見させていただいています。
    これからの更新も楽しみです(‘ω’)

  15. 名前:salon205 投稿日:2018/03/23(金) 15:54:57 ID:d2a161364

    これから本格的にブログを始めようと、いろいろ構想していたところにgood タイミング過ぎて、
    「これは、さい先良いぞ。」と、嬉しいです。
    ユーザー登録させていただきました。

    ありがとうございます。
    よろしくお願いいたします。

  16. 名前:mznstk 投稿日:2018/03/23(金) 17:11:19 ID:38ab3dadc

    こんにちは。40代半ばでWP開始して2年ほど。「あれはどうやってやるの」「これはみんなどうしているの」というのを一つずつ体験してきましたが、それ+それ以外の作者さんの経験が全部入ってて素敵!と思ってさっそくテーマ着せ替えしようと思いましたが、まだ公開じゃないんですね。公開になったらぜひ使いたいです。

  17. 名前:ボヘミアン 投稿日:2018/03/25(日) 21:28:43 ID:ddbf3e99d

    本日、Simplicity2からCocoonに移行しました。
    特に問題もなく動作しています。

    素晴らしいテーマをありがとうございます。

  18. わいひら 名前:わいひら 投稿日:2018/03/26(月) 23:24:24 ID:909d4d596

    みなさん、書き込みありがとうございます!
    テーマが少しでも、サイト運営の手助けになれば幸いです。

  19. 名前:伊具根 満 投稿日:2018/03/30(金) 13:52:38 ID:089022130

    多言語化できるプラグインはどれか
    不具合はないか
    グローバル化時代に対応するにはどうすべきかを探っています。
    ぜひご教示ください。

    いぐね まん

  20. わいひら 名前:わいひら 投稿日:2018/04/02(月) 11:33:06 ID:bdabfab1f

    Cocoonテーマを多言語化するということですか?

  21. 名前:あんとん 投稿日:2018/04/04(水) 10:47:43 ID:7fc068474

    わいひらさん、こんにちは。
    Cocoon ダウンロード、インストールさせていただきました。
    わいひらさんの解説、ユーザーの皆様の質問などを拝見して、とりあえず、PCとスマホでの見栄えだけ整えました。
    コンテンツは旧サイトからインポートしたものがすべてなので、これから修正していく予定です。
    とても素晴らしいテーマだと思います。
    ずっと使用させていただきたいと思います。
    ありがとうございます。(#^.^#)♪

  22. わいひら 名前:わいひら 投稿日:2018/04/04(水) 10:57:33 ID:8b89f2964

    こんにちは。
    ありがとうございます!
    テーマが少しでもサイト運営のお役に立てば幸いです。

  23. 名前:副ブロ 投稿日:2018/04/05(木) 10:22:13 ID:6a9cc60f9

    Cocoonを快適に利用しております。

    詳しいことはよく分からない私、
    1ユーザー目線の意見として
    すばらしいですね!

    最近、ネットニュースでは
    Googleのモバイルファーストインデックス関連のニュースが
    非常に多く飛び交っています。

    そこで、Simplicityから更に進化した
    Cocoon はまさに
    鬼に金棒!という感じを受けました。

    ブログって文章書いてナンボと思うのですが、その文章を
    書くこと以外に時間や労力を取られないのが、
    コクーンのすばらしいところだと感じてます。

    今後とも末長く利用させて頂きたいと思います。

  24. わいひら 名前:わいひら 投稿日:2018/04/06(金) 11:42:28 ID:a401729cb

    そこまでお褒めいただいて恐縮です。

    最近ほんと、Googleはモバイルファーストと高速化に力を入れている感じですよね。

    Cocoonは、そこも一応踏まえつつ、「本文に力を注ぎ込めるように」と作ったテーマなので、そのように言っていただけると作った甲斐がありました。

    ありがとうございます。

  25. 名前:ケンジ 投稿日:2018/04/16(月) 21:25:24 ID:57fff1322

    早速使わせてもらってます。
    凄いですねこれ!
    無料で使えるのが申し訳ないレベルです!

    僕はアフィリエイトに取り組んでますが、今のところsimplicityのお陰でかなり成果が出てます。
    Cocoonも使って更に頑張っていこうと思います。
    使いやすいテーマを開発してくれて本当にありがとうございます!

  26. わいひら 名前:わいひら 投稿日:2018/04/19(木) 12:27:33 ID:81a8abb69

    そう言っていただけると嬉しいです!

    ただ、センスのある方はどんなテーマを使っても、成果を出されるかもしれません。
    Simplicityで、月間数百万を稼いでおられるという、報告を結構いただくので。
    なので、成果は完全にケンジさんのサイト作成能力の賜物かと思います!