WordPressでサイトを作成するときにいろいろと試すのが外観を決める「テーマ」ですね。WordPressのテーマの違いは大きく分けると
- トップページ、画像、リンクなどの表現方法の違い
- SEO対策用の設定があるかないか
- 有料か無料か
といったところ。テーマのデモを見て「わぁ、きれいなテーマ」と思ってインストールしても思い通りに表示されなかったなんていう経験がある方多いのではないでしょうか？これは「こういう表現ができますよ！」ということであってインストールしただけでは実現しないからなのですが、ただでさえWordPressでサイトを作るなんて初めてなのに、何だか分からない用語が出て来てそこを設定しないと表現できない・・・なんていうテーマが多いのも確かです。
そして、使っているうちに分かってくるのが
- 一見高機能に見えるテーマも表現方法はプラグインなどで実現できる
- デザインはCSSで自在に変更できる
- 何かを表示する、非表示にする、表示方法を変えるといったことはテンプレートでカスタマイズできる
ということ。これが分かってくると、高機能と思われるテーマだったのに逆にカスタマイズしにくくなってるなんてことも分かってくるわけです（私は１年前位までこの状態でした・・・）。
そこで出会ったのがWordPressで人気の無料テーマ【Simplicity2】。無料でシンプルなのはもちろん、「こことここは同じデザイン要素になるだろう」というものがまとまっている（デザイン要素が極限まで簡素化されている）のでカスタマイズもしやすいので私がサイトを作成するときには必ず使っています。
当然当サイトでも【Simplicity2】を使っていて、部分程度のカスタマイズしかしていません。まあこのサイトの見え方がどうか？は別として、このテーマはインストールしてすぐにある程度の形になりますし、上に列記したいろいろなカスタマイズがしやすいような構造にもなっていますし、【Simplicity2】標準の状態でカスタマイズできるものはすべて「テーマ」→「カスタマイズ」（これをテーマカスタマイザーといいます）でできるようになっていますから本当に便利だと思います。
さて、そんな【Simplicity2】の機能にある「スキン」ってご存じですか？カスタマイザーにも項目があって「なんだろう・・・」と思う方も多いと思います。この【Simplicity2】のスキンを簡単に言うと「外観がワンボタンで着せ替えできる機能」なんです。今【Simplicity2】を使っている方は試しにこの「スキン」を何かにしてみてください。ほら、簡単に別のサイトみたいになりましたよね？
このスキン機能と利用方法については本家サイトの
をご覧いただくのが一番なのでここでは触れません。
今回は誰かが作成したスキンを利用するのではなく、スキンを自分で作りたい！季節で着せ替えしたい！方向けの情報です。CSS(デザイン部分)のカスタマイズができる方ならCSSを使ったスキンでしたら簡単にできますから是非挑戦してみてください。
【Simplicity2】のテーマの読み込み順
いつも通り余談からスタートしますけど、【Simplicity2】のCSSが最終的にどのように読み込まれているか、それを理解してから進めた方がいいと思いますので敢えて解説をしておきます。
【Simplicity2】は
- Simplicity2（親テーマ）のstyle.css
- 子テーマのstyle.css
- スキンのstyle.css
- Simplicity2（親テーマ）のmobile.css
- 子テーマのmobile.css
- スキンのmobile.css
- テーマカスタマイザーで変更したスタイル
という風になっています。そして、進むにつれて同じ項目（CSS要素）があれば上書きしていく形になっています。
つまり、カスタマイズしたのに反映されないなんてことがあったらこの段階のどこかで変更が加えられていたりすることが多いのです。
ですから、スキンを作って適用する場合には特に３の子テーマのCSS部分はなくした方が間違いないと思います。
着せ替えをするにあたっては
- テーマのカスタマイザーで行っている色などの設定はスキン側で設定するようにする
- プラグインの追加CSSで設定しているものはスキン側で設定するようにする
ようにしないと一部だけが元のCSSになってしまいますから注意が必要です。またプラグインの持っているCSSについては最後に適用されるものもありますから「!important」などを使ってスキンのCSSへ記述するようにすればある程度は適用できますから実際にやりながら対応する必要があります。
ではこれを踏まえて【Simplicity2】のスキン作りをしていきましょう！！
【Simplicity2】のスキンの作り方
- 基本となるスキンのダウンロード
こちらの本家サイトのスキン情報ページにある「Simplicity2スキンのダウンロード」という項目からテンプレートをダウンロードしましょう。ダウンロードしたら圧縮ファイルを解凍して展開しておきます。
- 不要なファイルを削除する
ダウンロードしたテンプレートを展開すると以下のファイルがあります
- imagesフォルダ／独自の画像を保存するフォルダです（少ないようならここに入れない方がやりやすいかも）
- amp.css／モバイル表示を高速化するAMP(Accelerated Mobile Pages)用のデザイン要素
- mobile.css／モバイル用のデザイン要素
- responsive.css／レスポンシブ表示用の要素
- style.css／全体の基本となる要素
- javascript.js／プログラムを動作させるためのファイル
今回はCSSを変更するスキンの作成をするので不要なものは削除して赤字の３つだけ残せばいいでしょう。
オリジナルスキンにするための準備
このままではアップロードしても何も起こりませんので、必要な項目を設定します。
上のファイルの中の「style.css」をメモ帳（Tera padなどの無料テキストエディタでの編集がおすすめ）で開きます
以下の行を編集します
２行目 Name: スキンテンプレート（独自カスタマイズ用）
赤字の部分を編集して好きな名前にします（日本語可です）
３行目 Priority: 1000
カスタマイザー上で表示される優先順位です。適当な数字に変更しますがカスタマイザーを開いて問題なければそのままでも構いません
アップロードする準備
ファイル類があるフォルダが「skin-template」のままではいけませんので、上の名前が連想できるようなものに変更します。こちらは半角英数字と「-」「_」だけ使用できますから注意が必要です
ひとまず今のCSSをコピーする
子テーマに挿入しているCSSを作成したフォルダの中の「style.css」の末尾にコピーしましょう
アップロードする
FTPを使って子テーマの中の「skins」の中へフォルダごとアップロードします
カスタマイザーでスキンを設定する
- WordPressの管理画面から「テーマ」→「カスタマイズ」を開き、「スキン」を開きます
- スキンの中に先ほどアップロードしたスキン名がありますので選択して保存します
これでスキンが適用されました
子テーマのCSSを削除する
優先順は子テーマのCSSよりもスキンのCSSが後で適用されるので、子テーマのCSSの内容を削除して保存します。試しにサイト表示してみてください。同じデザインですよね？念のためブラウザのキャッシュを削除（サイトを表示してから「F12」を押し、再読み込みのマークを右クリックして「キャッシュの消去と再読み込み」をクリックします）してから確認してみてください。
思ったより簡単ではありませんでしたか？？この手順でいくつかのスキンを作っておけば、カスタマイザーでパッとデザインの切り替えができます。季節によってデザイン変更などができていいですね。
これでスキンの適用はひとまず完了です。次の項でよくある疑問点の解決方法を紹介します。
【Simplicity2】スキンの疑問と解決方法
ここではスキンを使う上で疑問に思うこと、どうやったらいいの？をできる限り解説したいと思います。
スキンで作ったCSSの編集はどうするの？
子テーマ内にアップロードしたスキンはテーマの編集画面からいつものCSS編集と同じようにカスタマイズできます。
WordPressのバージョン４．９での話になりますが、テーマの編集を開いて子テーマを選択すると「Skins」という項目があり、それをクリックすると展開されてスキンが選択できるようになります。そこから自身のスキンを選択して該当するCSSを開けばいつものCSS編集画面と同じようにカスタマイズできます。
オリジナルの画像のアップロードと呼び出し
背景画像やヘッダー画像、オリジナルのアイコンなどを呼び出したいときもあると思います。そんなときは
そのスキンの中の「images」フォルダへ画像をアップロードする
CSSに背景色なら「background-image:url(/images/画像のファイル名と拡張子)」などurl()を使って呼び出します。
※imagesフォルダがないときは/images/を省略すればOK
カスタマイザー内のいらないスキンを削除したい
カスタマイザーに表示されるスキンの数々は親テーマの「skins」に保存されていますので、FTPを使ってそれらのフォルダを削除すれは一覧に表示されなくなります
テーマカスタマイザー内で設定する項目の対処
デベロッパーツールを使ってCSSセレクタやIDを調べてカスタマイズすれば大丈夫です。
詳しく知りたい方は親テーマの「css-custom.php」に記述されていますので参照ください。
