【Blog Creator紹介記事コンテスト】で優秀賞をいただきました!ボタン

【WordPress】テーマCocoonの必須設定まとめ

【WordPress】テーマCocoonの必須設定まとめ

この記事では、WordPressの無料テーマCocoonの必須設定について、くわしく解説していきます。

「CTRL」+「D」を押すだけで、当サイト【還じいブログ】の記事がブックマークできます!

Cocoonは有料テーマに劣らず、かなり高機能な無料テーマです。

ただ、設定項目が非常に多いために、はじめてCocoonを使う人は何を設定していいのかわからないと思います。

還じい

でも、意外と必須項目は少ないんですよ!

この記事では、項目を以下のようにわけて必要最低限の設定ができるようにしています。

Cocoonをインストールしたら、ここに書いている設定を参考にしてください!

次のステップに進む>>

申し込みとブログの開設が完了したら、次のステップに進みましょう。

目次

Cocoonの設定画面

今から設定するCocoonの設定画面を確認しましょう。

管理画面メニュー「Cocoon設定」の「Cocoon設定」(①)をクリック。

Cocoonの設定画面を表示する

以下の画面がCocoonの設定画面で、設定項目として「スキン」~「その他」まであります。(Cocoonのバージョンは2.7.3.5)

Cocoonの設定画面を表示する

項目を変更したら、上か下にある「変更をまとめて保存」をクリックすると変更内容が保存されます。

Cocoonの設定画面を表示する

運営開始前に済ませる項目(必須項目)

まず、記事の投稿など本格的にブログを運営する前に、必須の項目を設定していきます。

ヘッダー

「ヘッダー」タブをクリックし、「ヘッダーレイアウト」でヘッダー内のロゴ画像(またはサイトタイトル)、キャッチフレーズ、グローバルメニューの表示位置を変更します。

運営開始前の必須設定項目(ヘッダー)

ヘッダーレイアウトには、「センターロゴ(デフォルト)」~「トップメニュー小(右寄せ)」の8通りあります。

ちょっとわかりづらいので、以降で「センターロゴ」と「トップメニュー」に分けて詳しくし解説します。

センターロゴ

下の画像は「センターロゴ(デフォルト)」を選択した時のヘッダーです。

※ヘッダーロゴ画像にCocoonの画像を設定済み。

運営開始前の必須設定項目(ヘッダー)

センターロゴというのは、ヘッダーロゴ画像または、サイトタイトルロゴとしてセンター(中央寄せ)に表示することを意味しています。

ヘッダーレイアウトの下にあるヘッダーロゴで、画像を選択した場合はその画像がセンターロゴとして表示されます。

画像が選択されてない場合は、WordPress管理メニューの「設定」→「一般」に入力済みの「サイトタイトル」がロゴして表示されます。

センターロゴのうしろのカッコ「(、)」は、グロバールメニューのレイアウトを示しています。

  • センターロゴ(デフォルト)
  • センターロゴ(トップメニュー)
  • センターロゴ(スリムメニュー)
  • センターロゴ(スリムトップメニュー)
(デフォルト)標準の高さのグローバルメニューが、一番下に表示される
(トップメニュー)標準の高さのグローバルメニューが、一番上に表示される
(スリムメニュー)スリムの高さのグローバルメニューが、一番下に表示される
(スリムトップメニュー)スリムの高さのグローバルメニューが、一番上に表示される
グローバルメニューのレイアウト

グローバルメニューはWordPress管理メニューの「外観」→「メニュー」で作成することができますが、グローバルメニューがまだ作成されていない場合は、ヘッダーに表示されません。

トップメニュー

下の画像は「トップメニュー」を選択した時のヘッダーです。

運営開始前の必須設定項目(ヘッダー)

トップメニューのレイアウトは、ロゴ(画像またはサイトタイトル)とグローバルメニューが一直線に並んでいるレイアウトになります。(キャッチフレーズは非表示)

  • トップメニュー
  • トップメニュー(右寄せ)
  • トップメニュー小
  • トップメニュー小(右寄せ)

トップメニューのレイアウトは上に書いているように4通りですが、(右寄せ)はグローバルメニューが右寄せされ、右寄せとなっていものは、中央寄せです。

「小」となっているものは、高さがスリムなグローバルメニューになります。

キャッチフレーズも表示されないので、ヘッダーをあまり大きくしたくない場合には、最適なレイアウトです。

SEO

CocoonはSEOに関する設定は基本的には変更しなくてもいいですが、1点だけタグに関する設定だけは変更はした方がいいです。

「SEO」タブをクリックし、「headタグに挿入」で「タグページをnoindexにする」にチェックをつけます。

CocoonのSEO設定を変更する

本文

「本文」タブをクリックし、「外部リンクの開き方」、「内部リンクの開き方」で、リンクをクリックした時に、別なウィンドウ(タブ)でページを開くかどうかを指定します。

Cocoonのリンクの開き方を設定する
Cocoonのリンクの開き方を設定する

また、リンクのアイコンも好きなものを選べます。

Cocoonのリンクのアイコンを設定する

目次

「目次」タブをクリックし、「目次表示の深さ」を指定します。

デフォルトでは、一番小さい見出し(H6)まで目次に表示されますが、H6の目次を作るような記事はおそらく長文になると思われるため、目次も縦長でずらっと並ぶはずです。

