WordPressサイト 無料テーマ「Cocoon」の設定手順【画像付】

ブログ作成手順④ ConoHa WING 無料テーマ Cocoon 設定手順 WordPress作成

こちらではWordPressサイトのテーマの設定手順の解説です。

Cocoon アイコン

無料テーマ「Cocoon」イメージ

この記事では無料テーマ「Cocoon」(コクーン)の設定手順となります。

Cocoonは無料テーマですが侮るなかれ!有料テーマとまではいきませんが、無料とは思えないカスタマイズ性能が整っており、それなりのデザイン構成でサイトをかんたんに作成できる巷のブログ界隈では人気の高いテーマです。

ここからは以下の内容の解説をします。

この記事の内容・・・
  • テーマCocoonの有効化の手順
  • スキンの設定
  • サイドバーの設定

まずは記事作成まで最短で進むための最小限設定にしました!

上記の他、ヘッダー・グローバルメニュー・おすすめカード・吹き出し等などさまざまな設定がありますが、ブログ初心者の場合はかなりの時間を要しますので、今回は上記3点のみの解説とします。記事が増えてサイトに慣れてきた頃にでも他の設定も徐々におこなっていきましょう。

実際にCocoonを最短で使えるようにするには、既に前回のサーバー設定でインストール済なので3分とかかりません。ですが、とりあえずサイトの見栄えがよくなるカスタマイズ設定は上記の「サイドバーの設定」まで、約10分程度でかんたんにできます。今回はそちらの解説も併せて設定してみてください。

テーマCocoonの有効化の手順

先ほどもお伝えしましたが、Cocoonはサーバー設定時にインストール済です。そのためCocoonのテーマは設定すればすぐに使えます。まずはその手順から解説します。

 

 Cocoon テーマ有効化の手順
  1. ダッシュボードより「外観」クリック
  2. 「テーマ」をクリック
  3. Cocoonのchild 「有効化」クリック

  ダッシュボードより「外観」➡「テーマ」をクリック

1.Cocoonの有効化外観 テーマの順にクリック

まずは上記のダッシュボード画面より「外観」➡「テーマ」の順にクリックしましょう。

 

※Cocoonのchild の「有効化」クリック

テーマ選択画面は以下のような表示になっていますが、何か異変にお気づきでしょうか?

2.Cocoonの有効化 親と子がある

hrkm
hiro。

Cocoonにはテーマが2つあるんです。はじめてだとちょっと戸惑いますよね・・・

無料テーマ Cocoonやその他の有料テーマには「親」「子」と2つのテーマがある場合がほとんどです。主に「子」をメインにスタイルシート(CSS)編集用として使用します。テーマを有効化するには基本「子」(Cocoon child)を使用します。「親」は使用しません。

3.Cocoonの有効化 子の有効化をクリックする

上記の「Cocoon child」にカーソルを合わせ「有効化」をクリックします。

これでCocoonのテーマになりました。次にCocoonの機能にある、見た目のデザインをガラリと変更する「スキン」の設定を行いましょう。

スキンの設定

00.Cocoon 初期設定画面

Cocoon初期画面

Cocoonはテーマを有効化すればすぐに記事作成に取りかかれますが、初期段階のサイトの設定だと、上記のような至ってシンプルなサイト画面となります。

hrkm
hiro。

シンプルなのもよいことなのですが、さずがにこのままではちょっとパッとしませんね・・・

hrkm
hiro。

なので最初くらいはスキン機能を使って、思い切って見た目重視のデザインにしちゃいましょう!

スキン設定手順
  • 「Cocoon設定」→「Cocoon設定」クリック
  • 「スキン」クリック
  • スキン一覧の「画像アイコン」に合わせてプレビュー確認
  • お好きなスキンを選択
  • 「変更をまとめて保存」クリック
  • 最終確認:スキン設定後のサイトを確認してみる

「Cocoon設定」→「Cocoon設定」クリック

