7月2日18時まで、エックスサーバーで「独自ドメインプレゼントキャンペーン」!更新料金も無料!サーバー新規開設が条件です。

[Cocoon] スキンでブログの見た目をガラリと変える

[Cocoon] スキンでブログの見た目をガラリと変える ~ 設定手順と選び方
アイキャッチ画像は
chiplanayによるPixabayからの画像

最初の簡単見た目設定、スキンの使用もおススメです!

設定が本当に簡単。選ぶだけ。

いくみ
いくみ

変更も気軽にできます。

ものすごくたくさんあります。そして、増え続けています。

スキンさえ決まれば、すぐにできます!

いくみ
いくみ

・・・。すてきなスキンが多すぎて、決めるのが大変なんですけどネ。

 

スキンで変わること

Cocoonの初期設定の見た目はこんな感じです。

Cocoon 初期設定の見た目

グローバルメニューだけは設定した状態ですが、色合いは初期設定のままです。

Cocoonのスキンを使うと、サイト全体の雰囲気が変わります

おでかけレモン」というスキンを使うと、こんな風に。

Cocoon スキン おでかけレモンの見た目
いくみ
いくみ

数クリックで、あっという間に・・・!

魔法?!

「スキン」機能で変わる部分は、スキンによって程度や変わり方が違います。

Cocoonの「スキン」機能で変わる主要部分(スキンによっては変化なしの項目もあり):

  • ヘッダー部分
  • グローバルメニューバー
  • サイドバー
  • 目次スタイル
  • 見出しスタイル
  • シェアボタンとフォローボタンの色合い
  • サイト背景
  • フッター部分
  • ブログカードの見え方
  • その他イロイロ(アイコンスタイル、リストスタイル、テーブルスタイル、文字装飾、ページボタンなど、一部のスキンで追加・変更されています)。

追記:スキンで変わる部分に情報を追加しました。抜けていた部分がありました、失礼しました。

見出しスタイルの変更は、記事中で確認できます。

いくみ
いくみ

Cocoonの初期設定の見出しスタイルは以下です。

Cocoon 初期設定の見出しスタイル見た目
いくみ
いくみ

おでかけレモンの見出しスタイルは以下です。

Cocoon スキン おでかけレモンの見出しスタイル見た目
お出かけレモン見出しスタイル

ブログの見た目構成パーツ

ブログの構成パーツの名前

で、画像にはのせませんでしたが、一番下の部分が「フッター」になります。

「キャッチフレーズ」は「サブタイトル」とも呼ばれています。

Cocoonではブログポストの部分で使える見出しレベルが6段階あります。

ヘッダー背景やサイト背景は、スキンにプラスして、自分のオリジナル画像を設定できます。(コードの知識がある方は、きっと他にもイロイロ変えられるのだと思いますが。)プロフィール画像とロゴはもちろん自前ですね。

スキンを選ぶ

1.WordPress画面の左に並んでいる、Cocoonアイコン(楕円マーク)から[Cocoon設定]をクリック。

Cocoonスキン設定手順

2.[Cocoon設定]メニューの[スキン]タブを選択します。

Cocoonスキン設定手順

3.[スキン一覧]で、使いたいスキンをチェックします。

4.[変更を保存]ボタンをクリックします。

いくみ
いくみ

これだけ!簡単なのに、すごい変わる!!!

・・・と、設定は超絶簡単。

選ぶときのチョコっとアドバイス。

以下はスキン一覧の画面です。

Cocoonスキン選び方

[スキン一覧]の、写真アイコンにマウスを近づけると、上のようにそれぞれのイメージを見ることができます

その隣にあるスキン名や作者名のリンクをクリックすると、そのスキンを使用している作者さんのサイトにとびます。(複数作成されていると、違うスキンがサイトで使われている場合もあります。)

あとは、それぞれの「スキン紹介ページ」で様々なスクリーンショットを見るのがおすすめです。Cocoon開発者のわいひらさんのサイトに「スキン動作デモ」もついています。

いくみ
いくみ

便利ですね~。

スキン紹介ページ

紹介ページをじっくり見るのが、一番良い気がします。

わいひらさんのスキン紹介ページにいくと、そのスキンの全見出しスタイルや、そのスキンならではの変化項目もチェックできます!

ただ、ご自分で作ったスキン紹介はちょっとあっさりしていました。そういう場合は、次のセクションで紹介しているデモで見るほうがいいかも

以下に、スキン一覧ページに載っている順番で、紹介ページのリンクをリストしました。

複数種類ある場合は、色と数の情報をタイトル下に添えました。何もなければ1種です。

いくみ
いくみ

製作者の方のページへのリンクも追加しました。

カラフルライン

カラフルライン   [作者: y.hiroaki]

ダークスキンシリーズ

3種:ダークエンジ、ダークルリ、ダークカモノハ

ダークシリーズ   [作者: y.hiroaki]

Veilnui Simplogシリーズ

10種+α:amber, blue, brown, deep purple, green, indigo, orange, pink, red, teal

更に、隠れスキンとして他の色もあるそうです。

Veilnuiシリーズ   [作者: veilnui]

Momoonシリーズ

5種:アクア・グリーン・オレンジ・ピンク・パープル

Momoonシリーズ   [作者: タイジーWP]

 tecurioシリーズ

9種:earth・grape・lime・mango・moon ・ peach ・ sky ・ soil ・ sunset