Cocoonの目次の深さを設定する

目次が長くなると記事全体の内容がわかりづらくなるため、個人的にはH3またはH4までにすることをおすすめします。

Cocoonの目次の深さを設定する

フッター

「フッター」タブをクリックし、「フッター表示タイプ」で、サイトタイトルやフッターメニューの表示位置を指定します。

デフォルトは、画面の右下に表示されますが、「トップへ戻る」ボタンに隠れたりするので、おすすめは中央揃えです。

Cocoonのメニューやサイトタイトルの表示位置を設定する

SNSフォロー

X(旧ツイッター)やインスタグラム、フェースブックなどのSNSアカウントを持っている場合に、そのSNSアイコンを記事内に表示されるように設定します。

「SNSフォロー」タブをクリックし、「SNSサービスのURL」にある「あなたのプロフィール」をクリック。

CocoonでSNSフォローのSNSアイコンを追加する

「プロフィール」画面でSNSアカウントのURLを入力して、「プロフィールを更新」をクリック。
※ここでは例としてX(旧ツイッター)のURLを入力

CocoonでSNSフォローのSNSアイコンを追加する

このように、URLを入力したSNSのアイコンが追加されます。

CocoonでSNSフォローのSNSアイコンを追加する

運営が始まってから設定する項目

続いては、ブログの運営が始まってからでも設定できる項目です。

スキン

スキンはブログの見栄えを簡単に変更できる仕組みです。

「スキン」タブをクリックすると、100個以上のスキンの名前がずらっと表示されます。

スキン名の左にある写真のアイコンにマウスを乗せるとスキンのイメージが表示されるので、好きなスキンを選択して「変更をまとめて保存」すれば、即座にそのスキンに切り替わります。

Cocoonのスキンを設定する

スキンなしの状態からスキンを適用した画面

Cocoonのスキンを設定する

その他の項目は以下の通り。

項目名設定内容
全体ブログ(サイト)全体に影響する項目。
基準(キー)となる色、文字の色、背景色、フォントの変更や、背景画像の指定が可能。
サイドバーの表示/非表示、表示位置(右または左)を指定。
広告アドセンスの広告を利用する場合に、広告コードや広告の表示位置を指定。
OGPX(旧ツイッター)などのSNSに記事のリンクを挿入した時に、ブログカードのように表示される画像を指定。
アクセス解析・認証Googleの検索結果からのアクセス状況が確認できるSearch Console(サーチコンソール)を利用するためのIDを指定。
他には、行動分析などの高度な解析ができるGA4のIDも指定可能。
また、ヘッダーに追加したいタグなども指定できる。
カラムメインのカラム、サイドバーのカラムの幅や、枠の変更が可能。
インデックストップページ(フロントページ)のレイアウト変更や、ブログカードのタイプを変更。
投稿関連記事、ページ送りナビ、コメントの設定。
SNSシェアSNSボタンの表示/非表示、デザイン、シェア数の設定。
画像アイキャッチの表示/非表示、記事内に表示される画像の囲み線や、画像の拡大表示の効果。
ブログカード内部記事、外部記へのリンクとなるブログカードの設定。
コードプログラミングのソースコードなど、そのままのイメージで表示させたいコードの表示設定。
コメント記事内のコメントに関する設定。
通知ヘッダー下に表示される通知エリアに関する設定。
アピールエリアヘッダー下に表示されるアピールエリアに関する設定。
おすすめカードヘッダー下やサイドバーに表示できるおすすめカードの設定。
カルーセルヘッダー下に表示されるカルーセルに関する設定。
ボタン「トップへ戻る」ボタンの設定。
モバイル携帯端末やタブレットなどのモバイル機器で表示されるメニューの設定
管理画面投稿一覧や管理画面のカスタマイズ。
ウィジェットウィジェット画面に表示させないウィジェットを設定
ウィジェットエリアウィジェット画面に表示させないウィジェットエリアを設定
エディタークラッシックエディタ/ブロックエディタの切り替えや、エディタ画面のカスタマイズなど。
APIAmazonoアソシエイト、楽天、Yahooショッピングなどのアフィリエイト利用時の設定
リセットすべての設定を初期状態に戻す。
その他のCocoon設定項目

設定不要なもの

最後は、項目としては用意されているけど、設定が不要な項目です。
(もちろん、設定してもかまいません)

タイトルサイトタイトル、投稿/固定ページのタイトル、カテゴリーページのタイトルなどの変更。
デフォルトから特に変更する必要なし。
固定ページ固定ページに関する設定で、デフォルトから特に変更する必要なし。
404ページページが見つからなかった時に表示される特別なページに関する設定。
画像を表示することが可能。
その他通常の利用では、設定不要な項目
設定不要な項目

まとめ

Cocoonは設定項目が多いので、Cocoonを初めて使う人にはわかりづらく感じるかもしれません。

ただ、解説しているように必須項目はそんなにないので、まずは必須項目だけを設定してCocoonを使ってブログ(サイト)の運営に慣れましょう。

ブログを開設したら、記事の投稿ができるようにできるだけ早く運営を始ることが大事です。

時間をかけずに、さくっと必須項目を設定していきましょう!

次のステップに進む>>

申し込みとブログの開設が完了したら、次のステップに進みましょう。

「CTRL」+「D」を押すだけで、当サイト【還じいブログ】の記事がブックマークできます!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次