Cocoonのスキンでサイトをかんたんにリニューアル! スキンの変更で1分でサイトをお手軽にイメージチェンジ!

当サイトは記事執筆重視で、あまりデザインにこだわっていないのですが、年末年始にちょっと記事の執筆に疲れて、WordPressの無料テーマ、「Cocoon」のスキン機能を使ってサイトのリニューアルをしてみました

スキン機能を使えば1分でサイトのリニューアルが可能です。

スポンサーリンク

Cocoonのスキン機能はとても便利

今まで当サイトは、サイトデザインにあまりこだわってはいませんでした。

WordPressテーマをSimplicityからCocoonに変更してから一週間でカスタマイズしたこと 見出しとヘッダーとSNS関係編 Cocoonはとっても高機能でちょっとずつカスタマイズ
WordPressのテーマをSimplicityからCocoonに変更して一週間ほど経ちました。Simplicityに比べて、後継テーマと言えども高機能満載ですね。無料テーマとして提供していただいて感謝です。ただ、高機能すぎて機能がすべて...

ところがCocoonのスキン機能を利用すればあっという間にサイトのイメージをガラッと変更をすることが可能になりましたので今回スキンを変更してみました。

「Cocoon 設定」の「スキン」タブををクリックします。

「Cocoon 設定」「スキン」

下にスクロールするとたくさんのスキンが用意されています。

各スキンの左側のアイコンにマウスを近づけるとプレビューが表示されます。

今回当サイトは、WordPress無料テーマ「Cocoon」作者であるわいひらさん作成のスキンを利用します。

下図の「COLORS」シリーズは、グリーン・ピンク・レッド・イエロー・ブルー・ブラックの6色展開となっています。

「COLORS」は6色展開

試しにグリーンを選択後、「変更をまとめて保存」をクリックすると下記のようになります。

1分もかからずにサイトのリニューアル完了
スポンサーリンク

グローバルナビ色をスキンと同じカラーにするには

先ほどの画像では、ヘッダー色とグローバルナビ色が違っています。

スキン「COLORS」と同じ色にするためには、6桁の16進数で表されるカラーコードを取得する必要があります。

先ほどの「Cocoon 設定」「スキン」タブのプレビューの下にカラーコードが表示されていますので、こちらをコピーします。

スキンのプレビューでカラーコードをコピー

カラーコードをコピー後、「Cocoon 設定」「ヘッダー」タブをクリックします。

「Cocoon 設定」「ヘッダー」

下にスクロールして「グローバルナビメニュー色」項目の「グローバルナビ色」で先ほどのカラーコードを貼り付けます。

「グローバルナビ色になる」にカラーコードを貼り付け

カラーコード貼り付け後、「変更をすべて保存」をクリックするとグローバルナビがスキンと同じカラーになります。

変更をすべて保存

ちなみにスキンの変更と同時にグローバルナビ色を変更し、「変更をすべて保存」をクリックすると同時に反映されることになります。

スポンサーリンク

Cocoon」標準搭載スキン「COLORS」の各色のイメージ

ここからは「COLORS」各色のイメージです。

当サイトで実際に設定したイメージとなります。

グリーン

鮮やかな色合いのグリーンです。目に優しいカラーですね。今回一押しのカラーです。

下図はグリーンのPCサイトです。

グリーン PCサイト

そして、グリーンのモバイルサイトはこちらになります。

グリーン モバイルサイト

現在、当サイトのスキンはこちらのグリーンです(気まぐれで変更するかもですが)。

ブルー

空や海を想起させるブルーですね。こちらもお気に入りで当サイトは今回変更するまでずっとブルーを基調にしていました。 

ブルーのPCサイトです。

ブルー PCサイト

こちらがブルーのモバイルサイトです。

ブルー モバイルサイト

やはりブルーは落ち着きます。またきっとブルーに戻しそうです。

ピンク

女性の運営者の方にはピッタリなピンクです。また、女性向けサイトにも似合いそうですね。

ピンクのPCサイトはこちらです。

ピンク PCサイト

こちらはピンクのモバイルサイトです。

ピンク モバイルサイト

女性のアクセスが多いサイトにおススメなスキンです。

レッド

こちらも色鮮やかなレッドです。

自分はレッドもシャアカラーですので好きです。気まぐれでレッドに変えるときがあるかもしれません。

レッドのPCサイトです。

レッド PCサイト

レッドのモバイルサイトはこちらです。

レッド モバイルサイト

こうして改めて見ると、レッドも力強くていい感じです。

近々変更してしまいそうです。。。

イエロー

やや濃いめのイエローです。

色合いは非常にきれいになっていますね。

イエローのPCサイトのイメージです。

イエロー PCサイト

イエローのモバイルサイトです。

イエロー モバイルサイト

個人的イメージでは「秋」を想起しますね。

ブラック

ブラックです。こちらは一変して落ち着いた雰囲気になりますね。ダーク系が好きな方にはピッタリではないでしょうか。

ブラックのPCサイトです。

ブラック PCサイト

ブラックのモバイルサイトです。

ブラック モバイルサイト

ブラックも渋い感じでいいですが、当サイトには合わないような気も(個人的に)します。

スポンサーリンク

H2タグとH3タグもお揃いのカラーに

当サイトはH2タグとH3タグをCocoonの子テーマのCSSでカスタマイズしています。

以前はブルーを基調にしたデザインでしたので、H2タグとH3タグをブルー系にカスタマイズしていました。

WordPress無料テーマCocoonのモバイル画面で「レスポンシブテスト」や「PV数」を非表示にする方法 & Cocoon設定「管理者画面」タブの解説
当サイトがWordPress無料テーマ、「Cocoon」を利用するようになってから半年以上が経ちました、「Cocoon」のモバイル画面で、いつからかは定かではないのですが、下記のように「PV数」と「レスポンシブテスト」がメ...

今回、グリーン基調に変更しましたのでH2タグとH3タグをグリーンにする必要があります。

WordPressメニュー、「外観」「テーマエディター」をクリックします。

「外観」「テーマエディター」

「Cocoon Child; スタイルシート(style.css)」で当該のカラーコードを先ほど取得したグリーンのカラーコードに変更するだけで完了します。

H2タグとH4タグのカラーを感じ変更

これで下図のようにH2タグとH3タグもグリーンに統一することができました。

見出しもグリーンに統一できた

今後、レッドやほかの「Colors」に変更したときもカラーコードをコピペするだけでサイトのカラーをかんたんに統一できます。

スポンサーリンク

気分転換がかんたんにできるCocoonのスキン

今回紹介したスキン、「Colors」以外にもCocoonにはさまざまななスキンが揃っています。

いろいろなスキンに変えてみて、たまには気分転換してみてはいかがでしょうか。

WordPressテーマ、「Cocoon」で「グローバルナビメニュー」を編集する方法はWordPressの「外観」「メニュー」からだった! 「グローバルナビメニュー」の編集方法
先日(と言っても随分前ですが)、新カテゴリを追加した際に、グローバルメニューを変更する必要がありました。その際に、Cocoon設定をかなり調べたのですが、グローバルメニューの設定を見つけることができませんでした。そ...

あまりスキンにこだわり過ぎて記事の投稿がおろそかになっては本末転倒ですが(笑)。

自分もほどほどにしておきます。

ただ、PV数が伸びないときは気分転換と験担ぎでサイトのカラーを一新したいと思います。本当にあっという間にサイトのイメージをチェンジすることができますので。

PV 数を増やすスキンに出会うまで頑張ります(笑)。

コメント

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