WordPressテーマ「Cocoon」をカスタマイズ！ジャンル特化型ランキングデモサイトを作ってみた

当ページのリンクには広告が含まれています。

2023年10月27日2024年5月1日

無料のWordPressテーマ「Cocoon」を使ってジャンル特化型ランキングサイトにカスタマイズしてみました。正直こんなにCocoonの装飾機能が優れているとは思っていませんでした。操作も口コミの中には難しいというコメントもありましたので、その辺りじっくり解説していきたいと思います。

Cocoonで作ったジャンル特化型ランキングサイト

今回は無料のワードプレステーマ「Cocoon」を使ってジャンル特化型ランキングサイトを作りました。今後も用途に応じてランキングサイトをいくつか作って比較していきたいと思います。よろしくお願いします。まずは論より証拠ではないですが、サイトを見てもらえたらと思います。

デモサイトを見る

第一印象はどうでしたか？Cocoonを侮（あなど）っていませんでしたか？それでは、１つずつカスタマイズしたポイントを紹介していきます。

Cocoonの機能紹介

Cocoonの機能について紹介していきます。細かな設定がどうのこうのは省略しますが、どんなことが表現できるのか、使えそうな機能はないかという視点で読んでもらえたらと思います。

サイト配色

Cocoonでは標準で装備されているスキンを使うことによって、デザインは配色が決まってしまいます。Cocoon設定のスキンで切り替えることができます。デモサイトでは、「Veilnui Simplog(green)」を使いました。ただ、カラーコードを使って色をカスタマイズはできないところが物足りなさを感じるかもしれません。

プロフィール画像

サイト運営者情報があると親近感が出てきます。今回はキャラクターとして画像を載せています。ここもできるだけオリジナルキャラクターを作ったり、実際の顔写真があるとより親近感が出てきます。Cocoonには標準でウィジェットの中にプロフィールがありますが、物足りなさがあるため別でテキストを使ってプロフィールを用意しました。

ヘッダー画像

CocoonはCocoon設定のアピールエリア設定という場所で、オリジナルヘッダーを組み込むことができます。

記事スライダー

Cocoonには標準で記事スライダー機能が装備されています。Cocoon設定のカルーセル設定で設定できます。

ロゴ

Cocoonではロゴの設定もできます。Cocoon設定のヘッダー設定にてオリジナルのロゴを設定できます。場所もデモサイトのような中央だけでなく、左寄せや右寄せ、スリムなど８個の選択から選ぶことができます。

アクセス解析

アクセス解析も装備されています。GA4対応です

サイトの幅設定

サイトの幅設定はCocoon設定のカラムでできます。コンテンツ幅、コンテンツ余白幅、サイドバー幅など一通り設定が可能です。

見せる動的な円グラフ化

Cocoonで私が一番感動したことは、この円グラフです。しかも動的です。動きます！これは他の有料テンプレートでも標準では付いているテーマがないと思います。やろうとすればプラグインを別途入れる必要があるので、Cocoonのこの機能は素晴らしい！

記事投稿画面の「評価円動き」ボタンを押して、あとは点数を入力するだけです。とても簡単です！

スクロール付き表

これはパソコン画面だと文字が全部入ってしまうためわかりづらいのですが、スマホやブラウザを小さくしてもらうと「スクロールできます」という文字が表れます。これはすごく便利な機能ですよね。Cocoonの標準で装備されているのは素晴らしい！です。このスクロールは表を作成すればあとは勝手に画面サイズに合わせて表示されます。