Simplicity カスタマイズ補助として 親テーマのcssをscssにしてみる part2

前回、Simplicityの親テーマのstyle.cssをsass(scss)化すると言うことでzipファイルを公開しました。
今回は、前回に引き続き以下の変更点を加えた修正をしています。

今回の変更点

  • font-size(!important含むものを除く)を、pxからremに自動変換するmixinを追加
  • 親テーマstyle.cssの最初に@importされている外部cssを内包
  • 前回、不具合があった箇所を修正

上記により、別に分けられていたcssを1枚に統合しています。修正しているバージョンはSimplicity 1.6です。


20150407版: sass20150407_2.zip ( 〃 修正版: sass20150407_3.zip )
20150407版コンパイル済みcss: style_nonecomp.css ( 〃 修正版: style_nonecomp_2.css )
20150407版コンパイル圧縮済みcss: style.min.css ( 〃 修正版: style.min_2.css )

※ 20150407 14:30追記 若干scssを修正したものを作ったのでアップしました。出力された内容は変わりません。
※ 20150407 15:15追記 以下の修正をしました(上記、各修正版)。

  • #navi ul.submenu.li, #navi ul.children.li セレクタのheightをコメントアウト。トップナビ(グローバルナビ)のサブメニューの高さが微妙に大きかったので、aタグの高さになるようにliから高さをコメントアウト。
  • #site-title 及び #site-description またそのまわりのマージンとパディングを調整。#site-description は公式と同様に#site-titleに左辺を並べるように修正。
  • #sidebar 検索フォーム #sのパディング調整で虫眼鏡アイコンに文字が重ならないようにした。

今回は念の為、コンパイルしたものも公開しておきます。
コンパイル済みのstyle_nonecomp.cssはいわゆる普通のcssですが、出力フォーマットが例のアレですので、何かしらのフォーマッタでいい感じに直すと見やすくなると思います(sublimeのcss formatプラグインなどでexpandとか)。
更にコンパイルに加えて圧縮したものは、ファイル名こそstyle.min.cssとなっていたりしますが、style.cssにリネームすればそのまま利用できます。

また前回に引き続き、問題点があった場合は、該当部分がどうなっているかをコメントいただければ修正します。

※ sass、scssはコンパイルが必要です。

前回の記事

Simplicity カスタマイズ補助として 親テーマのcssをscssにしてみる
現在、親テーマのcss(style.css)をscssにして管理しやすくしようとしています。 具体的にどういうことかと言いますと、Gu...

今回内包した外部ファイル一覧

zipファイル内に_****.scssと言う感じで別ファイルになっています。本体のstyle_parent.scss内でインポートしているため、コンパイルして出力すると1つのcssにまとまるという感じです。
現時点のSimplicityではそれぞれを個別に修正できるように各cssを用途別にファイルに分けられていますが、実際に利用する場合は@import url()で読み込んでいるので、最初から1つになっているのであればソッチの方が多分いいだろうということからこういう形にしています。1枚にまとめた分、行数が増えていますけど、まぁそのあたりはゴニョゴニョと。

sassあるいはscssがコンパイルできる環境がある人なら、ローカルでは個別にそれぞれのファイルを編集して、出力時は1枚にまとめるという事ができますのでこれまでのcss編集と変わりません。

linuxのsublimeTextは、日本語入力に難があったりして、日本語が利用できないわけではないですが、とても面倒なことになったりするのでコメントが英語になっています。コメントで日本語を使いたい場合は、@charset “UTF-8”; が冒頭に必要かも知れませんので注意して下さい。英語が文法的に間違っている場合はGoogle翻訳に文句のメールでも入れましょう。単語が間違っている場合などはすみませんが、推測してご利用下さい(笑)

http/2がサーバーで対応されているようであればリクエスト数を減らすとかはもう過去の話になってしまいますが、まだどこもかしこもそうなっているわけではないので、リクエスト数を減らすという意味でも1枚にするのはまだ意味があるかも知れません。現状、1枚にした所で体感でわかるほどではないかも知れませんけどね(笑)

font-sizeについて

実は、この部分が表示に大きく関わるかも知れないので危惧している部分です。
emや%を利用することで意図するサイズにならなくて、無理やりweb開発環境等で数値をいじって「こんなもんか」と設定したりすることがある場合は、remはとても有用です。どういうものかは後述するにして、今回全てのファイル内で!importantが付属していないfont-sizeの部分に関しては全てremで変換しました。利用方法はとても簡単で、

とするだけです。これで該当箇所のfont-sizeは、
font-size: “フォントのpxサイズを変換した数値” rem;
として出力されます。remがどうしても嫌だという場合は下記を参考にして下さい。

現在、色々見直しながら、まとめられるところはないか、もっと簡単にできる部分はないかを色々探っている最中なので、書き方が雑な部分がありますが、scssを利用できる方はご自由に利用して下さい。別に連絡する必要はありませんが、リンクを貼っていただけるとフフフと喜んだりします。

remとは

「rem」は、ルート要素の文字サイズを基準にして、文字サイズを指定できる単位です(CSS3)。
ルート要素はhtmlになります。htmlにサイズ指定がない場合は16pxになるだろうと思います。%やemでは、リスト表示などで階層が深くなる場合、文字サイズが正しく表示されない場合があるため、htmlに指定された文字サイズを基準にn倍してサイズを指定しようという感じになります。これなら、どれだけ階層が深くなろうともhtmlのフォントサイズ基準ですから文字サイズが異なることはありません。

上記のように最初のulの子であるliは15pxで表示できても、ul li ulとなるとまた倍率が動いたりして上記の場合では文字が大きくなっています。
remであればhtml基準ですから、htmlのfont-sizeに対して何倍であるかと言うことなので、階層に左右されずサイズは最初のli(ul li)と同じサイズになっています。
line-height等も同じようなことが言えるだろうと思います。

※IEの古いバージョンではremを利用できませんので、外部javascriptを利用して対応することができます。
外部ライブラリ: REM-unit-polyfill
[CSS3] IE8 以下でもフォント単位 rem が使えるようになるライブラリ REM-unit-polyfillで解説されていますので参考までに。
また正しいかどうかはわかりませんが、mixinを以下のように修正することでremをガン無視するブラウザに対しても何とかなるかも知れません。

_mixin.scss内でコメントアウトしていますが上記の通り、最初に通常通りpxで出力して、後にremで出力することで

と、出力されまして、最初のpxを後のremで上書きするというような事ができるようです。remがわからない古いブラウザはpxで表示するでしょうし、こちらの方が良いかも知れません。ウチの場合は古いブラウザは排除する方向でやってますので対応はしませんが、対応する必要がある場合は上記の通りに。またremがどうしてもアレだと言う場合は、上記mixinの部分のコメントアウトをpxの方は取り、remの方に付けることで従来通りの出力になります。

1点注意点として、%で表記されていた部分は、scss内で計算して出力しているので、多分大丈夫だろうと思いますが元通り(オリジナル)の表記とは異なるかも知れません。

スポンサーリンク

シェアする

フォローする