せいかつブログ

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

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

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

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

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

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

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

それでは、どうぞ!

スポンサーリンク

Cocoonとは?

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

「Cocoon」とは?

無料で使えるワードプレスのテーマのことです。

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

>>Cocoonの公式サイトはこちらです。

 

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

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

↑目次に戻る

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

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

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

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

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

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

 

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

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

やってみて感じたのは、Cocoonのカスタマイズは慣れるまでが難しく、時間もかかりますが、

わかれば案外簡単ということです。

 

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

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

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

リンクをクリックすると、見たい項目にジャンプすることができます。

↑目次に戻る

1.フォントの変更

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

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

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

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

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

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

フォントの表示イメージ
フォントの表示イメージ

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

↑目次に戻る

2.ヘッダーロゴ・ヘッダーレイアウト

続いてヘッダーロゴです。

ヘッダーロゴの設定
ヘッダーロゴの設定

ブログで結構目に付く場所なので、設定しておくといいと思います。

ヘッダーロゴは、「まきばフォント」で作成しました。

無料で作れるのでおすすめです。

背景も除去して作れるので、結構いいかなと思います。

手順

作成後は、「Cocoon設定」→「ヘッダー」から

「Cocoon設定」→「ヘッダー」
「Cocoon設定」→「ヘッダー」

ヘッダーロゴ」に画像を指定します。

「ヘッダーロゴ」に画像を指定
ヘッダーロゴ」に画像を指定

幅や高さはいろいろと調整していきます。

ちなみに私は、ロゴサイズを【幅200×高さ200】で設定しています。

↑目次に戻る

3.インデックス

インデックス」は、トップページに載せる記事を選ぶカスタマイズです。

インデックスの設定
インデックスの設定

例えば、このようなことが可能です。

  • 新着記事だけを載せる
  • カテゴリごとに記事を分けて載せる

表示させたくない記事を選ぶこともできます。

自分がどんな記事を見てほしいかを考えながら設定するのがいいと思います。

手順

「Cocoon設定」→「インデックス」から設定できます。

 「Cocoon設定」→「インデックス」
「Cocoon設定」→「インデックス」
カードタイプを選ぶ
カードタイプを選ぶ

↑目次に戻る

4.関連記事

記事を読み終わったときに、表示させる「関連記事」の設定です。

関連記事の設定
関連記事の設定
手順

「Cocoon設定」→「投稿」から設定できます。

関連記事設定」の「関連記事を表示する」にチェックを入れると、関連記事を表示することができます。

 「関連記事設定」の「関連記事を表示する」 にチェックを入れる
「関連記事設定」の「関連記事を表示する」 にチェックを入れる

表示数」も変えることができます。ちなみに、私は「4」で設定しています。

表示数も変更可能
表示数も変更可能

↑目次に戻る

5.おすすめカード

リンク付きの画像を、ヘッダー下の目立つ部分に表示させることができます。

おすすめカードの設定
おすすめカードの設定
手順

「Cocoon設定」→「おすすめカード」から設定します。

 「Cocoon設定」→「おすすめカード」から設定
「Cocoon設定」→「おすすめカード」から設定

私は、4つのカテゴリをメニューに登録して表示しています。

メニュー選択で、作成済みのメニューを選ぶ
メニュー選択で、作成済みのメニューを選ぶ

↑目次に戻る

6.カルーセル

ヘッダー下部分で、記事が次々に入れ替わる表示です。

カルーセルの表示イメージ
手順

「Cocoon設定」→「カルーセル」から設定できます。

 「Cocoon設定」→「カルーセル」で設定
「Cocoon設定」→「カルーセル」で設定

(注意)カルーセルの表示設定について

記事の上に表示すると、記事を開いたときに記事のタイトルがパッと見えなくなります。

そのため、「カルーセルの表示」を[投稿・固定ページ以外で表示]にするのがおすすめです。

カルーセルの表示
カルーセルの表示

↑目次に戻る

7.モバイルメニュー

スマホでブログを開くと、上部・下部にボタンが表示される設定です。

手順

「Cocoon設定」→「モバイル設定」から設定できます。

「Cocoon設定」→「モバイル設定」
「Cocoon設定」→「モバイル設定」

↑目次に戻る

8.サイドバー・ボックスナビ

こんな風に、サイドバーに画像アイコンのメニューを表示させることもできます。

↑目次に戻る

9.目次追従

記事を読む間、右側に目次がついてくる機能です。

Cocoonでも、設定ができます。

目次追従のイメージ

↑目次に戻る

10.アイキャッチ画像のカテゴリ表示を消す

以前は、こんな感じでアイキャッチ画像の上にカテゴリ表示がされていました。

アイキャッチ画像の上にカテゴリ表示されるイメージ
アイキャッチ画像の上にカテゴリ表示されるイメージ
まちゃりさ
まちゃりさ

せっかくの画像が見えないぞ・・

と困っていましたが、これを解決してくれました。

やり方はとっても簡単です

下のコードを「カスタムCSS」に入れるだけです。

/***  トップページのアイキャッチ カテゴリ非表示 ***/
.cat-label {
display: none;
}
手順

ワードプレス管理画面から、「外観」→「カスタマイズ」を開きます。

「外観」→「カスタマイズ」

追加CSS」をクリックしたら、

「追加CSS」をクリック

先ほどのコードを一番下に入れて[公開済み]をクリックします。右上のボタンをクリックするとコピーできます。

/***  トップページのアイキャッチ カテゴリ非表示 ***/
.cat-label {
display: none;
}

コードを入力し、[公開済み]をクリック
コードを入力し、[公開済み]をクリック

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

↑目次に戻る

まとめ

いかがでしたか?

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

リンクをクリックすると、見たい項目に戻ることができます。

Cocoonは便利で利用者も多く、調べれば何でもできてしまう印象です。

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

 

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

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

 

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

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

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

 

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

おわり。

コメント

  1. でんちゃん より:

    始めてコメントさせていただきます。
    まきばフォントにどうやって画像を挿入するのですか?
    ご回答をいただけると嬉しいです。よろしくお願いします。

    • macharisamacharisa より:

      でんちゃんさん、はじめまして。
      まきばフォント画面の下に「画像合成」という欄があるので、そこから挿入できるかと思います。
      なお、まきばフォントは少しわかりにくいので、現在はCanva(https://www.canva.com/ja_jp/)という無料デザインツールをおすすめしています。
      こちらだと簡単に画像が作れると思うので、まきばフォントがわかりにくい場合は、試してみてください。

  2. でんちゃん より:

    ありがとうございます!返信遅れて申し訳ありませんでした!
    結局Canvaでさせていただきました!
    よろしければデザインを含めて色々と情報交換などもさせていただきたいです!
    メールにご連絡いただけないでしょうか?
    ご検討何卒宜しくお願い致します。

SNS

最近の投稿

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