忘れがちのCocoonテーマ設定をタブ別メモっておく！

WordPress をインストールした直後、初期設定として最初にやることはテーマを設置することではないでしょうか。テーマを選ぶことだけでかなり疲れてしまったこともありますが、Cocoonを使ってからはその迷いはなくなった。広告 や アフィリエイト の導入を検討する方も広告なしで行く方でも Cocoon テーマ を選べば失敗はないと思います。

その Cocoon を設定して行きます。

現状・条件

・WordPress をインストールして初めての設定を行います。
・Cocoon テーマを利用します。

テーマをセットアップする

Cocoon テーマを追加します。

親テーマをインストール

WordPress 管理画面から、
・押下：「外観」 > 「テーマ」>「新規追加」

・押下：「テーマのアップロード」

・ページ内：
「選択…」ボタンから親テーマ「cocoon-master.1.8.9.1.zip」を選択して「今すぐインストール」ボタンをクリックして下さい。

親テーマをインストールしたら、テーマページに戻ります。

子テーマをインストール

WordPress 管理画面から、
・押下：「新規追加」>「テーマのアップロード」
・ページ内：
「選択…」ボタンから子テーマ「cocoon-child-master-1.0.8.zip」を選択して「今すぐインストール」ボタンをクリックして下さい。

子テーマのインストールが終わったら「有効化」をクリックしてください。

以下のように「 Cocoon Child 」テーマが 有効 になっていることを確認しましょう！

これで、Cocoon の親テーマ、子テーマのインストールが完了しました。

未使用のテーマを削除

デフォルトで、Twenty Nineteen、Twenty Seventeen、Twenty Sixteen の三つのテーマが入っていますが、使わないテーマは削除しておきます。

ただ、
WordPress のデフォルトテーマ Twenty Nineteen、現在有効なテーマ Cocoon Child、親テーマ Cocoon は削除しないようにしましょう。( ※ WordPress 5.3 からデフォルトテーマは Twenty Nineteen → Twenty Twenty に変わりました。)
WordPress のデフォルトテーマは現テーマに問題があった場合、自動的に切り替えるために必要です。

削除するテーマのイメージの真ん中にマウスオーバーすると、表示される「テーマの詳細」をクリックしてください。( 削除対象テーマ：Twenty Seventeen、Twenty Sixteen )

画面の右下の「削除」ボタンをクリックしてください。

「 OK 」ボタンをクリックしてください。

残りのテーマも同じ手順で行なってください。

最終結果：Coccon Child、Cocoon、Twenty Nineteen ３つのテーマを残します。

次は、タブ毎の設定をしますが、各自必要に応じて適宜選別するば良いかと思います〜。

【スキン】スキンを選ぶ

WordPress 管理画面から、
・押下：「 Cocoon 設定」
・ページ内：
デフォルトで「スキン」ページが表示されます。「スキン一覧」から適宜選んでください。

スキンを選んだら「変更をまとめて保存」ボタンをクリックしてください。

あなたのサイトへアクセスしてみてください。
例：https://www.example.com/

【全体】フォントを変更する

サイト全体に適用されるフォントを自由にカスタマイズすることができるんです！是非、お気に入りのフォントで魅力的なウェブサイトを作り上げましょう！

・押下：WP Admin > Cocoon設定 > 全体 タブ
・ページ内：全体設定 > サイトフォント > フォント > MPlus1p (WEBフォント) を選択

・変更をまとめて保存 をクリックして保存します。

【広告】インデックスページの表示位置を変更する

インデックスページのトップ位置に広告を非表示にするのはモバイルで縦長い広告が表示されたら記事カードが隠れてしまいます。

・押下：WP Admin > Cocoon設定 > 広告 タブ
・ページ内：アドセンス設定 > 広告の表示位置 > インデックスページの表示位置 > トップ > チェックを外します。

・変更をまとめて保存 をクリックして保存します。

【OGP】ホームイメージを設定しておく（必須）

この画像を設定しない場合、Lineなどでブログホームリンク ( jacepark.comなど ) を送ると下記のようにCocoonテーマのデフォルトイメージが表示されてしまいます。

・押下：WP Admin > Cocoon設定 > OGP > ホームイメージ タブ
・ページ内：画像のアップロード > 選択ボタンを押して画像をアップロードします。

・変更をまとめて保存 をクリックして保存します。

【アクセス解析・認証】サイト管理者は除いておく

・押下：WP Admin > Cocoon設定 > アクセス解析・認証 タブ
・ページ内：アプセス解析設定 > 解析全般 > サイト管理者も含めてアクセス解析する > チェックを外します。

・変更をまとめて保存 をクリックして保存します。

【インデックス】並び順を変更する

・押下：WP Admin > Cocoon設定 > インデックス タブ
・ページ内：リスト設定 > 並び順 > 更新日（降順） > チェックします。

・変更をまとめて保存 をクリックして保存します。

更新記事のよって、アイキャッチ画像 も変わるので PageSpeed Insights で 適切なサイズの画像 項目を改善するよう促されることがあります。
※ 改善方法の記事は ここ

【本文】リンクとテーブル設定を変更する

（内部・外部）リンクをクリックしてもジャストナウ！読んでる記事画面を維持するように！

・押下：WP Admin > Cocoon設定 > 本文 タブ
・ページ内：外部リンク設定 > 外部リンクの開き方 > 新しいタブで開く（_blank） を選択しアイコンを表示させます。同じく内部リンクも設定します。

・ページ内：テーブル設定 > レスポンシブルテーブル > 横幅の広いテーブルは横スクロール　にチェックを入れます。

テーブルを利用する際には超便利なオプションだと思います。

・変更をまとめて保存 をクリックして保存します。

【目次】目次表示の深さ・目次の表示順 を変更する

・押下：WP Admin > Cocoon設定 > 目次 タブ
・ページ内：目次設定 > 目次表示の深さ > H3見出しまで を選択します。

・ページ内：目次設定 > 目次の表示順 > 広告の手前に目次を表示する を選択します。

・変更をまとめて保存 をクリックして保存します。

【画像】NO IMAGE を設定する

アイキャッチが存在しない投稿・固定ページのサムネイルに利用される画像ファイルを指定します。

・押下：WP Admin > Cocoon設定 > 画像 タブ
・ページ内：NO IMAGE 設定 > NO IMAGE 画像 > 任意の画像を選択します。

・変更をまとめて保存 をクリックして保存します。

【ブログカード】内部ブログカードの開き方を変更する

ブログカードをクリックしてもジャストナウ！読んでる記事画面を維持するように！

・押下：WP Admin > Cocoon設定 > ブログカード タブ
・ページ内：内部ブログカード設定 > リンクの開き方 > 新しいタブで開く > チェックを入れます。

・変更をまとめて保存 をクリックして保存します。

【404ページ】404ページ画像を設定する

ページが見つからなかった場合に表示される404ページの画像を設定することができます。

・押下：WP Admin > Cocoon設定 > 404ページ タブ
・ページ内：404ページ画像 > 任意の画像を選択して置きます。

・変更をまとめて保存 をクリックして保存します。

【AMP】AMP 機能を有効化する

・押下：WP Admin > Cocoon設定 > AMP タブ
・ページ内：AMP設定 > AMPの有効化 > AMP機能を有効化する（非推奨） > チェックを入れます。

・変更をまとめて保存 をクリックして保存します。

Google Search Console > 拡張 > AMP メニューから状況を確認することができます。

---