普通にCSSを書くよりも「早い」「見やすい」「メンテが楽」ということで、使い始めるともう手放せない!!でおなじみの「Compass」。
wordpressのテーマ制作にももちろん使いたい!ということで、テーマ作りの際に覚えておきたいcompassの設定のメモを共有します。
ちなみに、「compassって何?」という方には、こちらの記事がオススメです。
1. style.cssの書き出し先を変更する
まずやっておきたいのが、wordpressのテーマで一番大事なcssファイル「style.css」の書き出し先フォルダを変更すること。
compassの基本ファイル生成コマンドcompass create
を実行すると、設定ファイル「config.rb」の内容は以下のデフォルト設定で生成されているはずです。
1 2 3 4 5 |
http_path = "/" css_dir = "css" sass_dir = "sass" images_dir = "images" javascripts_dir = "javascripts" |
compass watch
コマンドで監視するフォルダ(sassファイルの格納フォルダ)はデフォルトの「sass」のままで構いませんが、style.cssファイルをテーマフォルダの直下に置く必要があるため、cssの格納先フォルダ(css_dir
)は変更が必要です。
css格納フォルダの変更方法には、以下の2つがあります。
1-1. すべてのcssファイルをテーマフォルダ直下に書き出す場合(style.cssにすべてのスタイルを記述する場合もこちら)
すべてのcssファイルをテーマ直下に置く場合、対応方法はとても簡単。設定ファイル(config.rb)のcss格納フォルダを「/」に書き換えるだけです。
1 2 3 4 5 |
http_path = "/" css_dir = "/" sass_dir = "sass" images_dir = "images" javascripts_dir = "javascripts" |
これで「style.css」ファイルを含むcssファイルはすべてテーマフォルダのルートディレクトに書き出されます。
複数のcssファイルを利用せず、style.cssにすべてのスタイルを記述する場合も、この方法でOKです。
1-2. style.cssは最小限の記述のみを行い、それ以外のcssファイルは「css」フォルダで運用したい場合
子テーマで運用する場合など、環境によってはcssファイルはcssフォルダに格納する場合もあると思います。
でも、wordpressではstyle.cssだけはルートディレクトリに置く必要があります。
そういう場合、設定はデフォルトのままで、cssをコンパイルするタイミングで「style.css」をルートディレクトに移動させます。
具体的には、「config.rb」の一番上(# Require any additional compass plugins here.
と書かれている箇所)に、以下の処理を記述します。
1 2 3 4 5 6 |
require 'fileutils' on_stylesheet_saved do |file| if File.exists?(file) && File.basename(file) == "style.css" FileUtils.mv(file, File.dirname(file) + "/../" + File.basename(file)) end end |
これで、cssファイルがコンパイルされるタイミング(scssファイルを保存したタイミング)で、style.cssファイルだけが「css」フォルダではなく、テーマのルートフォルダに移動されます。
2. style.cssの「テーマ詳細」の記述を、圧縮できないコメント形式に変更する
compassの売りの一つに、cssの圧縮があります。
(設定ファイル(config.rb)のoutput_style
の値を書き換えるだけで、一般的なcssの書き方である「expanded」、要素ごと一行にまとめて書き出す「compact」、すべての記述を1行に圧縮する「compressed」と、簡単に書き出し方法を変更することができる機能です。)
サイトの表示を高速化するためにも、サイト公開時のcssは「compressed」で圧縮して容量を少しでも減らしておきたいところ。
しかし、compressed形式ではcssのコメントがすべて削除されてしまうため、wordpressのstyle.cssには絶対に必要なテーマ詳細(「Theme Name」など)も消えてしまいます。もちろん、テーマ詳細が消えてしまうと、wordpressはテーマを読み込むことができません。
そこで、「compressed」形式でも削除されないコメントでテーマ詳細を記述しておく必要があります。
その方法はとても簡単で、コメント開始の/*
を、/*!
に書き換えるだけ。
これで、style.cssもガツンと圧縮することができます。
<例>
1 2 3 4 5 6 7 |
@import "compass"; /*! Theme Name: ultimagazine Theme URI: http://ultimagazine.com Description: Theme for ultimagazine Version: 0.0.1 */ |
というわけで、wordpressでcompassを使いたい時には、何よりも先に「style.cssの書き出し先の変更」と「テーマ詳細を/*!
形式のコメントに変更」の2点を忘れずに行いましょう!
ちなみに、、、
「0からテーマを作るぞ!」という人は、style.cssにはテーマ詳細だけを記述し、サイト内では「css」フォルダ内のまったく別のcssファイルを読み込む方法だと、すべてデフォルト設定のままcompassを使えます。
実は、これが一番楽な方法かもしれません…。
Commentsこの記事についたコメント