【Cocoonの始め方】スキンやキーカラーでデザインを設定しよう

Cocoon デザインの設定方法 ブログ

こんにちは、ikuzo(いくぞう)です。

WordPressの無料テーマ「Cocoonコクーン

無料テーマなら「Cocoon」一択でいい、と言われています。

私もテーマにお金をかけるつもりはなかったので迷わず「Cocoon」にしました。

ただ、設定がいっぱいあって初心者の方は

どこから手をつければいいの?」と迷うこと必至ですよね。

「Cocoon」の設定がありすぎて困る女性

今回はCocoonを始めたら、まず最初にやりたいデザインの変え方を説明します。

見た目さえやっておけば、あとは記事を書きながら、必要に応じて他の設定をしていけばOKです。

デザインは、あとから変更もできるので、まずは気軽にやってみましょう!

 

Cocoonのインストールがまだこれから、という方はこちらの記事をご覧下さい。

【図解】無料テーマCocoonでWordPressブログを始めよう!
スポンサーリンク

Cocoonのスキンを選ぶ

Cocoonのデザインを変える方法は、主に2つあります。

1つは、「ヘッダーの色」「見出しの色やデザイン」…というように、

ひとつひとつを自分で設定していく方法です(大まかなやり方は次の章以降で説明します)。

 

もう1つはスキンを使って、いっぺんにデザインを変えてしまう方法です。

初心者の方は、とりあえずスキンでデザインを変えて、あとから少しずつカスタマイズしていくのがいいと思います。

 

まずは、そのスキンを選んでみましょう。

選び方は、WordPressダッシュボードの「Cocoon設定」をクリックします。

ここに「スキン」というタブがあるので、これを押します。

Cocoon設定のタブの中から「スキン」を選ぶ

するとスキンが、ずら~っと出てきます。

多くの種類のスキン

2020年9月現在、Cocoonのスキンは全部で70種類以上あります。

プー太郎
プー太郎

すごい数だよね。

スキンのサンプルを見るには、スキンの画像マークをマウスオーバーします。

マウスオーバーでスキンのサンプルを見る

マウスオーバーで出てくるサンプルを見て、好みのスキンを見つけたら実際に設定してみましょう。

 

Cocoonのデフォルト「スキンなし」はこんな感じですが、

Cocoon(スキンなし)

ためしに「Simple Blue」というスキンを設定してみると

Cocoon(スキン:Simple Blue)

こんなふうに色やデザインが一気に変わります。

 

スキンの設定方法は、好みのスキンを選んで「変更をまとめて保存」を押すだけです。

「変更をまとめて保存」を押す

スキンを設定したら「サイトを表示」を押して、実際の画面で確認してみましょう。

「サイトを表示」を押す

プー太郎
プー太郎
 

スキンはいっぱいあるから、ゆっくり探してみてね。

スポンサーリンク

サイトキーカラーを設定する

サイトキーカラーを設定すると、サイト内のあちこちの色が変わります。

