当サイトのデザインテーマをコクーン（WordPressのCocoon）に変更しました

2023.02.032024.05.23

この記事は約7分で読めます。

当サイトのワードプレス（WordPress）のデザインテーマをコクーン（Cocoon）に変更しました。これまではライトニング（Lightning）というテーマを利用していましたので見え方が少し変わってきます。
テーマを変更した理由は、ユーザーがスマホで表示した場合の閲覧性を高めるためです。ライトニングよりコクーンのほうがスマホでの表示設定を容易に変更できました。また、カスタマイズもしやすく動作も安定しているのでおすすめです。

このページの目次

コクーン（Cocoon）にデザインテーマを変更
コクーンの設定は容易です
1. コクーンを使うことでいくつかのプラグインが不要になりました
2. 吹き出し機能がついています
  1. 吹き出し機能の使い方
コクーンについての解説ページ
1. コクーンの特徴をまとめました
エックスサーバーの利用開始はこちらからどうぞ

コクーン（Cocoon）にデザインテーマを変更

本日、当サイトのデザインテーマをコクーンに変更しました。

パソコンのブラウザでの表示はシンプルに

パソコンのブラウザでの表示はとてもシンプルな表示になりました。

▼コクーン（Cocoon）での見え方

薄いグレーとホワイトをベースにしたシンプルなデザインスキンにしました。

なお、これまで使っていたライトニング（Lightning）だと以下のような見え方でした。

▼ライトニング（Lightning）での見え方

こうやって比較するとかなり違うように感じますが、数名の方に聞いたところテーマを変更したことには気づいていませんでした。

その後もう少し修正してヘッダに背景画像をいれさらに「カルーセル」も設置してみました。

このようにコクーンはデザインの変更が容易です。これはありがたいですね。

PCでの表示でカラムは682に変更しました

Cocoon設定というところで種々の設定ができます。上部のタブにまとめられているので、多数の項目があるわりには探しやすくなっています。

PCでの表示サイズは基本設定のメインカラムのコンテンツ幅「800」から少し変更し、コンテンツ幅を「682」にしました。

なんだか微妙な数字ですが
・ヘッダやフッタと本文コンテツの幅を揃えたい
・これまで使ってきた画像サイズは640がほとんど
ということで、いろいろと微調整した結果の落としどころがこのメインカラム設定のコンテンツ幅「682」です。

最初からコクーンを使っている場合はさわる必要がないところだと思いますが、既存のテーマから変更した場合は調整したほうがいいですね。

スマホでは常時メニューが表示されます

一方で、スマホでの表示はわかりやすくなります。コクーンでは標準でスマホ用のメニューが表示されます。

スマホ用のフッタメニューを常設し、常時表示できるようにしました。このことにより、スマホでブログ記事を閲覧した後に、別のページへの遷移がスムーズにしやすくなります。

なお、スマホ用のメニューは後日さらに変更して、上下とも別のメニューにしました。

スマホメニューをカスタマイズして上部と下部に別々のモバイル専用メニューを設置しました

当サイトは、スマホ用のメニューをカスタマイズして、上下２箇所に設置しました。このようなモバイル専用メニューのカスタマイズは無料のワードプレステーマでは難しいので、外部のデザイナーさんに外注依頼することが多いですが、コクーン（Cocoon）なら比較的簡単に自分でカスタマイズできます。今回はそのやり方について紹介します。

また、検索画面も表示しやすくなります。

コクーンの設定は容易です

今回、テーマを変更しましたが、コクーンへの変更や設定はそれほど難しくありません。そもそもワードプレスのままなので、パーマリンクが変わるわけでないですし、大々的な変更ではありません。

コクーンの最新バージョンは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には、新しい記事、関連記事、ソーシャルメディアフォローボタン、プロファイル表示などを含む、多数のウィジェットエリアとユニークなウィジェットがあります。