WordPressテーマ「Cocoon設定方法」これからブログを始める方向け

これからブログを始めるにあたって新しくサーバーもレンタルして、WordPress（ワードプレス）もインストールしたけど、「無料テーマ」「有料テーマ」といろいろあってどれを使っていいかわからない、という話をよく聞きます。

そこで今回は「無料テーマ」ですが、とても使いやすいと思われるテーマの「Cocoon設定方法」について、管理人が試行錯誤しながら設定した場所を、ごく簡単にですが説明していきたいと思います。

WordPressテーマ「Cocoon設定方法」

エックスサーバーをご契約された方は、エックスサーバーの管理画面からWordPress（ワードプレス）をインストールすることができます。

今回はエックスサーバーの画面で、WordPress（ワードプレス）のインストール手順を説明します。

赤枠の「WordPress簡単インストール」をクリックします。

そうするとWordPress（ワードプレス）をインストールするドメインを選択する画面が出てきますので、ワードプレスをインストールするドメインを選んで「選択する」をクリックします。

「WordPressインストール」タブをクリックします。

そうすると画面下の方にWordPress（ワードプレス）の「テーマ」を選ぶところがありますので、「Cocoon」にチェックを入れて確認画面へ進むを選んでインストールをして下さい。

エックスサーバー以外のレンタルサーバーで、Cocoonのテーマがダウンロードできないという方は、下記のサイトからCocoonテーマのダウンロードができます。

Cocoonテーマのダウンロードはコチラ

なおCocoonテーマには「Cocoon」と「Cocoon Child」の2種類ありますので、両方ともダウンロードしておいて下さい。
ただし、まだ「有効化」のボタンは押さないようにして下さい。

WordPress（ワードプレス）のダッシュボードから、外観→テーマを選択します。
ダッシュボードとは、ワードプレスを起動させると最初に表示される画面のことです。

そうすると、WordPressのテーマを選択する画面が表示されます。

表示されているテーマは基本、無料テーマのものです。
「AFFINGER」と「AFFINGER Child」は有料テーマですので本来は表示されません。

このブログも「AFFINGER」で書いていますので「Cocoon」にはない機能も多々ありますが、まずはWordPress（ワードプレス）とは一体どのようなモノかを知るには、無料テーマの「Cocoon」で十分だと思います。

ブログを書くのが楽しい、続けていけそうだな、もっとデザインに凝ったテーマが使いたい、と思ってから他の有料テーマを検討するのもいいと思います。

実際に管理人である私も最初は「Cocoon」を使っていましたし、慣れれば簡単にブログを書くことも出来るようになってきました。
特に「Cocoon」でも不自由を感じたことはありませんでしたが、いろいろ考えたうえで有料テーマである「AFFINGER6」を、このブログから使い始めています。

「Cocoon」で慣れていましたのでAFFINGER6は今のところ使いにくいと思ってはいますが、Cocoonでも最初は手探りでブログを書いていましたので、慣れるまでの辛抱だと思っています。

そしてAFFINGER6がいいと思えるようになれば、今度はAFFINGER6の感想などもご紹介できればいいなと思っています。

話がそれましたが、「Cocoon」と「Cocoon Child」の2種類ともダウンロードできましたら、「Cocoon Child」だけを「有効化」しましょう。

「Cocoon Child」しか有効化しないのなら、「Cocoon」はインストールをしなくてもいいのでは、と思うかもしれませんがこれにはちゃんと理由があります。

「Cocoon」と「Cocoon Child」の関係は簡単に言ってしまえば、「Cocoon」が原本で「Cocoon Child」は「Cocoon」のコピーと思ってもらえればいいかなと思います。

ですので、「Cocoon Child」だけでは動作しません。

ここからが不思議なところですが、このワードプレスのテーマは原本よりコピーの方が優先されます。
ですのでCocoonテーマのカスタマイズは、「Cocoon Child」で行っていきます。

こういったWordPress（ワードプレス）の「テーマ」や後で説明しますが「プラグイン」は、新しいバージョンへのアップデート（更新）がたびたびあります。

こういう風に「更新」のお知らせがきます。

