【WP】Cocoonのスキンをカスタマイズ・変更【オリジナルのスキンを作る】

WordPress
スポンサーリンク

Cocoonのスキンは超便利

ワードプレスの大人気の無料テーマ「Cocoon」。
Cocoonにはもともとデザインされている”スキン”があり、自分でカスタマイズしなくてもスキン選ぶだけで簡単にデザインを変えることができます。

 

Cocoonのスキンを選ぶ

「Cocoon設定」→「スキン」で、スキン一覧から好きなデザインを選ぶことができます。

 

スキンのカスタマイズ方法

「Cocoonのスキンはいっぱいあって便利だけど、好みの色がない・・」
「人気のスキンは人とカブる・・・」

このような場合は、既存のスキンを使ってCSSをカスタマイズすることで自分用のオリジナルスキンを簡単に作ることができます。
既存のスキンを使ってカスタマイズすることで、一からCSSを書く必要がなく失敗がありません。

今回はCocoonの「COLORS(ブルー)」のスキンを、デザインはこのままで色だけを別の色に変更したいと思います。

COLORS(ブルー)スキンのトップページ↓

 

サーバーへアクセス

FTPソフトなどを使ってサーバーへアクセスします。
サーバーに接続し、

自分のワードプレスサイト→「wp-content」→「themes」→「cocoon-master」→「skins」へ

「skins」フォルダの中から今回カスタマイズするスキンを選び、そのフォルダを丸々コピーして一旦自分のパソコンに取り込みます。

ちなみに今回使うCOLORS(ブルー)のスキンは「skin-colors-blue」という名前のフォルダです。

 

自分のテキストエディターでカスタマイズ

スキンのフォルダを取り込んだら、フォルダ内のスタイルシート(style.css)を自分のテキストエディターで開きます。
そして自分の変えたい部分だけを変更していきます。

上部にスキンの名前と製作者の名前が書いてあるので、わかりやすいように自分用に変更しておきましょう。
今回は色だけを変更したかったので、色の項目だけを選んで自分の好きな色に変更しました。

他のPHPやJSなどのファイルは触らないようにしてくださいね。

 

サーバーへアップロード

カスタマイズが終わったら、再びサーバーへアクセスし、さっき作ったフォルダをアップロードしていきます。

自分のワードプレスサイト→「wp-content」→「themes」→「cocoon-master」→「skins」
へ進み、「skins」フォルダの中に先ほど作ったフォルダをアップロードします。

 

オリジナルスキンが追加されていることを確認

サーバーへフォルダのアップロードが終わると、ワードプレスの管理画面メニューから「Cocoon設定」→「スキン」へ進みます。

 

自分が先ほどアップしたスキンが追加されています。

 

カスタマイズしたスキンを選択して完了

あとは作ったオリジナルスキンを選択だけでOKです。
サイトの見た目が変わっていることを確認してカスタマイズ完了です。

コメント

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