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

Cocoonのスキンとは。インストールと自分好みのWordPressブログにする調整方法

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

Cocoonの一番の特徴は「スキン」といういわゆる着せ替えです。Cocoon製作者のわいひらさんをはじめいろんな方がスキンのデザインをされていてそれが利用できるのがとても便利なんです。

超初心者の方は、スキンをインストールしてしまってそのままブログを始めるのがおススメですが、Wordpressに慣れている方や超初心者を脱した方などはスキンに少しだけ自分らしさを追加しても面白いかもしれません。

Cocoonのスキンの導入のやり方と、センス良く使いこなす方法をお伝えしていきます。

 

Cocoon(コクーン)のスキンとは。

Cocoon(コクーン)はデザイン等はもちろんできますが、最初からボタンひとつで他の人が作ったデザインを自分のブログに導入できる機能があります。

それが、「スキン」という機能です。

全部で70種類前後あるので、好きなスキンが見つかると思います。

 

↓ Cocoonのカスタマイズまとめはコチラです。(動画あり)

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

Cocoon(コクーン)のスキンのデザイン確認方法

70種類近くあるのでデザインをひとつひとつ確認するのも大変です。そんな時に便利な使い方をご紹介します。

▼ Cocoon設定 ⇒ スキン

プレビューから下にスクロールするとスキン一覧があります。

スキンのタイトルと作者の名前があります。気になるデザインがあればタイトルの左側の画像のアイコンの上にカーソルを持っていきます。

するとデザインのトップ部分が大きく出てきます。

数多くのデザインを見てからWordpressにインストールしていきましょう。

Cocoonのスキンのデザインの主な種類

たくさんあるスキンのうち使いやすそうなものをご紹介していきます。

  1. Veilnui Simplog(作者:veilnuiさん)17色
  2. Momoon(作者:タイジーWPさん)5色
  3. tecurio (作者:風塵/ふーじんさん)9種類
  4. Season(作者:ぽんひろさん)4種類
  5. COLORS(作者:わいひらさん)6色
  6. Fuwari(作者:アオイさん)4色
  7. おでかけ(作者:がんちゃんさん)5色

 

1. Veilnui Simplog(作者:veilnuiさん)

エリア分けがシンプルで扱いやすいデザイン。17色ありますがすべて同系色でまとめられていて、補色等は使っていないので、見た目にスッキリと収まります。

名前の由来は、「シンプル(simple)」と「ウェブログ(weblog)」をミックスしたものです。

⇒ Veilnui Simplog

2. Momoon(作者:タイジーWPさん)

画像部分に影を付けて印象深くなっているMomoon。ヘッダーとボディの間に入るストライプの線がキリっと目立ちます。

⇒ Momoon

3. tecurio (作者:風塵/ふーじんさん)

ヘッダー画像にグラデーションを施したデザインで、お知らせ部分、タイトル部分もほんの少しグラデーションになっているので小粋な感じがします。

⇒ tecurio

4. Season(作者:ぽんひろさん)

ヘッダーの位置にある2色の対比したお知らせがカッコいいデザインです。STORKのようなスライダーがあるので記事が多くなっても対応できます。

⇒ Season

5. COLORS(作者:わいひらさん)

ヘッダーの色と背景の色がリンクしてスッキリ見えるデザインです。色の分布もほどほど、背景の色があるのでボディがきれいに見えます。

⇒ COLORS

6. Fuwari(作者:アオイさん)

日本の色を使った落ち着きのあるデザイン。上部ラインが目立つように鮮やかめな色を用いているので、使いやすいです。

⇒ Fuwari

7. おでかけ(作者:がんちゃんさん)

それぞれ独立したスペースが見やすいデザイン。ただ、背景の色を追加しただけで印象的に見えるので使いやすそうです。

⇒ おでかけ

Cocoonのスキンを有名サイトの色に変換してみる

自分でアレンジといっても悩む方も多いと思います。ただ、なにか参考になるものがあれば簡単にイメージがわくでしょう。

例えば、「ロハコ風」 「Amazon風」など全体的な雰囲気をまねても良いでしょうし、「LINEグリーン」「Facebookブルー」「Twitterブルー」と印象的な色を配置しても面白いです。

全体の雰囲気を配置してみる

ロハコは全体的にナチュラル系がもとになっていて、Amazonは白地がベースで黒とオレンジを基調にしています。

ユニクロ、無印良品、楽天などはテーマカラーを基調にしています。

ロハコ調デザイン

  • 背景・・・木目
  • 色・・・黒・グレー・ベージュ

 

Amazon調デザイン

  • 背景・・・白
  • 色・・・黒・オレンジ

 

自分でカスタマイズするための基本スキン

作者のわいひらさんが、自分でスキンを作るための何も入っていないスキンテンプレートを用意してくださっています。

もし、スキンのデザインの中で気に入った物がなかったりいちから自分で作りたい方にはこのスキンを導入してください。

 

↓ 芸大出身のなつが作ったTHE THORのオリジナルテンプレートです。購入特典として差し上げています。

THE THORなつ特製オリジナルデザインマニュアルプレゼント中!
今大人気のWordpressテーマTHE THORのオリジナルテンプレート6種類ができました!

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

