Web

おすすめテーマCocoon3つの魅力– はじめてのWordPress

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
おすすめテーマCocoon3つの魅力– はじめてのWordPress

WordPressでサイトを作るとき、悩むのがテーマ選びです。

以前の記事、『教えて!テーマって何?選び方のポイントは?』でも記述しましたが、

テーマを選ぶ際にはついデザインに目が行きがちです。

でも、無理なく運用を続けるためには、操作性や機能などが自分にあったテーマであるかを調べてから選択することが成功への第一歩だと思っています。

その記事のなかでおすすめのテーマとして「Cocoon」(コクーン)を紹介しました。

「Cocoon」は無料・非公式ながら、機能が充実した優れたテーマです。

実はお客様からの依頼でこのCocoonを使ったサイトを構築し、Cocoonの奥深さに感嘆いたしました。

今回は、その中から「便利だな、使ってみたいな」と思った機能3点をご紹介します。

Cocoonの魅力その1
「デザインスキン動作デモ」

Cocoonの優れた特徴のひとつがスキンの豊富さです。

スキンとは洋服を着替える感覚で手軽にサイトの外観を変更できる機能です。

はてなブログやアメブロなどのブログサービスを利用した経験がある方はご存知だと思いますが、用意されたデザインの中から好みのデザインを選ぶと、ページデザインを変更できる機能がありますよね。

あの機能と同様で、スキンを変えるだけで、色や雰囲気の違うサイトに瞬時に変更することができます。

Cocoonには2021年7月現在、色や雰囲気の違うスキンが80種以上あります。

すごい数ですよね!

まだまだ増えるのではと期待しています。

でも、これだけあるとどれを選べばいいのか、迷ってしまいます。

そこで、 Cocoon公式サイトにはスキン選びのお助けツールとして「デザインスキン動作デモ」が用意されていますので使ってみましょう。

Cocoon公式サイト

パソコンなら公式サイトの右サイドナビゲーションにある「デザインスキン動作デモ」のドロップダウンメニューから試したいスキンを選択すると、そのページが選択したスキンを使ったデザインのページに変化します。

WordPressテーマCocoon公式サイトデザインスキン動作デモ

モバイルなら、フッターメニューの情報ボタン>デザインスキン動作デモ と進み、ドロップダウンメニューから試したいスキンを選択します。

WordPressテーマCocoonモバイル公式サイトデザインスキン動作デモ

「デザインスキン動作デモ」は、気になるスキンを実際に表示させ、じっくり比較しながら選ぶことができるので大変便利です。

ここだけの話ですが、 Cocoon以外のテーマでサイト構築するときでも、色使いやデザインなどの検討にチャッカリ利用させていただいています。

Cocoonの魅力その2
「豊富なショートコード」

Cocoonでは、新規記事一覧表示や広告表示のHTMLパーツを簡単に挿入できる「ショートコード」が用意されています。

(注)2021年7月現在、使用できるショートコードはエディター形式によって異なり

  • 旧ビジュアルエディター形式:20種類
  • Gutenbergエディター形式:15種類

となっています。

使い方は記事作成ツールから、選択するだけ。自動的に本文にショートコードが挿入されます。

WordPressテーマCocoonショートカットコードの使い方

「新着記事一覧」と「人気記事一覧」のショートコードでは、サムネイル画像のサイズ指定、特定のカテゴリのみ表示させる、表示順の指定など細かくオプション指定することも可能です。

Cocoonの公式サイトには、ショートコードの詳しい使い方を説明した『記事作成時に利用できるショートコード集』というページがありますので、初心者でも安心して利用できると思います。

次に気になったショートコードを紹介します。

カウントダウン

ゴールの日付を設定すると、残りの日数を自動的に計算し表示してくれます。

「オリンピックの開会式まであと○○日」なんて表示が簡単にできます。

WordPressテーマCocoonショートカットコードカウントダウンの使い方例

キャンペーン中のみ表示

一定の期間のみ表示させたいコンテンツを指定できます。

セミナーの受付期間中のみ申込みボタンを表示させるとか、特別優待セール期間中の価格を表示させるなど、色々活躍しそうです。

WordPressテーマCocoonショートカットコードキャンペーン期間中のみ表示の使い方例

ただし、2021年7月現在ブロックエディター使用では利用できません。

評価スター

星の数で評価点数を表示することができます。

人気ランキングでよく目にしますよね。

5点満点、10点満点など自由に設定できます。

WordPressテーマCocoonショートカットコード評価スターの使い方例

WordPressテーマCocoonショートカットコード評価スター表示例

評価スターの表示例

Cocoonの魅力その3
「公式サイトの丁寧な説明」

Cocoonの公式サイトでは、Cocoon独自機能の設定方法やカスタマイズ方法など役立つ記事が満載です。

更に、Cocoonの使い方のみならず、レンタルサーバーのエックスサーバーでWordPressサイトを始める手順を詳細に説明したページなど、初めてWordPressでサイトを作りたい人のためのコンテンツも豊富にあります。

Cocoonを使っても使わなくても、初歩的なことから高度なことまで、参考になる記事がたくさんありますので、勉強になります。

まとめ

実際にCocoonを使ってみて、無料なのにここまであるとはと驚いています。

とはいえ、機能がありすぎるのも初心者にはハードルが高いと感じるかもしれません。

でも、紹介したように公式サイトには丁寧な説明がありますので、安心して取り組んでいただけると思います。

また、利用者が多いので独自につくられたマニュアル的なサイトも、たくさん見受けられます。

わからないことがあったら検索しましょう。きっと解決できるサイトが見つかりますよ。