Cocoonの設定は多種に渡っていて使いこなすには時間がかかります。
最初にサイトを立ち上げる時に必要な最小限の設定、自分が必要と思う設定のみを上げていきます。
最初に
Cocoonテーマのインストール
Cocoonを使おうと思ったらまずはテーマのインストールから始めます。
Cocoonは親テーマと子テーマの2種類があります。
どちらか一方を使うのではなく両方を使います。
まず、親テーマをWPにアップロードします。その際に有効化はしないでください。
新規追加に戻るをクリックして子テーマを次にアップロードします。
アップロードが終わったら子テーマを有効化します。
これでCocoonが使えるようになりました。
親テーマ
アップロードだけで有効化はしないでください。
子テーマ
親テーマがアップロードできたらアップロードします。
これでCocoonが使えるようになりました。
スタイルシート
初心者の方でも他のブログを見てこのサイト素敵だなと思った事の有る方も多いと思います。
色使いが良かったり、ページのレイアウトが上手だったりと気になる箇所も多いですよね。
でも、最初から全てを完璧にするのは時間の無駄です。
Cocoonではいくつものスキンを用意してくれているので、まずはそれで始めるのが良いと思います。
選び方は2種類あり
ネットでデザインを見る
Cocoonのサイトで簡単に色々なデザインを見ることが出来ます。
ボタンを押せば公式ホームページに飛ぶことが出来ます。
公式ホームページの右側タブにスキン動作でもがありますのでデザインスキンを選択することで気に入ったデザインを探すことが出来ます。
自分のWPで見る
こちらはCocoon設定のスキンのタブから見ることが出来ます。
ちょっと見にくいので出来れば公式ホームページで見るほうがストレスがありません。
サイトアイコン
サイトアイコンだけはCocoonでは無くWordPressの設定を利用します。
WordPressの方が高機能なんだそうです。
まずはサイトアイコンの素材を用意します。
私のおすすめは「いらすとや」さんです。
他にも自分でデザインできたりダウンロードできるサイトがたくさんありますのでご自分で調べて個性的なファビコンを探しましょう。
Cocoon公式サイトでは画像のサイズを512×512pxのサイズのPNG画像を推奨しています。
素材が決まったら早速設定をします。
「ダッシュボード」から「ユーザー」→「あなたのプロフィール」をクリックします。
設定画面の「プロフィール画像」で「プロフィール画像のアップロード」の欄にメディアリンクからの素材を選択します。
以上で完了です。
素材のちょっとした編集も可能になっていますのでぜひチャレンジしてみてください。
AMPの設定
AMPとはモバイルでのウェブサイト表示を高速化するための仕組みです。
Cocoonには最初からこの機能が備わっていますが最初は設定されていないので設定を有効にしておきます。
Cocoon設定から2列めのタブの右端の方に「AMP」のタブがあります。
クリックするとAMP設定の画面になります。
AMP設定タイトルの2段めにAMPの有効化のチェックボックスがありますのでここにチェックを入れます。
チェックを入れたら変更をまとめて保存ボタンを押すだけです。
PWAの設定
PWAとは（Progressive Web Apps)の略語だそうです。
これもモバイル環境の高速化を図るものだそうです。
最近は色々なテクノロジーが開発されてきて私にはなかなかついて行けない状態です。
ただ、早くなる事はアドセンスにも関連してくるので嬉しい限りです。
Cocoonを開発してくれているわいひらさんに感謝です。
設定自体はAMP同様簡単なので助かります。
Cocoon設定からAMPお隣のPWAのタブを開きます。
ここで一つ注意点があります。
サイトがSSL化していなければなりません。
SSL化していないhttpのサイトでは動作が反映されないそうです。
設定してみると何か早くなった気がします。
PageSpeed Insightsでのモバイルスコアは88ポイントでした。
なんとか、90ポイント以上にしたいのですが。
導入前に比べると8ポイント早くなっていますね。
メタ情報の削除
メタ情報とは
なんだかよく判りません。
ただ、Cocoonで右サイドに有るメタ情報を消したいだけなんです。
ここにあるのは サイト管理やログインなどの項目でこういった裏方さんは読者の方には見せないほうが美しいのではないかと思うのです。
そこでまたまた「外観」を開きます。
ウィジェットを選びサイドバーかサイドバースクロール追従にあるメタ情報をドラッグ・アンド・ドロップで外します。
たったこれだけです。
私はちなみにカテゴリーと最近のコメントも非表示にしました。
グローバルメニューの設定
ヘッダーロゴの下にメニューアイテムが表示されているサイトを良く見かけます。
何回も訪れてくれている読者の方にはページを開いてすぐに見たいサイトにアクセスできるメニューは便利ですよね。
このメニューは実際の記事がある程度の量になってからの設定でもいいかと思うのですが設定に時間が掛かるものは最初に作っておこうと思っています。
グローバルメニュー自体の設定は「外観」→「メニュー」で「新規メニュー作成」をクリックします。
編集するメニューを選択で新規メニューを作成をクリックします。
メニュー名を「ヘッダーメニュー」とし「メニュー構造」で表示したい項目を選んでメニューを保存します。
「位置の管理」を開いて「ヘッダーナビ」に「ヘッダーメニュー」を選択して「変更を保存」で終了です。
グローバルメニューに加えたいのがメニューの下に英語で説明が表示されたりしてかっこいいですよね。
それにも挑戦してみましょう。
先程のメニュー構造のページを開きます。
管理画面の右上にある表示オプションメニューをクリックします。
表示オプションをクリックすると下記の設定画面が出てきます。
説明にチェックを入れるとメニュー構造で該当のメニューの設定画面に説明の欄ができます。
説明欄に英語等を記入して終了です。
リンクにアイコンを表示
よくリンクされている場所にリンクアイコンが表示されています。
これも設定しておきましょう。
Cocoon設定から本文のタブをクリックします。
設定画面の中ほどに外部リンク設定の項目があります。
楕円で囲んだアイコン表示にチェックを入れます。
その下のアイコンで表示したいアイコンを選びましょう。
内部リンクもしたい場合はその下の内部リンクに設定すればOKです。
例えば内部リンクはWordPressの設定
このようになります。
いかがでしょうか？
駆け足で設定を行ってきました。
不備な点も有るかと思いますので後日補足をしていきたいと思います。
