読者です 読者をやめる 読者になる 読者になる

IMUZA.com

Joomla!によるウェブ制作, PHP, Javascript, CSS

はてなブログ

はてなブログ テーマ制作
・とことこ with Menubar
・Simple Responsive with Menubar
・Mobile-First Responsive
・Hyperspace

Joomla!

Joomla! によるウェブ制作
・テンプレート自作
・モジュール自作
・Joomla!でサイト構築

Web Tips

ウェブサイトづくりに役立つかも
・Javascript
・CSS

Windows, Linux

Windows10
Plamo Linux

はてなブログのテーマをLESSで作成してみる(1)

はてなブログ

LESS コンパイル環境 Koala を使ってみる

Windows 上のコンパイラは何がいいでしょう? とりあえずは、GUI で動く Koala が簡単そうですね。

インストールは、公式サイトの Download をクリックすると、自動的に OS を認識してくれるようで、koala_2.0.4_setup.exe へ飛びます。

f:id:ausnichts:20150731144829p:plain

ダウンロードが完了したら、インストールして立ち上げます。

f:id:ausnichts:20150731145448p:plain

「設定」で日本語を選べるようですが、あまり意味がなさそうです。変更して立ち上げ直せば反映されます。Ruby が必要ですが、同梱されているようです。別にインストールしている場合は、「設定」→「Advanced」で変更できます。

サンプルテーマ「Boilerplate」をダウンロードする

はてなブログテーマ制作の手引き - はてなブログ ヘルプ

ヘルプにあるように、サンプルテーマを使って作っていくのが楽そうです。

hatena/Hatena-Blog-Themes · GitHub から Zip ファイルをダウンロードして解凍しますと、中に boilerplate フォルダがありますので、フォルダごと Koala にぶち込んでみます。

f:id:ausnichts:20150731150810p:plain

これで、less ファイルを変更すれば自動的にコンパイルされるんじゃないでしょうか? いい加減でスミマセン(笑)。

試してみましたら、ちゃんとフォルダ内の css ファイルと同じファイルが出来ましたので大丈夫です!

なお、ヘルプページにはサンプルエントリーも用意されていますのでコピペしてひとつエントリーを作っておきましょう。

そうそう、もちろんテーマ作成の作業は作業用のブログをひとつ作ってやりましょう。で、管理画面の「デザイン」→「カスタマイズ」→「{}デザインcss」内に boilerplate.css を丸ごと貼り付けます。これでサンプルテーマが反映されました。あとは、less ファイルを好きに変更して、その都度(めんどくさ)ここに貼り付けるだけです。 


(追記)Dropbox の Public フォルダで作業すれば自動化出来ます。

はてなブログテーマ作成(2)Dropboxのpublicフォルダを使ってcssファイル更新を自動化! - IMUZAのブログ


 

f:id:ausnichts:20150731153234p:plain

これでテーマ作成の準備が出来ました。作成の報告は、次回から、少しいろいろやってからですね。