こんにちは、まちゃりさです。
今回は、ブログ立ち上げ時に知っておきたかった、やってよかった「Cocoon」のカスタマイズを10個ご紹介します。
Cocoonのカスタマイズは調べながら色々試してきましたが、結構時間がかかりました。
今回ご紹介するカスタマイズを使えば、Cocoonでも有料ブログに引けをとらない、おしゃれなブログができます！
よろしければ、ご参考にしてください。
それでは、どうぞ！
Cocoonとは？
私が使っているテーマ「Cocoon」についてご紹介しておきます。
自分がどのテーマを使っているかわからない場合は、ダッシュボード画面の「外観」→「テーマ」から確認できます。
Cocoonやってよかったカスタマイズ10選
ブログ歴が結構長い人のブログを見ると、
すごい手が込んでて私のブログとは比べ物にならない
そんな風に思われるかもしれません。
私もブログ開設当初は、そうでした。
でも、慣れてくるとだんだん、どんなカスタマイズをしているかがわかってきます。
私は「これ見やすいな」と思ったブログを参考にしながら、Cocoonのカスタマイズを行ってきました。
最初は何もわからなかったので、1つずつ調べては試すことの繰り返し。
やってみて感じたのは、Cocoonのカスタマイズは慣れるまでが難しく、時間もかかりますが、
わかれば案外簡単ということです。
そんな私が、やってよかったと思うCocoonのカスタマイズ10個をご紹介したいと思います。
⑦「モバイルメニュー」までは、設定方法を知れば一瞬で変えることができるため、カスタマイズとは言えないレベルです。
下位の3つは、少しいじくる必要があるので、手順を確認していただければと思います。
リンクをクリックすると、見たい項目にジャンプすることができます。
1.フォントの変更
まず、フォントの変更です。
サイトのイメージや記事の印象を決めるフォントは、結構大事かなと思っています。
フォント変更は、「Cocoon設定」→「全体」から選択できます。
ちなみに、私は「小杉丸ゴシック」を使っています。
結構丸い感じでお気に入りです。
そんなに種類はないですが、ブログサイトのイメージに合わせて一度替えてみるのもアリだと思います。
ブログのデザインを一瞬で変えたいときは、スキンを使うのがおすすめ！
細かいカスタマイズは不要で、ボタン1つでイメージを変えられます。
2.ヘッダーロゴ・ヘッダーレイアウト
続いてヘッダーロゴです。
ブログで結構目に付く場所なので、設定しておくといいと思います。
ヘッダーロゴは、「まきばフォント」で作成しました。
無料で作れるのでおすすめです。
背景も除去して作れるので、結構いいかなと思います。
作成後は、「Cocoon設定」→「ヘッダー」から
「ヘッダーロゴ」に画像を指定します。
幅や高さはいろいろと調整していきます。
ちなみに私は、ロゴサイズを【幅200×高さ200】で設定しています。
3.インデックス
「インデックス」は、トップページに載せる記事を選ぶカスタマイズです。
例えば、このようなことが可能です。
- 新着記事だけを載せる
- カテゴリごとに記事を分けて載せる
表示させたくない記事を選ぶこともできます。
自分がどんな記事を見てほしいかを考えながら設定するのがいいと思います。
「Cocoon設定」→「インデックス」から設定できます。
オリジナルのトップページを作成したい場合は、以下の記事を参考にしてください。
4.関連記事
記事を読み終わったときに、表示させる「関連記事」の設定です。
「Cocoon設定」→「投稿」から設定できます。
「関連記事設定」の「関連記事を表示する」にチェックを入れると、関連記事を表示することができます。
「表示数」も変えることができます。ちなみに、私は「4」で設定しています。
5.おすすめカード
リンク付きの画像を、ヘッダー下の目立つ部分に表示させることができます。
「Cocoon設定」→「おすすめカード」から設定します。
私は、4つのカテゴリをメニューに登録して表示しています。
詳しい手順を知りたい方は、ヘッダー下の画像リンク「おすすめカード」を表示させるを参考にしてください。
6.カルーセル
ヘッダー下部分で、記事が次々に入れ替わる表示です。
「Cocoon設定」→「カルーセル」から設定できます。
（注意）カルーセルの表示設定について
記事の上に表示すると、記事を開いたときに記事のタイトルがパッと見えなくなります。
そのため、「カルーセルの表示」を[投稿・固定ページ以外で表示]にするのがおすすめです。
7.モバイルメニュー
スマホでブログを開くと、上部・下部にボタンが表示される設定です。
モバイルメニュー（上部） 
モバイルメニュー（下部）
「Cocoon設定」→「モバイル設定」から設定できます。
詳しい手順を知りたい方は、【Cocoon／カスタマイズ】スマホ表示用のボタンを表示させるを参考にしてください。
8.サイドバー・ボックスナビ
こんな風に、サイドバーに画像アイコンのメニューを表示させることもできます。
サイドバーにアイコンボックス 
記事の下にも表示しています。
詳しい手順を知りたい方は、【Cocoon／カスタマイズ】サイドバーにアイコンボックスを表示させるを参考にしてください。
9.目次追従
記事を読む間、右側に目次がついてくる機能です。
Cocoonでも、設定ができます。
詳しい手順を知りたい方は、【Cocoon／カスタマイズ】目次がついてくる！目次追従の設定を参考にしてください。
10.アイキャッチ画像のカテゴリ表示を消す
以前は、こんな感じでアイキャッチ画像の上にカテゴリ表示がされていました。
せっかくの画像が見えないぞ・・
と困っていましたが、これを解決してくれました。
やり方はとっても簡単です。
下のコードを「カスタムCSS」に入れるだけです。
/*** トップページのアイキャッチ カテゴリ非表示 ***/
.cat-label {
display: none;
}ワードプレス管理画面から、「外観」→「カスタマイズ」を開きます。
「追加CSS」をクリックしたら、
先ほどのコードを一番下に入れて[公開済み]をクリックします。右上のボタンをクリックするとコピーできます。
/*** トップページのアイキャッチ カテゴリ非表示 ***/
.cat-label {
display: none;
}![コードを入力し、[公開済み]をクリック](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/03/cocoon13-3-1.png?resize=1024%2C536&ssl=1)
簡単にできるので、私のように画像に被るのが気になる方は、設定してみてください。
まとめ
いかがでしたか？
今回は、私がやってよかったと思ったCocoonのカスタマイズを10個紹介しました。
リンクをクリックすると、見たい項目に戻ることができます。
Cocoonは便利で利用者も多く、調べれば何でもできてしまう印象です。
カスタマイズをしてみて、理想のブログサイトができると気分もあがるし、記事を書くモチベーションにもつながりました。
自分で作り上げたサイトって感じがして、気合が入りますよね。
また、訪問してくださった方にとっても、より「記事が読みやすい」と感じてもらえるのではないでしょうか？
私はこれからも、よいブログサイトを参考に、色々とカスタマイズを試していきたいと思います。
よければ私のカスタマイズを参考に、すてきなブログサイトを作ってください。
こんなカスタマイズがおすすめ！というのがあれば、ぜひコメントお待ちしています。
Cocoonやワードプレスブログについては、こちらでまとめています。
それでは、最後までお読みいただき、ありがとうございました。
おわり。
コメント
始めてコメントさせていただきます。
まきばフォントにどうやって画像を挿入するのですか？
ご回答をいただけると嬉しいです。よろしくお願いします。
でんちゃんさん、はじめまして。
まきばフォント画面の下に「画像合成」という欄があるので、そこから挿入できるかと思います。
なお、まきばフォントは少しわかりにくいので、現在はCanva（https://www.canva.com/ja_jp/）という無料デザインツールをおすすめしています。
こちらだと簡単に画像が作れると思うので、まきばフォントがわかりにくい場合は、試してみてください。
ありがとうございます！返信遅れて申し訳ありませんでした！
結局Canvaでさせていただきました！
よろしければデザインを含めて色々と情報交換などもさせていただきたいです！
メールにご連絡いただけないでしょうか？
ご検討何卒宜しくお願い致します。