こちらはYouTubeでも配信します。一緒にご覧いただくと分かりやすいと思います。
Cocoonのインストールが完了し、これでブログ作りが始められるわけですが、
この状態でどこから何をすればいいのか、なかなか分からないと思います。
Cocoonは高機能であるが故、設定項目もたくさんあり正直戸惑います。
Cocoonの公式サイトには詳しいマニュアルもありますが、初心者には難しい部分があります。最初は何が分からないか分からない状態だと思いますので、記事を書くにあたっての最低限の設定をしておき、必要に応じて見直していきたいと思います。
Cocoon設定 スキン
WordPressのダッシュボード画面のCocoon設定にマウスオーバー(重ねる)すると、
更にCocoon設定が出てきますのでクリックします。
![](https://hoshino-blog.com/wp-content/uploads/2020/04/02-04-26_10h47_43-300x142.jpg)
Cocoon設定画面が開くとスキン設定画面になっています。
![](https://hoshino-blog.com/wp-content/uploads/2020/04/02-04-26_10h56_53-300x147.jpg)
画面をスクロールして下に行くとスキン一覧があります。
写真の絵にマウスオーバーすると色々なデザインが見られます。
![](https://hoshino-blog.com/wp-content/uploads/2020/04/02-04-26_11h01_24-300x146.jpg)
スキンによって色合いや配置などを簡単に変更することが出来ます。
![](https://hoshino-blog.com/wp-content/uploads/2020/04/02-04-26_11h07_17-300x146.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/04/02-04-26_11h09_08-300x146.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/04/02-04-26_11h10_53-300x146.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/04/02-04-26_11h13_17-300x146.jpg)
チェックボタンをクリックして変更を保存すれば、
![](https://hoshino-blog.com/wp-content/uploads/2020/04/02-04-26_11h44_40-300x146.jpg)
プレビュー画面に反映されますので、確認してデザインを決められます。
![](https://hoshino-blog.com/wp-content/uploads/2020/04/02-04-26_11h51_56-300x146.jpg)
色合いや配置の変更
![](https://hoshino-blog.com/wp-content/uploads/2020/04/02-04-26_11h56_21-300x149.jpg)
文字のフォントや大きさもスキンによって変わります。
![](https://hoshino-blog.com/wp-content/uploads/2020/04/02-04-26_11h58_50-300x146.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/04/02-04-26_12h04_02-300x147.jpg)
変更はいつでも出来ますので、ある程度作り込んでから変更しても良いと思います。
![](https://www16.a8.net/0.gif?a8mat=3B9SLB+AOM1KI+CO4+6D4GH)
Cocoon設定 全体
全体タブを選択します。
![](https://hoshino-blog.com/wp-content/uploads/2020/04/zen-1-300x146.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/04/zen-1-300x146.jpg)
プレビュー画面の下にキーカラーの設定があります。
サイトキーカラーは以下の赤枠の色の変更が出来ます。
![](https://hoshino-blog.com/wp-content/uploads/2020/04/keycollar-2-300x276.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/04/keycollar-2-300x276.jpg)
サイトキーカラーをクリックするとカラーパネルが開くので、好みの色を選択します。
今回は黒を選択して保存します。
![](https://hoshino-blog.com/wp-content/uploads/2020/04/keycollar2-300x111.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/04/keycollar2-300x111.jpg)
赤枠の部分が黒に変わりました。
スキンの選択でこの部分は指定されていますので、あえて変える必要もありませんが、ここではどこが変わるかを説明しておきます。
スキンを変えると選択したスキンの設定に上書きされます。
![](https://hoshino-blog.com/wp-content/uploads/2020/04/b-300x133.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/04/b-300x133.jpg)
サイトキーテキストカラーで赤を選択すると
![](https://hoshino-blog.com/wp-content/uploads/2020/04/s-300x112.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/04/s-300x112.jpg)
テキストの色が赤に変わりました。
![](https://hoshino-blog.com/wp-content/uploads/2020/04/t-300x133.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/04/t-300x133.jpg)
サイトフォントは「游ゴシック体、ヒラギノ角ゴ」がデフォルトですが私は「メイリオ、ヒラギノ角ゴ」に変えました。文字サイズ、文字色はデフォルトのままです。
特に変えなくても良いと思います。
![](https://hoshino-blog.com/wp-content/uploads/2020/04/f-300x125.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/04/f-300x125.jpg)
モバイルサイトフォント・文字の大きさ・サイトアイコンフォントなどもデフォルトのままで良いと思います。
![](https://hoshino-blog.com/wp-content/uploads/2020/04/f2-300x85.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/04/f2-300x85.jpg)
サイト背景色
こちらも色の変わる部分を確認しておいてください。特に変更する必要はありません。
![](https://hoshino-blog.com/wp-content/uploads/2020/04/s2-300x133.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/04/s2-300x133.jpg)
背景の色が変わります。
![](https://hoshino-blog.com/wp-content/uploads/2020/04/h-300x128.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/04/h-300x128.jpg)
以下の部分もデフォルトのままにします。
特にサイトリンク色(リンク色=青の認識があるので)は変更しない方が良いです。
![](https://hoshino-blog.com/wp-content/uploads/2020/04/s3-300x146.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/04/s3-300x146.jpg)
サイドバーの位置と表示状態ですが、ここもデフォルトのままでいいと思います。
サイドバーを表示したくないようなページが出てきた場合は後で変更しましょう。
![](https://hoshino-blog.com/wp-content/uploads/2020/04/s4-300x146.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/04/s4-300x146.jpg)
サイドバーを左にした場合は下のようになります。
![](https://hoshino-blog.com/wp-content/uploads/2020/04/s5-300x125.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/04/s5-300x125.jpg)
ファビコンについては別のページで作成方法から詳しく説明します。
他はデフォルトのままで大丈夫です。
![](https://hoshino-blog.com/wp-content/uploads/2020/04/02-04-27_17h14_10-300x146.png)
![](https://hoshino-blog.com/wp-content/uploads/2020/04/02-04-27_17h14_10-300x146.png)
以上で最低限の設定が終わりました。
他の設定は実際に記事を書きながらしていきます。
次回はいよいよ記事の作成になります。
![](https://www16.a8.net/0.gif?a8mat=3B9SLB+AOM1KI+CO4+6D4GH)
![](https://www16.a8.net/0.gif?a8mat=3B9SLB+AOM1KI+CO4+6D4GH)
![](https://www16.a8.net/0.gif?a8mat=3B9SLB+AOM1KI+CO4+6D4GH)