ブログ開始時から、テーマは「スティンガー」（無料）を使用していましたが、いろいろ調べていくうちに
「無料ならCocoon（コクーン）がおすすめ」
という情報が多かったので、詳しくCocoonを調べてみると機能的にも外観も自分の理想に近い！
早速変更してみました！
この記事を読めば簡単に
Cocoonのダウンロード方法
Cocoonの設定
ができます。
テーマをCocoonに変更
早速Cocoonに変更しよう！！
その前に初心者に注意点を記載しておきます。
初心者は確認
以前「アクセス解析」をしたいと調べた時、Cocoonの機能に元々アクセル解析が備わっているという事で、変更を試みた事がありました。
その時は、ワードプレスのテーマの変更画面から「Cocoon」をダウンロード出来るものだと思って検索していましたが
「該当がありません」
となり、ダウンロード出来ない理由がわからず断念していました。
正解は、
GoogleでCocoonのサイトに行ってからダウンロードする
勘違いしていたのは、ワードプレス内の「テーマを検索」の所から新しいテーマをダウンロード出来ると思っていました。
ワードプレス内の「テーマを検索」の所は、自身でダウンロードしたテーマしか検索出来ません。
理解すれば当たり前なのですが、、、
Cocoonダウンロード手順
Googleにて、「Cocoon」と検索
Cocoonのホームページにて「ダウンロードページはこちら」から「ダウンロード」をクリック
ページが変わり下へスクロール行くと
「親テーマのダウンロード」と「子テーマのダウンロード」とあるので
どちらもダウンロードする
必ずどちらもダウンロードしてください。片方だけでは不具合や使用できなかったりします。
＊基本「親」「子」と二種類あるテーマは両方ダウンロードしましょう！！
親テーマ、子テーマを両方ダウンロード出来たら設定していきましょう！
ワードプレステーマをCocoonへ変更する手順
変更のやり方
- ワードプレス、「外観」→「テーマ」
- 「新規追加」→テーマを追加の「テーマをアップロード」
- ファイルを選択→Cocoon親テーマを「今すぐインストール」有効化などせず次へ
- ファイルを選択→Cocoon子テーマを「今すぐインストール」有効化
親テーマ、子テーマ両方インストールして
「子テーマ」の方のみ有効化にする
Cocoonの設定
テーマをCocoonへ変更し、ブログページを確認してみると、、、
- グローバルメニュー（ページのメニュー一覧）にカテゴリーの内容が表示されてて変
- 投稿内容が一列ででかい
- アイキャッチ画像の大きさがバラバラ
- なんかショボいｗ
レイアウトの配置自体はいいですが、色とか、バランスが悪い。
テーマを変更するとデザインのバランスが崩れるので順をおって設定していきましょう！！
変更した内容
・グローバルメニューカテゴリーの不要な表示
・グローバルメニューの追加
・グローバルメニューのバランスと色の変更、ロゴの追加
・ページ上部の色、デザインの変更
・投稿リストを二列に変更
・目次
・フッターの編集
グローバルメニューカテゴリーの不要な表示
最初にテーマを変更して一番気になったのはこれ。
グローバルメニューの所に、カテゴリーの説明文が入ってとても見にくい。
スティンガーだと表記されない仕様なのが、Cocoonでは表記される仕様みたいですね。
説明文は英語表記をさせるなどの使い方が望ましいですね。
説明文の削除の仕方
ワードプレスの「外観」→「メニュー」
「メニューの構造」の場所にそれぞれメニューが並んでます。
説明文が表記されるカテゴリーを開く（右の▼）→開くと「説明」という所があるので
そこの文字を消す→「メニューを保存」
初期設定、又は初めてカテゴリーを作ったときに「説明」欄に何も記入しなければそもそも表示はされません。
「投稿」→「カテゴリ」から編集したいカテゴリーを編集し、説明を消す事も出来ます。
グローバルメニューの追加
一番重要であろうグローバルメニューの項目。ここを好きなように調整できれば素敵なレイアウトの完成です。
初歩すぎて、説明があまり検索で出てこない内容も
初心者にわかるように解説します。
メニューの項目
まず、「メニュー」のページでメニュー構造をいじる前に
「メニューの項目」を追加する必要があります。
私が迷ったのはここ。ネットで調べるとメニュー構造の設定はたくさん調べられますが、
初めに「メニューの項目」を追加しましょう！みたいな説明がまったくなかったので（初歩的な事なんだろうが）デフォルトの項目しかなく。
「どこから追加するんだよ！！」ってなっておりましたｗ
そもそもメニューのページ内には新規項目を追加する設定箇所がありません。
なので、まずはメニューの項目を追加しましょう。
手順
「投稿」の「カテゴリ」を選択
新規カテゴリーの追加ページになるので必要個所を記入していきましょう。
基本的にカテゴリー名だけでいいと思います。
記入後
新規カテゴリーを追加を選択
すると右側に反映されるので追加した新規カテゴリーをチェックし適用すれば、メニュー項目を追加のページの「カテゴリー」に反映されます。「すべてを表示」にしてください。
この作業をした後、
「外観」→「メニュー」で新規追加したメニューの項目をメニュー構造に追加出来るようになります。
グローバルメニュー追加の手順
グローバルメニューに追加したいメニューを「メニュー項目を追加」から選択します。
「投稿」は選択した投稿が表示され、「カスタムリンク」はリンク先を指定できるメニューです。
「固定ページ」は、リンクでもなくカテゴリーてもないような用途でプロフィールや、プライバシーポリシーなど固定して使うメニュー。
「カテゴリ」は投稿記事作成の際にカテゴリーを選べるので選択したカテゴリー別に分けられます。
それぞれの項目を開いて「メニューに追加」で右側の「メニュー構造」の一番下（ブログページ上、右）に配置されます。
配置を変更したい場合は、クリックで上下で移動、又は項目を開いて「移動」でも出来ます。
ここで「ナビゲーションラベル」も変更できます。（メニューの名前です）
メニュー構造の下にいくと「メニュー設定」があるので、そこでメニューを表示させる位置（今回はヘッダー）を設定します。
「ヘッダーメニュー」をチェックし「メニューを保存」で設定完了。
グローバルメニューのバランスと色の変更、ロゴの追加
グローバルメニューの色とバランスも変更でき、ロゴも追加できます。
グローバルメニューの色（背景、文字）配置バランス、ロゴ追加は一気にできます。
ロゴは自作してください。（連絡頂ければ作りますよー）ロゴ追加はお好みで。
グローバルメニューの色と配置バランス設定
「Cocoon設定」→「ヘッダー」
ヘッダーの設定がいろいろ出来るのでお好みで必要な設定をしてください。
ロゴの追加
「ヘッダーロゴ」→「選択」→画像をアップロードでOK
グローバルメニューの色の変更
「グローバルナビメニューの色」→グローバルメニューの背景の色と文字の色を変更できます。
グローバルメニューの幅の変更
「グローバルナビメニューの幅」→「トップメニュー幅」の値を変更
グローバルメニューの数に合わせてお好みで調整してみてください
ページ上部の色、デザインの変更
このブログで言えば、ロゴが入っている箇所です。
「Cocoon設定」→「スキン設定」
スキン一覧からお好みを選べばOK！設定したいスキンにチェックをいれ「変更をまとめて保存」で設定完了。
＊スキンの前にあるアイコンに触れるとイメージが見れます。
投稿リストを二列に変更
デフォルト（初期設定）だと投稿リストが「一列」でバランスが悪いので「二列」に変更。
「Cocoon設定」→「インデックス」→「リスト設定」
ここの設定では、投稿リストをどう見せるかを設定できます。
並び順や表示タイプが選べます。
私は、「縦型カード二列」に変更しました。
自分のページに合わせていろいろ試してみてください。
二列にした事により問題発生
二列にした事によりアイキャッチの画像の大きさ露呈、画像の大きさがバラバラな為、綺麗に並んでませんでした。
すべてのアイキャッチ画像のサイズを統一。
結構、大変な作業ですので、画像を使用する際は用途ごとに画像のサイズを合わせた方がいいですよ。
目次
「Cocoon設定」→「目次設定」
「目次を表示する」にチェックをいれ「変更をまとめて保存」で目次が表示されます。
スティンガーを使用していた時点では目次は自分で作成しリンクを設定していました。
やり方はこちら↓
Cocoonに変更し目次を適用すると、今まで使っていたテーマでリンクを設定している場合、目次が二個になるので注意。
目次の項目の数は「目次表示の深さ」で設定が出来るので自分にあった設定にしましょう。
例）「見出し3」の中にはそれより小さい「見出し4」「見出し5」以外を入れないように作成する。「見出し3」の何に「見出し2」を使用すると文章構成、SEO上よろしくないです。
フッターの編集
フッターとは一番下に表示されている部分。
「Cocoon設定」→「フッター設定」
ヘッター同様、フッターの色や文字の色も変更できます。
デフォルトではヘッターにロゴを入れた方は、フッターにも適用されるみたいなのでお好みで変更してください。
「フッター表示タイプ」にて変更できます。
（デフォルトの場合はロゴ＆メニュー＆クレジットになっています）
その他、「クレジット表記」ではサイトの一番下に表記されるクレジットが選べます。
「独自表記」でオリジナルの表記も可能。
まとめ
今回はスティンガーからCocoonにテーマを変更しました。
デザインや、設定のわかりやすさ（Cocoon設定があるので）は変更してよかったと思いますが、以下の変更点があります。
2.テーマ変更はページのバランスが崩れる為、全体の設定をやり直す必要がある
テーマ変更する方は設定変更覚悟でやるなら早めの方がおすすめです。
その他、アイキャッチ画像などの画像データは用途に合わせて同じサイズを適用させておく方がいいですよ。
コクーンは無料で使いやすいのでおすすめです。
「固定ページ」の「新規追加」で作成→作成したのち、「メニューの項目」の所に追加されます。