エックスサーバー＋わいひら開発
シンプルなWordPressテーマ「Cocoon」
Cocoonは、SEO・高速化・モバイルフレンドリーに最適化した無料テーマです。
見た目はシンプルですが、初めての方でも感覚的に使えるように便利な機能を織り込んで作りました。
100％GPLテーマなので自由にご利用いただけます。
WordPressを利用中ならダウンロードはこちら最短10分でらくらくWordPressブログ開設エックスサーバー × Cocoonで始める

トップページ

Powered by エックスサーバー

「Cocoon」は、安定した開発を継続するため、2022年9月に「エックスサーバー株式会社」へ事業譲渡し、あわせて業務提携を行いました。現在、開発・運営・サポートは、エックスサーバーとわいひらの共同で行っています。

詳細はこちら

＼Cocoonのおすすめポイント／

1

活発なフォーラムと
充実のサポート体制

2

多機能で
プラグインの削減が可能

3

定期的な
アップデート

Cocoonは、初心者にも使いやすく、カスタマイズ性に優れた無料のWordPressテーマです。
エックスサーバーとわいひらが共同開発しており、安心してご利用いただけます。

また、同開発陣による有料テーマ「XWRITE（エックスライト）」は、ブロックエディターに完全対応し、より直感的なサイト制作が可能です。
ご自身にぴったりのテーマを選んで、快適なサイト制作を始めましょう。

無料テーマ

こんな方におすすめ

  • できるだけお金をかけずにブログをはじめたい方
  • 多くの利用者からの知見を得たい方

料金

無料

エディター

  • ブロックエディター対応
    （ウィジェットは標準クラシック対応）

ブロック

  • オリジナルブロックが26種類！
  • 他所であまり見ないブロックも搭載！

計測

  • 日、週、月、全体のアクセス数を計測可能！

PC・
スマホ表示

  • レスポンシブ対応！
  • PCとスマホで同じコードを表示！

デザイン

  • WordPress標準のカラーパレットを使用可能！
  • カスタムテキストを使ったCSSでのデザインが可能！
Cocoonをダウンロード

同開発陣による有料テーマ

こんな方におすすめ

  • 直感的なエディターを求めている方
  • ノーコードでサイトのデザインを調整したい方
  • ライティングを効率化したい方

料金

サブスク月額

990円／月

サブスク年額

9,900円／年

買い切り
(追加料金なし)

19,800円

エディター

  • ブロックエディター完全対応

ブロック

  • カスタマイズ性の高いオリジナルブロックが20種類以上！
  • リストやテーブルなどの標準ブロックの使い勝手も抜群！
  • 週に1回の速度で更新中！

計測

  • 各ボタンやリンクなど、要素ごとに表示回数、クリック数、クリック率の計測が可能！

PC・
スマホ表示

  • レスポンシブ対応！
  • ブロック単位で異なる表示が可能！

デザイン

  • カラーパレットのカスタマイズが便利！
  • ブロックごとにデザインのカスタマイズが豊富！
  • ヘッダーの透過設定など今風のデザインに対応！
XWRITE公式サイトへ

無料テーマ「Cocoon」の特長

Cocoonは、繭のように白い、シンプルなテーマです。
WordPressを新たに始める方の「居心地のいい場所」となれるよう、Cocoonの機能が包む（補完する）形で
「面倒事から保護してくれるように」という願いで作成しました。以下のような特長を備えています。

無料のテーマ

Cocoonは無料で利用できるテーマ。コストを抑えたい人にぴったりです。設定が簡単でカスタマイズが豊富なので、初心者から中級者におすすめです。

Cocoonをダウンロード

SEO施策済み

テーマ自体がSEO対策のために最適化されています。内部SEO対策がしっかりしていることで、検索エンジンから評価されやすくなります。

詳細はこちら

カスタマイズ性

管理画面での簡単な設定や、専用のウィジェットエリアなど、たくさんの機能を持ち、自由度の高いカスタマイズが可能です。

詳細はこちら

広告管理機能

GoogleアドセンスやAmazonリンクの作成機能があり、広告の表示位置やデザインも簡単に変更できます。

詳細はこちら

モバイルフレンドリー

レスポンシブデザインが採用されているため、スマートフォンやタブレットでも見やすい表示が可能です。

詳細はこちら

フォーラムの充実

活発なユーザーコミュニティとサポートフォーラムがあり、問題が発生した際の質問やコメントが行いやすいです。

フォーラムはこちら

Cocoonの機能紹介

