経験知ロゴ

日々の経験を知識として発信するブログ

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を使うための設定が完了。

わからないことは人に聞こう

プログラミングをする上で、わからないことはネットなどを使い自分で調べる技術が必要ですよね。

時間がかかっても、ある程度のことは解決できます。

しかし、どうしても答えにたどり着けなかったり、探す時間が惜しいときもあります。

そこでオススメなのが無料登録でプログラミングに関する質問ができるテラテイルです。

質問の投稿にコードも投稿できるので、自分のコードを投稿して問題のある箇所を指摘してもらうことができます。

プログラマーには、自分で探す技術も必要ですが、人に聞く技術は更に重要です。

登録無料で質問できますので、テラテイルで質問する力を磨いてみましょう!

おわりに

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

▼この記事をシェアできるリンク


▼このブログをフォロー・RSS購読できるリンク