元サラリーマンブロガーなつのプロフィール

【動画あり】Cocoonのカスタマイズと使い方!初心者でも使いこなすやり方!【ワードプレスの設定】

こんにちは!ブログ運営半年で月20万超の元サラリーマンブロガーなつです。

WordPressのデフォルトで用意されている無料テーマなどはかなりシンプルな造りですがCocoonの場合には、機能が多く上手に使えばおしゃれなサイトにもなります。

ただし、機能が多い分設定項目も多く初心者にとっては少しハードルが高い設定も出てきます。

そこで、Cocoon(コクーン)の使い方を動画を含めて丁寧に解説をしていきます。

 

なつ
このページの説明を最後まで見ると、Cocoonの基本的な設定と、ブログを書き始める直前まで完了します。

 

 2021年、話題のワードプレステーマ「THE THOR」
⇒ THE・THORの公式ページを確認する。

※ 今なら、8大購入特典をプレゼント!

WordPressテーマCocoonの特徴 (詳細な機能やカスタマイズ)

Cocoonが持つ基本的な機能は他のテンプレートと同じです。使いこなしていくと実はとても便利な機能があります。

Cocoonトップページ出典:Cocoonトップページ

 

⇒ Cocoonの公式サイトはコチラ

 

Cocoonは、基本的な機能は備えていて無料テーマと思えないほどできることが多いです。上手にカスタマイズすることでレベルの高いブログに仕上げることができます。

 

基本の機能

  • 内部SEO対策
  • 高速化
  • モバイルフレンドリー対策
  • 100%GPLテーマ
  • ランキング機能が使える
  • プロフィール画面が簡単に記事に挿入できる
  • フォーラムで質問できる
  • 基本構造はとてもシンプルな仕様

 

基本のデザイン

  • スキン(着せ替え)機能あり
  • アピールエリア設定
  • ランキング
  • 吹き出し
  • ブログカード
  • 広告設置も簡単

 

以下はアピールエリアをヘッダー画像の中央に設置している画像ですが、透過しているスペースがとってもカッコよく見えます。

 

注目!

Cocoonの基本的なカスタマイズがこのページで確認できます。Cocoonを使い、新しいブログデザインに仕上げるための記事も追加しましたのでよろしければご覧ください。

 

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」!
THE THORの公式ページを確認する
※今なら、8大購入特典をお付けしています!

【初心者向け動画】Cocoonのカスタマイズ (WP設定まとめ)

Cocoonのカスタマイズ全般の動画となります。ファイルをダウンロードしてから、いろんなパーツを追加していき、全部見ていただくとブログが最後まで出来上がります。(全部で12分程度)

なつ
ちょっと長いので、パーツごとにチャプターがありお好きな部分だけでもご覧いただけます。動画の概要欄でチャプターをクリックするとその章に飛びます。

 

 

00:00 オープニング
00:08 ダウンロード
00:43 インストール
01:57 メニュー設定
02:50 ヘッダー設定
04:13 ウィジェットの使い方
05:29 スキンの設定
06:29 吹き出しの設定
07:21 目次の設定
08:21 ランキング設定
10:11 アピールエリア
11:43 CTA

 

Cocoonメリットデメリット(機能やカスタマイズ)

Cocoonのメリットは多くの機能を兼ね備えているのに無料だということです。作りこむことができれば立派なブログを作ることが可能です。

 

CocoonのメリットCocoonのデメリット
  • スキン機能
  • アピールエリア
  • ランキング作成機能
  • 簡単広告設置
  • ブログカード
  • おすすめカードなど
  • 費用がかからない
  • カスタマイズが若干細かい
  • ヘッダー画像やレイアウトの手作り感アリ
  • 「変更を保存」を押さないとページビューに反映しない。
【総評】有料並みの機能があるためにカスタマイズができれば自分の思い通りのブログになります。【総評】いろんな機能をそれぞれ設定をしないといけないので、初心者なら最初の調整に手間取るかも


⇒ おすすめ、Wordpressテーマ「THE・THOR」の公式ページはコチラ。

 

Cocoonの使い方 「ブログ作り方と編集」

この記事では、ワードプレステーマのCocoonを使ってブログを作る基本的な使い方を動画付きで説明しています。

