11月29日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種です。

Bizarere-foodシリーズ(黒・青・緑・ピンク・白の5種類)

Seasonシリーズ(四季をコンセプトに4種類)

COLORSシリーズ(レッド・ブルー・イエロー・グリーン・ピンク・ブラックの6種類)

Like Simplicity

モダンブラック

Fuwariシリーズ(海老茶(えびちゃ)・海松茶(みるちゃ)・褐色(かちいろ)・御召茶(おめしちゃ)の4種類)

旅カメラ

いつものシリーズ(深海・ローズ・コーヒーの3種類)

おでかけシリーズ(ピンク・ブルー・レモンの3種類)

m-シリーズ(m-sora・m-tomatoの2種類)

ドットシリーズ(ワインレッド・レイニーブルーの2種類)

ミックスシリーズ(グリーン・ブルー・レッドの3種類)

サムライシリーズ(勝色と無印の2種類。別ページ。)

ほんわかライトニング

Hygiene

Metal Styles

スキン動作デモで見た目をチェック!

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

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

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

いくみ
いくみ

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

例えば、私だったら、以下のように短い記事を選んでデモ機能を使います。スクロールして、記事下のシェアボタン・フォローボタンの変化まで見るのが簡単だからです。

この記事はアイコンスタイルはあるのですが、H6まで入っているページも見つかればいいなぁと思っています。(ま、H6ってほとんど使わないですね。でもH4くらいまでは、見られると嬉しいですね。)

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

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

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

おわりに

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

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

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

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

いくみ
いくみ

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

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

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

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

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

いくみ
いくみ

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

優柔不断ゆえ、まだ悩みそう★。

長い。

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

いくみ
いくみ

感謝です。

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

コメント

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