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

Cocoonのカスタマイズと使い方!初心者でもカッコよくする方法!【動画あり】

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

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

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

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

 

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

 

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

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

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

 

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

 

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

 

基本の機能

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

 

基本のデザイン

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

 

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

 

注目!

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

 

【動画】Cocoonのカスタマイズ (まとめ)

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. ヘッダー
  7. スキン
  8. 吹き出し(次のページ)
  9. ランキング(次のページ)
  10. アピールエリア(次のページ)
  11. アイキャッチ&画像(次のページ)
  12. Cocoonのデザインアレンジ(次のページ)

 

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

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

 

Cocoonの使い方 Step1. テーマのダウンロード

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

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

 

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

 

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

 

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

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

↓ クリックすると拡大します。
Cocoonのダウンロードタグ

 

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

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

 

Cocoonダウンロードボタン

 

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

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

Cocoon子テーマファイル

 

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

 

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

 

Cocoonの使い方 Step2. Wordpressにインストール

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

 

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

 

Cocoonファイルの選択

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

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

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

 

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

 

Cocoonの使い方 Step3. 基本設定

テーマが導入されたらカスタマイズに入って行きます。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の使い方 Step4. メニュー設定

ヘッダーの部分やフッターの部分に配置するメニューの設定を行います。

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

 

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

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


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

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

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

 

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

 

Cocoonの使い方 Step5. ウィジェット設定

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

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

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

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

 

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

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


 

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

 

Cocoonの使い方 Step6.  ヘッダー

Cocoonではヘッダー部分の変更も詳細にできるようになっています。画像・高さなども好きなように変更できます。

ただ、編集は詳細すぎるので全て変更しなくとも「画像設定」と「高さ」「テキストの色」程度の変更をすれば見栄えの良いヘッダーとなるでしょう。

動画では、簡単に画像を取り込む方法や高さ設定を説明しています。

ヘッダー設定を動画で解説

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


 

↓ もう少し詳しくこちらの記事で書いています。アレンジのやり方など知りたい方はどうぞ!

 

Cocoonの使い方 Step7.  スキン

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

スキンの上手な使い方

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

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

 

スキンを動画で解説

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


 

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

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

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

 

⇒ 次のページ(吹き出し・ランキング・アピールエリア・アイキャッチ&画像)

 

コメントを残す

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

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