以下の項目を設定すれば、ブログをはじめられるところまで完成します。

 

コクーンの使い方!

  1. テーマのダウンロード
  2. WordPressにインストール
  3. 基本設定
  4. メニュー設定
  5. ウィジェット設定
  6. アイキャッチとNoimage
  7. スキン
  8. 吹き出し(次のページ)
  9. ランキング(次のページ)
  10. アピールエリア(次のページ)
  11. スライドショーの設定(次のページ)
  12. 目次の設定(次のページ)
  13. 関連記事の設定(次のページ)
  14. プロフィール設定(次のページ)
  15. トップページを完成させる(次のページ)
  16. Cocoonのデザインアレンジ(次のページ)

 

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」
⇒ THE THORの公式ページを確認する。

※今なら、8大購入特典をお付けしています!

 

Cocoonの使い方 1.  「テーマのダウンロード」

Cocoonの使い方とカスタマイズを説明していきます。まずブログを作るためのテーマをダウンロードしましょう。

⇒ コクーン公式サイトはココから

 

なつ
Wordpressテーマはいろんなインストール方法がありますが、Cocoonはファイルを自分のパソコンにダウンロードして、ブログにインストールするという方法となります。

 

手順説明
  1. コクーンの公式サイトの上部からダウンロードを選ぶ
  2. ページをスクロールしていきボタンをクリック

 

1. Cocoon公式サイトの上部からダウンロードを選ぶ

コクーンのトップページを開いてグローバルメニューのダウンロードを選んでクリックしてください。

Cocoonのダウンロードタグ

 

2. ページをスクロールしていきボタンをクリック

開いたページを下にスクロールしていくと青いボタン(Cocoonテーマをダウンロード)が出てきますのでクリックします。

 

Cocoonダウンロードボタン

 

続いて同じように「子テーマ」もダウンロードしてください。

ダウンロードができたらあなたのパソコンには以下のようなファイルが保存されます。これで公式ページからテーマのファイルのダウンロードが終わりました。

Cocoon子テーマファイル

 

ファイルはわかりやすい場所に保管しておいてください。

 

なつ
この時点で、ファイル2個がパソコンにダウンロードされている状態です。

 

 

Cocoonの使い方 2.  「インストール」

次にWordpressのブログにインストールしていきます。Wordpressから先ほどダウンロードして保存したファイルを引き込む設定をしていきます。

 

▼ 外観 ⇒ テーマ ⇒ 新規追加 ⇒ テーマのアップロード

 

Cocoonファイルの選択

「ファイルを選択」をクリックし、さきほどダウンロードしたファイルを選択し「今すぐいんインストール」をクリックします。

最後に「有効化」をするとインストールが完了です。

子テーマもインストールができたら、次は基本の設定をしていきます。

 

なつ
インストールの順番は、「親テーマ」⇒「子テーマ」の順です!

 

 

Cocoonの使い方 3.   「基本設定」

テーマが導入されたらカスタマイズに入って行きます。Cocoonは、一般にあるカスタマイザーでの設定とCocoon特有の設定が必要です。

まずは基本の設定をしていきます。

 

カスタマイザーへのアクセス
  1. ログインしてダッシュボードを開く
  2. 左側の「外観」⇒「カスタマイズ」をクリック
Cocoonのカスタマイズへのアクセス

 

サイト基本設定でやること

サイトのタイトルやキャッチフレーズなど必要項目を設定していきます。

  • サイトのタイトル設定
  • キャッチフレーズ設定
  • サイトアイコン設定

 

サイト基本設定を動画で解説

↓ 画像をクリックすると動画が開きます。


Cocoonには専用の編集エリアがもうけられています。Cocoonをインストールするとダッシュボードにタイトルが出てきますので編集はそこからやっていきます。

上級者なら問題なく使いこなせると思いますが、慣れない人にとっては少し細かくて難しいので、既存のカスタマイザーでできることは設定しておくとよいでしょう。

Cocoon設定で全部する方がシンプルで良いという方はそれでも問題ありません。

 

THE THORオリジナルデザインプレゼント中!
当ブログのTHE THORオリジナルテンプレート!

このブログからTHE THORをご購入くださった方にマニュアルをプレゼントしています。


