今日はCocoonの初期設定と簡単なカスタマイズについて書きます。
こんにちは。
いっちゃんです。(@hi_icchan_jp)
Cocoon(WordPressのテーマ)をカスタマイズしまくってようやく記事が書けるようになりました。

カスタマイズの参考にどうぞ!
Cocoonの初期設定について
Cocoonの初期設定についてです。
Cocoonヘッダー付近の名称
Cocoonのヘッダー付近の名称を説明します。
Cocoon(Wordpressの無料テーマ)のヘッダー付近の呼び名は以下です
- グローバルナビゲーション:メニューが入る場所です。
- カルーセル:ブログで書いた記事などを表示できます。
- ヘッダー:やじるしで示されているエリアがヘッダーです。
- ロゴ:ご自分でロゴを作った場合、ここにロゴが表示されます。
Cocoon(WordPressの無料テーマ)の画面は独特です。
Cocoon(WordPressの無料テーマ)のエリア別の呼び名は覚えておきましょう。
Cocoonヘッダー付近の名称は上記に記載しました。
Cocoon(WordPress)で最初にすること
Cocoonテーマ(WordPress)はスキンを選び最初に背景色を決めます。
なぜならCocoon(WordPressの無料テーマには、ヘッダー、メイン記事、サイドバーの境界が無いからです。
背景色設定方法:ログイン→ダッシュボード→Cocoon設定→全体→サイト背景色で設定できます。
全体のページボタンを押して、サイト背景色で色を変更します。
Cocoon(WordPressの無料テーマのサイト背景色を決めないと、メインのエリアと、サイドバーの色分けがありません。
背景色を設定しないと、メリハリの無い外観になってしまいます。
Cocoonのグローバルナビの背景色の設定
Cocoonのグローバルナビの背景色を決めます。
グローバルナビの色を決めると、サイト全体のポイントになります。
方法:ダッシュボード→Cocoon設定→全体ボタン→グローバルナビメニュー色の順に押す。
②Cocoon(WordPressの無料テーマ設定に入って全体のボタンを押す。
次に真ん中あたりにあるサイト背景色でサイト全体の色を決めるだけで終了です。

簡単ですね^^
Cocoonのサイトキーカラーの設定
Cocoonのサイトキーカラーを設定します。

Cocoonのサイトキーカラーは段落2 の色です
私のブログでは薄い黒になってる部分です。
設定方法は以下です。
- ダッシュボード Cocoon設定
- 全体
- サイトキーカラーの設定
Cocoon(WordPressの無料テーマ)設定から全体ボタンを押して、サイトキーカラーを決めます。
Cocoon(WordPress)のアイキャッチ画像を作るアプリ
Cocoon(WordPress)のアイキャッチ画像を作るアプリです。
アイキャッチ画像アプリについて
アイキャッチ画像を作るアプリはCanvaをお勧めします。
Canvaは無料でありながら、多くの組み合わせやテンプレートが使えます。

『Canva』は素晴らしいです。
Canvaの使い方を解説します。
Canvaの使い方について①
Canvaの使い方は下記に説明します。
- Canvaに登録する。
- 画面右下カスタマイズを押す。
- 画像サイズを決める。私は1305×550pxにしています。
アイキャッチ画像のサイズを入力したら、新しいデザインを作成ボタンを押す。

キャンバスが出来るので、以下のようにデザインを作ります。
Canvaの使い方について②
Canvaの使い方について説明します。
- ①背景で好きな壁紙を選ぶ
- ②,③素材で四角のボックスを選択
- ※色を変えたければ左上のボックスの変更ボタンで変更
- ④、⑤透明度のボタンで50パーセントに調節
- ⑥入れたい文字を入れる。
スクリーンショットは、下記のCanvaのサイトから撮らせていただきました。
[!https://www.canva.com/]Canvaより
Cocoonのアイキャッチ画像を作るアプリはCanvaがお勧めです。
Cocoon(WordPress)テーマの良い点
Cocoon(WordPress)テーマの良い点は下記です。
- Cocoon(Wordpress)はサイト高速化の工夫あり
- Cocoon(Wordpress)はデザインがお洒落。
- Cocoon(Wordpress)はカルーセルがある。
- Cocoon(Wordpress)は機能が充実。
- Cocoon(Wordpress)はカスタマイズしやすい。
私の以前のブログはサイトの表示速度が落ちていたので、テーマの変更を考えました。
そこでSEOを考えて、高速、かつデザインが美しいWordPress無料テーマのCocoonを選びました。
サーバーはWordPress自動インストール機能のあるXサーバーです。
Cocoon(Wordpress)を自分でカスタマイズできると楽しいです。
ただし、Cocoon(Wordpress)はシンプルなデザインです。
自分の好きなようにカスタマイズするには、FTPソフトなどでてCSSを指定する必要があります。
Cocoon(Wordpressの無料テーマ)はカルーセルを設定すると、有料テーマのような見た目にできます。
とにかくCocoonはお勧めです。
Cocoonの記事はコツコツ増やしていきますね!