テーマ”Cocoon”初期設定

無料でありながら多機能な”WordPress”のテーマ”Cocoon”はホームページにマニュアルがあり、使っている人たちの相談に乗るなど、フォーラムがあります。

“WordPress”そのものも知らなかった私がサイトを立ち上げられたのも、このマニュアルとフォーラムのおかげです。最初に立ち上げたサイトが、20記事程度の投稿で”Google AdSense”の審査に1回で通過したのもテーマが優秀である事を物語っています。

使い方がわからない時の対処法
  • マニュアルを読む。
  • マニュアルに記載されていない場合は、PCの「検索ボックス」に「WordPress」+「Cocoon」+「目的のキーワード」を入力すると、何等かの記事にたどり着けます。
  • フォーラムを検索する。
  • ファーラムに質問する。

テーマ”Cocoon”ホームページ↓↓

ホームページから「マニュアル」をクリックすると、サイト作成準備を初め詳細な設定が記載されているので、読むだけでも知識が深まります。

疑似的に立ち上げたサイトで行った”Cocoon”の初期設定について説明します。

初期設定

テーマ”Cocoon”は自由度が高く高機能です。使う用途によって思い通りのサイトが作れます。また、これは使う人によって設定も違ってくることでもあり、万人受けの設定はありません。

今回、私好みの設定を紹介しますが、初期設定だけでサイトが完成しない事を念頭に参考にして下さい。サイトは育てるもので進化に終わりはありません。

設定の基本

管理画面から「Cocoon設定」を選択すると下の画面が表示されます。赤枠の部分がそれぞれの設定になります。

赤枠の中から目的の「タブ」を選択して、表示される設定画面で設定し、最後に「変更をまとめて保存」をクリックすることで設定が完了します。

ここでは、最低限の初期設定について説明していきます。

スキン設定

「Cocoon設定」スキン設定を選択すると下図(左)が表示され、写真のアイコンの上にホバーするとプレビュー下図(右)が表示されます。

「コクーン設定」のスキンではあらかじめ数種類のスキンが用意されていて、何れかを選択して保存するだけで概ねの初期設定は完了するので、すぐに記事を書き進める事が出来ます。

私は、自分の好みで作りたいので「なし」を選択します。

「Cocoon設定」スキン

プレビュー

全体設定

全体設定では、サイト全体の色と配置を設定します。
今回設定するのは、「サイトフォント」と「サイドバー」だけで、その他はデフォルトのままにします。

サイトフォント

2017年より「Google Chrome」のフォントが「メイリオ」に変更されています。そしてGoogleが提唱しているフォントサイズは16pxです。

これらを踏まえ、デフォルトの「游ゴシック体、ヒラギノ角ゴ」のままにしておきます。

フォントサイズ

デフォルトでは、PC・タブレットでは18px、モバイルでは16pxになっています。これをGoogleが提唱するサイズに合わせます。

フォントの変更
  • PC・タブレット:18px ⇒ 16pxに変更。(サイズ変更)
  • モバイル(480px以下の画面):16px ⇒ 15pxに変更。(サイズ変更)
  • サイトアイコンフォント:Font Awesome 4 ⇒ Font Awesome 5(最新版に変更)

変更が出来たら、「変更をまとめて保存」をクリックします。

サイドバー

「サイドバー」の設定は、サイドバーを表示位置(メインカラムの右か左)と、サイドバーを表示するページを指定できます。

サイバーが左側に設置しているサイトは余り見かけないので、違和感のないように右側に設置した方が無難です。

「プロフィール」や「お問い合わせ」などの固定ページに「サイドバー」は表示させない方がスッキリとするので、固定ページで非表示に設定します。

サイドバー設定
  • サイドバーの位置:サイドバー右を選択。
  • サイドバーの表示状態:固定ページで非表示を選択。

ヘッダー設定

ヘッダー設定では、サイトのヘッダー部分を設定します。
今回設定するのは、ヘッダーとグローバルナビの背景色、及びキャッチフレーズの配置です。

ヘッダーの詳細な設定は【“Cocoon”ヘッダーのタイトルをカスタマイズ】で解説しています。

ヘッダーとグローバルナビの背景色

ヘッダーとグローバルナビは上下に並んで配置されているので、同色にするために「ヘッダー全体色」の色を「#ddaa5d」にしました。

キャッチフレーズの配置

初期設定の一般設定の際に、SEO上好ましくない事からキャッチフレーズの欄を空白にしているので、ここでの設定は意味がないのですが、「表示しない」にしました。

SEO設定

headタグ設定では、HTMLコード上のheadタグの中に追加するlinkタグを設定します。

ここでは、投稿記事ではない「カテゴリー」「タグ」「アーカイブ」「添付ファイルページ」をインデックス(検索エンジン)に認識させるか、させないかを設定します。

デフォルトで問題はなさそうですが「カテゴリー」と「タグ」をインデックスさせる事には、それぞれ意見が分かれているようです。

私は下記の設定にします。

headタグ設定
  • カテゴリーページ:インデックスさせる。(チェックを入れない)
  • タグページ:2ページ目以降をインデクスさせない。(チェックを入れる)

インデックス設定

インデックス設定は、前回の記事【ホームページを作成する】で設定済みです。

投稿設定・固定ページ設定

投稿ページ設定では、「関連記事」と「ページナビ」を設定します。
「コメント」と「パンくずリスト」は投稿ページと固定ページの両方に設定するところがあります。

関連記事

「関連記事」を「投稿記事」の下に表示させたいので、以下の表示設定を行います。

関連記事設定
  • 表示:「関連記事を表示する」にチェック。
  • 関連性:「カテゴリー」を選択。
  • 関連記事の見出し:関連記事と入力。(デフォルト)
  • サブ見出し:設定しないので未入力。
  • 表示タイプ:エントリーカードを選択。(デフォルト)
  • 表示数:6件(デフォルト)
  • 取得期間:全期間(デフォルト)
  • 枠線の表示:「カードの枠線を表示する」にチェック。

ページナビ

続きに読んでもらいたい記事は独自に設定したいので、ページ送りナビを非表示にします。

「コメント」と「パンくずリスト」

「投稿ページ」と「固定ページ」のコメントは非表示にします。

「パンくずリスト」はSEO対策とサイトマップに重要な役割を果たすので「メインカラムのボトム」(デフォルト)にしておきます。なお、記事タイトルは「パンくずリスト」に含めません。

目次設定

目次設定は「個別ページ」の作成画面で表示と非表示の切り替えができるので、すべて表示できる設定にしておきます。

その他はデフォルトのままで、今後の様子を見ながら変更します。

画像設定

画像設定では、「アイキャッチ」を投稿・固定ページの先頭に表示する設定と、「サムネイル画像」の表示設定及び「Retinaディスプレイ」の対応を設定します。

画僧設定
  • アイキャッチ画像は独自に設定したいので「非表示」にする。
  • サムネイル画像の縦横比はデフォルトのまま。
  • 「Retinaディスプレイ」は対応するにチェック。
アイキャッチ画像の設定
サムネイル画像の設定

ブログカード設定

ブログカード設定では「内部ブログカード」と「外部ブログカード」の表示を設定します。

グログカードは「内部」と「外部」の両方とも表示するに設定しますが、「外部ブログカード」は新しいタブで開くように設定します。

内部ブログカード

外部ブログカード

 
 


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