a-blog cms Ver. 2.1 のomakeを使って個人ブログを作り直してます

先週、6月23日にa-blog cms Ver. 2.1がリリースされ、お値打ちなセールも行っています。そんな中、セール期間の7月7日まで、制作スタッフがブログでリレーをするということで順番がまわってきました。

僕は、普段の業務ではデザイン作業を中心に行っており、実装はほとんどやらないのですが、この機会に最近のトレンドも押さえておこうとブログテーマをなかば強引に作ってみました。

(※ナビゲーションがもう1つ :-< )

テーマを作るのに、主に以下の内容を行いました。

  1. ローカルにa-blog cmsをインストール
  2. blog2014をベースに作りはじめる
  3. gulpの設定してみる
  4. LessとかLivereloadとか使ってみたい
  5. acms.cssのグリッドをつかってユニットをレイアウト

ローカルにa-blog cmsをインストール

テーマを作る際に、やっぱりローカルにa-blog cmsをインストールしていると何かと便利です。ローカルにインストールする手順については、ローカル環境にインストールするをご覧ください。僕はMAMPでやりました。

blog2014をベースに作りはじめる

blog2014をベースに新しいテーマを作り始めました。a-blog cmsに同梱されているblog2014テーマを複製し、新しい名前をつけます。blog2014.min.css というCSSファイルがあたっていますので、一度それを外して新しく作るCSSファイルがあたるように設定しました。

<link href="/css/raiden.css" rel="stylesheet" type="text/css" media="all">

gulpの設定してみる

さて、ここからが本題です。今回の a-blog cms Ver. 2.1 をダウンロードすると、omake フォルダに gulp というフォルダがあります。このgulpというものをつかって作業をしていくのが、最近のトレンドっぽいので、やってみました。

gulpとは、ビルドツールと呼ばれているもので、何かファイルを変更したら別のファイルを書き出したりする自動化のツールです。gulpを使うには、まずNode.jsをインストールする必要があります。僕はNode.jsのサイトからパッケージをインストールしました。

Node.jsをインストールしたらターミナルを開いてgulpをインストールします。

$ npm install -g gulp

インストールできないときは権限がないみたいなので、以下のようにsudoをつけてパスワードを入力すると良いみたいです。

$ sudo npm install -g gulp

gulpのスタートのページには、『2. Install gulp in your project devDependencies:』と書いてあるのですが、ここでハマりました。ちゃんと英語を読まないとと反省。ターミナルを開いたままの状態ですと、基本的にはそのユーザーのディレクトリにいると思うのですが、テーマを作っているプロジェクトのディレクトリに移動してからこの『2. Install gulp in your project devDependencies: 』の作業をしなければなりません。ターミナルに cd と書いて、/Applications/MAMP/htdocs/dotgraphy/ で作業をしていたら、dotgraphyのフォルダをターミナルにドラッグして、以下にように移動しました。

$ cd /Applications/MAMP/htdocs/dotgraphy

そののち、

npm install --save-dev gulp

を行います。(sudoつけてたかも。)同じ階層に node_modules といディレクトリができて、gulpというディレクトリができると思います。次に、 /Applications/MAMP/htdocs/dotgraphy/ のディレクトリ下に、gulpfile.js ファイルを置きます。まずgulpが動いているか確認するために、簡単に以下のようなgulpfile.jsでテストしました。

var gulp = require('gulp');

gulp.task('default', function() {
 	console.log('どすこい');
});

この状態でターミナルで gulp とタイプすると

[23:16:35] Using gulpfile /Applications/MAMP/htdocs/dotgraphy/gulpfile.js
[23:16:35] Starting 'default'...
どすこい
[23:16:35] Finished 'default' after 146 μs

こんな感じでメッセーがでました。なるほど、gulpを実行するとdefaultってところの関数が実行されるのかなと理解してきました。ちなみに、Ctrl+Cでgulpを止めることができます。

LessとかLivereloadとか使ってみたい

ここで、omakeのgulpフォルダ内のgulpfile.jsをベースに、以下のように書き換えました。

// Include gulp
var gulp = require('gulp'); 

// Include Our Plugins
// var rename = require('gulp-rename');
var less = require('gulp-less');
var path = require('path');
// var minifyCSS = require('gulp-minify-css');
var watch = require('gulp-watch');
// var cmq = require('gulp-combine-media-queries');
var livereload = require('gulp-livereload');

gulp.task('raidenless', function () {
	gulp.src(['themes/raiden/less/raiden.less'])
		.pipe(less())
		.pipe(gulp.dest('themes/raiden/css'));
});

//raidenのLESSとCSSファイルを監視する
gulp.task('watch', function() {
	gulp.watch('themes/raiden/less/*.less',['raidenless']);
	// gulp.watch('../themes/raiden/css/*.css',['raidencmq','site2014min']);
	//ライブリロード
	var server = livereload();
	gulp.watch('themes/raiden/**').on('change', function(file) {
		server.changed(file.path);
	});
});

// デフォルトのタスク
gulp.task('default', ['watch']);

実行するとwatchというところにきて、Lessのファイルを監視してて、変更があったらCSSが書き出されて、Livereloadが動くのかなぁとなんと想像できます。ただ、gulp-lessとかgulp-livereloadとかプラグインをいくつか使っているので、それらをインストールする必要があります。例えば、gulp-lessのプラグインをインストールするには、先ほどのディレクトリで、

$ npm install gulp-less

とターミナルに記述します(sudoつけてたかも)。同じ要領で利用する他のプラグインもインストールしました。 /themes/raiden/less/raiden.less に書いたLessファイルを変更すると、/themes/raiden/css/raiden.css に書き出されるのもおぉってなりますが、ChromeのLiveReloadのエクステンションをインストールしておけば、themes/raiden以下のファイルが書き換えらブラウザがリロードされるので、コマンドRから解放されます。以前LiveReloadのツールを使っていたこともあったのですが、JSを組み込まないといけない部分があったので、gulpのはイイ感じです。

acms.cssのグリッドをつかってユニットをレイアウト

新しいブロブのエントリーの形として、テキストは幅を小さく、画像は幅を広くするような、かつ、スマホの時は全幅になるようなデザインにしたいとa-blog cms Ver. 2.1 のグリッドシステムを使って作ってみました。コンフィグの編集設定のユニットグループで以下のようなクラスの設定を作りました。

acms-col-md-12 acms-col-6

acms-col-md-12 acms-col-4
acms-col-md-12 acms-col-8

acms-push-md-0 acms-col-md-12 acms-push-2 acms-col-8
acms-col-12

//実は、7/1現在リリースされているa-blog cmsのacms.cssでは、acms-entry内で一部うまく動かないところがありました、次回のバグフィックス版で修正いたします。申し訳ありません。

過去のエントリーの中で見栄えの良さそうな旅行に行った時のエントリーに適応してみました。

以上、自動化ツールなどをつかってブログのテーマを作る方法でした。



カテゴリー

yamada takuo

有限会社アップルップル デザイナー

カメラと自転車と本屋が好きです。愛知県岡崎市在住。