このブログのテーマはWordPressの無料テーマの中でもダントツで人気のある「Cocoon（コクーン）」を使っています。
使い方も非常に簡単で、操作もさほど迷うことがなく利用が可能なので初めてWordPressを使う方にもとてもおすすめのテーマです。
今回はこのWordPressテーマ「Cocoon」の初期設定について書いてみようと思います。
Cocoonのテーマファイルをダウンロードしてくる
まずは、Cocoonのテーマファイルをダウンロードしてきます。
スクロールしていくと、ダウンロードの項目がありますのでテーマのzipファイルを入手します。
ここで必ず忘れずにおこなってほしいことがあります！
お、なんだ？
子テーマファイルも必ずダウンロードしてください。
親テーマだけダウンロードして終了ではないのです。
さらにスクロールしてくと子テーマがありますので、必ず両方入手してください。
そして、子テーマを有効にしてください（親テーマじゃないです）
ん？なんで親テーマじゃダメなの？
親テーマでも同じ用にカスタムできるんだけど、実はとっても大変なことが起こるんだよ
ほぉ
なぜCocoonの子テーマを有効にするのか？
これはCocoonに関してだけではありません。親テーマと子テーマがある場合は、必ず子テーマを有効にしてください。
なんと！
CSSとかJSとか自分でカスタムした記述を親テーマに書くと全部リセットされて消えてしまいます。
そのため、イメージとしては
- 親テーマはメインで、見た目のレイアウト用のテンプレート
- 子テーマはCSSやJSのカスタマイズ記述用（アップデートは基本ない）
と思っておいてください。
カスタムしたCSSが全部消えたっちゃんだよね
必ず子テーマを使いましょうね。
WordPressの初期設定を行いましょう
Cocoonのテーマを入れたら、まずはWordPressの初期設定を済ませてしまいましょう。
これは、大体どのテーマでも共通で行う作業かなと思います。
自分が行っている作業は、過去記事を御覧ください。
Cocoonのカスタマイズを始めよう
それではココからCocoonの設定を始めていきますよ。
内容としては、自分が行っている設定をコンパクトにまとめた内容です。
これで完了ではなく、これをベースにあとは皆さんでもっと深掘りしてもらえればと思います。
どこから始めても構いませんが、Cocoonのカスタマイズを始めていきます。
まずはベースとなるテーマを決めましょう。
個人的におすすめなのは、「ぽんひろさん」が出している「Season」というテーマです。
このブログもテーマ「SeasonのSummer（夏）」を使っています。
非常に見やすいレイアウトや配色で、CSS等のカスタムは基本的になくても良いくらい完成されたテーマだと思っています。
もちろん他にも素敵なテーマがたくさんありますので、お好みのテーマで良いと思います。
ただ、今回の記事は「SeasonのSummer」をベースに進めていきます。
配色の設定を決めよう
「全体」メニューから細かい色味の設定を行いましょう。
自分が操作したのは、
- フォントサイズは16px、文字色は「#424242」に変更
- サイトアイコンはより種類の多いFont Awesome5に変更
- サイトリンク色を「#00bbdd」に変更
くらいです。あとはデフォルトの設定ですね。
直感的に操作できるんだね。これなら簡単そう
ヘッダーの設定を行う
「ヘッダー」の設定をします。
利用したのはヘッダーのロゴサイズの登録だけです。あとはデフォルトです。
はじめに設定した「SeasonのSummer」のテーマカラーでほぼ理想通りだったので、ヘッダーはロゴ以外の操作は不要と判断しました。
ヘッダーの固定とかも出来ますので、固定したい方はこちらで操作します。
最低限の操作としてはロゴだけ入っていれば良いのかな？と思います。
タイトルの設定
「タイトル」の設定です。Googleなどの検索エンジンにより表示方法が変わることがありますが、検索結果の設定が可能です。
ちくわブログでは以下のように設定しています。
トップページだけは独自に設定したい場合は、「フロントページタイトル」を「自由形式」にして好きな内容に変更することも可能です。自由形式を考えてた名残が残ってましたｗ
この設定はトップページのみです。
各投稿ページについては、スクロールしてくとしたに以下のような項目があります。
以下のように設定しています。
キーワードの入力は今のSEO的には効果がないと言われているためチェックは付いてますが、投稿時に設定はしてません。
ただ、入れたことによってマイナスになることはないと思うので、個人の自由で良いと思います。
SEOの設定項目
「SEO」の項目です。どの項目をindexさせるか、またnoindex（検索エンジンに掲載しない）にするかを選べます。
全部インデックスさせたほうが良いんじゃないと思われがちですが、カテゴリーやタグなどはページが増えすぎてしまうと価値が薄れる気がしています。
同じようなページだらけになるので。
そのため、2ページ目以降はインデックスしないようにしています。（1ページ目もどうしようか迷った）
絶対かどうかはわかりませんが、そのほうがSEO効果としてはきれいな気がします。
site:https://aqua2webs.com でインデックスの確認をした時に、タグページやカテゴリーページだらけになるとあまり美しくないと思っています。
ページ下部にある「日付の設定」。
ここは「投稿日・更新日を表示」にしています。更新日付はわかったほうが、記事が新しくなったんだなと言う目安になりますよね。
記事がいつ更新されたかがすぐにわかるようにしています。
アクセス解析・認証の設定
「アクセス解析・認証」です。この項目ではGoogleAnalyticsやSearch Consoleのコードを入れます。
1つ行っておいたほうが良い操作が、「サイト管理者も含めてアクセス解析する」のチェックを外すことです。
コレにチェックを付けたままですと、管理者が見たページもPVとしてカウントされてしまうので、よりリアルなデータを取得するためには外しましょう。
その他はSearch ConsoleはGoogleAnalyticsの画面をチェックして必要なコードを登録しておきましょう。
インデックスの設定
「インデックス」タブではトップページの見せ方を変えることが出来ます。
- 記事を順番に並べるだけ
- 更新された記事はトップに持ってくる
- レイアウトを変更する
などの変更が出来ます。
ちくわブログのトップページを見ていただくと、カテゴリーごとに2カラムになっています。
それはこの部分の設定を行っています。
表示カテゴリー数や表示順も変えること出来ますので、好きな項目をトップに出せます。
並び順は投稿順にしています。
更新頻度の多い記事を最初に見せて置きたいなら、【更新日（降順）】に変えておくと良いと思います。
私はブログのトップページにあまり人は来ないだろうという想定であくまでも投稿日順になるように並べています。
もしかしたらアクセスに変化があるかもしれないので、そのうち更新日順も試してみようと思います。
カテゴリー順の変更に書かれている数値は、【投稿】から【カテゴリー】でチェックできます。
新しい記事でもあまり更新しない記事もあるので、私は新しい記事をできるだけ最初にしたいので、こうしています。
投稿の設定
「投稿」では関連記事の表示やパンくずリストの表示、コメントのON/OFFの設定が行なえます。
あとは、ほぼデフォルトです。関連記事を表示するかどうかは少し悩みましたが、何がフックになってより多くのページが見られるかわかりませんので、今はつけています。
パンくずリストはやはりメインカラム手間で、記事タイトルも含むのがオーソドックスかなと思いますので、そこは特にこだわり無く、わかりやすさを求めこのようにしました。
目次の設定
「目次」は合ったほうが良いです。
SEOの効果、読者の利便性を考えると目次はつけましょう。
表示の深さh3まで表示、h4まで表示など色々な設定が出来ます。自分はH3までの表示にしています。
目次の見せ方は記事の見せ方によると思いますので、色々設定を試して一番気に入った見せ方で良いと思います。
画像の設定
「画像」です。これはアイキャッチとして設定した画像を本文上に設定するか選ぶことが出来ます。
中には、記事ページにアイキャッチ画像は不要という方もいると思いますので、その場合はこのチェックを外します。
またアイキャッチとページに入ってからの画像を変えたい場合（自分で設定したい場合）もあると思いますので、ここもお好みです。
アピールエリア
「アピールエリア」は、ちくわブログでいうところのこの部分です。
ココに背景画像とボタンを1つ設定して、見てほしい記事をアピールすることが出来ます。
自分は表示させています。
このページも使うかどうかはお好みです。
フッターの設定
「フッター」の設定です。これは、フッター用に設定したメニューを読み込ませてテキストを並べることが出来ます。
Copyrightもどのように表示するか決めることが出来ます。
このページも色々設定を試してみて、自分似合う形にするのが良いと思います。
自分はフッターにあまり高さを取りたくないので、非常にシンプルな形にしています。
ここまでで、まずはCocoonの全体的な設定が完了すると思います。
あとはレイアウトを実際に見ながら少しずつ調整して自分の納得行く形に仕上げれば良いと思います。
吹き出しメニュー
Cocoonではアバター同士の会話吹き出しの設定が出来ます。
ここは特に説明不要かなと思います。
自分は2匹の犬が登場するだけで良いので、使わない吹き出しは全部消して画像の差し替えだけ行いました。
アフィリエイトタグ
これはアフィリエイトを行っている方はぜひ利用しましょう。
アフィリエイトのコードは長いです。
それをショートコードとして登録することが出来ます。
自分の場合は
- ロリポップ【336ｘ280】 ： バナー画像
- 【txt】ロリポップ ： テキストリンクでロリポップの文字が出る
入力も簡単で、投稿画面のアフィリエイト項目からすぐに引っ張ってくることが出来ます。
最初の登録だけ少し手間ですが、一度やっておくと以後がすごく楽なので、アフィリエイトをやる方はぜひオススメします。
高速化の設定
これもやっておいたほうが良いかもしれません。
自分の場合は、「JavaScriptを縮小化する」にチェックを付けてしまうと、フォームのプラグインがうまく動きませんでした。
そのため、それ以外の項目を全て有効にしています。
チェックを付けたら、念のため各種動作チェックを行い、エラーが出てしまうようでしたら無理せずチェックを外しましょう。
まとめ CocoonはWordPress初心者の方にも非常におすすめなテーマ
いかがでしたか？
WordPressの人気テーマ「Cocoon」の初期設定について「ちくわブログ」で行っている内容を書いてみました。
もちろん、この設定が正解ではありません。
WordPressには無限の設定がありますので、ご自身に合わせた設定方法を作り上げていくことも大切です。
ただ、初めてWordPressをインストールしたばかりの方やCocoonで同設定したら良いのかわからないという方の参考になればと思います。
Cocoonは使い庫内している方はもちろん、初めてWordPressを触る初心者の人でも直感的な操作で使えますので、導入のハードルはかなり低いと思います。
テーマに迷っている方はぜひCocoonを使って素敵なブログを作ってみましょう。
コメント