ダッシュボードにも、更新のお知らせがわかるようになっています。

もちろん更新を実行するのですがここからが重要なポイントで、「Cocoon」の更新を行うとカスタマイズしていたところが全て初期設定に戻ってしまいます。

せっかくいろいろ頑張ってカスタマイズしたのに、勝手にリセットされてしまって苦労が水の泡になってしまいますので、必ず「Cocoon Child」だけを有効化して、カスタマイズは「Cocoon Child」で行うようにして下さい。
基本的に「Child」のテーマには更新はありません。

WordPressテーマ「Cocoon」を高速化する

後で説明するプラグインでも、ワードプレス（WordPress）を高速化させるものをインストールしますが、Cocoon自体を高速化させる設定がありますので、先に設定を済ませておきます。

ダッシュボードからCocoon設定→高速化を選択します。

画面が表示されたら、下記のチェックボックスにチェックを入れて「変更を保存」ボタンをクリックして下さい。
（おそらくデフォルトでチェックが入っているかもしれませんが、念のために確認をするようにしましょう）

「変更を保存」をクリックしないでブラウザを戻ってしまうと、更新が反映されないままで戻ってしまうのでご注意を！

詳しい説明はご覧になりたい方は、下のリンクより「本家Cocoonサイト」の高速化ページを見ることができます。

自分のブログのタイトルを決めて設定する

自分のブログのタイトルがどういう風に表示されるかを見るために、先に自分のブログタイトルを設定しましょう。
後からでも修正できますので今は仮でもいいので、とりあえず何か決めて入力することにします。

ワードプレスのダッシュボードから設定→一般へと進みます。

そうすると、一般設定の画面が表示されます。

緑色の枠（WordPressアドレスとサイトアドレス）は変更できません。
黄枠の「管理者メールアドレス」は変更可能です（アドレスを変更すると確認メールが届きますので、OKならメールの指示に従って下さい）

今回設定するのは赤枠の「サイトのタイトル」と「キャッチフレーズ」の部分です。
（キャッチフレーズは特になければ空白のままでも大丈夫です）

今回はタイトルを「新しいブログ」、キャッチフレーズを「新しくCocoonを始める方のサイト」と入力してみました。

続いて日付や時刻表記の設定もしていきます。

サイトの言語やタイムゾーンはそのままで大丈夫です。
日付形式と時刻形式は、自分のお好みで設定してください。

週の始まりもお好みで選んでください。

そして設定を変えたら必ず、「変更を保存」をクリックするのを忘れないようにして下さい。

WordPressテーマ「Cocoon」の見た目（スキン）を決める

ブログのタイトルの設定が終わったら、Cocoonのデザイン（スキン）を決める設定をします。

ダッシュボードから、「Cocoon設定」→「Cocoon設定」と進んでいくと、Cocoon設定の画面が表示されます。

その中の、「スキン」タブをクリックして下さい（既にスキンタブが開かれた状態でページが表示されています）

そうすると、Cocoonの無料で使えるスキン一覧が表示されているので、とりあえず適当に選んで画面下にある「変更をまとめて保存」をクリックしてみて下さい（今回は「Simple Navy」を選んで保存しています）。

そうすると、選んだスキンのプレビューが表示されています。
先程ブログタイトルとキャッチフレーズを設定しましたが、どのように表示されているのかを知ることができました。

もちろん、タイトルの位置や色などは変えることができますが、今回はあくまで初期設定ですのでそこまで深くは掘り下げませんが、別の機会にもう少しカスタマイズについて記載したいと思います。

どのようなデザインかを見たい場合には、いちいち選んで保存しなくても調べることができます。

並んでいるこの赤枠の部分にマウスポインタを合わせると、サンプル画像が表示されますので見ることができます。
自分のタイトルがどう表示されるのかを見たい場合には、設定を保存しないと見ることができませんのでおおよその目星を付けておいて、気になるスキンだけを保存して確認するのがいいと思います。

おそらく、デザインを気にする人はここから先になかなか進まないと思いますが、後からいくらでも設定できますので、大体の出来で設定しておいて、いざブログを公開する前にでも本腰を入れて設定するのがいいでしょう。