THE THOR特典デザイン「綿毛」
追加特典「綿毛

THE THOR特典デザイン「シンプル」
特典「シンプル

THE
追加特典「ai

※他のデザインは以下の記事で見れますので覧ください。
【簡単】THE THORデザインの事例集6選!初心者でも作れるアレンジを紹介!

//今なら、なつ特製オリジナルデザインマニュアル付き!\\

※ヘッダーの画像は、写真ACとイラストACのイラストレーターさん方の作品です。特典内でURLをお伝えしています。

 

Cocoonの使い方 4.  「メニュー設定」

ヘッダーの部分やフッターの部分に配置するメニューの設定を行います。ブログの上部に位置するグローバルメニューなどを設定したい場合には先にこの設定をしておく必要があります。

 

  • メニューの作成
  • メニューの位置の設定

 

なつ
ただし、ブログの個別記事がないと表示されませんので、ある程度記事が投稿できたら設定しましょう。

 

メニュー設定を動画で解説

↓ 画像をクリックすると動画が開きます。


グローバルメニューやフッターなどあらゆる位置に作ったメニューを設置できます。

  • おすすめ記事
  • 固定ページ
  • 自己紹介
  • カテゴリー

 

こういったものを上手に使いこなせれば読者もいろんな記事を見て回れるので滞在率もあがります。

 

↓ カスタマイズするなら日本語テーマが安心!人気テーマを徹底調査!

 

Cocoonの使い方 5.   「ウィジェット設定」

サイドバーや記事の上部やフッターなどの位置に「最近の投稿」や「カテゴリー」「人気記事」などを設置していく操作をウィジェット設定といいます。

サイドバーにあまりたくさん設置するとゴチャゴチャしますので厳選して選んでください。

何を設定すれば良いのか迷っている時には・・・

  • あなたのプロフィール ⇒ どんな人がブログを書いているか紹介する
  • 近の投稿 ⇒ 新しい記事だと目を引く
  • 人気記事 ⇒ よく読まれている記事を紹介する
  • カテゴリー ⇒ 記事を整理して紹介する

 

ウィジェット設定を動画で解説

↓ 画像をクリックすると動画が開きます。


 

 

Cocoonの使い方 6.  「アイキャッチとNoimage」

ブログの各記事に設定するアイキャッチの設定です。ユーザーが記事を読むにあたって、まず目に飛び込んでくる画像ですので、その記事に合ったものを設定しましょう。

さらに、アイキャッチを設定していない記事が人気記事などのサムネイルに出てきた時に表示される「Noimage」の設定をしておくと便利です。

 

アイキャッチとNoimageを動画で解説

↓ 画像をクリックすると動画が開きます。

 

 

↓ アイキャッチと画像の具体的なカスタマイズ方法については以下の記事が参考になります。

 

Cocoonの使い方 7.  「スキン」

Cocoonの独特な設定なのですが、Cocoonのユーザーが作った色とレイアウトがたくさんありますので細かな設定が難しいという人にはパターンごと設定できるので便利です。

スキンの上手な使い方

スキンは全体のデザインを導入できるのでとても便利です。各デザインの色違いなども用意されているので他のブログとの差別化もできるでしょう。

ただ、もう少し自分の色を出したいと思ったら、ヘッダー画像を変更してみるとイメージが変わります。

 

スキンを動画で解説


Cocoonで特徴的な機能が「スキン」です。過去に色やレイアウトのパターンを作って提供している人の例を見ながらそれをセットで導入できるというものです。

詳細に設定できるものは、カスタマイズに膨大な時間がかかります。そして、パターンが決まっているものは色や画像くらいしか変更できません。

ですので、自分でカスタマイズできない・・・でも、他人とは違うデザインにしたいと考えている人にはこのスキンが役立ちます。

 

⇒ 次のページ(吹き出し・ランキング・アピールエリア・トップページ)

 

コメントを残す

メールアドレスが公開されることはありません。

ABOUT US
なつ
とある芸術大学を卒業後、大手企業に就職。人件費削減の中、残業100時間が越えた時、「社会人」を卒業しました。 難しい表現をせず超初心者でも理解できるようなWordpressテーマの使い方や、カッコいいデザインの作り方もお伝えしています。