結局一番大事なのはコンテンツです。
ただ、コンテンツ自体は、ユーザーさんが作成するもなので、テーマ側が何とかできるものではありません。
Cocoonは、「コンテンツを作成するのであればできる限り簡単に使いやすく」ということで、
様々なコンテンツ作成を補助する仕組みを装備しています。

1. 吹き出し機能

吹き出し機能で、訪問者の目を引いたり、読みやすくできます。

ビジュアルエディターでもほぼ公開ページと同様に表示されるため、記事の完成形を意識しながら利用できます。

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

2. 定型文のテンプレート化機能

ブログ記事を書いていて、「あれ、この文章、前もおなじようなのを書いていたな…。」と思うことはないでしょうか？

そんな時Cocoonでは、テンプレートに登録して、ショートコードで呼びだすことが可能です。

テンプレート文（定型文）を登録して使い回す方法
テーマ内に定型文を登録してショートコードで何度でも使い回す方法です。
wp-cocoon.com
2018.04.04

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

収益サイトを運営していると、アフィリエイトタグの管理が非常に面倒です。
タグのリンク切れ・仕様変更や、広告リンクの差し替えによって複数の記事にわたって修正した経験はないでしょうか？
Cocoonの場合、ショートコードを挿入することで、アフィリエイトタグを使い回すことができます。

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

4. ランキング作成

Cocoonでは、ランキングを何個も作成し、その中から手軽に掲載できます。
作成したランキングは、ビジュアルエディターのドロップダウンリストから選択して挿入します。

ランキングでもアフィリエイトタグ管理機能で登録したショートコードを利用できます。

商品・サービスランキングを作成して配置する方法
商品やサービスなどの独自ランキングを作成してウィジェットで配置する方法の紹介です。ランキング機能の使い方。
wp-cocoon.com
-0001.11.30

5. ブログカード

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

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

6. 文章の装飾

ブログ文章を読みやすくする上で、装飾も重要かと思います。
Cocoonでは、よく利用する装飾があらかじめ用意してあり、ビジュアルエディターから手軽に挿入できます。

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

記事作成に使える拡張スタイル。インライン編。
Wordpress本文を彩る拡張スタイル（拡張クラス）の紹介です。見た目とソースコードをあわせて紹介しています。
wp-cocoon.com
2019.04.12

他にも、「補足説明をするボックススタイル」「ボタン」「バッジ」等いろいろな拡張スタイルがあります。詳細はマニュアルをご覧ください。

7. カスタマイズ

基本的に、WordPressテーマの設定といえばテーマカスタマイザーを使います。
ただ、テーマカスタマイザーを使うと「設定エリアが狭い」とか「設定動作が遅い」などの不満がありました。

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

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

Cocoonは、あらかじめ多数のウィジェットエリアを用意しています。
「テンプレートファイルをカスタマイズするよりは、ウィジェットエリアで手軽に挿入できた方が利便性が高い」という考えのもと、このような仕様にしています。
これにより、「入れたい場所にウィジェットを挿入できる」というのはもとより、「テンプレートをカスタマイズして失敗するリスクを減らす」というメリットもあります。

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

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

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

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

機能はまだまだたくさんあります。他の機能や詳しい使い方は「マニュアル」をご覧ください。

新着情報

Cocoon記事のタイトルからアイキャッチを自動生成する方法
Cocoon 2.8.4から投稿・固定ページ等のタイトルからアイキャッチを作成できる機能が追加されました。まだベータ版機能なので、しばらく試験運用した後、仕様が多少変わることもあるかもしれないのであらかじめご了承ください。アイキャッチ生成機...
Cocoon 2.8.4公開。タイトルからアイキャッチを生成する機能を追加
Cocoon 2.8.3からの変更点です。今回のバージョンから、WordPressの必須環境が、5.7から6.1になりました。必ずWordPress 6.1以上でご利用ください。ただ推奨環境として、WordPress最新版を利用することをお...
Cocoon 2.8.3公開。主に設定などの表記揺れ修正と不具合修正
Cocoon 2.8.2からの変更点です。今回は、主に設定項目の表記揺れ修正と不具合修正がメインです。機能追加 環境情報のコピーボタンを追加（https環境）環境情報のコピーボタンを追加Cocoon設定の「テーマ情報」タブにある「環境情報」...
Cocoon 2.8.2公開。主に細かな不具合の修正
Cocoon 2.8.1からの変更点です。アップデートgrayishスキンのアップデート v2.0.4対応していなかった翻訳部分を更新機能廃止「Cocoon設定」→「Xポスト設定」→「プロモーション」→「ツイート後にフォローを促す」設定を廃...
Cocoon 2.8.1公開。WordPress 6.7.0からの不具合対応やその他不具合対応
Cocoon 2.8.0からの変更点です。機能追加「Cocoon設定」→「タイトル」→「フロントページ設定」→「サイトの説明」に「メタディスクリプションタグを出力する」オプションを追加「Cocoon設定」→「タイトル」→「フロントページ設定...

