Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

a-blog cmsのomakeフォルダのスニペットを使ってみた

a-blog cmsのomakeフォルダをあまり使いこなせていないので今回はその辺りの記事を書いてみようと思います。
みなさん、omakeフォルダにa-blog cmsのSublimeTextのスニペットが同封されていることをご存知ですか?
omake > SublimeTextにそれぞれacms , acms_field , acms_module , acms_touch, acms_ifフォルダがあると思います。これらはa-blog cmsで素早くサイトを構築するためのスニペットとなっています。


スニペットの確認

SublimeTextでスニペットは下の図のように
Tool > Snippetsから確認できます。是非導入されたスニペットを確認してみてください。


使い心地

例えば、!Bannerと入力して、Tabを押せば、

<!-- BEGIN_MODULE Banner id="module_id" -->
<ul>
	<!-- BEGIN banner:loop -->
	<!-- BEGIN banner#src -->
	<li>{src}[raw]</li>
	<!-- END banner#src -->
	<!-- BEGIN banner#img -->
	<li><a href="{url}" target="{target}"><img src="%{ARCHIVES_DIR}{img}" width="{x}" height="{y}" alt="{alt}" /></a></li>
	<!-- END banner#img -->
	<!-- END banner:loop -->
</ul>
<!-- END_MODULE Banner -->

このように、テンプレートが簡単に展開されるのですごく気持ちがいいです。

導入方法

それぞれ、acms , acms_field , acms_module , acms_touch, acms_ifフォルダをあなたのパソコンのライブラリ > Application Support > Sublime Text 3 > Packages > Userの中に入れるとスニペットが動作します。



SublimeTextでBootstrapテーマをカスタマイズ


Bootstrapのヘッダーやボタンをカスタマイズするときどうやってカスタマイズしてますか?
私はSublimeTextでBootstrap Sassを使って、ボタンやヘッダーなどを作ってますね!!
そうすれば、ヘッダーの色やボタンの色などを下のようなコードで簡単に変更できちゃいます。

$brand-primary:#f39c12;/*プライマリカラー*/
$navbar-default-bg:#f39c12;/*ナビゲーションバーのバックグラウンドカラー*/
$navbar-default-color:#ffffff;/*ナビゲーションバーの文字カラー*/
$navbar-default-brand-color:#ffffff;/*ナビゲーションバーのブランドカラー*/
@import "bootstrap/bootstrap";

これだけで、以下のようにヘッダーの色が変えられるんですよ



では、どうやってこういった便利なSass環境を整えるのか、順をおって説明していきます。


「SublimeTextでBootstrapテーマをカスタマイズ」の続きを読む

堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド