当サイトのワードプレス（WordPress）のデザインテーマをコクーン（Cocoon）に変更しました。これまではライトニング（Lightning）というテーマを利用していましたので見え方が少し変わってきます。
テーマを変更した理由は、ユーザーがスマホで表示した場合の閲覧性を高めるためです。ライトニングよりコクーンのほうがスマホでの表示設定を容易に変更できました。また、カスタマイズもしやすく動作も安定しているのでおすすめです。
コクーン（Cocoon）にデザインテーマを変更
本日、当サイトのデザインテーマをコクーンに変更しました。
パソコンのブラウザでの表示はシンプルに
パソコンのブラウザでの表示はとてもシンプルな表示になりました。
▼コクーン（Cocoon）での見え方
薄いグレーとホワイトをベースにしたシンプルなデザインスキンにしました。
なお、これまで使っていたライトニング（Lightning）だと以下のような見え方でした。
▼ライトニング（Lightning）での見え方
こうやって比較するとかなり違うように感じますが、数名の方に聞いたところテーマを変更したことには気づいていませんでした。
その後もう少し修正してヘッダに背景画像をいれさらに「カルーセル」も設置してみました。
このようにコクーンはデザインの変更が容易です。これはありがたいですね。
PCでの表示でカラムは682に変更しました
Cocoon設定というところで種々の設定ができます。上部のタブにまとめられているので、多数の項目があるわりには探しやすくなっています。
PCでの表示サイズは基本設定のメインカラムのコンテンツ幅「800」から少し変更し、コンテンツ幅を「682」にしました。
なんだか微妙な数字ですが
・ヘッダやフッタと本文コンテツの幅を揃えたい
・これまで使ってきた画像サイズは640がほとんど
ということで、いろいろと微調整した結果の落としどころがこのメインカラム設定のコンテンツ幅「682」です。
最初からコクーンを使っている場合はさわる必要がないところだと思いますが、既存のテーマから変更した場合は調整したほうがいいですね。
スマホでは常時メニューが表示されます
一方で、スマホでの表示はわかりやすくなります。コクーンでは標準でスマホ用のメニューが表示されます。
スマホ用のフッタメニューを常設し、常時表示できるようにしました。このことにより、スマホでブログ記事を閲覧した後に、別のページへの遷移がスムーズにしやすくなります。
なお、スマホ用のメニューは後日さらに変更して、上下とも別のメニューにしました。
また、検索画面も表示しやすくなります。
コクーンの設定は容易です
今回、テーマを変更しましたが、コクーンへの変更や設定はそれほど難しくありません。そもそもワードプレスのままなので、パーマリンクが変わるわけでないですし、大々的な変更ではありません。
コクーンの最新バージョンは2.5.1です。
https://wp-cocoon.com/2-5-1/
表示に関してもしも不具合があれば追加で修正していきます。
コクーンを使うことでいくつかのプラグインが不要になりました
コクーンは多機能です。これまで専用のプラグインを使って設定していた機能がコクーンのテーマ内で設定できるようになりました。そこで重複する機能に関しては、コクーンの設定を優先するようにした結果、複数のプラグインが不要になりました。
機能を停止したプラグインは以下のとおりです。
・PWA for WP（PWAを有効化するプラグイン）
・Easy Table of Contents（目次を生成するプラグイン）
・Contextual Related Posts（関連記事を表示するプラグイン）
・Featured Image Admin Thumb（サムネイル画像を自動生成するプラグイン）
これらのプラグインは優秀でしたが、使わずに済むならそのほうがワードプレスの動作が安定し表示速度向上も期待できます。
コクーンというテーマが多機能なことがわかりますね。
吹き出し機能がついています
コクーンには「吹き出し」という機能がついています。
吹き出し機能って、思わず笑ってしまう
ような面白いことを書くんですか？
そうですね。
身体中まっしろな犬なんかいいですね。
尾も白いでしょ～（笑）
ふふふ、私なら
ホワイトキックだ。
ホワイトキックって
白ける…ですか（笑）
ナイスボケですね。
こんな感じの対話形式でわかりやすく情報を紹介することができます。FAQ（よくある質問と回答）なんかに使うのに適していると思います。
吹き出し機能の使い方
▼吹き出しを挿入のする画面
「ブロックエディタ」を使って「吹き出し機能」を実現しているプラグインがありますが、コクーンの吹き出し機能は「クラシックエディタ」のままでも使えます。しかも簡単でわかりやすいです。
コクーンについての解説ページ
エックスサーバーのワードプレス簡単インストール機能ならすぐに使えます
https://www.dm2.co.jp/blog/16876
カルーセルとはメリーゴーランドのことですがWEBサイトではヘッダー直下で関連記事がぐるぐる回る表示形式のことです
https://www.dm2.co.jp/blog/18318
コクーンを使ってみようと思った方は上記のページ内容も参考にどうぞ。
コクーンはエックスサーバーの所有になっているようです
コクーンはもともと、わいひらさんという方が開発して作り込んできたテーマです。
そのわいひらさんからエックスサーバーにコクーンの権利が譲渡されています。時期的には2022年の秋頃のようです。
Cocoonをエックスサーバーに事業譲渡した理由
https://nelog.jp/business-partnership-between-cocoon-and-xserver
上記の内容のなかに
この度、僕がこれまで開発・運営していた「無料WordPressテーマのCocoon事業」を、「エックスサーバー株式会社」に事業譲渡させていただくことになりました。
加えて、今後もこれまでと同様に僕が開発・運営に関わっていく業務提携も行いました。
という説明があります。
譲渡理由には「Cocoonテーマ事業の継続性を強化したかった」というコメントもあります。
利用者がこれだけ多いテーマですから、エックスサーバーという大手の企業が組織的にサポートしてくれるということはありがたいですね。感謝です。
コクーンの特徴をまとめました
日本製のWordPressテーマ「Cocoon」は、多機能で使いやすいことで人気のある無料テーマです。以下にその特徴を箇条書きでまとめておきます。
- テキスト装飾: 色付きマーカー、情報ボックス、バッジなど、ほとんどのテキスト装飾がワンクリックで可能です。
- スピーチバルーン: スピーチバルーンを簡単に挿入でき、プリセットのアイコンやカスタムイラストレーションを使用できます。
- テンプレート: 頻繁に使用するテキストブロックのテンプレートを作成・使用できます。
- トグルボックス: コンテンツを動的に表示または非表示にするトグルボックスを提供します。
- ショートコードとアフィリエイトタグ: Adsense広告やAmazon商品リンクの挿入を容易にします。
- カスタマイズ: サイトデザインのカスタマイズオプションを提供し、スキンの変更や背景色の選択が可能です。
- 広告コントロール: 広告の配置をコントロールする機能を提供し、自動設定と手動設定の両方が可能です。
- SEO機能: SEO最適化に関連する設定を含んでいます。
- モバイル設定とAMP: モバイル専用の設定とアクセラレーテッド・モバイル・ページ（AMP）をサポートします。
- 通知・アナウンスエリア: ブログページや製品のランディングページにリンクする通知やアナウンスエリアの設定を可能にします。
- フィーチャーカード: ブログのトップページにイメージメニューやウィジェットでカテゴリ、タグ、特定の投稿/ページを表示するフィーチャーカードを提供します。
- カルーセル: コンテンツをカルーセル形式で表示するオプション機能。
- CTAボックス: ウェブサイトの様々なエリアにコール・トゥ・アクションボックスを追加するサポート。
- ウィジェット: Cocoonには、新しい記事、関連記事、ソーシャルメディアフォローボタン、プロファイル表示などを含む、多数のウィジェットエリアとユニークなウィジェットがあります。
エックスサーバーの利用開始はこちらからどうぞ
【広告】
https://www.xserver.ne.jp/
新規契約でもサーバー移転でも、エックスサーバーに興味があれば上記のリンクから仕様をご覧になってみてください。
上記のリンクからそのまま契約までいくと、今なら5000円のキャッシュバックがあるようです。（年払いの場合、キャッシュバックなどの特典は時期により内容が変わります。特典内容はこちらをご覧ください）
なお、私にもなんらかの特典があるようなので、契約するときのリンクはぜひ上記のバナーからおねがいします（笑）
この記事を書いた遠田幹雄は中小企業診断士です
遠田幹雄は経営コンサルティング企業の株式会社ドモドモコーポレーション代表取締役。石川県かほく市に本社があり金沢市を中心とした北陸三県を主な活動エリアとする経営コンサルタントです。
小規模事業者や中小企業を対象として、経営戦略立案とその後の実行支援、商品開発、販路拡大、マーケティング、ブランド構築等に係る総合的なコンサルティング活動を展開しています。実際にはWEBマーケティングやIT系のご依頼が多いです。
民民での直接契約を中心としていますが、商工三団体などの支援機関が主催するセミナー講師を年間数十回担当したり、支援機関の専門家派遣や中小企業基盤整備機構の経営窓口相談に対応したりもしています。
保有資格：中小企業診断士、情報処理技術者など
会社概要およびプロフィールは株式会社ドモドモコーポレーションの会社案内にて紹介していますので興味ある方はご覧ください。
お問い合わせは電話ではなくお問い合わせフォームからメールにておねがいします。新規の電話番号からの電話は受信しないことにしていますのでご了承ください。
【反応していただけると喜びます（笑）】
記事内容が役にたったとか共感したとかで、なにか反応をしたいという場合はTwitterやフェイスブックなどのSNSで反応いただけるとうれしいです。
遠田幹雄が利用しているSNSは以下のとおりです。
facebook https://www.facebook.com/tohdamikio
ツイッター https://twitter.com/tohdamikio
LINE https://lin.ee/igN7saM
チャットワーク https://www.chatwork.com/tohda
また、投げ銭システムも用意しましたのでお気持ちがあればクレジット決済などでもお支払いいただけます。
※投げ銭はデジタルコンテンツ購入という通販のしくみにしました。
※投げ銭は100円からOKです。シャレですので笑ってください（笑）
