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

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

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

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

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

 

2021年話題のワードプレステーマ「THE・THOR」!
⇒ THE・THORの公式ページを確認する。
※今なら、8大購入特典をお付けしています!

 

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

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

↓クリックで拡大します。

出典:Cocoon

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

 

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

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

 

注目!

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

関連記事

ブログ運営半年で月20万超の元サラリーマンブロガーなつです。WordpressテーマのCocoonでブログを作っている方は多いと思います。一番の特徴は「Cocoonのスキン」という機能で、一般的にいう着せ替えにあたります。デ[…]

 

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

Cocoonのメリットは無料テーマとは思えないほどのたくさんの機能を兼ね備えていることです。

 

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

 

 

Cocoonの使い方 「ブログ作り方と流れ」

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

以下の項目を設定すれば、ブログをはじめられるまで調整できます。

  1. テーマのダウンロード
  2. WordPressにインストール
  3. 基本設定
  4. メニュー設定
  5. ウィジェット設定
  6. ヘッダー
  7. スキン
  8. 吹き出し(次のページ)
  9. ランキング(次のページ)
  10. アピールエリア(次のページ)
  11. アイキャッチ&画像(次のページ)
  12. Cocoonのデザインアレンジ(次のページ)

 

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

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

Cocoonの使い方とカスタマイズを説明していきます。

まずブログを作るためのテーマをダウンロードしましょう。

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

 

手順説明

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

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

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

↓ クリックすると拡大します。

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

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

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

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

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

THE THORなつ特製オリジナルデザインマニュアルプレゼント中!

今人気のWordpressテーマTHE THORのオリジナルテンプレート6種類ができました!(最新は10種類以上)

このブログからTHE THOR(ザ・トール)をご購入くださった方に特典としてマニュアルをプレゼントしています。マネするだけでデザイン変更が簡単にできます。

 

ガーリー
シンプル
オーガニック

 

※残りの3種類とブログの全体像は以下の記事で見れますので覧ください。
⇒ 【簡単な使い方】THE THORデザインの事例集6選!初心者でも作れるアレンジを紹介!

 

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

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

 

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

次にWordpressのブログにインストールしていきます。Wordpressからファイルを引き込む設定をしていきます。

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

 

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

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

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

Cocoonの使い方 Step3. 基本設定

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

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

カスタマイザーへのアクセス

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

 

 

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

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

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

 

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

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



Cocoonには専用の編集エリアが儲けられています。Cocoonをインストールするとダッシュボードに出てきます。

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

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

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

 

Cocoonの使い方 Step4. メニュー設定

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

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

 

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

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



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

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

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

 

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

関連記事

こんにちは!ブログ運営半年で月20万超の元サラリーマンブロガーなつです。Wordpressは世界中で使われているCMSの一部です。Wordpressは拡張性も高く無料でダウンロードできるため、多くの人がブログやサイトで使っています。[…]

 

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

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

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

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

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

 

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

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


 

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

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

Cocoonの使い方 Step6.  ヘッダー

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

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

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

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

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


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

関連記事

こんにちは!ブログ運営半年で月20万超の元サラリーマンブロガーなつです。ブログのヘッダーの役割は、訪れた読者の目を引くことや記事へのスムーズな導入などがあります。もしあなたがブログを開いたときにセンスのよいヘッダーがあれば「おっ、な[…]

 

Cocoonの使い方 Step7.  スキン

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

 

スキンを動画で解説

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


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

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

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

 

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