WordPressテーマCocoonの初期設定はまずはこれだけ

ブログの知識
※本ページには広告が含まれています。
スポンサーリンク

WordPressでブログを始めました。

Cocoonの設定方法を教えて

以上の疑問にお答えします。

どうもヨンロクです(@yonrokublog)知識ゼロで40代からブログを始めて、3ヶ月で0→1達成し、9ヶ月目にGoogleアドセンス合格、月5桁の収益を得ることが出来ています。これからブログを始める人に向けて実体験をもとにわかりやすく発信してます。

前回の記事で、ワードプレスの初期設定が完了しましたね。

次は無料テーマCocoonの初期設定とカスタマイズをしてブログっぽいデザインにしていきましょう。

Cocoonは無料テーマなのに、とても便利な機能やカスタマイズ性もあり人気のテーマなのですが、設定箇所がたくさんあり過ぎてブログ初心者にとっては悩むことが多いと思います。

たくさんあり過ぎて、

何をどこまですればいいかわかりません、、、

この記事では、そんな方でも大丈夫なように、最初にここさえやっておけばまず安心な設定に絞って解説します。

この記事でわかること
  • Cocoonの初期設定でしておくべき項目
  • 各項目の設定方法

この記事通りに進めるだけで、一気にブログっぽいデザインになりますのでじっくり進めていきましょう。

スポンサーリンク

Cocoonの初期設定はここだけで大丈夫

Cocoonの設定は、「WordPressの管理画面>Cocoon設定

から行います。

クリックするとこんな画面があらわれます。

タブがたくさんありますが、

最初に設定しておきたいタブはこちらです。

最初に設定しておきたいタブ
  • スキン
  • 全体
  • ヘッダー
  • タイトル
  • SEO
  • OGP
  • アクセス解析・認証
  • 本文
  • 目次
  • フッター
  • モバイル

これら以外のタブはとりあえず無視して大丈夫です。

Cocoon初期設定のやり方

初期設定をしていく前に、まず「Cocoon Child」が有効化になっているか確認しておきましょう。

「Cocoon」のほうを有効化して初期設定しても、「Cocoon」のアップデートがあれば、もう一度すべてを設定し直さないといけなくなりますので、必ずCocoon Child」を有効化して下さい。

それではひとつひとつ設定していきましょう。

スキン

Cocoonをインストールしただけだと、こんなブログのデザインになっているかと思います。

ちょっとさみしいデザインですよね。

これをブログっぽいデザインに変えていきましょう。

Cocoonには無料テーマであるにも関わらず、「スキン」がたくさん用意されています。

「スキン」とは着せ替え人形のようなもので、変更するだけで簡単にブログのデザインを変えることができます。

このヨンロクブログはスキンはなしで制作しておりますが、

好みのスキンを選んでいきましょう。

各スキンのチェックボックスすぐ右のところにカーソルを合わせると、プレビューがポップアップされます。気に入ってものがあればチェックして適用させましょう。

簡単にブログっぽいデザインになりましたね。

設定できたら「変更をまとめて保存」をクリックしましょう。

全体

全体設定は、その名の通りサイト全体の設定をします。

全体設定
  • キーカラー
    :サイトキーカラー…そのまま
    :サイトキーテキストカラー…「#333333」を入力
  • サイトフォント
    :フォント… ヒラギノ角ゴ,メイリオ(デフォルト)
    :文字サイズ…17px
    :文字色…「#333333」を入力
  • モバイルサイトフォント
    :文字サイズ…16px
  • サイトアイコンフォント
    :Font Awesome 5
  • サイトリンク色
    :文字色…「#1a0dab」を入力

文字の太さや大きさなどは、自分の好みやサイトデザインに合わせてページを確認しながら調整しましょう。

文字は通常だと、真っ黒である「#000000」が使われがちですが、

白背景に真っ黒の文字を合わせると、コントラスト比が強すぎて目が疲れやすいので、

黒寄りのグレーである「#333333」に設定しましょう。

また「サイトリンク色」は、必ず「#1a0dab」にしましょう。

なぜならほとんどのリンクカラーが青色だからです。

諸説はありますが、YAHOO!トップページの各ニュースのリンクが青色なので、

『リンク=青色』というイメージが強いのではないかと言われています。

