【Cocoon初期設定】を一から解説!まずは外観・デザインから

【Simplicity2】から【Cocoon】へとテーマを変更して、一番最初の設定を済ませたら、いよいよ外観のデザインをいじっていきましょう。

といっても、【Cocoon】にはあらかじめ着せ替えパターンがたくさん用意されていて、その「スキン」とうデザイン枠を選べば一発でサイトの顔が決まるのです。

現時点で45以上のパターンが用意されているので、これを選ぶのもまた楽しいです。

デザインにこだわらない方でも、これは必然的に素敵なデザインになってしまうのではないでしょうか。スーです。

本日もお越しいただきありがとうございます。

今回は、Cocoon設定の中でも、主に外観やサイトの見映えを決めていく作業を順番に見ていきましょう♪

スポンサーリンク

【Cocoon設定】サイト全体のデザインを決めていく

前回までの記事で、【Simplicity2】から【Cocoon】にテーマを変更するにあたっての前準備ど初期の設定についてまとめました。

【Simplicity2】を【Cocoon】に変更する前にやっておくべきこと5つ
今回の私の500記事越えブログのテーマ変更も、いろんなことが「?」でしたけど、それもなんとか6時間以内には「!」という結果に落ち着きました。まずはテーマ変更の前にやるべきことをチェックです♪
【Cocoon】Simplicity2から変更して最初に設定しておくこと
Word Pressブログを運営している方の中には、自分でいろいろとサイトをカスタムしたい人と、したくない人がいると思うのです。というか、できる人とできない人かな。私はできないからしたくない人です。スーです。そんな、できるだけコンテンツの...
【Simplicity2】から【Cocoon】に変更後削除したプラグインとcss
【Cocoon】という神テーマに変えた理由のひとつとして、サイトが軽くなるかもしれないという大きな期待です。これは、重くなってきたサイトを自力ではどうすることもできないという素人には大変嬉しいことですよね。テーマを変えることは、今まで構築...

ここまで済んだら、やっとワクワクするデザイン構築ですよ〜。

ブログはコンテンツが命ですが、看板も大事です。

多くの人が自分のサイトに訪れてくれるようにするには、その目印となる最初のイメージに自分の色を出すことも必要なのではないでしょうか。

Cocoonでは基本に「シンプルである」という軸はあるのですが、そのシンプルな中でも、用意されている項目のチョイスによって幾通りにでもデザインを変えられるという楽しさがあります。

私のような素人でも半日あれば設定できてしまうのです。

もちろん、沼にハマったら半日では終わりませんけどね・・・。

できるだけ沼にはまらないように、今一度どんなコンセプトでデザインを構築するか頭の中で整理しておくことも有効ですね。

では、なんとなくイメージが固まってきたら、いざ実行していきましょう♪

スキン

Cocoon設定をクリックしてみるとわかりますが、設定の一番最初の項目は『スキン』となっています。

そして、だいたいこの設定項目順に進めていくというのが、整理しやすくておすすめですね。

ということで、45個以上あるスキンのなかから自分のサイトに使いたいものを探しましょう!

といっても、40個を超えるデザインの全てを自分のサイトに当て込んで試すのは面倒ですよね。

Cocoonは大丈夫です。


スキン名の左にある写真アイコンにカーソルをのせると、あらまあプレビューがドドーン!

すべてのデザインの全体像をその場で目視確認できますよ。

決まったら変更をまとめて保存をクリックして終わりです。

ちなみに私は『モダンブラック』というスキンにしました。

全体

では次の項目へ行きましょう。

ここでは、サイトで使われるカラーを設定していきます。

ただし、選んだスキンによってはデザインが上書きされてしまうので制御されている場合があります。

色を自由に選べるスキンもあれば、結構制御されて固まっているものもあるので、注意してくださいね。

私の意見としては、ここでいろんな色を設定しなくても十分シンプルで素敵なデザインになっているので、ここだけはというポイントで使いたい色が特にない場合はいじることはないですね。

この項目で私が変更したのは、[サイトフォント][文字サイズ]だけです。

16pxにしました。

あとはデフォルトで、変更をまとめて保存ですね。

ファビコンの設定は、説明書きにもある通り管理画面の[外観]からになります。ついでにやっちゃってもいいですね。画像を1つ指定するだけなので簡単です♪

ヘッダー

きました、難関『ヘッダー』です。です。

ここもタイトル文字だけをシンプルに設定し、特にいじらずほぼデフォルトのままでも問題ありません。

しかし、ヘッダーというのは本で言ったら「装丁」みたいなものではないでしょうか。

その中にあるコンテンツの世界観を見せることができるのも特徴ですよね。

私もここだけはこだわって設定してみました。まぁ、素人ができる範囲というのは極狭ですけどね…。

ちょっとしたコツなどをまとめたので、それに関してはこちらの記事↓↓↓に飛んで設定してみてください♪

【Cocoon】の初期設定でやっておくべきヘッダー・画像・メニュー
ブログの顔ともいうべきサイトヘッダー、私はこだわって自分で撮った写真を使っているのですが、これをヘッダーの規格に合わせて設定するのがとても大変なんです。ブログテーマの【Cocoon】というのは、とても機能が充実している神テーマであることは...

OGP

OGPってなんでしょう?

