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

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

[Cocoon] スキンでブログの見た目をガラリと変える ~ 設定手順と選び方

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

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

いくみ
いくみ

変更も気軽にできます。

30種類近くあります。

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

いくみ
いくみ

・・・。すてきなスキンが多すぎて、優柔不断の私はまだ決めていないんですけどネ。

アイキャッチ画像は

chiplanayによるPixabayからの画像

スキンで変わること

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

Cocoon 初期設定の見た目

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

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

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

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

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

魔法?!

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

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

  • ヘッダー部分
  • グローバルメニューバー
  • サイドバー
  • 見出しスタイル
  • シェアボタンとフォローボタンの色合い
  • サイト背景
  • フッター部分

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

いくみ
いくみ

Cocoonの初期設定の見出しスタイルがこちら↓。

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

おでかけレモンの見出しスタイルはこちら↓。

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

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

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

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

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

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

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

スキンを選ぶ

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

Cocoonスキン設定手順

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

Cocoonスキン設定手順

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

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

いくみ
いくみ

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

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

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

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

Cocoonスキン選び方

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

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

あとは、Cocoon開発者のわいひらさんのサイトに「スキン動作デモ」もついています。

いくみ
いくみ

便利ですね~。

サイドバーの一番上に、スキンの選択メニューがあります。

Cocoonを少しリッチな見た目に「COLORS」スキン6種作成
サイトに合わせた色を選べるスキンを6色分作成しました。

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

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

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

Cocoon スキンの選び方 わいひらさんスキンデモ使用例
いくみのアドバイス

お気に入りを数種類選んだら、自分の投稿画面でヘッダースタイルを6種類入れてから、プレビューで変化を見るのがおススメです。

いくみ
いくみ

全ヘッダースタイルの変化まで、一気に見られますね!

簡単に見た目を変えられる「スキン」設定のおススメでした!

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

いくみ
いくみ

感謝です。

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

コメント

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