tecurioシリーズ   [作者: 風塵(ふーじん)]

Seasonシリーズ

4種類:Spring, Summer, Autumn, Winter

Seasonシリーズ   [作者: ぽんひろ]

COLORSシリーズ

6種類:レッド・ブルー・イエロー・グリーン・ピンク・ブラック

COLORSシリーズ   [作者: わいひら]

Like Simplicity

Like Simplicity   [作者: わいひら]

モダンブラック

モダンブラック   [作者: アオイ]

Fuwariシリーズ

4種類:海老茶(えびちゃ)・海松茶(みるちゃ)・褐色(かちいろ)・御召茶(おめしちゃ)

Fuwariシリーズ   [作者: アオイ]

Bizarere-foodシリーズ

5種類:黒・青・緑・ピンク・白

Bizarre-foodシリーズ   [作者: takasaki]

旅カメラ

旅カメラ   [作者: がんちゃん]

おでかけシリーズ

3種:ピンク・ブルー・レモン

おでかけシリーズ   [作者: がんちゃん]

いつものシリーズ

3種:深海・ローズ・コーヒー

いつものシリーズ   [作者: がんちゃん]

サムライシリーズ

2種:勝色・無印 (別ページ。)

サムライシリーズ   [作者: y.hiroaki]

ミックスシリーズ

3種:グリーン・ブルー・レッド

ミックスシリーズ   [作者: y.hiroaki]

m-シリーズ

2種:m-sora・m-tomato

 m-sora   [作者: marine]

Hygiene

Hygiene   [作者: ハイジ]

ドットシリーズ

2種:ワインレッド・レイニーブルー

ドットシリーズ   [作者: をまつ]

ほんわかライトニング

ほんわかライトニング   [作者: ライトニング]

Metal Styles

Metal Styles   [作者: まとめたる]

スキン動作デモ

見た目をチェックできます!

1.わいひらさんのサイトを開きます。

2.サイドバーの一番上に[スキン動作デモ]という、スキンの選択メニューがあります。

そこでスキンを選択すると、いろいろなスキンをわいひらさんのサイトで実験できます。

いくみ
いくみ

Topページ以外で実験するのがおススメです。

長い記事なのですが、ボックススタイルなどの変化を見たいときは以下のページでデモを使うと、一気にいろいろ見れます

全体をどんどん見たいときは、以下のように短い記事を選んでデモ機能を使います。スクロールして、記事下のアイテムの変化まで見るのが簡単だからです。

H6まで入っているページも見つかればいいなぁと思っています。(ま、H6ってほとんど使わないですね。でもH4くらいまでは、見られると嬉しいですね。一度見つけたのに、見失いました・・・。ただいま捜索中です。)

わいひらさんのサイトは、「スキン設定」以外の設定もしてあります。例えば同じおでかけレモンも以下のようになります。ヘッダー部分の背景画像、ロゴ、緑のバー(通知バー)はスキンでは変化しません。

Cocoon スキンの選び方 わいひらさんスキンデモ使用例
いくみのアドバイス
お気に入りを数種類選んだら、自分の投稿画面で実際にヘッダースタイルやアイコンスタイルなどを入れて、プレビューで変化を見るのがおススメです。

簡単に見た目を変えられる「スキン」の説明でした!

おわりに

私が、今ものすごく惹かれているのは、FuwariシリーズとSeasonシリーズです。

Fuwariシリーズは、アイコンスタイルが超絶かわいい。萌えます。このアイコンボックスが、Fuwariスキンのものだと気が付いていなくて、コードでカスタマイズなんだろうなと思ってあきらめていました。このスキンを使うだけで、使えるなんて!!!

全体的な色合いも、やさし~い感じ。(「モダンブラック」を作ったのも同じ方なんですね、ビックリ。)

作者のあおいさんのデモページにいくとですね・・・。更にかわいいスキンがあって。サイドバーにあるデモのメニューで、SWシリーズ(まだ同梱されていないようです)を見ると・・・。こんなにかわいい見出しスタイルが・・・!

いくみ
いくみ

この見出し2・・・!!!丸がかわいい・・・!

そして、Seasonシリーズは、リストスタイルが最強です。リストのスタイルは、チョット有料テーマのがいいなぁ~なんて思っていたので、え?!これ、使えるの~!という感じ。(プラグインの追加が必要ですけど、説明ページもありました。)

Seasonスキンで使えるリストスタイル

更に、文字装飾の色合いも、スキンカラーに合わせて調整されています。何というきめ細やかな・・・。

で、ボックススタイルも増えます!(有料テーマのようになりますね!)

注:Seasonシリーズを使わなくても、記事内リストスタイルを追加できます。ぽんひろさんのサイトに行くと、コピペでカスタマイズできるという、非常にありがたい記事がたくさんあります。私も挑戦したいなと思っています。

いくみ
いくみ

更に、「無料」が信じられない!

こんなに便利な機能が簡単に使えるCocoonテーマにしてよかったです。

いくみ
いくみ

感謝です。

「色」や「画像」を使って、自分で見た目を変える方法も記事にしています。

コメント

  1. […] [Cocoon] スキンでブログの見た目をガラリと変える初期の、簡単見た目設定のおススメです。Cocoonのスキンで変わる部分や設定方法を紹介しています!blogstudynotes.com […]

タイトルとURLをコピーしました