この記事では、Cocoon初期設定の方法をまとめました。
「ワードプレスインストール後にするべき初期設定」記事の設定をした後にこの記事の設定を行います。
SWELLテーマを使用している場合は「SWELL初期設定をしよう」記事をご覧ください。
Cocoon初期設定
Cocoon初期設定には、以下のようなものがあります。
- プロフィールを設定
- ファビコン・OGP・NO IMAGEの画像を設定
- Cocoonのスキンでデザインを整える
- Cocoon設定でデザインを整える
- 拡張カラーパレット色を設定する
- モバイルボタンの設定
- タグ選択をチェックリスト形式にする
- 吹き出しの設定
プロフィールを設定
【ユーザー】→【プロフィール】
Cocoonでのプロフィール設定方法は「【Cocoon】プロフィールウィジェットの設定とカスタマイズ」の以下の２つをおこなってください。
ウィジェットのカスタマイズは必要に応じて後ですればいいよ！
ファビコン・OGP・NO IMAGEの画像を設定
ファビコン：【外観】→【カスタマイズ】→【サイト基本情報】
OGP：【Cocoon設定】→【Cocoon設定】→【OGP】タブのホームイメージ
NO IMAGE画像：【Cocoon設定】→【Cocoon設定】→【画像】タブのNO IMAGE設定
無くても大丈夫ですが、せっかくなのでオリジナル画像が表示されるように設定しておきます。
Cocoonのスキンでデザインを整える
【Cocoon設定】→【スキン】タブ
Cocoonのスキンとは、簡単に言えば着せ替えできるデザインです。
CocoonはCSSで自分でデザインをすることができますが、ブログをはじめた頃はそこまで手が回らない場合も多いです。そんなときに、好きなデザインのスキンを選んで変更すれば、簡単に自分好みのデザインに変えることができる素晴らしい機能です。
CSSとは、Web系プログラミング言語（マークアップ言語）です。
慣れたら簡単に使用できる言語ですが、０から学ぶとなると時間がかかるので最初はスキンありにして余裕ができたときに手を出すのがおすすめです。
ヒビラボでは、Cocoonをカスタマイズする方法やCSSコード（コピペ可）をまとめています。
Cocoonカスタマイズするときは、当ブログのカスタマイズ記事も読んでみてくださいね。
Cocoon設定でデザインを整える
【Cocoon設定】→各種タブ
【Cocoon設定】を開いたら、【スキン】タブ以外にもずらっとタブがあります。
とりあえずひととおり目を通して、後から必要に応じて設定すればOKです。
一部の機能を紹介します。
拡張カラーパレット色
【Cocoon設定】→【エディター】タブ→【拡張カラーパレット色】でよく使う色を設定できる
運営者はこの機能を知らなくて、ボックスの枠の色と背景色を設定するときにいちいちカラーコードを手入力していたよ！
モバイルボタンの設定
【Cocoon設定】→【モバイル】タブでスマホで見たときの画面をカスタマイズできる
【モバイル】タブでは、ヘッダーモバイルボタン、フッターモバイルボタンを表示するか選択することができます。
スマホでネットサーフィンしていると、フッターモバイルボタンの表示がおかしかったりモバイルスライドインメニューの中身がなかったりするブログが意外と多いです。
モバイル表示の詳しい方法は「【Cocoon】モバイル表示をまとめてカスタマイズ｜ヘッダーやスライドインメニュー」の記事でまとめています。
３：タグ選択をチェックリスト形式にする
タグは初期設定だと手入力で入力しなければならないので、チェックリスト形式にすると設定しやすくなります。
【Cocoon設定】→【エディター】タブ→【タグ選択をチェックリスト形式にする】をチェックする
＜変更前＞
＜変更後＞
４：吹き出しの設定
【Cocoon設定】→【吹き出し】
吹き出しに設定するアイコンや吹き出しスタイルを設定します。
Cocoonの場合は、記事作成した後から吹き出し設定を変更しても、変更以前に貼り付けた吹き出しの内容は一括で変更されないのでご注意ください。
まとめ：ブログのデザインを整えよう！
細かい部分はいつでも後から変更すれば大丈夫です！
ブログのデザインをおおまかに整えられたら、次は記事を書いてみましょう！