ですので、オリジナル性を出そうと思って赤色や緑色とかに設定してしまうと、リンクされていることに気づいてもらえない可能性があります。

ちなみに、「#1a0dab」は、GoogleやMicrosoft Bingで使われているカラー番号と同じですので、この番号しておいて間違いないでしょう。

設定できたら「変更をまとめて保存」をクリックしましょう。

タイトル

Googleなどで検索されたときに、あなたのブログがどのように表示させるか設定することができます。

※サイト名・キャッチフレーズは、WordPress管理画面の「設定」→「一般」で設定できます。

フロントページ設定

タイトル(フロントページ)
  • フロントページタイトル
    :サイト名
  • サイトの説明
    :ブログについての説明を書きます

デフォルトでは、「サイト名|キャッチフレーズ」になっていますが、最近の傾向としては「サイト名」だけで表示するブロガーさんがほとんどですので、「サイト名」で設定します。

「サイト説明」にはあなたのブログがどのようなブログなのか簡潔に入力しておきましょう。

ブログを見に来た読者がどんなブログなのか確認するところなので、わかりやすい表現で入力しましょう。

自分で考えてもうまくまとまらないという方は、ChatGPTに下記のプロンプトで尋ねてみましょう。

ブログの説明文を40文字以内で10案考えて。そのブログは、●、▲、■の情報を発信しているサイトです。

回答された10案の中で良いのがなかったら、「他の10案も教えて」と尋ねると、さらに10案出してくれ、良いのが見つかるまで何回もできますので、きっとお気に入りのブログ説明文が見つかるはずです。

メタキーワードの欄には、入れても入れなくても今はSEOにはほとんど意味ないので空欄のままでも構いません。

投稿・固定ページ設定

タイトル(投稿・固定ページ)
  • 投稿・固定ページタイトル
    :ページタイトル

Googleなどでキーワード検索された時に、あなたが書いた記事が引っ掛かり表示されるときの設定です。

検索ユーザーは、調べたいキーワードに関する疑問に対する答えを探しているわけですから、あなたのブログだから見るわけではありませんし、まだ興味もないわけなので、ページタイトルのみ表示させるようにしておきましょう。

カテゴリー・タグページ設定

タイトル(カテゴリー・タグページ設定)
  • ページタイトル
    :ページタイトル | サイト名

カテゴリー名は文字数が少ないことが多いので、検索一覧で文字が途切れる可能性は低いためサイト名も表示されるように設定しましょう。

設定できたら「変更をまとめて保存」をクリックしましょう。

SEO

SEOとは「Search Engine Optimization=検索エンジン最適化」の略で、検索順位にとても影響するところですので、大事な設定となります。

  • headタグに挿入
    :canonicalタグの追加
    :その他のアーカイブページをnoindexとする
    :添付ファイルページをnoindexとする
  • 構造化データ
    :JSON-LDを出力
  • 表示する日付
    :投稿日・更新日を表示

専門用語がありますが、とりあえずこの設定で問題ありません。

上記項目にチェックを入れたら、「変更をまとめて保存」をクリックしましょう。

OGP

OGPとは「Open Graph Protocol」の略です。

SNSであなたのブログがシェアされたときどんな画像が表示されるかの設定になります。

  • OGPの有効化
    :OGPタグの挿入
  • Twitterカードの有効化
    :Twitterカードタグの挿入
  • Twitterカードタイプ
    :大きな画像のサマリー
  • ホームイメージ
    :好きな画像をアップロード

ホームイメージに入っているデフォルト画像はCocoonになっていますので、そのままの状態にしていると、もしシェアされた時にCocoonの画像が表示されてしまいますので、Canvaでオリジナル画像を制作してアップロードしておきましょう。

設定できたら上部か下部の「変更をまとめて保存」をクリックしましょう。

アクセス解析・認証

以前こちらの記事で登録したGoogleアナリティクスとGoogleサーチコンソールをあなたのブログと連携させる設定をします。

ご自分のGoogle AnalyticsのGA4測定ID、Google Search Console IDがわからない方は、青字の参照ページをクリックすると、Cocoonマニュアルの説明記事に飛びますので確認しましょう。

IDがわかりましたら、それぞれの項目に入力します。