デザインを専攻している方は、本当に楽しい時間だと思います（ドロ沼にはまってキリがありませんが...）

Cocoon設定の「全体設定」について

Cocoonのスキンを決めたら、今度はもう少し細かく設定をする「全体設定」についてです。
ダッシュボードの「Cocoon設定」→「Cocoon設定」と進んでいき、今度は「全体設定」のタブをクリックします。

そうするとサイトの細かい部分（サイドバーの文字の色やタイトルの色など）を変更できます。
ここも細かいことを紹介するとキリがないので、ごく簡単に説明します。

色を変えたい時は、赤枠の「色を選択」をクリックするとカラーパレットが表示されますので、お気に入りの色を選択して下さい。
色を選んだら「変更をまとめて保存」をクリックすると、色変更をしたところの色が変わって表示されます。

とりあえず自分で試してみることをおススメしますので、変更箇所がわかりやすいように例えば「赤色」を選んで保存すると、どこの色が変わったかがわかりやすいと思いますので、目立つ色で確認してみて下さい。

元に戻したい場合は、「クリア」をクリックすると元に戻りますので安心して試してみて下さい。
「＃dd3333」などの番号は色のRGBコードですので、詳しく調べたい方は下記のリンクよりカラーコードのページへ飛ぶことができます。

次のサイトフォントも、自分の好みのフォントやフォントサイズを試しながら選ぶと、どんな風に表示されるかなどがわかると思います。

この下にある設定なども、時間がある時に自分で試しながら設定するのが理解が早くなるのでおススメです。
設定を変えたら必ず、「変更をまとめて保存」をクリックするのを忘れないようにしましょう。
参考までに管理人は、これ以降の部分は色以外は触ってもいません。

Cocoon設定の「ヘッダー」について

ヘッダーとはブログタイトルの記載がされている部分のことです。
（下記の画像の部分です）

このヘッダータブでは、ヘッダーの背景部分（この画像では青色の部分）の色を変えたり、ブログタイトルを文字ではなく自作のロゴ画像に変更したりすることができます。

また、キャッチフレーズを表示させない設定もできますし、ヘッダーの青色部分を写真などにも変更できます。

このような感じでおしゃれ（？）な感じにも設定することができます。
こんなことをやり始めたら、ますますドロ沼にハマりますので適当なところで妥協するようにしましょう。

参考までに、ヘッダーに画像を設定する所はここです。

「選択」を選んで設定したい画像があるフォルダーから画像を設定すればOKです。
自分が思うような画像の設定をしたい場合はヘッダーの高さを調節するか、ある程度最初から画像をトリミングしておけば大丈夫です。

ヘッダーの文字色を変えたい場合は、こちらの設定をするようにして下さい。

Cocoon設定の「タイトル」について

ダッシュボードの「タイトル」タブの部分の設定です。

ここの部分は主に、検索エンジン（GoogleやYahoo！などです）での表示に関する設定です。
例えばグーグルで「ブログ」と検索すると、次のような検索結果がでてきます。

この赤枠の部分の表示を設定するのがこの「タイトル」タブで、設定できるのは「3パターン」です

「サイト名」を選ぶとキャッチフレーズは表示されずに、タイトル名だけが表示されます。
「サイト名｜キャッチフレーズ」を選ぶと、上記のようなサイト名とキャッチフレーズが表示される、よく見かける一般的な表示となります。
「自由形式」を選ぶと、下の「自由形式タイトル」に記載したタイトルが表示されます。

ここの設定は、「サイト名」か「サイト名｜キャッチフレーズ」を選んでおけば大丈夫ですが、キャッチフレーズが長い場合やタイトル名が長い場合は、「サイト名」だけの方がいいです。

というのも、検索時に表示されるタイトルは「29文字」しか表示されませんので、長すぎると途中で見切れてしまって、そのサイトがどういった内容のサイトかを伝えることができない可能性があるからです。

ですので、自分のブログのタイトルやキャッチフレーズの文字数と相談しながら、表示形式を決定するのがいいでしょう。

Cocoon設定の「SEO」について

