こんにちは、めえです！今回は、ブログのテーマ「Cocoon」の初期設定で僕が実際にやったことをまとめます！
ConoHa WINGでブログを開設したあと、一番時間がかかったのがCocoonの初期設定でした。
Cocoonは無料なのに機能がとても多いテーマです。
そのぶん設定画面を開くとタブがずらっと並んでいて、正直「え、これ全部やるの…？」と固まりました。
先に結論を書くと、最初から全部やる必要はありません。
僕は「見た目に関わるところ」と「SNSでシェアされたときの見え方」だけ先に整えて、あとは記事を書きながら直していくことにしました。
この記事でわかること
- Cocoonの初期設定で、最低限やっておきたいこと
- 僕が実際に選んだ設定とその理由
- あとでやればいい設定
- 設定で迷ったときの考え方
Cocoonの設定はどこでする？
WordPressの管理画面の左側のメニューに「Cocoon設定」があります。ここからほとんどの設定ができます。
ほかに、WordPress本体の設定（「設定」や「外観」のメニュー）で変えるものもあります。この記事では両方まとめて紹介します。
子テーマを有効にしておく
Cocoonには「親テーマ」と「子テーマ」があります。
ブログで有効にするのは 子テーマ のほうです。
親テーマはアップデートで中身が入れ替わるので、親テーマを直接いじると、更新したときに自分の変更が消えてしまうことがあります。子テーマを使っておけば、その心配がありません。
「外観」→「テーマ」で、「Cocoon Child」が有効になっているか確認しておきましょう。
僕が最初にやった設定
実際にやったのは、この6つです。
| 設定 | 場所 | 僕の設定 |
|---|---|---|
| スキン | Cocoon設定 → スキン | simple-darkmode |
| 全体（フォント・文字サイズ） | Cocoon設定 → 全体 | ヒラギノ系のフォント・18px |
| ヘッダー | Cocoon設定 → ヘッダー | ロゴを真ん中、メニューを上に |
| フッター | Cocoon設定 → フッター | フッターにもロゴを表示 |
| タイトル | Cocoon設定 → タイトル | 「ブログ名 – キャッチフレーズ」の形 |
| OGP | Cocoon設定 → OGP | SNS用の画像を設定 |
ひとつずつ紹介します。
スキン：サンプル画像を見比べて、イメージに近いものを選んだ
スキンは、ブログ全体の見た目（色・デザイン）をまとめて変えられる機能です。
スキンの一覧にはサンプル画像が並んでいるので、それを見比べて 自分がイメージしていたブログに一番近いもの を選びました。僕が選んだのは「simple-darkmode」です。
特別な理由はありません。でも、スキンは あとから何度でも変えられる ので、最初は直感で選んで大丈夫だと思います。
全体：フォントと文字サイズを読みやすく
「全体」タブでは、ブログ全体のフォントや文字サイズを変えられます。
僕は、フォントをヒラギノ系、文字サイズを18pxにしました。
スマホで読んだときに文字が小さいと読みにくいので、少し大きめにしています。
ヘッダー：ロゴを真ん中に
「ヘッダー」タブでは、ブログの一番上の部分（ヘッダー）のレイアウトやロゴを設定します。
僕はロゴ画像を入れて、レイアウトを「ロゴが真ん中・メニューが上」の形にしました。
フッター：ページの一番下も整える
「フッター」タブでは、ページの一番下（フッター）の見た目を変えられます。
僕はフッターにもロゴを表示するようにしました。
タイトル：検索結果に出るタイトルの形
「タイトル」タブでは、検索結果やブラウザのタブに表示されるタイトルの形を決めます。
僕のブログは「ブログ名 – キャッチフレーズ」の形にしています。
OGP：SNSでシェアされたときの画像
OGPは、ブログがXなどのSNSでシェアされたときに表示される画像やタイトルのことです。
初期状態だと、Cocoonのサンプル画像が表示されてしまいます。
僕はCanvaでブログ名入りの画像を作って、「OGP」タブの ホームイメージ に設定しました。
これを設定し忘れると、シェアされたときに自分のブログと関係ない画像が出てしまうので、早めにやっておくのがおすすめです！
WordPress側でやったこと
Cocoon設定とは別に、WordPress本体のメニューで次のことをやりました。
サイトアイコン（ファビコン）を設定
ブラウザのタブに表示される小さなアイコンです。
初期状態ではCocoonのアイコンになっているので、Canvaでブログ用のアイコンを作って設定しました。
メニューを作る
「外観」→「メニュー」で、ヘッダーとフッターのメニューを作りました。
- ヘッダー（グローバルメニュー）：ホーム・カテゴリー
- フッター：プロフィール・お問い合わせ・プライバシーポリシー
サイドバーを整える
「外観」→「ウィジェット」で、サイドバーを整理しました。
初期状態だと「Recent Posts」「Archives」など英語の項目が並んでいたので、「検索・新着記事・カテゴリー」の3つだけにしました。
プロフィールページを作る
固定ページでプロフィールを作りました。どんな人が書いているブログなのかがわかると、読者に安心してもらえると思ったからです。
失敗したこと：SEOプラグインを入れて設定が二重になった
設定の途中で、よくわからないまま「Yoast SEO」というSEO用のプラグインを入れていました。
あとで確認したら、CocoonのSEO・OGPの機能とYoast SEOの機能がかぶっていて、SNS用の情報や説明文が二重に出ていました。
Cocoonには、もともとSEOやOGPの機能が入っています。なので、僕はYoast SEOを無効にしました。
「入れたほうがいいのかな？」と思ってプラグインを入れる前に、テーマに同じ機能がないか確認したほうがいいです。僕はここで遠回りしました…！
あとでやればいい設定
次の設定は、記事を書きながら少しずつやれば大丈夫だと思っています。
僕もまだ手を付けていない設定がたくさんあります。やったら、この記事に追記していきます！
設定で迷ったときの考え方
Cocoonは、こだわろうと思えばいくらでもこだわれます。
僕も、色やフォントを変えては戻して…を繰り返して、気づいたら何時間もたっていました。
そこで決めたのが、きりのいいところで切り上げる ことです。
ブログで一番大事なのは記事です。
デザインは最低限にして、まずは1記事書く。気になるところは、記事を書きながら直していけばいいと割り切りました。
完璧な見た目で1記事もないブログより、見た目はそこそこでも記事があるブログのほうがずっといいと思います！
まとめ
Cocoonの初期設定で、僕がやったことをまとめます。
| やったこと | ひとこと |
|---|---|
| 子テーマを有効にする | 「Cocoon Child」が有効か確認 |
| スキン | サンプル画像を見て直感で選んでOK |
| フォント・文字サイズ | スマホで読みやすい大きさに |
| ヘッダー・フッター | ロゴとレイアウトを整える |
| タイトル・OGP | 検索結果とSNSでの見え方を整える |
| サイトアイコン・メニュー・サイドバー | WordPress側で整える |
| SEOプラグイン | Cocoonと機能がかぶるので無効にした |
最初から全部やろうとしなくて大丈夫です。
最低限を整えたら、まずは記事を書き始めましょう！
次は、ブログ開設直後にやっておきたいことをまとめる予定です。
コメント