また「解析全般」にある、「サイト管理者も含めてアクセス解析する」という項目は、チェックは外しておきましょう。

なぜなら、ここにチェックが入っているとあなた自身がアクセスした数字も入ってしまいますので、純粋にどれぐらいの人が見に来てくれているのかわからなくなるからです。

ブログ記事を書いていく以上、誤字脱字がないか、もっとわかりやすい説明の仕方はないか、など自分の記事に何度もアクセスすることが多くなりますので、チェックは外しておきましょう。

設定できたら上部か下部の「変更をまとめて保存」をクリックしましょう。

本文

本文設定では、本文全体の行間の幅や、SEOにとって大切な外部リンク・内部リンクなどの設定をするところです。

本文行間設定

本文行間設定
  • 行の高さ2
  • 行の余白3.5

ブログのジャンルや好みにもよりますが、行間が詰まり過ぎていると読みにくく、せっかく訪れた読者が逃げてしまうかもしれません。

当ブログのような行間が良い方はこちらの数値で設定してください。

外部リンク設定

よくわからない専門用語が出てきますが、とりあえず下記のように設定すれば大丈夫です。

外部リンク設定
  • 外部リンクの開き方
    :新しいタブで開く(_blank)
  • フォロータイプ
    :フォローしない(nofollow)
  • 追加rel属性 noopenerを追加
    :noopenerを追加
    :target=”_blank”の際はnoopenerを追加

アイコンはお好みで選んでOKです。

内部リンク設定

内部リンク設定
  • 内部リンクの開き方
    :新しいタブで開く(_blank)
  • フォロータイプ
    :フォローする(follow)
  • 追加rel属性 noopenerを追加
    :noopenerを追加

こちらもアイコンはお好みでOKです。

その他の設定

  • レスポンシブテーブル
    :横幅の広いテーブルは横スクロール
  • 投稿情報表示設定
    :投稿日の表示
  • 記事を読む時間
    :お好みでOK

投稿情報表示設定に、「更新日の表示」を追加しても大丈夫です。

ただし、ブログを始めたてのころは、記事の内容を見直したり、誤字脱字などを見つけて修正することが多いため、更新日がどんどん新しくなっていきがちです。

ある程度完成された記事になるまで、またある程度記事数が増えるまでは「投稿日の表示」だけにしておくことをおすすめします。

設定できたら上部か下部の「変更をまとめて保存」をクリックしましょう。

目次

「目次」とは、記事が長いときに冒頭で目次を表示させることで、各項目にジャンプできる機能があります。

こういうやつですね。

テーマによっては、この「目次」を表示させるためにはプラグインを追加する必要があるのですが、「Cocoon」は最初から標準装備されています。

基本的にデフォルトのままで大丈夫ですが、

  • 目次表示の深さ
    :H3見出しまで

にしておきましょう。H4見出し以上にすると目次だらけになりますのでH3までがおすすめです。

また目次を最初は閉じた状態で表示させたい場合は、

「目次切り替え」>「最初から目次内容を表示する」のチェックを外せば、目次は閉じた状態にできます。

設定できたら上部か下部の「変更をまとめて保存」をクリックしましょう。

フッター

「フッター」とは、ページの最下部に表示される部分のことです。

  • フッター色
    :あなたの好きな色でOK
  • フッター表示タイプ
    :メニュー&クレジット(中央揃え)
  • クレジット表記
    :お好きな表示でOK

設定できたら上部か下部の「変更をまとめて保存」をクリックしましょう。

モバイル

こちらは設定というよりも、モバイル上でどう表示されるかの確認になります。

特にこだわりがなければデフォルトのままで大丈夫です。

以上で、Cocoonの初期設定でしておくべき項目の設定は完了です。

お疲れ様でした。

まとめ

以上、無料テーマCocoonで最初にやっておく設定について解説しました。

これで一気にブログっぽくなったのではないでしょうか。

Cocoonは無料テーマでありながら、本当にいろいろカスタムできますので、初心者ブロガーにはありがたいテーマですね。

もっとデザインにこだわりたい人は、 Cocoonマニュアルページがありますので、ご自身でいろいろ調べてみるのも楽しいと思いますよ。

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

次は、ブログを始めたら必ず作っておきたい固定ページの作り方です。こちらの記事へお進みください。

コメント

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