ダッシュボードの「SEO」タブの部分の設定です。

ここで設定するのはページ最後の部分の、「日付の設定」項目だけです。

表示する日付の設定ですが、ここも自分のお好みの設定で大丈夫です。
おススメは一番上の、「投稿日・更新日を表示」です。

「投稿日・更新日を表示」に設定すると、ブログを投稿した日だけではなく、ブログ内容を「追記」や「リライト」した日付も併せて表示されますので、自分がいつ追記やリライトをしたか一目でわかりますし、読者の方も更新日が表示されていたら「何か追加があるのかな？」と、もう一度ブログをのぞいてくれる可能性も上がります。

Cocoon設定の「インデックス」について

ダッシュボードの「インデックス」タブの部分の設定です。

ここも設定するところは、「カードタイプ」の選択のところです。

ここを設定するとどこが変化するのかというと、ブログ内容の一覧が表示される部分です。
ここもどう表示されるかを見たい場合は

この赤枠部分にマウスポインタ―を重ねると見本が表示されますので、自分のお好みのタイプにしてもらえればいいです。
変更した時は、「変更をまとめて保存」をクリックするのを忘れずに！

Cocoon設定「投稿」について

「投稿」タブの部分の設定です。

この「投稿」タブの設定も細かく設定できますが、やはり自分で確認しながら試してみるのをおススメします。
特にこだわりがなければ、デフォルトのままでも十分です。

ひとつだけ設定を変えるなら、ページ下部の方にある「コメント設定」のところです。

この部分は、ブログに「コメントを書き込む」ページを作成するかしないかを設定するところですので、ブログにコメントを書き込んで欲しくない場合は、「コメントを表示する」からチェックを外しておきましょう。

Cocoon設定「SNSシェア」について

「SNSシェア」タブの部分の設定です。
ここでの設定は、自分のブログを他の読者に「紹介」してもらう設定をしますので、拡散希望をしないのであれば「SNSボタン」を表示しない設定にしておいた方がいいでしょう。

SNSボタンを表示できる場所は、2ヶ所あります。

表示をさせない場合は、両方のチェックを外して「変更をまとめて保存」をクリックすればOKです。
どちらかだけ、もしくは両方とも表示させてい時は、チェックを入れて「変更をまとめて保存」をクリックして下さい。

なお、上部の「シェアする」という部分は自由に設定できます。

「シェアメッセージ」の枠内に好きな文字を記載して「保存」すれば、お気に入りのメッセージでの表記が可能です。

Cocoon設定「SNSフォロー」について

今度は「SNSフォロー」タブの設定についてです。
ここでは逆に自分のSNSを「フォロー」してもらうのが目的ですので、ブログの知名度を広めたい場合はSNSボタンを設置しておいた方がいいでしょう。

初期設定では、下記の2つのフォローボタンが設定されています（バージョンによっては設置されていないかもしれません）

設置されているのは「feedlyフォローボタン」と「RSS購読ボタン」の2つです。
「feedly」や「RSS」って何、と思われた方は、下記のリンクより詳しい説明のサイトへ飛ぶことができます。

この「feedly」や「RSS」ボタンは表示させたくないという方は、下記の2ヵ所のチェックを外して保存すれば表示されません。

SNSフォローボタンを何も表示させたくなければ上記のチェックを外せば何も表示されませんが、自分のツイッターやインスタグラムをフォローして欲しい場合は、自分のツイッターアドレスやインスタのアドレスを登録すれば、SNSボタンが表示されます。

表示させることができるSNSの種類は、下記の画像の通りです。

「あなたのプロフィール」が青字でリンクとなっていますので、クリックしてプロフィール設定画面を表示させます。
そうすると、ページ中央付近に各SNSのリンク先を記載するところがありますので、SNSボタンを表示させたい箇所にリンク先のアドレスを記載したら、「プロフィールを更新」をクリックして設定を保存しましょう。

設定を保存したらダッシュボードの「SNSフォロー」タブをクリックすると、自分がリンク先を記載したSNSのフォローボタンがプレビューで表示されているハズです。

