Cocoonは初期設定のままでもある程度形にはなっているWordPressテーマです。
ですが、初期のデザインのままですと他のブログと似た雰囲気になりますし、使い勝手もベストとはいえません。
というか、そもそもCocoon自体がカスタマイズすることを前提として初期はシンプルなデザインになっています。
そのため、最初に簡単にでよいので全体デザインのカスタマイズをしておくことを推奨します。
今回は、初心者の方でも簡単にできるカスタマイズ方法を解説していきます。
今回の記事内容を実践すると、デザインが以下のように変わります。
それではいきましょう。
Cocoonでカスタマイズできる項目
ブログを始めて初期の段階ではこんな見た目になっているかと思います。
Cocoonでは画面の最上部に表示される「ブログタイトル」や「メニュー」の部分を
それぞれヘッダー、グローバルメニューと呼びます。
また、サイドバーに表示される「プロフィール」や「人気の投稿」などのパーツのことを
ウィジェットと呼びます。
図にするとこんな感じ。
今回はこれらの部分をメインにカスタマイズしていきます。
初期設定のウィジェットをリセットする
Cocoonは初期設定でもサイドバーにオススメのウィジェットが配置されています。
今回はその部分もカスタマイズしたいので、
まずはデフォルトで付いているウィジェットをリセットすることから始めます。
まず、WordPress管理画面で「外観」→「ウィジェット」に移動
右側の「サイドバー」「サイドバースクロール追従」の中にあるブロックとかかれたアイテムを外に外します。
こんな感じになっていればOK
実際サイトにいってみると、サイドバーのウィジェットが全て無くなっています。
これでウィジェットの初期化が完了しました。
グローバルメニューをつくる
さきほど説明したヘッダーの下にあるメニュー（グローバルメニュー）部分を作っていきます。
カテゴリ一を作る
まず、グローバルメニューに表示するカテゴリ一を用意しましょう。
「投稿」→「カテゴリ一」に移動
ここは各ブログ記事をジャンル分けするためのカテゴリ一を作るところです。
もうすでにカテゴリ一がいくつかある人はそのままで、カテゴリ一がない人は2～3個作ってみましょう。
今後、ブログ記事でよく書きそうなカテゴリーを考えてみてください。
新規カテゴリ一を追加するときは以下を入力します。
「名前」：カテゴリ一名
「スラッグ」：カテゴリ一に割り当てるURL文字列
スラッグの例
例えば「雑記」というカテゴリ一のスラッグを”etc”としておくと、
該当するする記事一覧ページを開いた時のURLは
https://〇〇.com/etc
となります。
「親カテゴリー」：”なし”のままでOK
「説明」：空白のままでOK
今回は「カテゴリーサンプル」と「雑記」という2つのカテゴリーを追加してみました。
カテゴリーは後から名前を変えたり追加したりできるので、あまり深く考えずにやってみましょう。
それぞれのカテゴリ一の記事を作ってみる
カテゴリーは作りましたが、各カテゴリ一に記事が一つもないとさみしいです。
ので、いくつかサンプルの記事を投稿してみましょう。
WordPress管理画面で「投稿」タブに移動します。
「新規投稿を追加」を押して、記事を作りましょう。
今回はサンプルの記事なので、タイトルだけつけて本文は無しでいきます。
そして、「カテゴリ一」の項目にさっき作ったカテゴリ一が表示されるので、何か選んでみましょう。
終わったら「公開」を押します。
「公開してもよいですか？」と聞かれるので「公開」をクリック
そんな感じで各カテゴリ一に1記事ずつ追加してみました。
グローバルメニューをつくる
最後にグローバルメニューを作ります。
「外観」→「カスタマイズ」に移動
「メニュー」を選び、「メニューを新規作成」を押します。
「メニュー名」は”グローバルメニュー”などでよいです。
この名前はサイト上には表示されないので、自分が識別できる名前をつけてください。
「メニューの位置」は”ヘッダーメニュー“と”ヘッダーモバイルメニュー“を選びます。
「次へ」をクリック
続いてメニューの具体を入力する画面にいくので、「項目を追加」をクリック
今回、グローバルメニューにはカテゴリーを表示したいので、
「カテゴリ一」をクリックしてください。
先ほどの追加したカテゴリ一メニューを選択して追加しましょう。
私は「雑記」「カテゴリ一サンプル」という2つをグローバルメニューとして表示したいので、この2つを選びました。
選択できたら右側のプレビュー画面を見ると、
追加したカテゴリ一がグローバルメニュー部分に表示されているかと思います。
そしたら「公開」ボタンをクリックして公開しておきましょう。
これでグローバルメニューの設定は完了です。
ウィジェット（サイドバーのパーツ）をカスタマイズ
続いて、サイドバーに表示されるウィジェットを追加していきます。
サイトの右側に表示されるメニューの部分ですね。
「外観」→「ウィジェット」に戻ってください。
先ほど全部リセットしたところに、自分が入れたいパーツを入れていきます。
私のおすすめは以下の設定になります。
サイドバー
検索：検索窓を作成
→検索窓は基本上のほうにあるイメージのため
関連記事：今見ている記事に関連する記事を表示
→ 記事を開いてすぐのところに表示しておくことで、今の記事がお目当てでなかった場合にすぐ次にいける
プロフィール：プロフィール写真と簡単な自己紹介
※中身は「ユーザー」→「プロフィール」から設定ができます。
カテゴリー：こちらも次の記事を探すサポートとして必要
アーカイブ：過去の記事を月ごとにまとめて表示する項目
→重要度が低いため、ここに置いています。
最初の設定では全ての月がずら～っと表示されてしまうため、「ドロップダウンで表示」を選択してたたんでおくとよいです。
サイドバースクロール追従
こちらはサイドバーメニューの下に配置され、スクロールしても付いてくるメニューとなります。
目次：基本はこれだけでよいかと思います。
ブログの目玉商品などが出来た際には、目次の下に広告枠を作って配置するとよいでしょう。
全部設定するとこんな感じ
サイトを見てみると、ちゃんとサイドバーの項目ができています。
このウィジェット設定は自由にカスタマイズしてOKです。
私は入れていませんが、「新着記事」や「タグ一覧」もよく配置される項目です。
記事一覧の上にカテゴリー切り替えのタブを表示
※ここは必要ないと感じた方はスキップして大丈夫です。
「カテゴリー切り替えのタブ」は個人的に好きな設定なので紹介します。
⇩こいつです。
グローバルメニューやカテゴリ一覧と役割は同じですが、
“記事のジャンルを絞り込む”タブであることが視覚的に分かりやすいため、あると便利だと思います。
やり方ですが、「Cocoon設定」に移動し「インデックス」タブを選択
フロントページタイプから「タブ一覧」を選択
「表示カテゴリー」からタブとして表示したいカテゴリーを選びます。
最後に下にいって「変更をまとめて保存」をクリック
これで投稿一覧の上にタブが表示できます。
ちなみに、タブの一番左の項目は確定で”新着記事“となります。
ここに新着記事の項目が入ることもあり、私はサイドバーには新着記事のブロックを入れていません。
「スキン」と「カラー指定」でデザインをカスタマイズする
最後に、色や雰囲気を決めることで一気にオリジナルデザインにしていきます。
この項目はグローバルメニューやサイドバー項目が確定した後にやらないと、
サイドバーメニューを変更したらなんかこの雰囲気と合わなくなったな・・・
なんてことになるので、最後にやる事をおすすめします。
手順は2ステップです。
- スキンを決める
- 色を調整する
あと一息ですので、頑張りましょう。
スキンを選ぶ
スキンとはCocoonの着せ替えパッケージのようなもので、色味や全体デザインをボタン一つでガラッと変えることができる機能です。
スキンは知識があれば自分オリジナルのものをつくることもできます。
今回はCocoonで他の人が作ってくれたスキンから好きなものを選んでみましょう。
WordPress管理画面で「Cocoon設定」を選ぶと、「スキン設定」という項目のページになるかと思います。
「スキン一覧」から、色々なスキンを試してみて好きなデザインのものを選びましょう。
スキン名の左の写真マーク 
にカーソルを合わせると、デザインを見ることができます。
※スキンを設定してもすでに配置したコンテンツが消えたり、勝手に付け足されたりはしません。
あくまで設定した項目それぞれの”見た目”が変わるだけです。
※スキンはデザインの都合上、基本的には配色が決まった状態です。
スキンのデフォルトのカラーでいくこともできますし、スキンを選んだ後に細かく色を変えることもできます。
今回はSILK（シルク）というスキンを選びます。
SILKは癖がなくオシャレなデザインで、色味も自由に調整できるようなスキンです。
SILKにチェックを入れ、「変更をまとめて保存」を押して保存します。
こんな感じに見た目が変わりました。
ちなみに、SILKの場合にはヘッダーの上に赤色の線が出現します。
これはサイトの「キャッチフレーズ」というのが入る欄で、今は空白のため色付きのラベルのみが表示されています。
この部分は要らないので「Cocoon設定」→「ヘッダー」タブ→「キャッチフレーズの配置」で”表示しない”を選択して消しておきます。
全体のカラーを調整する
最後に、全体の色味を調整していきます。
全体の色味調整ですが、大きく分けて2か所の設定ができます。
- ヘッダー部分
- 全体（ヘッダー以外の部分）
ですがまず、全体の色味（テーマカラー）をどうするかを決めなくてはいけません。
サイトのテーマカラーを決める
テーマカラーは以下の3色で構成すると良いと言われています。
- ベースカラー（背景色）- 70%
- メインカラー（主役の色）- 25%
- アクセントカラー（目立たせる時に使う）- 5%
ただ、あまり難しいことは考えたくないので、とりあえず配色パターンを見れるサイトでよさそうなカラーを選びましょう。
▼このサイトで配色を決めるとよいです。
サイトにいくとこんな感じでカラーバリエーションが無限に出てくるので、好きな配色を選んでください。
私はこの配色を選びました。
では、実際にブログの色を変えていきましょう。
まずはヘッダー部分
「Cocoon設定」→「ヘッダー」タブにいきます。
下にスクロールすると下記の項目が出てくるので、それぞれ色を変えていきます。
※配色サイトのカラーコード[#00000等]を空欄にコピペすればOKです。
ヘッダー全体色
ヘッダー全体背景色：今回はメインカラーとなる”濃い緑色“をチョイス
ヘッダー全体文字色：背景が緑色なので”白“にする
グローバルナビメニュー色
グローバルナビ背景色：今回はサブカラーとなる”うすい緑色“をチョイス
グローバルナビ文字色：背景がうすい緑色なので”黒“にする
変えられたら「変更をまとめて保存」で保存します。
続いて、全体の色を変えていきます。
「Cocoon設定」→「全体」タブに移動
キーカラー
サイトキーカラー：アクセントとなる色です。今回はオレンジ色をチョイス。
※配色サイトのままだとうすいので、濃さを調整しました。
サイト背景色
背景色：黄色をかなりうすく調整して入れました。
※背景色に関しては白のままか、変える場合でも相当うすい色にした方よいです。
濃い色だと文字が読みずらくなったり、ずっと読んでると目が疲れたりします。
変えられたら「変更をまとめて保存」で保存します。
完成したサイトがこちら
今回の設定をすべて適用したサイトデザインがこちらになります。
デザインが良いかどうかはさておき、最初のデザインに比べるとかなりオリジナリティが出たのではないでしょうか。
今回ご紹介したカスタマイズ以外にも、「ロゴ画像」「プロフィール」「おすすめカード」「フッター」などできることは色々あります。
今回は、初心者の方向けにすぐできる項目のみに絞ってご紹介しましたので、興味があれば他の項目もカスタマイズしてみてください。
一緒におもれぇブログを作っていきましょう。
コメント