なぜ新しいテーマ Cocoon を採用するのか？
Cocoon（コクーン）は、Simplicityという人気WordPressテーマを開発した「わいひらさん」という方が、最新のテクノロジーを駆使して新たに開発した無料のWordPressテーマです。2018年3月にβ版が公開されて以来改良を重ね、2018年7月1日に正式にリリースされました(Ver.1.0）。その後も、頻繁にアップデートを重ねており、現在では国内でもっとも人気の高いWordPressテーマとなっているといっても言い過ぎではありません。人気の秘密は、つぎのような点にあります。
- カスタマイズがしやすい上に、多機能であること
- 用意されたブログパーツが多く、機能・デザインがすぐれていること
- アフィリエイトに最適な仕組みが用意されていること
- モバイル（スマホ）でも使いやすいこと
- ユーザーへの対応が行き届いていること
カスタマイズがしやすい上に、多機能であること
7月までホームページ教室で使っていたLuxeritusテーマも、カスタマイズ項目はかなり多くて重宝していたのですが、「カスタマイズ」画面のサイドバーにカスタマイズ項目メニューが配置されていて、どのメニューを開けば、どこをカスタマイズできるかが、非常に分かりにくかったことも事実です。ひとことでいえば、カスタマイズ項目の検索性があまりよくなかったということです。これは、サイドバーという窮屈な画面にカスタマイズ項目を配置せざるをえなかったのが原因と思われます。
これに対し、Cocoonでは、発想を転換して、「カスタマイズ画面」ではなく、管理画面に「Cocoon設定」メニューを置くことによって、2次元的なタブ形式のカスタマイズ画面をつくり、個々のカスタマイズ項目をより大きな画面で展開できるようになりました。その結果、ユーザーにとっては、非常にカスタマイズがしやすくなっています。Luxeritusで感じていたカスタマイズのしにくさに関する不満は、これでほとんど解消されました。WordPressの初心者にも優しい設計といえます。
また、この設定画面は、タブ構造になっているため、従来の「カスタマイズ画面」とはちがって、メニュー項目数の制約が少なく、結果的に多くの機能を網羅することができるようになっています。それだけ多くの項目でカスタマイズができるようになっています。
例えば、下の画像は、「ホームページ教室」のWordPressのダッシュボードで「Cocoon設定」を開き、「ヘッダー」のタブを選択したところです。
画面いっぱいで細かなカスタマイズができるようになっています。これは、Luxeritusの「カスタマイズ」サイドバーよりもはるかに見やすくなっています。
用意されたブログパーツが多く、機能・デザインもすぐれていること
これまでは、CSSやプラグインを使わないと実現できなかった多くのブログパーツやコンテンツが、Cocoonでは初めから用意されています。しかも、一つ一つのパーツの機能、デザインが申し分ないほど高いクオリティをもっています。これらをレディメイド感覚で手軽に使うことができます。
使いやすい「ブログカード」
例えば、リンク先のホームページをカード形式で表示できる「ブログカード」です。Luxeritusにも最初から用意されていますが、残念なことに、Luxeritusでは、記事の「抜粋」を載せることができません。ところが、Cocoonでは、エディタ下部の抜粋欄に記述することによって、好きな内容の抜粋だけをブログカードに載せることができるようになっています。しかも、抜粋欄はHTMLで文章を修飾できるので、ブログカードをより魅力的な内容のものにすることができます。（ただし、HTMLは「内部ページ」のブログに限り反映されるようです）
https://medialabo.info/blog/wordpress/cocoon/
エディタに備わった「抜粋」欄は、ブログカードだけではなく、ブログの記事紹介カードにもそのまま表示されますから、クリックして記事本文を読まなくても、要約をあらかじめ知ることができるので、ユーザーにとっても便利です。
サイドバーのパーツ設置の容易さ
これも特筆に値します。例えば、プロフィールのデザインも、洗練されたものを簡単に採用することができます。また、ランキング順位とページビュー入りの「人気記事」欄も、これまではCSSを駆使しないと、見栄えのよいデザインのものは作れませんでしたが、Cocoonでは、ウィジェットの専用メニューを使うだけで、美しいデザインのサイドバーを設置することができるようになりました。これに必要な余計なプラグインもこれで削ることができました。これまでになかった新しいサイドバー項目としては、「Facebookボックス」があります。これを設置すると、本文記事を読んで気に入ってくれた人に「いいね！」ボタンを押してもらったり、Twitterをフォローしてもらったり、LINEの友達になってもらうことができます。記事の人気度をはかることができるだけではなく、記事の拡散をはかる上でも非常に有効ではないかと思います。
アピールエリアも、コンテンツとして魅力的
画面のトップに置いて、アピールしたいメッセージをおいたり、誘導したいページへの大きなリンクボタンを貼ったりするのに便利なのが、「アピールエリア」です。例えば、「松山YWCA」のホームページにもCocooonをインストールしたのですが、さっそく、トップページに次のようなアピールエリアを入れてみました。これは来年高知県で開催予定のイベントを告知し、参加者を募るメッセージです。ふつうの記事にはない強いメッセージ性を持たせることで、特定のページにユーザーを誘導することができると期待されます。
次のブログカードをクリックして、確かめてみましょう。
https://maywca.com/
ボックス、マーカーなど多様なスタイルを用意
ホームページに彩りとアクセントを与えるさまざまなスタイル（ボックス、マーカー、ボタン、ショートコードなど）も、Cocoonなら最初からたくさん用意されているので、これまでのように自分でCSSを使って苦労して作る必要もありません。しかも、わいひらさんの作ったスタイルのデザインは、どれも洗練されていてすばらしいので、安心してそのまま使えます。その結果、ホームページをつくるための作業のほとんどを「ビジュアルエディタ」だけで行うことができるようになりそうです。次回から勉強するHTMLやCSSの知識は最小限で済むようになるでしょう。
ボックスの例：
マーカーの例：
ここは重要です
ぜひ覚えておいてね！
複数カラムの設置が容易になった
これも、地味に便利な新機能だと思います。これまでは、2カラム、3カラムの記事を書いたり、複数カラムで写真を設置するときには、Shortcodes Ultimateというプラグインを使ってました。みなさんのホームページもこのプラグインを入れてもらいました。しかし、Cocoonのビジュアルエディタを使えば、これよりも簡単に複数カラムの文章や写真を配置することができるようになります。こうなると、Shortcodes Ultimateのプラグインも不要になるでしょう。
2カラム文章の例
山路を登りながら、こう考え た。 智に働けば 角が立つ。情に棹させば流される。意地を通せ ば窮屈だ。とかくに人の世は住みにくい。住み にくさが高じると、安い所へ引き越したくなる。 どこへ越しても住みにくいと悟った時、 詩が生れて、画が出来る。
人の世を作ったものは神でもなければ鬼でも ない。やはり向う三軒両隣りにちらちらするただ の人である。ただの人が作った人の世が住みにくいからとて、越す国はあるまい。あれば人でなしの国へ行くばかりだ。人でなしの国は人の世よりもなお住みにくかろう。
（夏目漱石『草枕』より）
モバイル（スマホ）でも使いやすいこと
「モバイルファースト」というのは、スマホの画面でもPCと変わらぬ操作性と見やすさを確保するということです。Cocoonも、開発モットーの筆頭にあげています。Luxeritusも、スマホでの表示が見やすいように設計されています。
しかし、Cocoonは、そのLuxeritusのさらに上を行く「モバイルファースト」性（レスポンシブ対応）を実現しています。例えば、次の画像は、私がCocoonで作った「iシニアのブログ」のトップ画面です。
「iシニアのブログ」コンテンツ画面
「サイドバー」を表示させるボタン
サイドバーを表示させた画面
トップの画面イメージは、PCとほとんど同じです。ヘッダー画像やロゴ、コンテンツエリアの記事サムネイルやタイトルもきちんと大きく表示され、クリックすると、PCと遜色のない大きな文字で記事を読むことができます。また、下部には見やすいメニューが標準で表示され、「サイドバー」のボタンをタップすると、これもPCとほとんど同じイメージでサイドバーを見ることができます。閲覧に関する限り、スマホで必要にして十分な情報を得ることができ、ストレスを感じることもありません。
ボックスや、表、見出しなどの崩れもまったくありません。さらに、複数列に配置した写真も、スマホ画面では、1列に表示されるので、画面をはみ出すと行った、これまでのテーマにありがちの乱れもありません。
まさに、モバイルファーストが完全に実現したWordPressテーマだということができるでしょう。
ユーザーへの対応が行き届いていること
最後になりましたが、これはいろんな意味で重要なポイントだと思っています。Luxeritusを使っていたとき、アイキャッチ画像のキャプションを表示できなくて、作者の開設するフォーラムにメールで質問を出したことがありますが、まったく何の回答も得られませんでした。どんなサイトを見ても分からなかったので、最後の手段で質問をしたわけですが、レスポンスがなかったことから、開発者に対して不信感をいだきました。その後、開発者のサイトをみると、ユーザーの質問に対して、「こんなこと聞いてくるな！！」といった横柄な応対が目にとまり、ますます不信が募りました。
これとは対照的に、Cocoonの開発者であるわいひらさんは、ユーザーからの初歩的な質問にも丁寧に回答してくださっており、わいひらさんのこうした誠実な応対に、ネットでは賛辞が寄せられています。わいひらさんは決して暇人であるわけではなく、多忙な時間をさいて、愛用者からの質問に回答していることが分かります。こうした質問と回答の積み重ねは、Cocoonの改良にも直結しており、β版から正式版のリリース、さらにその後も、絶え間なく改良が加えられ、すぐれたWordPressテーマができあがりつつあるのです。Cocoonは、多くのユーザーの協力、サポートを糧にして、無料WordPress最強といわれるテーマを完成させることができたのです。近い将来、LuxeritusとCocoonのどちらに軍配が上がるか、その結論はすでに見えているような気がします。
以上が、このホームページ教室で、WordPressのテーマをLuxeritusからCocoonに変更する主な理由です。とくに、今日これから行う「カスタマイズ」を実際にやってみれば、Cocoonの使いやすさが分かっていただけると思います。
Cocoonのインストール
これは、Luxeritusをインストールしたときと同じです。最初に「親テーマ」のファイルをインストールし、そのあとで「子テーマ」のテーマをインストールします。インストールするファイルをダウンロードするには、次のブログカードをクリックしてください。
https://wp-cocoon.com/
(1) 画面の指示に従って、「親テーマ」と「子テーマ」をダウンロードして、自分のパソコンやクラウドのフォルダに保存してください。
(2) 自分のWordPressのダッシュボードを開き、サイドメニューの「外観」⇒「テーマ」を選び、テーマの「新規追加」ボタンをクリックします。次に、「テーマのアップロード」を選びます。さらに、「ファイルを選択」ボタンを押して、まず自分のパソコンやクラウドに保存しておいたCocoonの親テーマのファイルをインストールします。「いますぐインストール」ボタンを押すと、インストールが始まります。 「テーマのインストールが完了しました。」というメッセージが出たら、下の「有効化」バオ単を押して、インストールを完了します。
(3) 続いて、子テーマをインストールします。手順は親テーマとおなじ です。画面上の「新規追加」から始めて下さい。
インストールの仕方は、下の動画を参考にしてください。
親テーマ、子テーマのインストールが無事に終わったら、これからはLuxeritusではなくCocoonでホームページを作成していきます。
「Cocoon設定」を使ったホームページのカスタマイズ
ホームページをカスタマイズするには、Luxeritusのような「カスタマイズ」のサイドバーは使いません。その代わり、Cocoonでは、ダッシュボードのサイドメニューに「Cocoon設定」というカスタマイズ用メニューが用意されています。これをクリックして、ホームページの基本的なカスタマイズをすべて行うことができます。ではさっそく始めましょう。
Cocoon設定の使い方
Cocoon設定の画面は、多くの「タブ」ページで構成されています。次の動画でこれらのタブをながめてみましょう。
タブをクリックすると、タブの画面が表示されます。カスタマイズしたいタブをクリックすることによって、作業を進めます。タブの数は三三コもあります。けれども、実際に必要なタブは10以下でしょう。
ヘッダーのカスタマイズ
必ずカスタマイズする必要があるのは、「ヘッダー」（およびグローバルナビ）の部分でしょう。そこで、「ヘッダー」のタブをクリックして、実際にカスタマイズをしてみましょう。
ここでは、例として、「YWCAホームページ教室」のヘッダーを少しおしゃれなものに作り替えてみたいと思います。もともとのヘッダーロゴは黒くて、あまり見やすいとはいえません。そこで、影の着いたクリーム色の大きなロゴにさしかえてみましょう。新しいロゴは、ペイントソフトであらかじめ作っておきます。そのやりかたは、下の動画で示した通りです。繰り返し再生して、やりかたを覚えて下さい。
グローバルナビの作成
すでに、 Luxeritusのときに「グローバルナビ」を作成したという人もいると思います。その場合は、Cocoonでも、そのグローバルナビのメニューを使うことができます。ただし、Cocoonをインストールしたときに、設定がいったん無効になり、画面に表示されないことがあります。その場合には、「カスタマイズ」で「メニュー」を選び、「グローバルナビ」にチェックを入れて、メニューを有効にしてください。やりかたは、下の動画に示す通りです。
Cocoonにおけるビジュアルエディタの使い方
TinyMCE Advancedプラグインの利用
WordPressで文章を書くときには、「ビジュアルエディター」と「テキストエディタ−」のどちらかを使います。これからしばらくは、「ビジュアルエディター」の使い方を学ぶことにします。
ここでは、ダッシュボードで「投稿」モードを選んでみましょう。「新規追加」ボタンを押すと、次のようなビジュアルエディターの画面が表示されると思います。
ただし、この画面は、人によって違うと思います。というのは、TinyMCE Advancedというプラグインで、ビジュアルエディターのメニューを自由にカスタマイズすることができるからです。
Cocoonの機能を十分に活用するには、上の画像のようなメニューにする必要があります。そのためには、TinyMCE Advancedプラグインを起動して、メニュー項目を上の画像のようになるように再設定していただきたいと思います。そのやり方は、下の動画を見て下さい。もし、まだTinyMCE Advancedプラグインを入れていないという人は、必ずこのプラグインをインストールしてください。
「吹出し会話」の練習
ビジュアルエディターの使い方の練習をしてみましょう。ここでは、Cocoonで新しくできるようになった「吹出し会話」を使ってみましょう。これは、2人の会話を顔マークと吹出しで表現する方法です。次の例をみてください。
そこで、みなさんにも、これに習って会話文を吹出しで表現する方法を練習していただきたいと思います、サンプルは、村上春樹の小説『羊をめぐる冒険』の一節です。会話の部分を「吹出し」に置き換えてみて下さい。女性の台詞は「女性（右）」、男性のセリフは「男性（左）」を使ってください。
タイトルは「水曜日のピクニック」としてください。
水曜日のピクニック「ここに来るたびに、本当のピクニックに来たような気がするのよ」 「本当のピクニック？」 「うん、広々として、どこまでも芝生が続いていて、人々は幸せそうに見えて……」 「太陽が上って、そして沈んで、人がやってきて、そして去って、空気みたいに時間が流れていくの。なんだかピクニックみたいじゃない？」
村上春樹.『羊をめぐる冒険』（講談社）より
練習の吹出し会話文ができたら、タイトルをつけて、「更新」ボタンを押して、文章を保存してください。そして、「変更をレビュー」で、吹出しの会話文を確認してみてください。
サイドバーのカスタマイズ
次に、ホームページのレイアウトで重要な部分である「サイドバー」（右あるいは左のバー）をカスタマイズしてみましょう。
ウィジェットの利用
サイドバーに載せる項目は、あらかじめ用意されています。それが「ウィジェット」です。ダッシュボードの「外観」⇒「ウィジェット」を選ぶと、ウィジェットの画面になります。いちばんよく使う項目は、「検索」「カレンダー」「プロフィール」「最近の記事」「人気記事」「カテゴリー」などでしょう。もしFacebook、Twitte、LINErなどのSNSに登録いていれば、こうしたSNSの「いいね！」ボタンを押してもらったり、フォローしもらったりすることのできる「Facebookボックス」というウィジェットもあります。ウィジェットをサイドバーに入れる方法は、項目バーを「サイドバー」にドラッグするだけです。上限の順番を変えれば、ホームページにも、その順番が反映されます。実際に使い方は、下の動画を参考にしてください。
「プロフィール」の設定
ホームページやブログのトップ画面のサイドバーには、しばしば、作者の「プロフィール」が載っています。Cocoonでは、ウィジェットを使って、簡単にプロフィール欄をつくることができます。
設定の仕方は簡単です。まず、ウィジェット画面で「プロフィール」のウィジェットをサイドバーのエリアにドラッグします。次に、このウィジェットに「タイトル」「肩書き」「あなたのプロフィール」を入れていきます。そして、画像を円形にするかをチェックし、表示設定をして、このウィジェットを保存します。「あなたのプロフィール」をクリックすると、「あなたのプロフィール」のページに飛びますから、そこに必要事項を記入し、顔写真や顔イラストなどの画像をアップロードします。顔イラストのサンプルファイルは、Googleドライブの「プロフィール用のイラスト」フォルダに入っていますから、これを利用するといいでしょう。具体的な作成手順は、次の動画をごらんください。