ブログテーマ

【Cocoonカスタマイズ】初心者の初期設定のオススメの方法まとめ!

今回の記事では、ワードプレステーマCocoonについて紹介していきます。

無料なのにも関わらず、機能性が優秀なCocoon。初心者が最初に使用する際にも使いやすいです。

そのため、今回の記事では

  • Cocoonの初期設定のやり方が知りたい
  • Cocoonの基本的なカスタマイズの方法が知りたい

このような悩みを解消できる記事となっています。

一番最初に設定すべき必須事項を備えておきますので、知っておいて損はないですよ。

 

ぬっくん
ブログ初心者の方にオススメだよ

 

Cocoonのテーマのインストール

まずは最初にCocoonのテーマをインストールしておきましょう。

Cocoonのテーマは無料でインストールが可能となっていますので、コチラのページからダウンロードしてくださいね。

 

Cocoonのダウンロードはコチラ

 

ちなみに、ブログを始めたばかりの人は知っておいてほしいのですが、『子テーマ』は必ずインストールして有効化しておきましょう。

その理由は、親テーマの方を有効化してしまうと、テーマのアップデートがあった際に、細かい設定が吹き飛んでしまうことも。

(ちなみに僕はウィジェットの設定のコードをイジっていたのですが、テーマのアプデによって吹き飛びました)

 

ぬっくん
せっかく設定したことアップデートでがパーになってしまうこともあるので、子テーマを使用しておきましょうね。

 

Cocoonのパーマリンク設定

 

設定箇所:管理画面⇒設定⇒パーマリンク

まずはパーマリンク設定です。

パーマリンクとは、記事のURL設定の事だと考えてください。

 

テーマを変更した際にはパーマリンク設定も変わってしまうことがあるので、確認をしておきましょう。

初心者の方が初めてワードプレスを設定した際には、

https://○○.com/%year%/%monthnum%/%day%/%post_id%/

が、おススメです。

記事作成時に、自動でパーマリンクが付くので時短効果に繋がります。

 

注意ポイント

%postname%等を入れてしまうと、デフォルトでは日本語名が入ってしまいます。これはSEO的によろしくない。

しかし、毎回パーマリンク名を考えるのもめんどくさいので、だったら自動で入る方が良いよねってことで、上記のような設定にしています。

 

 

Cocoonでプラグインの設置

 

設定箇所:管理画面⇒プラグイン⇒新規追加

Cocoonは優秀なワードプレステーマであるため、機能充実しており、プラグイン不要の場合もあります。

ここでは、Cocoonのテーマで使用すべき僕のオススメのプラグインを記載しておきますね。

 

  • addQuicktag:テンプレートの作成が可能
  • Google XML sitemap:Googleボットの巡回させる
  • PS auto sitemap:サイトマップの作製
  • tinymice advanced:編集画面のツールを充実
  • Contact form7:お問い合わせページ作成
  • Classic Editor:旧編集画面設定

 

基本はこれだけでOK

たまに初心者ブロガーのブログを見せてもらうと、All in One SEO Packのプラグインが入っているけど

Cocoonにはほとんど機能として備わっているため、このプラグインは不要

重くなるプラグインはできるだけ使用しないようにしましょう。

 

また、プラグインを使用して、サイトマップやお問い合わせ画面を作成しておきましょう。

Googleアドセンスでの収益を目標としているなら、必要な機能ですね。

 

イルカ
プラグインは便利だけど、あまり入れすぎないように注意しなきゃね

 

Cocoonでグローバルメニューのカスタマイズ

 

次にグローバルメニューの設定です。

設定箇所は、管理画面⇒外観⇒カスタマイズ⇒メニューとなります。

プラグインを使用して、最低限4つの固定ページを作成しておきましょう。

 

  • プライバシーポリシー:個人情報の利用目的を記載
  • サイトマップ:サイト内のコンテンツ一覧
  • お問い合わせ:直接の問い合わせ画面
  • プロフィール:自己紹介

 

記事が増えてきたら、グローバルメニューに

カテゴリー等のページも設定しても良いかもしれません。

 

※グローバルメニューのさらに細かい設定方法については、別途記事を作成します

 

Cocoonで高速化の設定を行おう

 

設定箇所:Cocoon設定⇒高速化

Cocoonと言えば、やはりGoogleのPageSpeed Insightsに最適化した作りになっていることが特徴。

速度スコアが優秀なんですね。アドセンスやツイッター等の埋め込みが入る場合は速度が落ちるようですが、

それでも無料のテーマとしては優秀な機能だと思います。

 

その高速化設定は初期設定だとOFFになっています。

チェックをONにする項目は

 

  • ブラウザキャッシュの有効化(ブラウザにリソースを保存)
  • HTMLを縮小化する(HTMLのサイズを減らす)
  • CSSを縮小化する(CSSのサイズを減らす)
  • JaveScriptを縮小化する(Javascriptのサイズを減らす)

