せいかつブログ

【Cocoon】やってよかったおすすめカスタマイズ10選(ブログ初心者向け)

この記事は約7分で読めます。

こんにちは、まちゃりさです。

今回は、ブログ立ち上げ時に知っておきたかった、やってよかった「Cocoon」のカスタマイズを10個ご紹介します。

Cocoonのカスタマイズは調べながら色々試してきましたが、結構時間がかかりました。

今回ご紹介するカスタマイズを使えば、Cocoonでも有料ブログに引けをとらない、おしゃれなブログができちゃいます。

よろしければ、ご参考にしてください。

それでは、どうぞ!

スポンサーリンク

Cocoonとは?

私が使っているテーマ「Cocoon」についてご紹介しておきます。

「Cocoon」は、無料で使えるワードプレスのテーマのことです。

わいひらさんという方が作成しており、シンプルかつ、カスタマイズ性に優れたテーマです。

自分がどのテーマを使っているかわからない場合は、ダッシュボード画面の「外観」→「テーマ」から確認できます。

Cocoonやってよかったカスタマイズ10選

ブログ歴が結構長い人のブログを見ると、

すごい手が込んでて私のブログとは比べ物にならない

そんな風に思われるかもしれません。

私もブログ開設当初は、そうでした。

でも、慣れてくるとだんだん、どんなカスタマイズをしているかがわかってきます。

私は「これ見やすいな」と思ったブログを参考にしながら、Cocoonのカスタマイズを行ってきました。

ぶっちゃけ、最初は何もわからなかったので、1つずつ調べては試すことの繰り返し。

やってみて感じたのは、Cocoonのカスタマイズは慣れるまでが難しく、時間もかかりますが、わかれば案外簡単ということです。

そんな私が、ようやくカスタマイズに一満足したところで、やってよかったと思うCocoonのカスタマイズ10個をご紹介したいと思います。

やってよかったCocoonカスタマイズ
  • フォントの変更
  • ヘッダーロゴ・ヘッダーレイアウト
  • インデックス
  • 関連記事
  • おすすめカード
  • カルーセル
  • モバイルメニュー
  • サイドバー・ボックスナビ
  • 目次追従
  • アイキャッチ画像のカテゴリ表示を消す

ぶっちゃけ、「モバイルメニュー」までは、設定方法を知れば一瞬で変えることができるため、カスタマイズとは言えないレベルです。

下位の3つは、少しいじくる必要があるので、手順を確認していただければと思います。

1.フォントの変更

まず、フォントの変更です。

サイトのイメージや記事の印象を決めるフォントは、結構大事かなと思っています。

フォント変更は、「Cocoon設定」→「全体」から選択できます。

ちなみに、私は「小杉丸ゴシック」を使っています。

結構丸い感じでお気に入りです。

そんなに種類はないですが、ブログサイトのイメージに合わせて一度替えてみるのもアリだと思います。

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;
}

簡単にできるので、私のように画像に被るのが気になる方は設定してみてください。

まとめ

いかがでしたか?

今回は、私がやってよかったと思ったCocoonのカスタマイズを10個紹介しました。

Cocoonは、結構利用者も多いので、調べれば何でもできちゃうなという印象です。

カスタマイズをしてみたことで、理想のブログサイトができると気分もあがるし、記事を書くモチベーションにもつながりました

自分で作り上げたサイトって感じがして、気合が入りますよね。

また、訪問してくださった方にとっても、より記事が読みやすいと感じてもらえるのではないでしょうか?

私はこれからも、よいブログサイトを参考に、色々とカスタマイズを試していきたいと思います。

よければ私のカスタマイズを参考に、すてきなブログサイトを作ってください。

こんなカスタマイズがおすすめ!というのがあれば、ぜひコメントお待ちしています。

最後までお読みいただき、ありがとうございました。

おわり。

コメント

タイトルとURLをコピーしました