こちらではWordPressサイトのテーマの設定手順の解説です。
この記事では無料テーマ「Cocoon」（コクーン）の設定手順となります。
Cocoonは無料テーマですが侮るなかれ！有料テーマとまではいきませんが、無料とは思えないカスタマイズ性能が整っており、それなりのデザイン構成でサイトをかんたんに作成できる巷のブログ界隈では人気の高いテーマです。
ここからは以下の内容の解説をします。
- テーマCocoonの有効化の手順
- スキンの設定
- サイドバーの設定
まずは記事作成まで最短で進むための最小限設定にしました！
上記の他、ヘッダー・グローバルメニュー・おすすめカード・吹き出し等などさまざまな設定がありますが、ブログ初心者の場合はかなりの時間を要しますので、今回は上記3点のみの解説とします。記事が増えてサイトに慣れてきた頃にでも他の設定も徐々におこなっていきましょう。
実際にCocoonを最短で使えるようにするには、既に前回のサーバー設定でインストール済なので3分とかかりません。ですが、とりあえずサイトの見栄えがよくなるカスタマイズ設定は上記の「サイドバーの設定」まで、約10分程度でかんたんにできます。今回はそちらの解説も併せて設定してみてください。
テーマCocoonの有効化の手順
先ほどもお伝えしましたが、Cocoonはサーバー設定時にインストール済です。そのためCocoonのテーマは設定すればすぐに使えます。まずはその手順から解説します。
- ダッシュボードより「外観」クリック
- 「テーマ」をクリック
- ※Cocoonのchild の「有効化」クリック
ダッシュボードより「外観」➡「テーマ」をクリック
まずは上記のダッシュボード画面より「外観」➡「テーマ」の順にクリックしましょう。
※Cocoonのchild の「有効化」クリック
テーマ選択画面は以下のような表示になっていますが、何か異変にお気づきでしょうか？
Cocoonにはテーマが2つあるんです。はじめてだとちょっと戸惑いますよね・・・
無料テーマ Cocoonやその他の有料テーマには「親」「子」と2つのテーマがある場合がほとんどです。主に「子」をメインにスタイルシート（CSS)編集用として使用します。テーマを有効化するには基本「子」（Cocoon child）を使用します。「親」は使用しません。
上記の「Cocoon child」にカーソルを合わせ「有効化」をクリックします。
これでCocoonのテーマになりました。次にCocoonの機能にある、見た目のデザインをガラリと変更する「スキン」の設定を行いましょう。
スキンの設定
Cocoonはテーマを有効化すればすぐに記事作成に取りかかれますが、初期段階のサイトの設定だと、上記のような至ってシンプルなサイト画面となります。
シンプルなのもよいことなのですが、さずがにこのままではちょっとパッとしませんね・・・
なので最初くらいはスキン機能を使って、思い切って見た目重視のデザインにしちゃいましょう！
- 「Cocoon設定」→「Cocoon設定」クリック
- 「スキン」クリック
- スキン一覧の「画像アイコン」に合わせてプレビュー確認
- お好きなスキンを選択
- 「変更をまとめて保存」クリック
- 最終確認：スキン設定後のサイトを確認してみる
「Cocoon設定」→「Cocoon設定」クリック
早速、スキンの設定を始めましょう。ダッシュボード画面より「Cocoon設定」にカーソルを合わせ、「Cocoon設定」をクリック。
Cocoon設定画面になりましたら、左上にある「スキン」クリック。初期設定は「スキン」になっているので何もしなくても大丈夫です。
スキン一覧の「画像アイコン」に合わせてプレビュー確認
スキンのページを下へスクロールすると92種類(2022年現在)のスキンから選べます。ご自分にあったスキンを探してみましょう！ ←ピクチャーアイコンにカーソルを合わせると各スキンのイメージ・プレビューが確認できます。
各スキンをプレビューで色々見てみましょう！
お好きなスキンを選択
使うスキンが決まったら隣の○にチェックを入れましょう。
スキンは92種類と困るくらいたくさんありすぎます(笑)シンプルなものからカワイイ系・シックな感じなど自分のサイトにあったスキンを選択しましょう！
「変更をまとめて保存」クリック
最後に上か下のどちらかにある「変更をまとめて保存」をクリックして使用するスキンを保存します。
最終確認：スキン設定後のサイトを確認してみる
スキンの設定が完了したら、下記画像の左上のご自分のサイト名にカーソルを合わせ「サイト表示」をクリックします。
スキン設定後のサイト画面
スキンを変更した後のサイトです。
黒を基調としたデザインなので渋めなサイトですね！
スキン変更前と変更後のサイト
パッと見ただけでも大分サイトの印象が変わりますね。
スキン一覧の一例として
スキンの中でも良さそうなデザインを一部抜粋してみました。
スキンのデザインは人それぞれ好みがあるので賛否ありますが、上記のようなスキンはデザイン・見た目もお洒落でおすすめですね。スキンの変更はいつでもできますので、色々変更して楽しんでみてください。
サイドバーの設定
こちらはサイドバーの設定手順です。この記事では最後の解説となりますので頑張って設定していきましょう！
まずはじめにサイドバーをかんたんに説明。
サイドバーとは？
サイトの右側にある部分を「サイドバー」っていいます！
サイドバーは検索やカテゴリー・関連記事など色々入れて設定することが可能です。
- 検索欄
- プロフィール
- カテゴリー
- アーカイブ
- 新着記事
- 関連記事
などなど、色々設定が可能です
今回は上記の太文字の「カテゴリ」「アーカイブ」「新着記事」の3点の設定方法を解説します。
サイドバーの設定もかんたんですし今後も結構入れ替えたりする場所なので、ぜひ使い方をマスターしておきましょう！
その前に初期段階に設定されている不要なサイドバーの項目があるので削除していきます。
WordPressサイトの不要なサイドバーを削除する
まずは上記の4点のウィジェットを削除します。サイト等のバージョンによっては4つない場合もあるかと思います。こちらでは余分なウィジェットの削除方法を覚えれば今後活用できます。
ウィジェットへの移動手順
まずはダッシュボード画面よりウィジェットのページへ移動する手順を解説します。
- 「外観」にカーソルを合わせる。もしくはクリック
- 「ウィジェット」をクリック
サイドバーの余分な「ブロック」ウィジェット削除手順
こちらが「ウィジェット」のページとなり、サイドバーをはじめ、コンテンツ部分やフッターにウィジェットを挿入する最はすべてこちらで設定を行います。
枠内にあるのが今回削除するウィジェット「ブロック」です。
- サイドバーウィジェットの枠内の「ブロック」をクリック
- 「ブロック」ウィジェットを展開する
- 「ブロック」ウィジェットの左下にある「削除」をクリックしてブロックを削除します。
サイドバースクロール追従内の「ブロック」の削除
- サイドバースクロール追従内の「ブロック」をクリック
- 「ブロック」の左下の「削除」をクリックしてブロック削除をします。
サイドバーに新しいウィジェットを追加する
サイドバー・サイドバースクロール追従内の「ブロック」の削除ができましたら、今度は新らたに追加したいウィジェットの設定をします。
冒頭でも解説しましたが新しくサイドバーに挿入するのはこちらです。
- 「新着記事」
- 「アーカイブ」
- 「カテゴリー」
上記ウィジェット3点の挿入設定をします。
サイドバーにウィジェットを挿入する手順
こちらでは「新着記事」のウィジェットの挿入先を設定する手順です。他2点のウィジェット「アーカイブ・カテゴリー」も同じ手順なのでご自身で設定してみてください。
- 新着記事ウィジェットをクリック → 展開
- サイドバーを選択
- 「ウィジェットを追加」をクリック
サイドバーにウィジェット挿入完了です
先ほどの設定手順をするとサイドバーに「新着記事」が挿入されました。
他のウィジェット2点も挿入すると上記のような表示となります。これで設定完了ですので早速実際のサイトにてサイドバーのウィジェットが変更されているか実際に確認してみましょう。
サイドバー変更後のサイトにて確認してみる
テーマ・ウィジェット変更でサイトの印象アップ【まとめ】
こちらではWordPressサイトの無料テーマCocoonのスキン変更と、サイドバーウィジェット変更手順の解説をしました。テーマ・ウィジェット変更しただけでもサイトの見た目の印象がガラリと変わります。
徐々にWordPressに慣れていけば色々カスタマイズができるようになりますので、どんどん記事を作成して場慣れしていきましょう。
こちらの次はプラグインの設定です。プラグインも色々あるので、セキュリティ面と機能性を重視した最低限の設定をチョイスして解説しますのでもう少しお付き合いください。
WordPressサイトでとりあえず入れておきたいプラグイン4選