5.Cocoon スキン設定手順1 Cocoon設定クリック

早速、スキンの設定を始めましょう。ダッシュボード画面より「Cocoon設定」にカーソルを合わせ、「Cocoon設定」をクリック。

Cocoon設定画面

6.Cocoon スキン設定手順2.スキンをクリック

Cocoon設定画面になりましたら、左上にある「スキン」クリック。初期設定は「スキン」になっているので何もしなくても大丈夫です。

スキン一覧の「画像アイコン」に合わせてプレビュー確認

スキン一覧ページ

7.Cocoon スキン設定手順3.画像アイコンに合わせるとプレビュー画面が表示される

スキンのページを下へスクロールすると92種類(2022年現在)のスキンから選べます。ご自分にあったスキンを探してみましょう! ←ピクチャーアイコンにカーソルを合わせると各スキンのイメージ・プレビューが確認できます。

各スキンをプレビューで色々見てみましょう!

8.Cocoon スキン設定手順4.プレビュー画面確認

お好きなスキンを選択

使うスキンが決まったら隣の○にチェックを入れましょう。

hrkm
hiro。

スキンは92種類と困るくらいたくさんありすぎます(笑)シンプルなものからカワイイ系・シックな感じなど自分のサイトにあったスキンを選択しましょう!

「変更をまとめて保存」クリック

 

9.Cocoon スキン設定手順4.変更をまとめて保存する

最後に上か下のどちらかにある「変更をまとめて保存」をクリックして使用するスキンを保存します。

最終確認:スキン設定後のサイトを確認してみる

スキンの設定が完了したら、下記画像の左上のご自分のサイト名にカーソルを合わせ「サイト表示」をクリックします。

10.Cocoon スキン設定手順5.サイト確認

 

スキン設定後のサイト画面

スキンを変更した後のサイトです。

スキン変更後のサイト

10.Cocoon スキン設定手順6.サイト表示2

hrkm
hiro。

黒を基調としたデザインなので渋めなサイトですね!

スキン変更前と変更後のサイト

11.Cocoon スキン設定手順.Bifore After2

パッと見ただけでも大分サイトの印象が変わりますね。

スキン一覧の一例として

スキンの中でも良さそうなデザインを一部抜粋してみました。

11.Cocoon スキン設定手順7.一例2

 

スキンのデザインは人それぞれ好みがあるので賛否ありますが、上記のようなスキンはデザイン・見た目もお洒落でおすすめですね。スキンの変更はいつでもできますので、色々変更して楽しんでみてください。

サイドバーの設定

こちらはサイドバーの設定手順です。この記事では最後の解説となりますので頑張って設定していきましょう!

まずはじめにサイドバーをかんたんに説明。

サイドバーとは?

サイドバー解説画像
hrkm
hiro。

サイトの右側にある部分を「サイドバー」っていいます!

サイドバーは検索やカテゴリー・関連記事など色々入れて設定することが可能です。

サイドバーってなにが入るの?
  • 検索欄
  • プロフィール
  • カテゴリー
  • アーカイブ
  • 新着記事
  • 関連記事

などなど、色々設定が可能です

今回は上記の太文字の「カテゴリ」「アーカイブ」「新着記事」の3点の設定方法を解説します。

サイドバーの設定もかんたんですし今後も結構入れ替えたりする場所なので、ぜひ使い方をマスターしておきましょう!

その前に初期段階に設定されている不要なサイドバーの項目があるので削除していきます。

WordPressサイトの不要なサイドバーを削除する

12.サイドバー解説削除する2

まずは上記の4点のウィジェットを削除します。サイト等のバージョンによっては4つない場合もあるかと思います。こちらでは余分なウィジェットの削除方法を覚えれば今後活用できます。

ウィジェットへの移動手順

ダッシュボード画面

サイドバー解説外観 ウィジェットをクリック

まずはダッシュボード画面よりウィジェットのページへ移動する手順を解説します。

