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

Cocoonのカスタマイズと使い方!初心者でもカッコよいブログになる設定方法!【WordPressテーマ】

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

無料テーマといえばシンプルなものが多くどうしてもカスタマイズできないと寂しい感じのブログとなってしまいます。無料テーマのCocoonも同じで機能がたくさん用意されている分、使い方が難しいです。

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

Cocoonの特徴

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

出典:Cocoon

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

 

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

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

 

Cocoonは初心者向けか検証!機能面とデザインを調査!【WordPressテーマ】

Cocoon(Wordpressテーマ)のメリットデメリット

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

Cocoonのメリット Cocoonのデメリット
  • スキン機能
  • アピールエリア
  • ランキング作成機能
  • 簡単広告設置
  • ブログカード
  • おすすめカードなど
  • 費用がいらない
  • カスタマイズが細かい
  • ヘッダー画像などのレイアウトが少し安っぽい
【総評】有料並みの機能があるためにカスタマイズができれば自分の思い通りのブログになります。 【総評】いろんな機能をそれぞれ設定をしないといけないので、初心者なら最初の調整に手間取るかも
初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」

【初心者必見!】THE THOR(ザ・トール)の購入特典!割引についても調査!【WordPressテーマ】


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

 

Cocoon(Wordpressテーマ)の使い方 「ブログ作り方と流れ」

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

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

コクーンの使い方!

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

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

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

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

 

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

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

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

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

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

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

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

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

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

↓芸大卒のなつが作ってみました!

THE THORなつ特製オリジナルデザイン
今大人気のWordpressテーマTHE THORのオリジナルテンプレート6種類です。

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

ガーリー

シンプル
オーガニック


※残りの3種類とブログの全体像は以下の記事で見れますのでよかったらご覧ください。

⇒ 【簡単な使い方】THE THORデザインの事例集6選!初心者でも作れるアレンジを紹介!

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

 

Cocoon(Wordpressテーマ)の使い方 Step2. Wordpressにインストール

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

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

 

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

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

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

Cocoon(Wordpressテーマ)の使い方 Step3. 基本設定

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

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

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

 

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

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

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

 

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

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



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

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

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

Cocoon(Wordpressテーマ)の使い方 Step4. メニュー設定

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

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

 

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

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



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

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

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

 

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

【2020年最新】WordPress日本語テーマ総まとめ!

 

Cocoon(Wordpressテーマ)の使い方 Step5. ウィジェット設定

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

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

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

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

 

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

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


 

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

Cocoon(Wordpressテーマ)の使い方 Step6.  ヘッダー

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

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

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

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

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


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

Cocoonのヘッダー画像周りの使い方!サイズ調整も【WordPressテーマ】

 

Cocoon(Wordpressテーマ)の使い方 Step7.  スキン

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

 

スキンを動画で解説

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


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

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

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

 

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

 

シェアしてね!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です