クオリティが倍増するCocoonカスタマイズ4選【手順】

ブログ
ブログ初心者
ブログ初心者

ブログを開設しました!初心者なので無料テーマのCocoonを使っています。デザインがシンプルすぎるので変えたいけど、なにをどうすれば変えられるのか分かりません。一気にブログっぽくなるCocoonのカスタマイズを教えてください!

今回はこのようなお悩みを解決していきます。

結論からいうと、今回紹介する4つだけカスタマイズすれば一気にブログっぽいサイトになります。ぜひ最後まで読んでみて下さい。

✓本記事の内容

・無料テーマ『Cocoon』の特徴
・クオリティが上がるCocoonカスタマイズ4選

無料テーマ『Cocoon』はシンプルさが特徴

無料テーマ『Cocoon』はなんといってもシンプルさが特徴。

シンプルなCocoonはカスタマイズ性が高いので、メリットとしては後からなんでも付け足せてそれぞれの個性を出せることです。

しかし、その特徴ゆえにCocoonのカスタマイズは奥が深すぎます

実際に“Cocoon カスタマイズ”とGoogleで調べると数十個ものカスタマイズがでてくるので、「よくわかんね~」となる方も多いと思います。

ひとつひとつカスタマイズをしていったのではサイトのデザイン変更だけにかなり時間をとられてしまうことになります。

収益化を目指しているブログ初心者にとって時間を割くべきなのはデザインではなく記事の執筆です。

というわけで今回は、これさえカスタマイズしておけば一気にクオリティが高まるおすすめカスタマイズ4選をお伝えします。

まずはこれだけ!クオリティがあがるカスタマイズ4選

Cocoonカスタマイズ4選

①ヘッダーロゴ
②グローバルナビメニュー~設置編~
③グローバルナビメニュー~アイコン編~
④カルーセル

実際にわたしもこの4つをカスタマイズしただけで、一気にブログっぽいサイトに変更することができました。

それでは1つずつご紹介していきます。

①ヘッダーロゴ

ヘッダーロゴとはブログで一番目を引く箇所になります。

『目立つようにしたい!』『あえてシンプルにしたい!』などそれぞれの好みで変わってくると思いますが、ここをカスタマイズしているかどうかでブログっぽさが変わってきます。

ヘッダーロゴの設定方法

1.Cocoon設定>ヘッダーを選択
2.ヘッダーにしたい画像をヘッダーロゴに設定
3.背景にしたい画像をヘッダー背景に設定

背景の上にヘッダーロゴが重なる形ので、背景と同化させたい場合はロゴ背景を透過させておきましょう。

②グローバルメニュー~設置編~

グローバルメニューとは、ヘッダーの下に表示されるメニューバーのことです。

主に企業サイトでは企業概要や問い合わせなどが、ブロガーさんだとブログカテゴリーなどが表示されています。

ちゅみ
ちゅみ

わたしは『プロフィール』『ブログ』『ライフスタイル』『美容』の4つを設定しています!一気に見やすさUPです♡

グローバルメニューをあらかじめ設置しておくことで、ブログを書いたときにカテゴリー分類さえすれば勝手にメニュー内に入っていくようになります。

準備:まずはカテゴリーを作成しましょう
  1. 投稿>カテゴリーを選択
  2. 新規カテゴリーを作成・追加します
グローバルナビメニュー設定方法

1.外観>メニューを選択
2.ヘッダーメニューを作成

3.メニュー項目を追加>メニューに追加したいページやカテゴリーを選択>メニューに追加で完了!

③グローバルメニュー~アイコン編~

グローバルメニューを設置したら味気ないメニューにアイコンを加えてブログっぽく変更しましょう。

アイコン追加にはFont Awesomeというサイトを利用します。

Font Awesomeについてはブログ初心者におすすめのツールとしても過去に紹介しています。

1.外観>メニュー>アイコン追加したいメニューを選択
2.Font Awesomeで使用したいアイコンを選択>HTMLをコピー

3.ナビゲーションラベルへHTMLを追加して完了!

ホーム画面を確認すれば追加したアイコンが表示されています。

④カルーセル

皆さんはカルーセルってなんのことだかわかりますか?(ちなみにわたしは知りませんでした笑)

カルーセルは直訳すると回転台という意味で、ブログでいうとここの部分になります。

ブログを始めたばかりの頃はこのカルーセルを一番導入したかったのですが、「有料テーマじゃないと無理かあ…」と諦めていました。

Cocoonではそのカルーセルを簡単に設定することができますよ。

ちゅみ
ちゅみ

カルーセルはこの4つのなかでも一番ブログのクオリティを高めてくれます!

カルーセル設定方法
  1. Cocoon設定>カルーセルを選択します。
  2. 必要なところにチェックを入れて設定完了!

ブログカテゴリーやタグからもカルーセルで表示する記事を指定することができます。

オートプレイを選ぶとわたしのサイトのようにカルーセルが自動で入れ替わります。

オートプレイインターバルは5秒に設定しています。

せっかくカルーセルを設定しても記事数がないと寂しいことになっちゃうのでまずはブログを書いていきましょう!

Cocoonカスタマイズのまとめ

Cocoonカスタマイズ4選

①ヘッダーロゴ
②グローバルナビメニュー~設置編~
③グローバルナビメニュー~アイコン編~
④カルーセル

サイトのデザインがレベルアップするとブログのモチベーションアップにもつながります。

とはいえ、デザインに時間をとられすぎないようまずはこの4つを試してみて下さい。

コメント

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