(1/3)本連載では、CMSのスタンダードでもある「WordPress」のテーマ作成を、Dreamweaverをメインに用いてさまざまなモダンな技術を組み合わせながら爆発的に捗(はかど)らせる方法を解説していく。Queries(メディアクエリ)やミックスインの共有などに関する小技を紹介する。CC」(以下、Dreamweaver)でWordPressのテーマをカスタマイズできるようにする設定の方法を紹介。テンプレートカスタマイズ&ショートコード作成超入門」でWordPressの内部構造、Dreamweaverを使ったテンプレートのカスタマイズ方法、ショートコードの作り方について解説した。第3回の「CSSコーディングで泣かないためのSassの基礎知識と10の利点」では、さらなる爆捗のために、「Sass」についての概略を解説した。インストールとコマンド、Dreamweaver連携」では、Sassの実践として、Sassのインストール方法とコマンドの使い方、Dreamweaverとの連携、WordPressのテンプレート作成におけるSassの有効な使い方について解説した。前回の「知って得するSass/Compassのインストールと使い方」ではSassベースのCSSフレームワーク「Compass」について、概要や使い方に加え、「ベンダープレフィックスを書く必要がなくなる」「画像をフォルダーに置くだけでCSSスプライトを生成できる」などの利点も紹介した。今回はCompassについて、前回説明できなかった内容と実践で利用できるテクニックを紹介しよう。【1】作業用ディレクトリの作成と、書き出し先の設定をしたいWordPressを対象としてCompassを使う場合、作業用のディレクトリを作成しておくと便利だ。いうのも、.scssファイルなどはリリース後のサイトには必要ないものだからだ。リリース時には不要なファイルをアップロードしてしまわないように、転送ソフトの設定を行っておく。Dreamweaverの場合は「クローク」という機能を用いて、ファイルやフォルダーをアップロード対象から除外できるようになっている。クロークはファイルの拡張子でまとめて指定できる。指定はサイト設定で行う。フォルダー単位でのクロークの指定は、ファイルウィンドウでフォルダーを右クリックすることで行える。個別ファイルも同じようにしてクロークを実行できる。これで、転送したくないファイルやフォルダーを指定しておけば、うっかり重要なファイルがサーバーに置かれて公開されてしまうリスクを回避できる。クロークは必要に応じてDreamweaverが自動で実行するファイルもある。【2】CompassをGUIアプリで利用したいCompassに対応したGUIアプリを利用すると、より効率的にプロジェクトを作成したりCSSファイルを生成したりすることができるようになる。ここではCompassが提供しているアプリ「Compass.app」と、前回少しだけ触れたCodekitを紹介しよう。「Compass.app」はWindowsとMacに対応しているGUIアプリだ。機能的にはリッチな画面ではなく、Compassで利用できる機能をタスクバーに常駐するような形で実行するというタイプのもので、ライブリロードにも対応している。有償で10ドルで購入できる。コマンドを打つのが面倒で、取りあえず何かCompassが使えるアプリを探しているならインストールしてもいいと思うが、フリーのCompass対応アプリも幾つかあるのでそちらを使ってみてもいいだろう。無料版のアプリなら「Koala」辺りがお薦めだ。KoalaはWindowsとMacに対応している無料アプリで、Compassはもちろん、さまざまなフレームワークに対応している。CC」にもあるようなライブでブラウザーに変更を反映する機能などが搭載されており、Compassのためだけに利用するのはもったいないぐらいのアプリだ。筆者はSassの導入に合わせて、ひとまずCompass.appを利用しており、本稿でもディレクトリの監視をさせて自動コンパイルを行っている。高機能という触れ込みでCodekitも購入したが、タスクバーにひっそりと常駐するCompass.appが筆者の性に合っているようだ。【3】WindowsでCSSスプライト生成時のエラーを回避したい前回紹介したCompassの強力な機能であるCSSスプライトの生成が、一部Windows環境ではエラーとなってしまうことが分かっている。これについては下記のような回避方法を用いることで正常な書き出しができるので紹介しておく。Compassがインストールされている場所を探す。これにはコマンドプロンプトで下記のように入力する。compassすると、「compass.rb」までのパスが表示される。筆者の環境では、「C:\Ruby200\lib\ruby\gems\2.0.0\gems\compass-0.12.2\lib」だ。そこのcompassディレクトリにある「sprite_importer.rb」というファイルをまずバックアップし、テキストエディターで開こう。glob))に修正する。uri)).sortに修正する。これでエラーが回避できるはずだ。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。