※個人的に画像遅延読み込みは嫌なので、チェックはしていません。

 

ぬっくん
サーバーの速度によっても速度スコアが落ちる可能性があるよ。その場合は、ページキャッシュプラグイン等を使用してみよう。

 

 

Cocoonのサンプル記事の削除

Cocoonに限らず、ワードプレスのインストール時にデフォルトでサンプル記事が入っています

基本的な投稿一覧と固定ページ一覧に入っています。

僕が体感した限りでは、これらのサンプルページをそのまま放置しておくと、アドセンスに合格しません。

テーマインストール後は削除しておきましょう。

 

ぬっくん
アドセンスに申請する際、審査コードを貼り付けてしまうと、ブログ全体にコードが貼られるため、 審査に使用しない記事はできるだけ削除したり下書きに戻しておこう

 

 

Cocoonで通知エリアの設定

 

グローバルメニューの下にベルト状に表示される通知メッセージの設定です。

こちらはブログ全体に表示する『お知らせ』のような機能です。

 

通知欄のカラーは赤、黄、緑から自由に選択することができます。

 

この通知欄をクリックすると、特定のURLに飛ばすことができます。

プロフィールや個人のnote等に飛ばしてあげるのもアリですよね。

 

CocoonでOGP設定

設定箇所:管理画面⇒Cocoon設定⇒OGP⇒Twitterカード設定

ツイッターでブログを拡散するつもりの人は知っておきましょう。

Twitterで記事を拡散する際、URLリンクをツイートに掲載されると、以下の様にTwitterカードが生成されます。

 

 

この、ツイッターカード設定がCocoonのテーマではデフォルトでサマリーになっています。

これを『大きな画像のサマリー』に変更しておきましょう。

 

大まかにですが、ッターで記事を共有する際、『サマリー』と『大きな画像のサマリー』ではクリック率が倍以上異なります。

コチラは初期設定として必須項目ですね。

 

Cocoonのアピールエリアの設定

設定箇所:管理画面⇒Cocoon設定⇒アピールエリア

コチラは必要な人だけ設定しておきましょう。

アピールエリアを設定すると、ブログロゴの下部にアピールエリアが形成されます。

アピールエリアでは基本的にボタンを設置することができ、

記事などを目立たせたい場合にこちらの設定を使います。

 

 

Cocoonのカルーセルの設定

 

設定箇所:管理画面⇒Cocoon設定⇒カルーセル

トップページ、もしくは全ページにカルーセルを掲載することができます。

よくある左右にスライド(動く)する記事一覧のことですね。

 

カルーセルにどのページを表示させるかは、カテゴリーやタグごとに選択することができます。

ブログをできるだけオシャレに魅せたい人は、表示させておくのも良いかと思います。

 

Cocoonのロゴの設定

 

設定箇所:管理画面⇒Cocoon設定⇒ヘッダー⇒ヘッダーロゴ

画像のヘッダー部分のロゴが設定できます。

ロゴを自作する場合、こちらに画像を設定しておきましょう。

 

画像によって大きさが異なりますが、おススメの設定は

高さ:80、ヘッダーロゴサイズ高さ:150 となります。

 

また、このままの状態だと、スマホで見た時に間延びしてしまうので、以下のコードをCSSに設定しておくことをオススメします。

 

@media screen and (max-width: 480px){
.logo img {
height: 70px !important; /* スマホ時のロゴの画像タテサイズ */
margin: .5em auto;
}
}

通常であれば、スマホでロゴを見ると間延びしてしまうことがあります。

こちらのコードを設定しておくだけで、スマホで見た時も綺麗に表示されます。

 

 

アドセンスに合格したいなら

ちなみに、アドセンスに合格したい場合、Cocoonは最適なテーマであるように感じています。比較的合格しやすいテーマ。

アドセンスの審査コードの貼り付ける場所は以下。

設定箇所:管理画面⇒Cocoon設定⇒アクセス解析・認証

 

アドセンスの合格の基準は様々です。

もしアドセンスになかなか合格できないという方は以下の記事も参考にしてみてください。

アドセンス
新型コロナでアドセンスへの影響は?【サイトを審査できない状態】

続きを見る

 

 

Cocoonの次はAfiinger5でもいいかも

ちなみに僕はCocoonのテーマも気に入っていますが、

有料テーマではAffinger5をオススメしています。

当ブログでもAffinger5を採用しており、新規記事投稿時の編集画面が非常に多機能で使いやすい。

細かいカスタマイズも一瞬でできてしまいます。

 

Cocoonは基本的な機能で優れていますが、少し記事のデザインで物足りないと感じたら

Afiinger5を購入してみるのも良いですよ。

少しブロガーレベルをアップしたい人にオススメです。

 

Affinger5の購入はコチラ

 

-ブログテーマ

Copyright© ぬっくんnote , 2020 All Rights Reserved Powered by AFFINGER5.