default_nostyle

この記事では、omakeフォルダ内に同梱している、default_nostyleフォルダについての説明をしています。

場所は、/omake/snippets/default_nostyle/ にて用意しています。

default_nostyleフォルダとは

default_nostyleフォルダに入っているのはacms.cssのクラス名なしのコードをまとめたスニペット集になります(※Ver.2.5.1より、リファレンスや管理画面内で用意しているスニペットはacms.cssのクラス名がすでに適応されているコードに変更されました)。

default_nostyleフォルダで用意しているEntry_List の例

<!-- BEGIN_MODULE Entry_List -->
<div>
<!--#include file="/admin/module/setting.html" -->
<ul>
	<!-- BEGIN entry:loop -->
	<li><a href="{url}">{title}</a></li>
	<!-- END entry:loop -->
</ul>
</div>
<!-- END_MODULE Entry_List -->

上記のコードのように、default_nostyleフォルダで用意しているスニペットには、クラスは適応されていません。

使い方

default_nostyleフォルダの使い方は自由となっておりますが、以下のような場面でご利用いただけます。

  • acms.cssのクラス名が必要ないとき
  • acms.cssのクラス名がないバージョンで、テキストエディターやスニペット管理アプリなどのスニペットを作りたいとき
  • 管理画面のスニペットをacms.cssのクラス名が付与されていない状態にしたいとき

1つめ、2つめについてはご自由にお使いください。ここでは、3つめの「管理画面のスニペットをacms.cssのクラス名が付与されていない状態にしたいとき」だけ方法をご説明します。

管理画面のスニペットをacms.cssのクラス名が付与されていない状態にしたいとき

/default_nostyle/の中のコード・フォルダ全てを /themes/使用中のテーマ/acms-code/snippets/ に移動してください。

srcフォルダについて

/omake/snippets/default_nostyle/ を見ると、/src/というフォルダが含まれています。こちらは、管理画面で使っているスニペットを表示するためのCSSとJSになるので、/src/フォルダも一緒に移動してください。


(スクリーンショット)

/src/フォルダの中にはsnipets.cssとsnippets.jsが入っている

管理画面>コンフィグの順にページを移動し、Entry_Listのスニペットのテキストリンクをクリックすると、acms.cssのクラス名が外れているスニペットを参照できるようになっています。


(スクリーンショット)

クラス名が外れているEntry_Listのスニペット表示画面

画像ユニットをスライダーとして表示するカスタマイズ

ここでは、simple2016 と site2016 に同梱されている slick.js を使ってエントリー内の画像ユニットをスライダーに変身させるカスタマイズ方法をご紹介します。

カスタムユニットを使った実装方法もあるのですが、その方法だと、画像の順番を入れ替えることができなかったり、画像の登録枚数が限定されてしまうのでここではユニットグループを使った実装方法をご紹介します。以下がその実装方法の手順になります。

SublimeText

この記事では、omakeフォルダ内に同梱している、SublimeTextフォルダについての説明をしています。

場所は、/omake/snippets/SublimeText/ にて用意しています。

SublimeTextフォルダとは

テキストエディター SublimeText のデフォルトのスニペット機能で使用できる a-blog cms のモジュールやブロックのスニペットを配布しています。下記では、まだβ版ですが、利用者も多い SublimeText 3 の使用方法について説明しています。

用意しているスニペット

  • ビルトインモジュール
  • カスタムフィールド
  • タッチモジュール
  • IFブロック
  • :veilブロック
  • :loopブロック
  • :emptyブロック
  • BEGINブロックやENDブロックのみ

使い方

Macの場合は「~/Library/Application Support/Sublime Text 3/Packages/」 以下に、Windowsの場合は「C:/Users/ユーザー名/AppData/Roaming/Sublime Text3 /Packages」以下に、 「acms」「acms_field」「acms_if」「acms_module」「acms_touch」 の5つをフォルダごとコピーしてください。

※ /Packages/以下であればご自由に置いてください。たとえば、a-blog cms以外でもスニペットを使う場合は、「acms」というフォルダを作っておけば、他のスニペットと混ざることがなく管理しやすくなります。

フォルダへの移動方法

Macをお使いの場合

Macをお使いの場合、 ~/Library/Application Support/Sublime Text 3/Packages/ に移動するためには、Finderを開いて、「Shift + ⌘ + G」キーを押してください。そして、表示されたウィンドウの入力欄に「~/Library/Application Support/Sublime Text 3/Packages/」と入力し、「移動」ボタンをクリックしてください。

Windowsをお使いの場合

Windowsをお使いの場合は、Windowsのフォルダのアドレスに「%appdata%」と入力してからエンターを押し、まずは「C:/Users/ユーザー名/AppData/Roaming/」までアクセスします。「Sublime Text3」→「Packages」の順にフォルダを選択して移動してください。

動作確認

スニペットを各指定の場所に置いたら、SublimeTextに戻り、使用できるか確認します。「!acms:module」とタイプし、タブキーを押してください。


(スクリーンショット)

SublimeTextに「!acms:module」とタイプするとモジュールの項目がリストで表示される

画像のようなモジュールのリストが表示されます。好きなモジュールを選び、スニペットが展開されたら成功です。

今回配布しているスニペットには以下の設定が用意されています。

  • !acms:module
  • !acms:field
  • !acms:touch
  • !acms:if

  • :veil

  • :loop
  • :empty
  • !BEGIN
  • !BEGIN_MODULE
  • !BEGIN_MODULEid

加えて、各ビルトインモジュールについては「!モジュール名 (例: !Entry_List )」と記述することで呼び出すことも可能です。基本的には、モジュールIDも設定できるようになっていますが、不要であれば削除してください。