1-2. SASS+CompassでCSSを編集

前回でWPテーマのモックアップの雛形ができましたので、次はCSS(スタイルシート)を便利に編集するためのツール「SASS + Compass」の準備をしたいと思います。

ちなみにSASSというのは「Syntactically Awesome Style Sheets」の略で、CSSのメタ言語の一種。
複雑に入り組んだスタイルシートの記述も、SASSを使うことで入れ子にしたり変数を使ったりして見た目で分かりやすく・直感的に記述できます(SASSで記述したファイルは、コンパイルすることでCSSファイルに変換可能)。

そしてCompassというのは、SASSをもっと便利に使えるように拡張したツールのようなものです。

 

1. MacにSASSをインストール

最初に以下のコマンドをMacのターミナル実行して gem(Rubyのパッケージ管理ツール) をアップデートします。

次に以下のコマンドを実行し、さくっとSassをインストールしてしまいます。

インストール完了後、

とすると、インストールされた Sass のバージョンがターミナルに出力されます。

2. MacにCompassもインストール

以下のコマンドを実行して、 Compass もインストールします。

念のため、以下のコマンドでインストールされた Compass のバージョンを確認しておきます。

 

3. Compass の設定ファイルの作成と初期化

SASS+Compass のインストールが完了したところで、早速 Compass を利用してスタイルシートを作成していきます。

まずはターミナルを開いてモックアップの assets ディレクトリに移動。

次に以下のコマンドを実行してCompassプロジェクトのファイル一式を生成します(assetsディレクトリの構造にあわせてオプションを指定しています)。

これにより、assets ディレクトリ以下に以下のようなファイルおよびディレクトリが生成されます。

_sass/
SASSで記述したファイルを格納するディレクトリです。
ここに追加された.sassファイルがコンパイルされて、.cssファイルになります。
※「_(アンダースコア)」で始まる.sassファイルはインポート専用のファイルなので、.cssファイルは生成されません。

config.rb
Compassプロジェクトの設定ファイルです。このファイルに書かれた設定をもとにSASSファイルのコンパイルが行われます。

_sass/screen.scss
_sass/print.scss
_sass/ie.scss
「compass create」コマンドを実行したときに勝手に生成される .sass ファイルです。このままこのファイルを利用するもよし、これらは削除して別のファイルを作るもよし。

css/screen.css
css/print.css
css/ie.css
.sass ファイルがコンパイルされた結果のスタイルシートファイルです。

4. モックアップ用に sass ファイルを追加

モックアップ用に sass ファイルを追加していきます。今回は以下のような sass ファイルを作成することにします(勝手に作成された screen.scss、print.scss、ie.scss は削除します)。

_01_fonts.scss
Webフォントの読み込みや定義をおこなうインポート用ファイルです。

_02_normalize.scss
スタイルシートのノーマライズをおこなうインポート用ファイルです。

_03_accessibility.scss
アクセシビリティに関するスタイルを定義をするインポート用ファイルです。

_04_typography.scss
文字のスタイルを定義するインポート用ファイルです。

_05_form.scss
フォーム要素(テキストボックスやボタンなど)のスタイルを定義するインポート用ファイルです。

_06_layout.scss
ページのレイアウトを定義するインポート用ファイルです。

_mixins.scss
mixin(指定した引数に応じたスタイルの記述を生成する関数のような機能)を定義するインポート用ファイルです。

_variables.scss
テーマ全体で利用する配色や文字サイズ、レスポンシブデザインのブレークポイントなどを変数で定義するインポート用ファイルです。

common.scss
common.css のコンパイル元となるファイルです。中身は以下のように記述します。

 

5. CompassでSASSファイルをコンパイルしてcssファイルを生成

ターミナルを開いて config.rb があるディレクトリに移動し、以下のコマンドを実行します。

これにより、_sassディレクトリにある common.sassファイルから common.cssファイルが生成されます。

