「Cocoon」テンプレートでデザイン(スキン)を変更する手順

「Cocoon」テンプレートでデザイン(スキン)を変更する手順

WordPressのテンプレートによっては、デザインの変更機能が用意されていることがあります。

(´・ω・`)デザインが苦手な方でも、好みに変えられるのでありがたい

本記事で紹介するテンプレート「Cocoon」もその1つです。
例えば、Cocoonであれば、こんな感じでデザインが用意されています。

上記画像は、本記事の執筆時点です。
変更できるデザインは今後、もっと増えていくと思います。

それでは、サイトのデザインを自分好みに変える手順を紹介していきます。

(`・ω・´)b 早いうちに、サイトを自分好みに変えてしまいましょう!

ちなみに、デザインの変更手順はテンプレートによって、かなり異なっています。
今回の手順は、テンプレート「Cocoon」の場合となります。

テンプレート独自の編集項目

テンプレートによっては、メニューにテンプレート独自の編集項目が用意されていることがあります。
Cocoonの場合は「Cocoon設定」という項目がそれです。
Cocoonの場合は、この項目から様々な設定変更が行えます。
デザイン変更も、この項目からになります。

[Cocoon設定]画面でデザインを変更する

それでは手順です。

1.[Cocoon設定]→[Cocoon設定]とたどってクリックします。

2.[Cocoon設定]の画面が開きます。
この画面では、上部にあるタブ(下図の赤枠部分)で画面を切り替えながら、各内容を編集していきます。

(´・ω・`) このタブの数よ・・・ほんと多機能ですよね・・・すごい。

ちなみに、各タブの詳細については、[テーマ利用マニュアル]のリンクをクリックすると、説明を確認できるページを表示できます。

3.デザインを変更するために[スキン]のタブをクリックします。
※[スキン]タブの位置は、下図と異なる場合があります。(ウィンドウの幅によって、位置が変わります)

4.表示された画面から、[スキン一覧]の項目で、好みのデザインを選びます。
※それぞれのデザインがどのようなものかを確認するには、各デザインの名前部分のリンクをクリックします。するとサンプルページが表示されるので、それを見て確認してください。

5.編集したら、[変更をまとめて保存]をクリックして、設定変更を保存します。

6.デザインが変更されました。
Cocoonでは編集結果がすぐに画面内に表示されます。素早く編集結果を確認できるので便利ですね。
(`・ω・´)b 図では、コーヒー色なデザインにしてみましたっ!

管理画面の色を変えるには

さらにプラグインを使えば、WordPressの管理画面の配色を自由に変更できます。
例えば、下図は、今回のテンプレート「Cocoon」の雰囲気に合わせて、管理画面の配色を変更したものです。

かなり、Cocoonの雰囲気になっていませんでしょうか。
配色を変えてみたい方は、下記の記事で紹介していますので、参考にしてみてください。

WordPress管理画面の配色変更するプラグイン「Backend Designer」の使い方
WordPressの管理画面の配色を変えたい。 元から用意されている配色だと、どうにも味気ないし、数も少ない。 (´・ω・`)レパートリー少なすぎですよね・・・ 特に、複数サイトを運営し始めると辛くなる。 管理画面で、パッと見分けをつけ...

まとめ

本記事では、Cocoonテンプレートでデザインを変更する手順を説明しました。

サイトデザインを自分でイチから編集するとなると大変です。
色選びとか難しいんですよね。

(´・ω・`) 自分も得意ではない・・・。いえ、苦手とはっきり言います・・・

でも、Cocoonのように、デザインが用意されているテンプレートなら安心。
パっと好みのデザインに変えられるので、ほんと便利です。

(´・ω・`)ありがたや・・・

というわけで、「Cocoon」テンプレートのデザインを変更する手順でした!

サイト作成の目次はこちら → WordPressでサイトを作る手順を初心者向けに解説