ー本記事は2018年9月18日に公開済みですー
【Simplicity2】から【Cocoon】へとテーマを変更して、一番最初の設定とヘッダー設定を済ませたら、いよいよ外観のデザインをいじっていきましょう。スー(@bacteria_suzu)です。
本日もお越しいただきありがとうございます。
といっても【Cocoon】にはあらかじめ着せ替えパターンがたくさん用意されているので、
その「スキン」とう着せ替えデザインを選べば一発でサイトの顔が決まるのです。
現時点で45以上のパターンが用意されているので、これを選ぶのもまた楽しいです。
デザインにこだわらない方でも、これは必然的に素敵なデザインになってしまうのではないでしょうか。
今回は、Cocoon設定の中の、主に外観やサイトの見映えを決めていく作業を順番に見ていきましょう♪
【Cocoon設定】サイト全体のデザインを決めていく
前回までの記事で、【Simplicity2】から【Cocoon】にテーマを変更するにあたっての前準備とど初期の設定についてまとめました。
ここまで済んだら、やっとワクワクするデザイン構築ですよ〜。
ブログはコンテンツが命ですが、看板も大事です。
多くの人が自分のサイトに訪れてくれるようにするには、その目印となる最初のイメージに自分の色を出すことも必要なのではないでしょうか。
Cocoonでは基本に「シンプルである」という軸はあるのですが、
そのシンプルな中でも、用意されている項目のチョイスによって幾通りにでもデザインを変えられるという楽しさがあります。
私のような素人でも半日あれば設定できてしまうのです。
もちろん、沼にハマったら半日では終わりませんけどね・・・。
できるだけ沼にはまらないように、
今一度、どんなコンセプトでデザインを構築するかを頭の中で整理しておくことが必要ですね。
では、イメージが固まってきたら、いざ実行していきましょう♪
［Cocoon設定］スキン
［Cocoon設定］をクリックしてみるとわかりますが、設定の一番最初の項目は『スキン』となっています。
そして、だいたいこの設定項目順に進めていくというのが、整理しやすくておすすめですね。
ということで、45個以上あるスキンのなかから自分のサイトに使いたいものを探しましょう！
といっても、40個を超えるデザインの全てを自分のサイトに当て込んで試すのは面倒ですよね。
Cocoonは大丈夫です。
スキン名の左にある写真アイコンにカーソルをのせると、あらまあプレビューがドドーン！
すべてのデザインの全体像をその場で目視確認できますよ。
決まったら［変更をまとめて保存］をクリックして終わりです。
ちなみに私は『モダンブラック』というスキンにしました。
［Cocoon設定］全体
では次の項目へ行きましょう。
ここでは、サイトで使われるカラーを設定していきます。
ただし、選んだスキンによってはデザインが上書きされてしまうので制御されている場合があります。
色を自由に選べるスキンもあれば、結構制御されて固まっているものもあるので、注意してくださいね。
私の意見としては、ここでいろんな色を設定しなくても十分シンプルで素敵なデザインになっているので、ここだけはというこだわりポイントが特にない場合はいじることはないですね。
この項目で私が変更したのは、［サイトフォント］の［文字サイズ］だけです。
16pxにしました。
あとはデフォルトで、［変更をまとめて］保存ですね。
ファビコンの設定は、説明書きにもある通りワードプレス管理画面の［外観］からになります。
ついでにやっちゃってもいいですね。画像を1つ指定するだけなので簡単です♪
［Cocoon設定］ヘッダー
きました、難関『ヘッダー』です。顔です。
ここもタイトル文字だけをシンプルに設定し、特にいじらずほぼデフォルトのままでも問題ありません。
しかし、ヘッダーというのは本で言ったら「装丁」みたいなものですよね。
その中にあるコンテンツの世界観を見せることができるのも特徴ですよね。
私自身ここだけはこだわって設定してみました。まぁ、素人ができる範囲というのは極狭ですけどね…。
ちょっとしたコツなどを細かくまとめたので、それに関してはこちらの記事↓↓↓に飛んで設定してみてください♪
［Cocoon設定］OGP
OGPってなんでしょう？
つい先日までこの意味がわからなくて、勝手に重要じゃないと判断してスルーしていました。
ところが、これもまた結構重要なんですね。
OGPとは『Open Graph Protocol』の略称です。FacebookやTwitterなどのSNSでシェアされた際に、そのページのタイトル・URL・概要・アイキャッチ画像（サムネイル）を意図した通りに正しく表示させる仕組みです。
Cocoon設定画面より
FacebookやTwitterのサムネイルだけじゃなく、サイトトップページをブログカードにする場合のサムネイル画像も、
デフォルトのまま放置しておくと、なんとこんなこと↓↓↓に！？
これでもいいのですが、できればこういう感じ↓↓↓にしたいですよね！
この設定も一瞬で終わるのでやっておきましょう。
［OGP］の［ホームイメージ］で［画像のアップロード］から画像を選択します。
ヘッダー画像に指定した画像が最適でしょうね。
最後に［変更をまとめて保存］で終了です。
FacebookやTwitterを紐付けしていない場合でも、ブログカードでサイトを紹介する場合があると思います。
できれば早めに変更しておきましょう。
［Cocoon設定］カラム
ここは私はいじらずデフォルトのままです。
カラムってそもそも何？
カラムとは、ブログレイアウトの縦の列のことだそうです。
このメインカラムと左にあるサイドバーのことがカラムというんですね。2カラムです。
この幅などを変更できるのですが、基本のままでいいでしょう。
［Cocoon設定］インデックス
インデックスとは、トップページに表示される記事のリストのことです。
［カードタイプ］でいろいろと変更できます。
ここで、私も一度やってみたかった［縦列カード］や［タイルカード］を試してみました。
しかしここで大きな欠陥が・・・。
カードのサムネイルが、投稿時のアイキャッチ画像比率で挿入されるので、
縦横の比率を適当にやっている私のカードは、大きさがバラバラになってしまい見た目に美しくないのです。
ね、これじゃああんまりですね。
これを直す方法もあるので、もしどうしてもこのカード配列にしたい方はこちらの本家推奨のサムネイル設定方法↓↓↓を試してみてください。
結局、当サイトは見た目であまりサイズのズレが感じられない、デフォルトの［エントリーカード］にしておきました。
［Cocoon設定］投稿
投稿記事に関する表示の設定ですね。
こちらの設定は、ちょっとだけややこしい点があります。
それも含めて詳しく解説したこちらの記事↓↓↓を参考にしてください。
［Cocoon設定］SNSシェア
ブログの拡散効果も狙えるSNSシェアボタン、これをいろいろとカスタムできる項目です。
本文の上と下両方に設置でき、そのどちらも個別にカスタムできます。
- ボタンの種類
- カラー
- カラム数
などが変更可能です。
最大6個のボタンを表示できるので高い拡散効果を狙えますね。
お好みで試してみてください。
［Cocoon設定］SNSフォロー
こちらも先ほどと同じ、シェアとフォローの違いだけです。
ワードプレス管理画面の［プロフィール］に設定している、それぞれのSNSアカウントURLが、そのまま反映されます。
後は細かいデザインを変更するといいですね。
［Cocoon設定］画像
ここはおもにアイキャッチ画像についての設定です。
［アイキャッチの表示］のところでいろいろ変更可能です。
- 画像の囲み効果
- 画像の拡大効果
なども選べます。
いろいろ試してみましょう。
私は、拡大効果は、デフォルトの［baguetteBox（スマホ向け）］にしています。
［Cocoon設定］通知・アピールエリア・カルーセル
これら3点は、サイトの上部に自分がアピールしたいページへのリンクを貼ることができる設定です。
特になければいじらなくていいですね。
［Cocoon設定］フッター
ヘッダーの対として、サイトの最下部に表示させる部分の設定です。
ここはあまりごちゃごちゃさせない方がいいので、最小限の固定ページを設置しておいて、それらの見栄えを変更することができます。
ちなみに私は、
・ホーム
・プロフィール
・サイトマップ
・コンタクト
・プライバシーポリシー
これらを設置しました。
カラーをヘッダーと合わせるといいですね。
［Cocoon設定］ボタン
トップへ戻るボタンの設定です。
いろんな種類が用意されています。
特にいじらずそのままでもいいでしょう。
［Cocoon設定］モバイル
こちらは、モバイルサイトのメニューなどの表示を変更する設定です。
- モバイルメニュー
- モバイルボタン
この2つの設定ができます。
メニューの見え方やサイドバーの情報の組み込み方など、スキンによっても違うと思いますのでいろいろ試してみましょう。
［Cocoon設定］404
404ページとは、サイト内でリンク切れがあった際に表示されるエラーページですね。
あまり表示させたくないものですが、そうなった場合のページの見た目を変更できます。
デフォルトでいいと思います。
まとめ：Cocoon設定の外観デザインは細かく指定できて楽しい
以上で、サイトの外観・デザイン、おまけで見た目に関することについての設定は終了です。
おつかれさまでした。
最初にスキンを設定すると結構気分がアガるので、そこから勢いでやっちゃいましょう♪
ただしスキンやヘッダーで足止めを喰らわないように、できるだけ最初のイメージを固めておくことは大事でしょう。
では、次はSEO対策や投稿についての設定をしていきましょう！
本日も最後までお読みいただきありがとうございます。