また以下のコマンドを実行することにより、sassファイルが変更されるたびにcssファイルが生成されるようになります。

 

6. 各ページに common.css を読み込む

生成された common.css は、 link タグを使って各ページに読み込みこむようにします(Dreamweaverを使う場合は、Templates/common.dwt を編集すればOK)。

 

以上で SASS+Compass を使ったスタイルシートの編集が可能となりました。

次回はHTMLをガシガシと作りこんでいきます。

 

※今回作成したファイルはGitHubで公開しています。

Simple Journal – 1.1 モックアップのディレクトリ構造について

WordPressテーマ「SimpleJournal」を作成するにあたり、事前にHTMLでモックアップを作成します。

今回のモックアップのディレクトリ構造は以下。

WordPressテーマ作成用のプロジェクトフォルダ simplejournal 以下に mockup ディレクトリを作成し、その中にモックアップに必要なファイルを配置します。

今回作り込むのは、以下のCSSファイルおよびHTMLファイル。

style.css
テーマに適用するスタイルシートです。

index.html
テーマのトップページに相当するHTMLファイルです。

page.html
テーマの個別ページに相当するHTMLファイルです。

single.html
テーマの投稿ページに相当するHTMLファイルです。

archive.html
テーマのアーカイブページ(カテゴリ別一覧ページやタグ別一覧ページ)に相当するHTMLファイルです。

search.html
テーマの検索ページに相当するHTMLファイルです。

404.html
テーマの Page Not Foundページ(該当のページが存在しなかったときに表示するページ)に相当するHTMLファイルです。

 

そしてこれらのHTMLおよびCSSから参照する CSS、javaScript、画像などは assets ディレクトリに配置することにします。

また、 Templates ディレクトリ以下に Dreamweaver のテンプレートファイル common.dwt が格納されており、各ページの共通部分(ヘッダーやフッターなど)は Dreamweaver でこのファイルを編集することにより一括で変更できるようにしています。

 

なお今回は、SASS(Syntactically Awesome Style Sheets)というテクノロジーを使ってスタイルシートの編集(生成)をおこなっていく予定です。

SASSについては次回の記事で説明します。

※今回作成したファイルはGitHubで公開しています。

【仕切り直し】WordPressテーマ「Simple Journal」ができるまで

前回の更新から半年以上が経過してしまいました。

「SimpleJounrl」という名前のWordPressテーマの作成途中ですが、仕切り直しとおさらいの意味を込めて、またゼロから作り始めていこうと思います。

テーマ作成の手順は以下のとおり。
以前のものを踏襲しつつも、より実際に近い手順を紹介していくつもりです。

1. WordPressテーマ作成の準備

1. モックアップを作成する

1-1. モックアップのディレクトリ構造
1-2. SASS+CompassでCSSを編集
1-3. HTMLを編集

2. テーマ開発環境を準備する

2-1. VCCWの導入
2-2. テーマのディレクト構造
2-3. 必要最小限のテーマを作成(style.css + index.php)

3. テーマを作り込む

3-1. テーマのパーツを作成
3-1-1. ヘッダーを作成(header.php)
3-1-2. フッターを作成(footer.php)
3-1-3. 関数ファイルを作成(functions.php)
3-2. 固定ページのテンプレートを作成(page.php)
3-3. 投稿ページのテンプレートを作成(single.php)
3-4. コメント欄を作成(comments.php)
3-5. アーカイブページのテンプレートを作成(archive.php)
3-6. 検索ページのテンプレートを作成(search.php)
3-7. NotFoundページのテンプレートを作成(404.php)
3-8. トップページのテンプレートを作成(index.php)

4. テーマを配布する

4-1. テーマ配布の準備をする
4-1-1. スクリーンショットを追加
4-1-2. バージョン情報を付加
4-2. テーマをzipにして配布する

 

それでは早速、次回からモックアップの作成にはいりたいと思います。