Simplicityを少し改造してみた 番外編 part.25 既存のテーマcssの先頭にreset.cssをぶち込む

今回の番外編は、Simplicityの既存cssの先頭に何かしらのcssを入れたいとした場合にどうするかを解説してみたいと思います。

既存cssは、今チラリと見てみると、

simplicity-style-css
responsive-style-css
skin-style-css
font-awesome-style-css
icomoon-style-css
code-highlight-style-css
extension-style-css
child-style-css
print-style-css
※ 上記は公式のcssの読み込みを抜粋

こんな感じでした。それぞれハンドル名で、head部分ではID名になってます。*-cssの「-css」はwordpressが自動でつけているもので、実際のハンドル名は-cssの前部分です。

ここで言う所の、simplicity-style-cssの前にreset.cssや、例えば何かしらのcssフレームワークを読み込みたいというのが今回の内容です。

通常、wp_enqueue_style()を子テーマfunctions.phpに書けば、読み込んでいるプラグイン等の影響もありますがだいたいprint-style-cssの後に読み込まれます。cssフレームワーク等のcssならSimplicityのcssと重複しない場合多いのでそれで良いかも知れませんが、reset.cssやnormalize.cssの場合は、htmlの要素自体をリセットしたりするために、Simplicityのcssを読み込む前に読み込ませたいわけです。

そうすると、だいたいもう面倒くさいのでheader-insert.phpでは遅いため、header.phpあたりに直で書くか!!ということになりますが、直接書くのは色々と後で面倒くさいことになったりすることもあるために、考えさせられるわけです。

そこで、以下のような方法をとってみました。

既存のテーマcssの前にreset.cssを読み込む

$urlの部分は、該当のreset.cssのcdnがなかったので、テスト作成中のskinフォルダの中にreset.css作成してを放り込んでそれを読み込ませていますが、cdnで提供されていたりする場合は、

と書き換えれば良いということになります。

まず、wp_deregister_style(‘simplicity-style’);で一旦親テーマのスタイルを解除した後(検証してませんがwp_dequeue_styleでも良いのかも)、reset.cssを新たにレジストして、親テーマの依存ファイルとして新たに親テーマのレジストを行います。array(‘reset’)の部分がresetを読み込んでから親テーマが読み込まれるようにということです。

で、レジストした親テーマをwp_enqueue_style()で再読込(キューに再登録)することで、その他の既存cssは親テーマが読み込まれてから読み込むように依存関係が作られていますから、順番的にはreset.cssの読み込みの後、親テーマstyle.cssが読み込まれてその後に続いて必要なcssが読み込まれるという寸法です。

reset.cssは何が良くてどういう使い方をするか

ブラウザごとに異なるHTMLの各要素のスタイルの相違を吸収し、各要素のデフォルトのスタイルが定義されたCSSと言うのがreset.cssであったり、normalize.cssなわけですが、cssのデザインをするにあたりできるだけ同じ状態の要素の設定をいじるほうが楽なことがあります。
なんでfirefoxではスペースができて、chromeではできないんだ?またその逆とかがあると、いちいち子テーマでそれらを無くすためのスタイルをしないといけないわけですが、子テーマstyle.cssは親テーマを継承しており、子テーマでは修正が大変なことがあるわけです。

例えばulやolを考えてみると、これらはブラウザごとの差異が大きいかどうかは知りませんが、最初からmarginとpaddingは0になっていた方が楽ですよね。

前にわいひらさんにscssで開発時に書いたらどうかと提案したことがありました。Simplicityの親テーマのcssを見ていると結構色んな場所で同じようなリセットがされているわけです。

例えばaタグとかで言うと、#the-content内はリンクのアンダーラインが必要だけれども、それ以外の例えばメニュー部分やSNSのリンク等では必要ないというような場合に、Simplicityは必要のない部分にtext-decoration: none;が入っているわけです。

僕はこれは逆だと思うんです。

多くの場所(ヘッダー、サイドバー、フッター等)でリンクにtext-decoration: none;を入れるのではなく、まずaタグの最初の部分でtext-decoration: none;を設定してしておき、必要な所にだけtext-decoration: underline;を入れるべきだと思うんですよ。そしたらアンダーラインが必要な所にだけスタイルを書けばよいわけで、その他のリンクは何もしなくてもアンダーラインなしなわけです。

これらはSimplicityの話ですが、だいたいブラウザというのはインライン要素であったり、ブロック要素であったりと設定がされています。それらを全体的に統一した見た目にして、スタイルしやすい状態にしたものからスタイルを始めるこれがreset.css等の存在意義です。

簡単に言えば、活魚を家でさばくのはアレだけど、鱗をとってアラも処理してある魚を買ってきて家で調理するようなことです。

他の例で言えば、ケーキを作る時にスポンジケーキから作るかスポンジケーキを買ってくるかとか、そういうことです。こだわりがある場合は1から作れば良いですが、できあがりが同じなのであればその途中の作業を省けるほうが良いこともあると言うことなのです。

だいたい、用意された(できあがったもの)を流用する時というのは、それらは既に洗練されていることが多いですから、ケーキで言うなら一定水準のフカフカで、ウマウマなスポンジケーキなわけです。自分で作る場合は、硬かったり焦がしたりということもあったりするわけですから、これらを利用するかどうかはとても考えさせられる所です。

「明日はバレンタインデー、先輩にチョコあげるんだ」と息巻いて作ってはみたものの、上手く行かずコンビニでチョコ買ってきて溶かして違う形にするというのはよくあることです。そこに愛情があるかどうかはともかく、できあがりが同じものを想定しているのであれば、最初からできあがってるチョコを溶かしてやり始めたほうが手っ取り早いですよね。

実際味の違いはチョコになるまでに決まるわけで、形なんてのは何でも良いわけです。何でも良いのですが、味を作れるほどの技量が自分にあるかどうか、そこらを踏まえて何をどうしてその形に持っていくを考えなければなりません。

htmlの表示の違いをcssで同じにすることは面倒でもあり、難しくもありシンプルながら奥が深いので、僕的にはできあいのものを利用するという方が良い場合が多いだろうと思います。

まぁ、Simplicityにreset.cssを入れたとしても、またそこから色々修正しないといけないので面倒なことに変わりはないのですが、ベースでリセットされているために、より手間を書けず修正できることもあるのではなかろうかと思います。

現在で言えば、Simplicityのグローバルメニューで、アルファベットと日本語で上下にズレが出てますよね?
そういうのが吸収されてなくなるかもよ?ってことなのです。

reset.cssのリンクとか

Yahoo! CSS Reset(YUI 3)(BSD License) | CDN
※ CDNではreset.cssが必要な場合、検索(Ctrl+F)をかけてアドレスを調べてください。

Eric Meyer’s CSS Reset | CDN

HTML5 Doctor Reset Stylesheet(個人利用はフリー、商用利用はMIT) | github

normalize.css(MIT) | gitHub

sanitize.css | CDN | gitHub

スポンサーリンク

シェアする

フォローする