つい先日までこの意味がわからなくて、勝手に、そんなに重要じゃないと判断してスルーしていました。

ところが、これもまた結構重要なんですね。

OGPとは『Open Graph Protocol』の略称です。FacebookやTwitterなどのSNSでシェアされた際に、そのページのタイトル・URL・概要・アイキャッチ画像(サムネイル)を意図した通りに正しく表示させる仕組みです。

Cocoon設定画面より

FacebookやTwitterのサムネイルだけじゃなく、サイトトップページをブログカードにする場合のサムネイル画像も、デフォルトのまま放置しておくと、なんとこんなこと↓↓↓に!?

これでもいいんですが、できればこういう感じ↓↓↓にしたいですよね!

この設定も一瞬で終わるので、やっておきましょう。

[OGP]の[ホームイメージ][画像のアップロード]から画像を選択します。

ヘッダー画像に指定した画像があればそれでいいでしょう。

最後に変更をまとめて保存で終了です。

私の場合は、FacebookもTwitterもリンクしていないので必要ないことかと思っていましたが、ブログカードという存在もありましたね。

できれば早めに変更しておきましょう。

カラム

ここは私はいじらずデフォルトのままです。

カラムってそもそも何?

カラムとは、ブログレイアウトの縦の列のことだそうです。

このメインカラムと左にあるサイドバーのことがカラムというんですね。2カラムです。

この幅などを変更できるのですが、基本のままでいいでしょう。

インデックス

インデックスとは、トップページに表示される記事のリストのことです。

[カードタイプ]でいろいろと変更できます。

ここで、私も一度やってみたかった[縦列カード][タイルカード」を試してみました。

しかしここで大きな欠陥が・・・。

カードのサムネイルが、投稿時のアイキャッチの画像比率で挿入されるので、縦横の比率を適当にやっていた私のカードは大きさがバラバラになってしまい、見た目に美しくないのです。

ね、これじゃああんまりですね。

これを直す方法もあるので、もしどうしてもこのカード配列にしたい方はこちらの本家推奨のサムネイル設定方法↓↓↓を試してみてください。

テーマが利用しているサムネイルを再生成して最適化する方法(画像の大きさを揃える)
Force Regenerate Thumbnailsプラグインを用いて、テーマ上のサムネイルを再生成し、画像できるだけ綺麗に表示する方法の紹介です。

結局、当サイトは見た目であまりサイズのズレが感じられない、デフォルトの[エントリーカード]にしておきました。

投稿

投稿記事に関する表示の設定ですね。

こちらの設定はちょっとだけややこしい点があります。

それも詳しく解説したこちらの記事↓↓↓を参考にしてください。

SNSシェア

ブログの拡散効果も狙えるSNSシェアボタン、これをいろいろとカスタムできる項目です。

本文の上と下、両方に設置でき、そのどちらも個別にカスタムできます。

  • ボタンの種類
  • カラー
  • カラム数

などが変更可能です。

最大6個のボタンを表示できるので高い拡散効果を狙えますね。

お好みで試してみてください。

SNSフォロー

こちらも先ほどと同じ、シェアとフォローの違いだけです。

ワードプレス管理画面の[プロフィール]に設定しているそれぞれのSNSアカウントURLが、そのまま反映されます。

後は細かいデザインを変更するといいですね。

画像

ここはおもにアイキャッチの画像についての設定です。

[アイキャッチの表示]のところでいろいろ変更可能です。

  • 画像の囲み効果
  • 画像の拡大効果

なども選べます。

いろいろ試してみましょう。

私は、拡大効果は、デフォルトの[baguetteBox(スマホ向け)]にしています。

通知・アピールエリア・カルーセル

これら3点は、サイトの上部に自分がアピールしたいページへのリンクを貼ることができる設定です。

特になければいじらなくていいですね。

フッター

ヘッダーの対として、サイトの最下部に表示させる部分の設定です。

ここはあまりごちゃごちゃさせない方がいいので、最小限の固定ページを設置しておいて、それらの見栄えを変更することができます。

カラーなどをヘッダーと合わせるといいですね。

ボタン

トップへ戻るボタンの設定です。

いろんな種類が用意されています。

特にいじらずそのままでもいいでしょう。

モバイル

こちらは、モバイルサイトのメニューなどの表示を変更する設定です。

  • モバイルメニュー
  • モバイルボタン

この2つの設定ができます。

メニューの見え方やサイドバーの情報の組み込み方など、スキンによっても違うと思いますのでいろいろ試してみましょう。

404

404ページとは、サイト内でリンク切れがあった際に表示されるエラーページですね。

あまり表示させたくないものですが、そうなった場合のページの見た目を変更できます。

デフォルトでいいと思います。

スポンサーリンク

まとめ

以上で、サイトの外観・デザイン、おまけで見た目に関することについての設定は終了です。

お疲れ様でした。

最初にスキンを設定すると結構気分がアガるので、そこから勢いでやっちゃいましょう♪

ただしスキンやヘッダーで足止めを喰らわないように、できるだけ最初のイメージを固めておくことは大事でしょう。

では、次回はSEO対策や投稿についての設定をまとめていきますので、またのお越しをお待ちしておりまーす。

本日も最後までお読みいただきありがとうございます。

タイトルとURLをコピーしました