WordPressの人気テーマCocoon・カスタマイズしたＣＳＳ群を自作スキンにする手順をご紹介します【備忘録】

WordPressの人気テーマCocoonでカスタマイズをどんどんしていったらすっかり元のスキンのCSSをほとんど全部キャンセルしていたなんて事になったらいっその事そのカスタマイズCSS群を自作スキンにしてしまった方が管理もさらなるカスタマイズもしやすいと思います。今回は備忘録も兼ねてその作業手順をご紹介します

この記事はこんな人を対象にしています

Cocoonでカスタマイズをどんどんしていったらすっかり元のスキンのCSSをほとんど全部と言っていいほどキャンセルしちゃってて、あれ元のスキン使う必要ある？ってなってきた人です

そこまで来たらもういっその事おもいきって既成のスキンにサヨナラして今まで自分でカスタマイズしてきたcss群で自前のスキンを作ってしまいましょう。既成スキンのcssをまずキャンセルするところから始まる苦労ともサヨナラです。今まで何も知らないのにおしゃれなデザインを本当にありがとうスキン作ってくれた先輩方！

必要なもの

FTPソフト

一般的なＦＴＰソフトでOKですが、レンタルサーバを借りている方であればレンタルサーバの会社が提供しているファイルマネージャ等の方が簡単かもしれません。とにかくCocoonを使わずに別ソフトにてサーバとＰＣでファイルのアップロード、ダウンロードのやりとりができればOKです

ご注意いただきたい点

これまでのカスタムCSSを記述していた場所は下の２か所のどちらかかと思います

• 「外観」→「テーマファイルエディター」の”Cocoon Child”の”Style.css”
• 「外観」→「カスタマイズ」の”追加 css”

これをこの記事の手順によって子テーマのスキンに移しますのでcssの優先順位が下がります

私の場合はh2と.sidebar h3がこれで手こずりました。結局どうしてもスキン記述ではcssがあたらないものは元のカスタマイズcssファイルに記述を残すようにして下さい

それでは早速作業手順をご紹介

CSSの記述やFTPソフト操作に慣れていれば全然難しいところは無いかと思いますが予期せぬトラブルに備えて必ずバックアップをとってから作業する事をお勧めいたします

手順1　自作スキンのひな型をダウンロードする

まず自作スキンのひな型をダウンロードします

私はさくらのサーバを使っていますのでさくらのサーバのサイトにログインして専用ファイルマネージャ-で作業しましたがこれはご自身の環境に合わせてソフト選択願います

FTPソフト等を起動して自分のサイトにアクセスできたら下図の階層に行きます

wp-content/themes/cocoon-child-master/skins

上図の”skins”フォルダ内に”skin-tenplate”というフォルダがあります。これが自作スキンのひな型になります

（上図には”irodori-tomsaitchild”というフォルダもありますがこれは既に筆者が作った自作スキンですのでみなさんの画面には無いものです）

”skin-tenplate”フォルダをダウンロードしてｐｃに保存します

手順2　style.cssの中身を編集する

”skin-tenplate”フォルダを開くと中身は上図の様になっています

今回はcssだけの自作スキンを作るので上図の内”style.css”ファイルのみを使います

”style.css”ファイルを開くと下図になります

上図で

Skin Name: スキンテンプレート

Author : わいひら

の行がありますが スキンテンプレート部分が自作スキンの名前に、わいひらが作者の名前になりますのでこれを好きな名前に書き替えます。下図は私の自作スキン名「いろどり」と作者名「ともの」に変更したところです

この名前は最終的に下図の様にCocoon設定のスキンタブページに反映される事になります

名前を変えたら/＊以下にスタイルシートを記入して下さい*/以下の行にスキンに移動させたいcss記述をコピペします（この時点ではコピー元のカスタムcssは消さないでください）

これで自作スキンになるcssの編集は完了です

手順3　編集したstyle.cssをアップロードする

アップロードする前に先ほどダウンロードした”skin-tenplate”と同じ階層に好きな名前のフォルダを作ります

wp-content/themes/cocoon-child-master/skins

私は上図の様に”irodori-tomsaitchild”という名前にしています。この名前は最終的に下図の様に反映されます

上図の様に「外観」→「テーマファイルエディター」のCocoon Childのskinsの中にirodori-tomsaitchild”というスキンフォルダが選べるようになります

（その下の階層にあるstyle.cssが自作cssの中身になり今からアップロードするものです）

好きな名前のフォルダ（半角英数字にしてください、全角不可）を作ったらその中にFTPソフトにて先ほど編集したstyle.cssをアップロードします

上図では”javascript.js”ファイルもありますが今回はcssだけのスキンなのでこれはアップロード不要です

手順4　自作スキンを選択してカスタムcssを消していく

Cocoon設定のスキンタブページへ行くと自作スキンが下の方に表示されているのでそれを選択します

（当然ですがここで今まで使っていたスキンとはお別れとなります）

自作スキンにコピペした分のcss記述をカスタムcssからひとつずつ消していきます。ここで優先順位が下がった事によって当たらなくなったcssがないか確認しながら消していきます

おしまいに

自作スキンを使うとスキン制御を受けない点でとても自由になった気がします。その分何でも自己責任になりますがスキンを作ってくれた人がどんなところのデザインに気を使っていたのかが改めてよくわかります。またスキンによってはcss以外のjavaスクリプトやファンクションphpなども屈指している事もわかりとにかく勉強になりました

改めまして初心者ブログに良質なデザインをもたらすスキンを提供して下さった有志の皆様に感謝申し上げます