スキン「なし」の状態で、サイトキーカラーをオレンジ(#FFA500)で指定してみると

Cocoonのサイトキーカラーを設定

このように随所で色が変わります。

スキンはデザインも変わりましたが、サイトキーカラーは色だけが変化します。

 

サイトキーカラーの設定は、Cocoon設定の「全体」タブです。

「Cocoon設定」→「全体」タブ

ここで「サイトキーカラー」と「サイトキーテキストカラー」を指定します。

サイトキーカラーとサイトキーテキストカラーの設定画面

サイトキーテキストカラーとは、サイトキーカラーが適用される場所の文字色です。

プー太郎
プー太郎

記事の文字色は別だよ。記事の文字色は

その下にある「サイトフォント」で指定するからね。

 

キーカラーの横にある「!」マークにカーソルをのせると、カラーサンプルのリンクが現れます。

マウスオーバーでカラーサンプルのリンクが出てくる

このリンクか、もしくはカラーコード表を使って色を探しましょう。

設定方法は「#6桁」のカラーコードを入れるか、実際の色から選んで

「変更をまとめて保存」を押します。

「#6桁」のカラーコードを指定するか、カラーサンプルから見て選ぶ

スポンサーリンク

ヘッダー色の設定

スキンやサイトキーカラーの設定に関係なく、ヘッダー色を独自に設定することも可能です。

ヘッダー色の設定は、2通りあります。

グローバルナビメニューを使用する場合、ヘッダーとメニューを同じ色にするか、しないかです。

ヘッダー色とメニュー色が同じか、別か

設定は、Cocoon設定の「ヘッダー」タブで

Cocoon設定の「ヘッダー」タブを押す

ヘッダーとメニューを同じ色にする⇒「ヘッダー全体色」で設定

ヘッダーとメニューを別々の色にする⇒「ヘッター色(ロゴ部)」+「グローバルナビメニュー色」で設定

ヘッダー色とグローバルナビメニュー色を同じにするかしないか

プー太郎
プー太郎

ヘッダー色を設定したら、

フッターも同じ色にしておけばいいと思うよ。

グローバルナビメニューの作り方は、こちらの記事をご覧下さい。

【Cocoon】グローバルナビメニューの設定方法とカスタマイズ

ヘッダーロゴとキャッチフレーズの設定

ヘッダーロゴとキャッチフレーズも「ヘッダー」タブで設定します。

キャッチフレーズとは、ブログのサブタイトル、もしくはブログの簡単な説明です。

ヘッダーロゴ「有り」と「無し」のサンプル

ヘッダーロゴを設定していないと「サイトのタイトル」がそのまま表示されます。

プー太郎
プー太郎

ロゴを使ってない人もいっぱいいるよ。

サイトのタイトルとキャッチフレーズは、「設定」→「一般」で変更可能です。

ダッシュボードの「設定」→「一般」をクリック

WordPressはデフォルトで“Just another WordPress site”というキャッチフレーズが入ってます。

サイトのタイトルとキャッチフレーズの設定画面

キャッチフレーズは「なし」にしても構いません。

キャッチフレーズを表示させないようにするには、一般設定の「キャッチフレーズ」を空欄にするか、

Cocoon設定→「ヘッダー」タブの「キャッチフレーズの配置」を「表示しない」にして下さい。

「キャッチフレーズの配置」の「表示しない」を選択

ロゴを使う場合は、「ヘッダー」タブにある「ヘッダーロゴ」で画像を指定します。

 

ロゴは自分で作るか、もしくはデザイナーの方に依頼しましょう。

見た目重視なら、ココナラで作ってもらうのがおすすめです。

プー太郎
プー太郎

ロゴは4000円から作ってもらえるよ。

自分で作るという方は、こちらの記事を参考にして下さい。

ブログのロゴを作ってみよう!作成からCocoonの設定方法までを解説

ヘッダーレイアウト

色とロゴ部分の設定ができたら、レイアウトを決めましょう。

レイアウトは、8つの中から好きなものを選びます。

ヘッダーレイアウトの表示形式の選択画面

タイプとしては、センターにロゴがあるもの4種類と左側にロゴがあるもの4種類です。

センタータイプの4つはこんな感じです。

違いは、メニューの位置(上下)とメニューをスリムにするかしないかです。

「センターロゴ」の4種類のメニュー

左側にロゴがあるタイプは、ロゴとメニューが横一列に並びます。

下の4つを使う場合、ヘッダー色は「ヘッダー全体背景色」で一括指定して下さい。

ロゴとメニューが横一列に並ぶ4種類のヘッダー

それぞれのレイアウトで、高さも調整可能です(必要なければ未入力のままでOK)。

ヘッダーのレイアウトと高さを決める設定画面

サイト背景色

サイト背景色とは、コンテンツやサイドバーの横にあるこの部分です。

サイト背景色

Cocoon設定の「全体」タブに「サイト背景色」の項目があります。

サイト背景色の設定画面

Cocoonのデフォルトは「#f4f5f7」という色です。

私は特に変えることなく、そのまま使わせてもらってます。

最後に

おつかれさまでした。

以上の設定だけでも、だいぶブログのサイトらしくなったのでないでしょうか?

あとは記事を書きつつ、気になるところを少しずつ変更していって下さい。

 

当ブログではこの他にも、Cocoonの設定方法やカスタマイズのやり方を紹介しています。

またいつか、そちらの記事もあなたのお役に立てれば嬉しい限りです。

本日は最後までご覧いただき、ありがとうございました。

プー太郎
プー太郎

またねー

ikuzoの『Cocoonかんたんカスタマイズシリーズ

【Cocoon】ヘッダーモバイルボタン(スマホメニュー)をカスタマイズ
【Cocoon】ブログカードを自分流にカスタマイズしよう
【Cocoon】初心者向け 目次の設定方法とかんたんなカスタマイズ

コメント