Simplicity1.7.9でパーツスキン機能を実装しました。
以前にもスキン機能というのはありました。
パーツスキン機能も、スキン機能と大元は同じです。
ただ、パーツスキン機能は、いろいろなパーツのCSSファイルを組み合わせて、洋服を選ぶように、サイトパーツごとのコーディネートを楽しめるようになっています。
パーツスキン機能とは
パーツスキン機能は、サイトパーツの組み合わせをを手軽に楽しめる機能です。
サイトの一部分のスキンの着せ替えを行うための機能といっていいかもしれません。
例えば、パーツスキンフォルダに、CSSファイルを放り込むだけでパーツごとのスキンを自由に組み合わせて利用できます。
例えば、「skins/_Parts」フォルダに以下のCSSファイルを放り込んだとします。
- header.css（ヘッダーのスキン）
- article-h2.css（H2見出しスキン）
- article-h3.css（H3見出しスキン）
- gloval-navi.css（グローバルナビスキン）
- sideber.css（サイドバースキン）
- footer.css（フッタースキン）
パーツスキン機能を利用すると、こういったファイルが全てまとめられて1つのファイルとして読み込まれます。
そして書かれているスタイルが全て適用されます。
スタイルを適用した状態で、サイトを眺めてみて、不要な部分はファイルを外せば元に戻ります。
パーツスキン機能の使い方
パーツスキン機能は、基本スキン機能なので主な使い方はほとんど同じです。
以下では、パーツスキン機能について、より詳しく説明したいと思います。
パーツスキン機能を利用する
パーツスキン機能は、親テーマでも利用できます。
けれど親テーマだと、設定しても、テーマをアップデートすると設定が元に戻ってしまいます。ですので、子テーマで利用することをお勧めします。
以下では、子テーマでパーツスキン機能を利用する方法を例に紹介したいと思います。
新しい子テーマを利用する場合
まずは、以下から子テーマをダウンロードしてください。
子テーマ（無印）
[wpdm_file id=2]
子テーマは、以下の方法でインストールしてください。
古い子テーマを利用している場合
もう既にカスタマイズを施した古い子テーマを利用している場合は、まず以下のファイルをダウンロードして解凍してください。
パーツスキンテンプレート
[wpdm_file id=26]
あとは、子テーマ内の「skins」フォルダ内に（ない場合は作成してその中に）解凍して出来た「_parts」フォルダを移動してください。
パーツスキン機能を適用する
パーツスキン機能を適用するには、「外観→カスタマイズ→スキン」項目から [P] マークのついた項目を選択して適用してください。
新しい子テーマを適用した場合は、以下のように表示されます。
テンプレートを利用した場合は、以下のように表示されます。
あとは、保存して公開ボタンを押せばOKです。
これでパーツスキン機能が利用できる状態になりました。
パーツスキンフォルダに、パーツのスキンとなるCSSファイルを放り込みます。
デフォルトでのパーツスキンフォルダは以下になります。
子テーマフォルダ/skins/_parts
例えば、以下のファイルをダウンロードし解凍して中にあるCSSファイルをパーツスキンフォルダ放り込んでください。
H2見出しパーツスキン
グローバルナビパーツスキン
サイドバー見出しパーツスキン
ファイルをすべて放り込んだ状態
上のファイルを、すべて「_parts」フォルダに放り込むと以下のようになります。
style.cssは、パーツスキンのベースとなるCSSファイルです。（こちらに直接CSSを書き加えてもOKです。）
この状態で、ページを表示させると全ての設定がマージされ、全てのスタイルが適用されて表示されます。
この設定を使うことで、いろいろなパーツパイルを集めて、フォルダに出し入れすることにより、洋服を着替えるようにテーマのコーディネートをいろいろ変更することができるようになります。
現在、Simplicityのカスタマイズ記事を書いておられる方で、「自由に使っていいぞ」という方がおられましたら、パーツごとにファイル化して公開していただけると、当サイトで紹介させていただきます。
パーツスキンの仕様
以下では、パーツスキンの詳しい仕様を紹介したいと思います。
パーツスキンフォルダを作成する方法
前の項目までは、最も簡単なパーツスキン機能の利用方法として、デフォルトである「_parts」フォルダを使った方法を説明しましたが、パーツスキンフォルダは、手軽に作成することができます。
手順としては以下のようになります。
- 先頭に_（アンダーバー）となる名前を付けたフォルダを作成する（例：_demo）
- 作成したフォルダにstyle.cssファイルを作成する
- CSSファイルを開いてスキンファイルとする記述を書く
とりあえず「skins」フォルダ内に先頭が_アンダーバーのフォルダを作成すれば、それがパーツスキンフォルダになります。
あと、style.cssファイルの「作成したフォルダをスキンフォルダとする記述」は、以下のように書きます。
/* Name:スキンの名前 Priority: 2.0 Author: 作者名（任意） Author URI: 作者サイト（任意） */ /* Nameのスキン名は必須です。 Priorityは、テーマカスタマイザーでスキン一覧が表示される表示順です。 浮動小数点数（実数）で設定することができます。わからない場合は適当に設定してください。 その他は特に必要ありません。 ※このコメント部分は消してもOKです。 */
ここらへんの機能は通常のスキン機能と同じです。
子テーマフォルダ内に、複数パーツスキンフォルダを作成して、切り替えて利用するなんてこともできます。
イメージとしては、決めたテーマコーディネートを見比べると言った使い方ができます。
パーツスキン機能の仕組み
パーツスキン機能は、パーツスキンフォルダ内にあるCSSファイルをすべて結合して、「_merged_.css」というファイルを作成し、それを表示することでスタイルを読み込んでいます。
ですので、パーツスキンファイルに「_merged_.css」という名前は利用しないでください。利用したとしても、無視されて、内容が結合スタイルで上書きされます。
パーツスキンの呼び出し順
パーツスキンフォルダに放り込まれたCSSファイルは、基本的に以下のような順番で読み込まれます。
- style.css（このファイル以降はファイル名文字列昇順）
- 001.css
- 002.css
- a.css
- b.css
- …
- z.css
まずは、style.cssファイルが読み込まれ、あとは、a→z順、五十音順でファイルが読み込まれます。（パソコンがファイル名昇順に並び替える順番です）
後から読み込まれるファイルほど、スタイルが優先されるので、順番を変更したい場合は、ファイル名などを変更して順番を変更してください。
パーツスキンフォルダ以下のフォルダ内のCSSファイルも読み込まれます。（何階層でも読み込む。）ただそうした場合、順番がちょっとややこしくなると思います。パソコンのファイルソートに詳しい人向けだと思います。（※逆にフォルダを利用してまとめてファイル配布ができるようになるので、使い方次第でもあります。）
子テーマだけのスキンを設定で表示する方法
通常「外観→カスタマイズ→スキン」項目を表示すると、以下のように親テーマのスキンもズラリと表示されてしまいます。
これだけ表示されても、使わないので、子テーマのものだけ表示させたいという場合は、子テーマのfunctions.phpの中の以下の関数のtrueとなっているところをfalseと書き換えます。
//親skins の取得有無の設定
function include_parent_skins(){
//return true; //親skinsを含める場合はtrue
return false; //含めない場合はfalse
}
このようにすることで、子テーマ内のスキンファイルしか表示されなくなります。
これにより表示がスッキリします。
注意点
以下はパーツスキン機能利用時の注意点になります。
負荷について
このパーツスキン機能は、ページを表示する事に以下の処理を行います。
- パーツスキンフォルダ内のCSSファイルをスキャン
- 全てのCSSファイルをして結合
- _merged_.cssファイルに書き込んで読み込む
つまり、通常のスキン機能よりはコストの高い処理を使用しています。（同様のことをしているプラグインはありますが、通常のCSSファイル表示よりは多少負荷が高いです。）
ですので、10万PV以上をあるような、アクセスの多いサイトには向いていないかもしれません。
基本的に、ブログのスタートアップ時に、いろいろなスタイルのコーディネートを試してみて、スタイルシートのカスタマイズを決定するための参考としてご利用ください。
サイトのスタイルが決定したら、「子テーマフォルダ/skins/_パーツフォルダ名/_merged_.css」ファイルの中身を、すべてコピーして、子テーマフォルダ直下のstyle.cssファイルに貼り付けて統合スタイルを利用するのがお勧めです。
「_merged_.css」の中身を子テーマのstyle.cssに適用したら、パーツスキン機能をオフにしてください。
オフにするには、「外観→カスタマイズ→スキン」項目から[P]と書かれた項目以外を選択するとオフになります。（※スキンを利用しない場合は「選択しない」を選択する。）
@importについて
@importを利用してCSSファイルを読み込む場合は、style.cssの冒頭部分に書く必要があります。
_merged_.cssというファイル名は利用しない
先程も書きましたが、_merged_.cssというファイル名は利用しても上書きされるだけなので、利用しないでください。
style.cssは消さない
style.cssに、スタイルを何も書いていなかったとしても、このファイルがないとパーツスキンとして認識されません。ですのでstyle.cssは消さないでください。
モバイル用のCSSを書く箇所はない
通常のスキン機能だと、mobile.css、responsive.cssがあった場合は、設定によりそれぞれを読み込んでいました。けれど、パーツスキン機能は、今のところモバイル用としてCSSを読み込む機能はありません。
ですので、モバイル用のスタイルを書くときは、メディアクエリなどを利用してください。
推奨のモバイル用メディアクエリは以下の2つになります。
/************************************
** 解像度639px以下のスタイル
************************************/
@media screen and (max-width:639px){
/*スタイルを書く*/
}
/************************************
** 解像度440px以下のスタイル
************************************/
@media screen and (max-width:440px){
/*スタイルを書く*/
}
どうしても、モバイル時のみに読み込むCSSが必要であれば、またそのとき仕様変更などを考えたいと思います。
まとめ
このように、Simplicityにパーツスキンの着せ替え機能がつきました。
今回の機能は、通常のスキンを作成するのが大変すぎるので、ちょっと作成してみました。
Simplicityは、機能が豊富なので、全ての機能に有効に動作する総合的なスキンを作るのは、かなり大変です。
けれど、「パーツごとなら、手軽に作れるし、それをちょこちょこ作って、それをまとめて表示すればいいじゃん」ということで作ってみました。
パーツスキン機能を利用すれば、CSSが苦手な人でも、フォルダにファイルを出し入れするだけで、洋服を着替えるようにサイトのカスタマイズが行えるようになります。（※スタイルが衝突しない限りは）
ということで「Simplicityを初めてみたけど、CSSとかわからんので手軽に設定したい」なんて場合にはいいかもしれません。
コメント
はじめまして。
okameと申します。
Simplicityを使用させて頂いております。
本当にありがとうございます。
さっそくですが、教えていただきたい事がございます。
パーツスキン機能を使用し、見出しなどを変更したいのですがうまくできません。
使用しているテーマは
親テーマsimplisity 1.9.3
子テーマsimplisity 1.9.3
です。
説明には
”「パーツスキンフォルダに、パーツのスキンとなるCSSファイルを放り込みます。
デフォルトでのパーツスキンフォルダは以下になります。」
子テーマフォルダ/skins/_parts ”
と記載があります。
子テーマフォルダを確認できる場所とは
wordpress内の外観→テーマの編集→スタイルシートでしょうか？
style .cssの下へh2を変更したいと思い、下記のように記載したのですが変更できません。
.article h2 {
background-color: #43779d;
border-left: 0 none;
color: #fff;
padding: 15px 30px;
}
ど素人です。
お恥ずかしい質問で申し訳ございませんが、ご教示くださると幸いです。
WordPressの管理画面の「テーマの編集」などからは多分行えません。
基本的には、FTPなどでローカルにダウンロードして、ローカル上のテキストエディターで編集し、またFTPでアップロードするという作業やっている方が最も多いかもしれません。
ありがとうございます。
やってみます！
これからもSimplicityの開発、頑張ってください。
陰ながら応援しています。