フォローボタンを表示させたくなければ、「フォローボタンの表示」のチェックを外せば表示されません。

「フォローする」のメッセージを変更したい場合は、「フォローメッセージ」の枠内のメッセージを変更すれば変えることができます。

また、SNSボタンを表示させたいページも設定することができます。

SNSをフォローして欲しいからと言って、あまり多くのページに設定するのも見栄えが良くありませんので、設定するなら「フロントページ」「投稿」のどちらかがいいと思いますが、自分で戦略を考えて設定するのも楽しいです。

Cocoon設定「フッター」について

WordPressテーマ「Cocoon設定方法」の設定も最後になりました。
最後は「フッター」タブについてです。

フッターとは、ページの最後のところです。

これは「デフォルト」の設定です。
当然、色を変えたりフッター部分にロゴ画像を表示させたりできます。

クレジット表記の「©2022 これから始めるブログ」の部分も、ある程度自由に設定することができます。

基本的にフッターの色やデザインは、最初に設定した「スキン」に合わせたデザインとなっています。

〖追記〗WordPressのパーマリンク設定について

WordPressの設定も終わり、記事を書き始める前に設定することがまだあります。

それは、「パーマリンク」の設定です。
下の画像で言うと赤枠と緑枠の部分が、自分で設定する「パーマリンク」の部分です。
（管理人は、カテゴリー設定をしているのでパーマリンクが分かれています）

パーマリンクの設定は途中で変えてしまうと、今まで書いた記事のパーマリンクの設定が変更されることとなり、インデックスされていた記事も全てインデックスのし直しとなってしまいますので、最初に決めたパーマリンクの設定は途中で変えないようにしましょう。

設定は、ダッシュボード→設定→パーマリンクへと進むと、パーマリンクの設定画面へと変わります。

初期設定では「基本」にチェックが入っていますので、他の構造に変えるようにしましょう。
というのも、Googleが推奨しているURL構造は「可能な場合は長い ID ではなく意味のある単語を URL に使用します」と表記していますので、「?P＝123」といったURLよりも、「imiaru-tango」の方がSEOには評価されるということです。

自分のブログサイトを今後「カテゴリー」で分類していく予定なら、「カスタム構造」にチェックを入れて利用可能なタグを「%category%」「%postname%」とクリックすれば、設定は終わりです（クリックする順番に気をつけて下さい）

下の画像で説明すると「wp-plugin」がカテゴリーで、「backwpup」が投稿名です。
（画像では見にくいですが、カテゴリーと投稿名は/で区切りがあります）

パーマリンクを「投稿名」だけにするのなら、上記のパーマリンクは「wp-plugin-backwpup」と表記できます。

自分のブログをどうしていくかによっても違ってきますが、「カテゴリー」設定をした方がサイトマップを作成した時に読者にもわかりやすいのでおススメですが、後からパーマリンクの設定を変えることだけはしないように注意しておきましょう。

WordPressテーマ「Cocoon設定方法」の概要

今回はWordPress（ワードプレス）をインストールして、最初に設定しておいた方がいいところをごく簡単にですが説明させていただきました。

WordPressテーマである「Cocoon」は無料ですが、非常に便利で使いやすいテーマですので、あちこち自分で設定をしてみて覚えるのが早く使いこなす近道ですので、是非とも設定を変更してみましょう（変更前に写メっておけば、元に戻すのも簡単です）

今回はあくまで管理人が設定を変更してみたところの紹介しかしておりませんので、ほんのさわり部分しか紹介しておりません。

ですが必要最低限な部分はお伝えしたつもりですので、参考になれば幸いです。

細かいところで「こんなこともできます」という点を思い出したら、随時更新していきます。

〖追記〗Cocoonで入れた方がいいプラグイン8選

ワードプレスのテーマ「Cocoon」の設定方法は、簡単ではありますが紹介させていただきました。

では、Cocoonで入れた方がいい「プラグイン」は何でしょうか？

下記の「Cocoon必須プラグイン おすすめ8選 対策は万全」リンクカードで、Cocoonで入れた方がいいプラグイン「8選」を紹介していますので、プラグインで悩まれている方は是非ご覧ください。