こんにちは、ikuzo(いくぞう)です。
WordPressの無料テーマ「Cocoon」
無料テーマなら「Cocoon」一択でいい、と言われています。
私もテーマにお金をかけるつもりはなかったので迷わず「Cocoon」にしました。
ただ、設定がいっぱいあって初心者の方は
「どこから手をつければいいの？」と迷うこと必至ですよね。
今回はCocoonを始めたら、まず最初にやりたいデザインの変え方を説明します。
見た目さえやっておけば、あとは記事を書きながら、必要に応じて他の設定をしていけばOKです。
デザインは、あとから変更もできるので、まずは気軽にやってみましょう！
Cocoonのインストールがまだこれから、という方はこちらの記事をご覧下さい。
Cocoonのスキンを選ぶ
Cocoonのデザインを変える方法は、主に2つあります。
1つは、「ヘッダーの色」「見出しの色やデザイン」…というように、
ひとつひとつを自分で設定していく方法です（大まかなやり方は次の章以降で説明します）。
もう1つはスキンを使って、いっぺんにデザインを変えてしまう方法です。
初心者の方は、とりあえずスキンでデザインを変えて、あとから少しずつカスタマイズしていくのがいいかと思います。
まずは、そのスキンを選んでみましょう。
選び方は、WordPressダッシュボードの「Cocoon設定」をクリックします。
ここに「スキン」というタブがあるので、これを押します。
するとスキンが、ずら～っと出てきます。
2020年9月現在、Cocoonのスキンは全部で70種類以上あります。
すごい数だよね。
スキンのサンプルを見るには、スキンの画像マークをマウスオーバーします。
マウスオーバーで出てくるサンプルを見て、好みのスキンを見つけたら実際に設定してみましょう。
Cocoonのデフォルト「スキンなし」はこんな感じですが、
ためしに「Simple Blue」というスキンを設定してみると
こんなふうに色やデザインがガラリと変わります。
スキンの設定方法は、好みのスキンを選んで「変更をまとめて保存」を押すだけです。
スキンを設定したら「サイトを表示」を押して、実際の画面で確認してみましょう。
好みのスキンが見つかるまで、ゆっくり探してみてね。
サイトキーカラーを設定する
サイトキーカラーを設定すると、サイト内のあちこちの色が変わります。
スキン「なし」の状態で、サイトキーカラーをオレンジ（#FFA500）で指定してみると
このように随所で色が変わります。
スキンはデザインも変わりましたが、サイトキーカラーは色だけが変化します。
サイトキーカラーの設定は、Cocoon設定の「全体」タブです。
ここで「サイトキーカラー」と「サイトキーテキストカラー」を指定します。
サイトキーテキストカラーとは、サイトキーカラーが適用される場所の文字色です。
記事の文字色は別だよ。記事の文字色は
その下にある「サイトフォント」で指定するからね。
キーカラーの横にある「！」マークにカーソルをのせると、カラーサンプルのリンクが現れます。
このリンクか、もしくはカラーコード表を使って色を探しましょう。
設定方法は「#6桁」のカラーコードを入れるか、実際の色から選んで
「変更をまとめて保存」を押します。
ヘッダー色の設定
スキンやサイトキーカラーの設定に関係なく、ヘッダー色を独自に設定することも可能です。
ヘッダー色の設定は、2通りあります。
グローバルナビメニューを使用する場合、ヘッダーとメニューを同じ色にするか、しないかです。
設定は、Cocoon設定の「ヘッダー」タブで
ヘッダーとメニューを同じ色にする⇒「ヘッダー全体色」で設定
ヘッダーとメニューを別々の色にする⇒「ヘッター色（ロゴ部）」＋「グローバルナビメニュー色」で設定
ヘッダー色を設定したら、
フッターも同じ色にしておけばいいと思うよ。
グローバルナビメニューの作り方は、こちらの記事をご覧下さい。
ヘッダーロゴとキャッチフレーズの設定
ヘッダーロゴとキャッチフレーズも「ヘッダー」タブで設定します。
キャッチフレーズとは、ブログのサブタイトル、もしくはブログの簡単な説明です。
ヘッダーロゴを設定していないと「サイトのタイトル」がそのまま表示されます。
ロゴを使ってない人もいっぱいいるよ。
サイトのタイトルとキャッチフレーズは、「設定」→「一般」で変更可能です。
WordPressはデフォルトで“Just another WordPress site”というキャッチフレーズが入ってます。
キャッチフレーズは「なし」にしても構いません。
キャッチフレーズを表示させないようにするには、一般設定の「キャッチフレーズ」を空欄にするか、
Cocoon設定→「ヘッダー」タブの「キャッチフレーズの配置」を「表示しない」にして下さい。
ロゴを使う場合は、「ヘッダー」タブにある「ヘッダーロゴ」で画像を指定します。
ロゴは自分で作るか、もしくはデザイナーの方に依頼しましょう。
見た目重視なら、ココナラ
で作ってもらうのがおすすめです。
ロゴはココナラで4000円から作ってもらえるよ。
自分で作るという方は、こちらの記事が多少役に立つと思います。
ヘッダーレイアウト
色とロゴ部分の設定ができたら、レイアウトを決めましょう。
同じく「ヘッダー」タブのヘッダーレイアウトの中から好きなものを選びます。
ヘッダーレイアウトは全部で8種類あって、センターにロゴがあるもの4種類と左側にロゴがあるもの4種類です。
センタータイプの4つはこんな感じです。
違いは、メニューの位置（上下）とメニューをスリムにするかしないかです。
左側にロゴがあるタイプは、ロゴとメニューが横一列に並びます。
下の4つを使う場合、ヘッダー色は「ヘッダー全体背景色」で一括指定して下さい。
それぞれのレイアウトで、高さも調整可能です（必要なければ未入力のままでOK）。
サイト背景色
サイト背景色とは、コンテンツやサイドバーの横にあるこの部分です。
Cocoon設定の「全体」タブに「サイト背景色」の項目があります。
Cocoonのデフォルトは「#f4f5f7」という色です。
私は特に変えることなく、そのまま使わせてもらってます。
最後に
おつかれさまでした。
以上の設定だけでも、だいぶブログのサイトらしくなったのでないでしょうか？
あとは記事を書きつつ、気になるところを少しずつ変更していって下さい。
当ブログではこの他にも、Cocoonの設定方法やカスタマイズのやり方を紹介しています。
またいつか、そちらの記事もあなたのお役に立てれば嬉しい限りです。
本日は最後までご覧いただき、ありがとうございました。
またねー
コメント