ガーリー

シンプル
オーガニック


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

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

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

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

Cocoon(コクーン)のスキンの使い方 1. 「スキン導入」

Cocoonのスキンを導入するのはとても簡単です。ワンクリックで変更できますが、ロゴや色変更など設置ずみのものはそのまま残ります。

▼ Cocoon設定 ⇒ スキン

好きなデザインのタイトルの左側にチェックを入れて「変更をまとめて保存」をクリックします。

スキンを導入するのはワンクリックだけなので好きなデザインがあればすぐに使うことが可能。

尚。スキンをインストールする前になにか自分で設定をしてある場合、次の章のデザイン等を保存を見てバックアップを取っておいてください。

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」

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


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

 

Cocoon(コクーン)のスキンの使い方 2. 「デザイン等を保存」

Cocoonのデザインカスタマイズなどを多少してあったものの、その後スキンを使うことになった場合に元のデザインを保存する方法があります。(バックアップ)

ただし以下のものはバックアップできませんのでご注意ください。

注意

保存できないもの

  • 吹き出し
  • テンプレート
  • アフィリエイトタグ
  • ランキング作成
  • アクセス集計

デザインのバックアップのやり方

Cocoon設定でバックアップを取ります。

▼ Cocoon設定 ⇒ バックアップ

 

「バックアップファイルの取得」をクリックするとバックアップファイルがPCにダウンロードされます。

cocoon_settingsというファイルがバックアップファイルです。ファイルを自分でわかる場所に保存をしておいてください。

 

Cocoon(コクーン)のスキンの使い方 3. 「デザインを再生」

バックアップをとったファイルを再度Wordpressにインストールすることもできます。Cocoonのマニュアルでは「リストア」という名前で説明されています。

自分で作ったデザイン等をもう一度反映させる作業です。

▼ Cocoon設定 ⇒ バックアップ

 

リストアの部分の「ファイルを選択」でバックアップを取ったファイルを選び「設定の復元」をクリックします。

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」

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

Cocoon(コクーン)のスキンの使い方 4. 「リセット」

デザインを導入したもののなんとなくイメージが違うと思った場合や、自分で作っていて最初に戻したい時にリセットすることができます。

ひとつひとつ削除していくのには手間がかかるのでリセットがありますが、一括で変わってしまうのでもしなにか保存しておきたい場合には前の章のデザイン等を保存しておいてください。

▼ Cocoon設定 ⇒ リセット

 

  • 全ての設定をリセットする
  • リセット動作の確認

 

2か所にチェックを入れ「変更をまとめて保存」をクリック。

※ この作業をすると、設定内容が消えますので注意してください。

 

↓ 有料テーマが気になっているならコチラの比較記事をどうぞ!

【2020年最新】WordPressおすすめ有料テーマ厳選8選比較まとめ!初心者でも簡単な機能性やSEOも調査

Cocoon(コクーン)のスキンの使い方 5. 「スキンテンプレートを使ってデザイン作成」

ここからは、スキンテンプレートを使って自分なりのテンプレートを作る方法をお伝えしていきます。

スキンテンプレートとは、Cocoon作者のわいひらさんがスキンのデザインを作るために基本の形だけを提供してくださっているものです。

この基本の形を使ってテンプレートを作っていきましょう。

完成図

これからCocoonのスキンテンプレートから作っていくページの完成図です。アピールエリアを入れて作っています。

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

 

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」

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

スキンテンプレートをインストール

▼ Cocoon設定 ⇒ スキン

スキン一覧の「スキンテンプレート」にチェックを入れ「変更をまとめて保存」をクリックします。

 

全体設定

全体の色やレイアウト、背景色などの設定をしていきます。テキストなどはスキンテンプレートで設定されていますので特に変更しなくても良いと思います。

▼ Cocoon設定 ⇒ 全体

 

全体設定で編集できるもの

  • キーカラー
  • サイトフォント
  • モバイルサイトフォント
  • 文字の太さ
  • サイトアイコンフォント
  • サイト背景色
  • サイト背景画像
  • サイト幅の均一化
  • サイトリンク色
  • サイト選択文字色
  • サイト選択背景色
  • サイドバーの位置
  • サイドバーの表示状態
  • ファビコン
  • ファビコン
  • 日付フォーマット

アピールエリアの背景とヘッダーのロゴは以下のサイトからダウンロードしています。

 

今回の「全体」でのカスタマイズは以下の項目です。

  • キーカラー
  • サイト背景色

 

キーカラー

  • サイトキーカラー・・・#fbca4d
  • サイトキーテキストカラー・・・#fff1cf

 

サイト背景色

  • 背景色・・・#fdeff2

 

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」

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

ヘッダー

ヘッダー周りの設定をここでします。

▼ Cocoon設定 ⇒ ヘッダー

ヘッダーでできること

  • ヘッダーレイアウト
  • ヘッダーの固定
  • 高さ
  • 高さ(モバイル)
  • ヘッダーロゴ
  • ヘッダーロゴサイズ
  • キャッチフレーズの配置
  • ヘッダー背景画像
  • ヘッダー全体色
  • ヘッダー色(ロゴ部)
  • グローバルナビメニュー色

 