ウィジェットへの移動手順
  1. 「外観」にカーソルを合わせる。もしくはクリック
  2. 「ウィジェット」をクリック

 サイドバーの余分な「ブロック」ウィジェット削除手順

こちらが「ウィジェット」のページとなり、サイドバーをはじめ、コンテンツ部分やフッターにウィジェットを挿入する最はすべてこちらで設定を行います。

サイドバー解説 4.ウィジェット画面 サイドバーのブロッククリック

枠内にあるのが今回削除するウィジェット「ブロック」です。

 ココでの操作手順
  • サイドバーウィジェットの枠内の「ブロック」をクリック
  • 「ブロック」ウィジェットを展開する

 

サイドバー解説5 削除クリックする

サイドバー内の「ブロック」展開した状態
ココでの操作手順
  • 「ブロック」ウィジェットの左下にある「削除」をクリックしてブロックを削除します。

サイドバースクロール追従内の「ブロック」の削除

サイドバー解説6 サイドバースクロール追従のブロック 削除クリックする

サイドバースクロール追従のウィジェットも削除する
ココで行う操作手順は・・
  • サイドバースクロール追従内の「ブロック」をクリック
  • 「ブロック」の左下の「削除」をクリックしてブロック削除をします。

 

サイドバーに新しいウィジェットを追加する

サイドバー・サイドバースクロール追従内の「ブロック」の削除ができましたら、今度は新らたに追加したいウィジェットの設定をします。

サイドバー解説7 サイドバー追加ウィジェットをクリックする

3つのウィジェットを新しく挿入する

冒頭でも解説しましたが新しくサイドバーに挿入するのはこちらです。

サイドバーに挿入するウィジェット
  • 「新着記事」
  • 「アーカイブ」
  • 「カテゴリー」

上記ウィジェット3点の挿入設定をします。

サイドバーにウィジェットを挿入する手順

サイドバー解説8 サイドバー追加ウィジェットをクリックする2

ウィジェット挿入先の設定

こちらでは「新着記事」のウィジェットの挿入先を設定する手順です。他2点のウィジェット「アーカイブ・カテゴリー」も同じ手順なのでご自身で設定してみてください。

新着記事ウィジェットの挿入手順・・・
  • 新着記事ウィジェットをクリック → 展開
  • サイドバーを選択
  • 「ウィジェットを追加」をクリック

サイドバーにウィジェット挿入完了です

サイドバー解説9 サイドバー追加ウィジェット画面

サイドバーに「新着記事」挿入完了画面

先ほどの設定手順をするとサイドバーに「新着記事」が挿入されました。

サイドバー解説9 サイドバー追加ウィジェット画面3

サイドバーにウィジェット3点が追加された画像

他のウィジェット2点も挿入すると上記のような表示となります。これで設定完了ですので早速実際のサイトにてサイドバーのウィジェットが変更されているか実際に確認してみましょう。

サイドバー変更後のサイトにて確認してみる

.サイドバー解説10 サイトページにて追加ウィジェット確認する

サイドバーウィジェット変更後のサイト
実際にサイトを確認すると「新着記事」「アーカイブ」「カテゴリー」が追加されたのがわかりますね。設定は以上となります。

テーマ・ウィジェット変更でサイトの印象アップ【まとめ】

こちらではWordPressサイトの無料テーマCocoonのスキン変更と、サイドバーウィジェット変更手順の解説をしました。テーマ・ウィジェット変更しただけでもサイトの見た目の印象がガラリと変わります。

徐々にWordPressに慣れていけば色々カスタマイズができるようになりますので、どんどん記事を作成して場慣れしていきましょう。

こちらの次はプラグインの設定です。プラグインも色々あるので、セキュリティ面と機能性を重視した最低限の設定をチョイスして解説しますのでもう少しお付き合いください。

WordPressサイトでとりあえず入れておきたいプラグイン4選

Next

 

タイトルとURLをコピーしました