WordPressのテーマ作成に Sass + compass + Gumby を使うための設定


sass画像
WordPressのテーマを自作するにあたって、勉強がてらCSSフレームワークを使おうと考え、良いフレームワークが無いかと探していると「カスタマイズ性抜群!Sassに対応したCSSフレームワークがアツイ! | 株式会社LIG」という記事を発見。

この記事と記事の最後に紹介されている「CSSの常識が変わる!「Compass」、基礎から応用まで! | 株式会社LIG」を読み、Sassを使えばとても便利にCSSを書けることを知りました。

変数を使えたり、入れ子状に記述できたり、mixinというよく使うコードをまとめておいて一発で呼び出せる機能がとても気に入り、導入を決意。

Sassを使ったフレームワークもたくさんあり、各フレームワークの情報も少なく、どれを使うかかなり迷いましたが、ドキュメントが英語ですが、読みやすかった「Gumby」を選択。

WordPressのテーマ作成に Sass + compass + Gumby を使うために行った設定を紹介します。

スポンサーリンク

環境の構築

User Interface UI Kit | Gumby Frameworkを元に導入します。

ターミナルを立ち上げ、Rubyのバージョンを確認する。バージョンが1.8.7より上ならOK。

$ ruby -v

Sass、modular-scale、Compassをインストールする。

$ sudo gem install compass modular-scale sass

Gumbyをインストール

公式サイト「Gumby – A Flexible, Responsive CSS Framework – Powered by Sass」からダウンロード。
gumbyダウンロード

解凍したファイル内の、「sass」「js」「img」「fonts」「css」「config.rb」のフォルダ、ファイルを自作のテーマフォルダにコピー。

私の場合は「mytheme」というテーマ名でとりあえず作成したので、その中にコピーした。

ターミナルに戻り、自作テーマのフォルダに移動。

$ cd /Users/admin/www/blog/wordpress/wp-content/themes/mytheme 

現在のフォルダ内でファイルを更新したら、compassのコンパイルを自動で行うように設定。

$ compass watch

compassの自動更新を止める場合は「Ctrl-C」で止められる。

Gumbyを使ってみる

「sass/_custom.scss」を開く。自分のCSSは基本的にこのファイルに書き込む。
下記コードを追加し保存

$color: bisque;
body{background: $color;}

「css/gumby.css」を開き最終行に下記コードが追加されているのを確認する。

body { background: bisque; }

以上でGambyを使うための設定が完了。

コードを更に理解する

WordPressをより自由に、思い通りに使用するにはPHPの知識が必要です。

PHPを学ぶには、Web上での情報や知識には限界があるので、人に教えてもらうのが一番の近道です。

そこでオススメなのが「CodeCamp」です。

マンツーマン指導なので、わからないことはすぐ聞けて、無料体験レッスンもあるのでどんな感じか試せます。


ITエンジニア専門スクールもオススメです。

スポンサーリンク

おわりに

とりあえずGumbyを使える所まで来ました。後は使い方をマスターしてCSSをガンガン書いていきたいと思います!


タグ:

スポンサーリンク



この記事が役に立ったらシェアして頂けると嬉しいです!
このブログをフォロー・RSS購読もお願いします!

スポンサーリンク