ダウンロード

Cocoonは公式サイトから自由にダウンロードでき、インストールも簡単です。
エックスサーバーを使用することで、最短10分でブログを立ち上げることができます。

WordPressを利用中の方はこちら
Cocoonダウンロード
最短10分でらくらくWordPressブログ開設
エックスサーバー × Cocoonで始める

フォーラム

フォーラムで質問やディスカッションを行うことができます。
不明点等はこちらで質問してみてください。

Cocoonのフォーラムへ
タイトルとURLをコピーしました
'); /* ヘッダーの高さの変化分、paddingで調整しスクロール位置を止まらせる */ $("#header-fixed").css({ 'padding-top': `${threashold}px`, }); /* トップメニュータイプに変更する */ $("#header-container-in").removeClass('hlt-center-logo hlt-center-logo-top-menu').addClass("hlt-top-menu wrap"); $("#header-container").addClass("fixed-header"); $("#header-container").css({ 'position': 'fixed', 'top': '-100px', 'left': '0', 'width': '100%', }); const wpadminbar = document.getElementById('wpadminbar'); const headerContainerTop = wpadminbar ? wpadminbar.clientHeight : 0; $('#header-container').animate( { top: headerContainerTop, }, 500 ); } } /*固定ヘッダーの解除*/ function staticHeader() { if ($("#header-container").hasClass("fixed-header")) { /*センターロゴタイプに戻す*/ $("#header-container-in").removeClass("hlt-top-menu hlt-tm-right hlt-tm-small hlt-tm-small wrap").addClass(" hlt-center-logo"); $("#header-container").removeClass("fixed-header"); $("#header-container").css({ 'position': 'static', 'top': 'auto', 'left': 'auto', 'width': 'auto', }); /* ヘッダーの高さの戻る分、padding削除しスクロール位置を止まらせる */ $("#header-fixed").css({ 'padding-top': '0', }); $("#header-fixed").remove(); } } /* 境界値をヘッダーコンテナに設定 */ var threashold = $('#header-container').height(); var prevScrollTop = -1; var $window = $(window); var mobileWidth = 1023; $window.scroll(function() { var scrollTop = $window.scrollTop(); var s1 = (prevScrollTop > threashold); var s2 = (scrollTop > threashold); var w = $window.width(); /*スクロールエリアの位置調整*/ function adjustScrollArea(selector) { if ($(selector) && $(selector).offset()) { offset = $(selector).offset().top; h = $("#header-container").height(); pt = $(selector).css('padding-top'); if (pt) { pt = pt.replace('px', ''); } else { pt = 0; } if ((scrollTop >= offset - h) && (w > mobileWidth)) { if ((pt <= 1) && $("#header-container").hasClass('fixed-header')) { $(selector).css({ 'padding-top': h + 'px', }); } } else { if (pt > 0) { $(selector).css({ 'padding-top': 0, }); } } } } /*スクロール追従エリアの調整*/ function adjustScrollAreas() { adjustScrollArea('#sidebar-scroll'); adjustScrollArea('#main-scroll'); } /*固定ヘッダーのスタイル決め*/ function adjustFixedHeaderStyle(s1, s2, w, scrollTop, mobileWidth) { if (s1 ^ s2) { if (s2 && (w > mobileWidth)) { stickyHeader(); } } /* 境界値に達したら固定化 */ if (scrollTop <= threashold || w <= mobileWidth) { staticHeader(); } } adjustFixedHeaderStyle(s1, s2, w, scrollTop, mobileWidth); adjustScrollAreas(); prevScrollTop = scrollTop; }); /*ウインドウがリサイズされたら発動*/ $window.resize(function () { /*ウインドウの幅を変数に格納*/ var w = $window.width(); if (w <= mobileWidth) { /*モバイル端末の場合*/ staticHeader(); } else { /*パソコン端末の場合*/ var scrollTop = $window.scrollTop(); if (scrollTop >= 50) { stickyHeader(); } } }); })(jQuery);