今回の「ヘッダー」でのカスタマイズは以下の項目です。

  • ヘッダーロゴ
  • ヘッダーロゴサイズ
  • グローバルナビメニュー色

 

ヘッダーロゴ

ヘッダーロゴの「選択」をクリックし好きなアイコンを選びます。

ヘッダーロゴサイズ

ヘッダーロゴで設定したロゴサイズを設定します。

高さ・・・100に指定

グローバルナビメニュー色

グローバルナビ色・・・#d6c6af

 

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」

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

アピールエリア設定

ヘッダーの下にテキストやエリアの指定ができます。誘導のボタンも併せて設置できますので、この部分を設定することで目を引くことができます。

 

アピールエリアでできること

  • アピールエリアの表示
  • 高さ
  • エリア画像
  • エリア背景色
  • タイトル
  • メッセージ
  • ボタンメッセージ
  • ボタンリンク先
  • ボタンリンクの開き方
  • ボタン色

今回の「アピールエリア」でのカスタマイズは以下の項目です。

  • 高さ
  • エリア画像
  • タイトル
  • メッセージ
  • ボタンメッセージ
  • ボタンリンク先
  • ボタン色

 

高さ

アピールエリアの高さ・・・200

エリア画像

エリアの背景に配置したい画像を設定します。

タイトル

ブログのタイトルでも良いですし、なにかおすすめのものがあればここに設定します。

メッセージ

メッセージもしくは、説明などを自由にここに記入してください。

ボタンメッセージ

誘導URLのボタンのメッセージを設定します。

ボタンリンク先

誘導したいもののURLを入力します。

ボタン色

ボタン色・・・#8c7042

 

以上を設定すると完成図のようなテンプレートが出来上がります。

 

↓ このブログから大人気のTHE THOR(ザ・トール)を購入くださった方に特典をプレゼントしています。

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

初心者だからこそWordpress有料テーマ を使うべき理由

無料テーマを使うことで時間の無駄遣いをしていませんか?

  • 思い通りのデザインにできない
  • なかなか稼げない
  • アクセス数が増えない

こんな悩みを抱えていませんか?

 

稼ぐブログにしろ趣味ブログにしろ検索の上位にこなければなかなか読んでもらえません。もしあなたが稼ぐブログを作りたいなら、初心者の時に初期投資することはとても大事なことです。

 

Wordpressの有料テーマができる5つのこと

  1. 検索上位を目指せる
  2. 見た目が綺麗でおしゃれになる
  3. 機能が豊富で出来ることが多い
  4. 会員フォームなどのサポート
  5. 有名ブロガーも有料テーマを使っている

これまでにあげた5つの有料テーマの特徴を説明していきます。

1. 検索上位を目指せる

ブログを運営していく上で対策をしていかなければいけないのがSEO対策です。検索エンジンのことを考えてブログを最適に合わせていくということがSEO(SearchEngine Optimizationの略)です。

 

  • 情報の信頼性
  • ユーザーへの役立つ情報であるか?
  • スマホ・PCなどでストレスなく使える

 

などたくさんの要因がありますが、ブログを訪問した人があなたのブログの多くの記事を読んでくれるようなテンプレートの仕組みも有料テーマでは細やかに考えられています。

 

2. 見た目が無料テーマ以上に綺麗になる

シンプルが良いか、綺麗なテーマが良いのかそれぞれの好みによります。無料テーマは必要最低限のものを備えていますがやはりシンプルすぎていずれつまらなくなってしまいます。

有料テーマはデザイン性が高く自分の好きなデザインにもカスタマイズしやすいです。

出典:THE THOR 着せ替え「01」

↓ クリックで拡大します
出典:特製THE THORオリジナルアレンジ

 

3. 機能が豊富でできることが多い

今現在新しい機能として出てきたのが「着せ替え機能」です。過去にも賢威などにはベース色とパターンがありましたが最近ではアフィリなどはっきりと違った用途で使えるように作りこんでいます。

4. 会員フォーラムなどのサポート

なにかわからないことがあった場合、相談できる場所があるだけで安心できます。ここが無料テーマと一番違う部分、有料テーマでは売りっぱなしにしない工夫がされています。

5. 有名ブロガーも多数使用

稼いている有名ブロガーと言われる人のほとんどは有料テーマを使っています。ブログ造りでは内容も非常に大事ですが、文章や扱っている分野が同じ程度ならやはり最後の勝負はテーマの構造などになります。

もしあなたが稼ぐブログを作りたいと考えているならば「有料」テーマも検討してみてください。

カスタマイズで悩んでいる時間、ブログの完成度、上位に表示するメリットなど考えると有料テーマはあなたのお役にたちます。


当ブログおすすめのWordPressテーマ!

 

WordPressテーマ「THE・THOR」

  • 高機能の最新テーマで有名ブロガーも使用
  • 着せ替え機能でいろんな用途に使える
  • 複数のブログに使える(本人のブログ)
  • 会員フォーラムやマニュアル完備

 

 

 

シェアしてね!

コメントを残す

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