Cocoonのスキンを使用してデザインを簡単に変更してみる

Software

WordPressのテーマでCocoonを使用していると、簡単にデザインを変更することができます。公開されている無料のスキンを使用すると便利です。今回は、Cocoonのスキンを使用してデザインを簡単に変更する方法について紹介いたします。

Cocoonのスキンについて

WordPressにログインして、Cocoonのスキンを変更すると画面のデザインを変更することができます。多くのスキンが公開されているので、利用すると便利です。

自分でCSSを変更しなくても、デザインを変更することができます。
Cocoonのスキンの設定は次のようになります。

  • スキン設定を表示する
  • スキンを選ぶ
  • スキンを設定する

スキン設定の表示

WordPressにログインして、左側のメニューで「Cocoon設定」をクリックします。
右側に表示された「スキン」をクリックします。

Cocoonの設定

「スキン設定」が表示されます。「プレビュー」でデザインの状態を確認することができます。
その下に、公開されている「スキン一覧」が表示されます。

Cocoonのスキン設定

スキンを選ぶ

スキン一覧から設定するスキンを選択します。多くのスキンが登録されているので、選択するの迷います。スキンのイメージを表示するには、タイトルの前にあるアイコンにカーソルを置くと表示できます。最初にイメージを表示してみると選択しやすくなると思います。

Cocoonのスキン一覧
Cocoonのスキンのイメージ表示

スキンを設定する

スキンを設定するには、一覧で選択をしたあとに画面下にある「変更をまとめて保存」をクリックします。これで設定ができます。

Cocoonのスキン設定の「変更をまとめて保存」

その他について

スキン一覧の表示を変更することができます。

親テーマ、子テーマのスキンのみ表示

「親テーマのスキンのみ表示」、「子テーマのスキンのみ表示」を選択して「変更をまとめて保存」をクリックすると、どちらかのみ表示することができます。設定してみましたが、ほとんどが親テーマのスキンのようです。

隠れスキンの表示

一覧に表示されていない隠れスキンを表示してみました。少し一覧の表示が増えます。方法はCocoonのこちらのページに記載されていました。
https://wp-cocoon.com/skin-display-control/

まとめ

今回は、Cocoonのスキンを使用してデザインを簡単に変更する方法について紹介しました。スキンを使用すると簡単にデザインを変更することができます。CSSを自分で設定しなくても良いので便利です。

読んでいただき、ありがとうございます。
参考になりましたら、幸いです。