a-blog cmsの編集画面は、コンテンツを「ユニット」と呼ばれるブロックに分けて登録・更新します。ユニットは主にHTMLのブロック要素単位で入力欄を用意して、テキストを登録したり画像を登録するためのものです。
ユニットには、基本的なエントリーを作るのに必要なテキストのユニット、画像のユニットをはじめ、地図やファイル、YouTube、画像URLを指定するユニットがあります。これらを駆使することで、正しい文書構造を保ったまま、HTMLに不慣れな方でも複雑なレイアウトのエントリーも作成できます。また、これらの情報がユニット単位で管理されていることで、順番の入れ替えなども簡単に行えます。
テキストユニットは、最も使われると思われる通常のテキスト「本文」をはじめ、様々な形式のテキストを登録するユニットです。
テキストユニットでは、プルダウンメニューから様々な種類のテキストを選択できます。管理ページから種類を追加もできますが、ここでは基本的な内容について説明します。
site2016の本文ユニットのプルダウンメニューを展開したところ
p要素でマークアップされる本文テキストです。ユニット内で改行がされた場合は、br要素で改行されます。段落を追加する(次のp要素をマークアップする)場合は、もう一つテキストユニットを作成し「本文」を選択してください。
h要素でマークアップされる見出しテキストです。a-blog cmsに同梱されているテーマではエントリのタイトルをh1要素としているため、見出し大はh2としてマークアップされます。中、小は同じくh3、h4要素となります。
ul,li要素でマークアップされる標準的なリストです。ユニット内の1行ごとにli要素としてマークアップされます。
ol,li要素でマークアップされる番号付きのリストです。ユニット内の1行ごとにli要素としてマークアップされます。
dl,dt,dd要素でマークアップされる記述リストです。ユニット内の1行ごとにdtまたはdd要素としてマークアップされます。 dt要素としてマークアップする場合には、行の先頭に#を追加します。
table,tr,th,td要素でマークアップされる記述リストです。ユニット内の1行ごとにtr要素としてマークアップされます。 1行中のテキストは「,」で区切ることでtf要素としてマークアップされます。 1行中の「,」で区切られたテキストをth要素としてマークアップする場合には、そのテキストの先頭に#を追加します。 テーブル記述の詳細につきましては、a-blog cmsのマニュアルをご確認ください。
pre要素でマークアップされる整形済みテキストです。ラベルにもあるように、HTMLなどのソースコードをエントリ内に表示する場合に使用します。
blockquote要素でマークアップされる引用テキストです。 ユニット内のテキスト全体がblockquote要素としてマークアップされます。cite要素には対応していません。
HTMLなどのソースコードがそのまま記述できるユニットです。ユニット内には自由に記述ができますが、ソースコードの記述に誤りがあった場合にはエントリの表示に影響を及ぼす場合がありますのでご注意ください。
マークダウン形式で情報の入力ができるユニットです。マークダウン記法の詳細につきましては、a-blog cmsのマニュアルをご確認ください。
WYSIWYG(ウィジウィグ)は、編集画面での見た目と表示画面での見た目が同じとなる技術で、a-blog cmsではTrumbowygというエディタを使用しています。Microsoft Wordなどの入力に近い感覚で、文字の装飾や画像の追加が行えます。
Trumbowyg を活用したWYSIWYGエディタ
テキストユニットの配置には「おまかせ」「全体」があります。
該当するテキストの前で画像ユニットなどに「右」「左」といった配置指定が行われていた場合、該当するテキストを回り込み表示させます。
該当するテキストを表示する前に、CSSによるfloatを解除します。その結果、回り込み表示することなく全幅でテキストが表示されます。
配置の「おまかせ」「全体」の表示例
a-blog cms Ver.2.8.0 より新しくテキストエリアが生まれ変わりました。今までは「リンク」や「強調」を挿入した際にHTMLタグが直接見えてしまう形になっていましたが、Ver.2.8.0より「リンク」や「強調」などが視覚的にわかりやすくなっています。
a-blog cmsではデフォルトで、「リンク」「強調」「重要」のボタンが用意されていますが、カスタマイズすれば、新たにボタンを追加することができます。下記のように、ACMS.Ready内で、ACMS.Config.LiteEditorConf.btnOptionsに挿入したいボタンの設定をpushするだけです。
ACMS.Ready(function(){
ACMS.Config.LiteEditorConf.btnOptions.push({
label: 'アンダーライン',
tag: 'u',
className: '',
sampleText: ''
});
});また、デフォルトで用意されている「リンク」「強調」「重要」のボタングループを削除した上で、一からボタングループを設置する場合には以下のように、ACMS.Config.LiteEditorConf.btnOptions に直接、値を配列として代入してください。
ACMS.Ready(function(){
ACMS.Config.LiteEditorConf.btnOptions = [{
label: '赤',
tag: 'span',
className: 'red',
sampleText: '赤色のテキスト'
},
{
label: '大',
tag: 'span',
className: 'big',
sampleText: '大きいテキスト'
}];
});| label | ボタンのラベルを設定できます。 |
|---|---|
| tag | ボタンが押された際に挿入されるタグを設定できます。 |
| className | 挿入されたタグに対して付与できるクラスを設定できます。 |
| sampleText | 何もテキストが選択されていない場合に挿入されるデフォルトのテキストを設定できます。 |
ただ、長く運営しているサイトでは互換性の都合上、以前のテキストユニットをそのまま利用したいというケースもあるかもしれません。その場合は下記のようにJavaScriptより、新しいテキストユニットの機能をOffにすることができます。
ACMS.Ready(function(){
ACMS.Config.LiteEditorFeature = false;
});画像ユニットでは、画像ファイルの埋め込み表示とレイアウト、かんたんな編集ができます。
操作中のPC内に保存されている画像ファイルをアップロードします。この際、複数のファイルを選択し、一括でアップロードもできます。また、画像ファイルを画像ユニットの編集画面にドラッグ＆ドロップすることでもアップロードできます。（一括アップロード、ドラッグ＆ドロップでのアップロードは、旧バージョンのIEでは動作しません） 一括アップロードを行った場合、レイアウト、サイズなどの指定は複数のファイルで同じ内容が指定されますのでご注意ください。
a-blog cmsでは、大きな画像ファイルをアップロードする際、ブラウザ側で縮小処理を行った後にアップロードをします。この際の縮小サイズは、管理ページ > コンフィグ > 編集設定 にあるイメージサイズの「拡大表示時の最大サイズ」の数値となります。
画像を表示する際、右・左・中央のいずれかに配置したい場合、レイアウトを指定できます。右または左を選んだ場合は、次に続くユニットが回り込んで表示されます。
エントリー内で表示する際の表示サイズを指定できます。 管理ページ > コンフィグ > 編集設定 にある「サイズセレクトのイメージサイズ選択肢」で指定した内容が選択肢として表示されます。
画像の簡単な編集として、画像の拡大禁止と回転を指定できます。 人物が写っている画像など、拡大して詳細を見せたくないという場合には「拡大表示させない」を選択すると、画像を表示する際に拡大リンクが無い状態となります。また、管理ページ > コンフィグ > 編集設定 にあるイメージサイズの「拡大表示時の最大サイズ」で指定したサイズの画像も作成されません。
回転には「時計回りで90度回転」「反時計回りで90度回転」「180度回転」があり、それぞれ画像を回転した状態で保存・表示します。
そのほか、項目として「削除」があり、選択して保存すると該当する画像ユニットが削除されます。ユニット右上の「×」ボタンと同じ動作となります。
画像ユニット内の「- 詳細」リンクから、キャプション、リンク、代替テキストの指定ができます。
キャプションはsite2016、blog2016といった同梱テーマであれば画像の下に表示されます。
リンクは、リンク先を入力することで、エントリ内で表示される画像にリンクが指定されます。
代替テキストはブラウザ上での表示には影響しませんが、画像の代替テキストとなるalt属性として使用されます。
画像ユニットでは、jpg、gif、png、bmp、xbmの各画像形式に対応しています。 なお、gifアニメーションには対応していません。
1つのエントリーで、画像ユニットや画像のカスタムフィールドを使って、写真・画像ファイルを添付すると20枚以上はアップロードできないことがあります。 サーバー側（PHP）の設定で、関連する項目に制限が設けられている場合にこのような問題が発生します。 詳しくは開発ブログ「画像が一定数枚までしかアップロードできない場合の対処法」をご確認ください。
地図ユニットは、下の図のように緯度と経度または住所を入力すると該当の箇所の地図をGoogle Mapを用いて表示するユニットです。
入力例
地図ユニットを利用するには管理画面のコンフィグ > 編集設定画面から設定をしてください（新規インストール時には、すでに地図ユニットの設定はあるはずです）。図の下に位置している追加ボタンをクリックし、モードから「地図」を選択し、それに対するラベルの名前を決めてください。保存をすれば設定したラベル名のついたボタンがエントリーの編集画面で使えるようになります。
2016年6月22日より、Google Map を使うためには API Key が必須となりました。これにより、API Key をCMS側に設定する必要があります。
API Keyが登録されていない状態のユニット
※以下、手順を紹介しておりますが、Ver.2.6.1.2以降の対応方法となります。それ以前のバージョンに対応するには、開発ブログ「Google Mapsの仕様変更により、地図が表示されない場合がある問題が確認されました」をご覧ください。
まずは、Google API Console にアクセスしてログインしてください。ログイン後、任意の名前でプロジェクトを作成します。
右上のセレクトメニューから、先ほど作成したプロジェクトを選択します。
Google Maps JavaScript API と Google Static Maps API と Google Maps Geocoding APIを有効かしてください。必ず3つも行ってください。
認証情報に移動し、APIキーを作成します。複数のキーがありますが、「APIキー」を選択してください。
ブラウザキーを選択します。
名前を適当に入力し、受け入れリファラーの設定をしてください。
作成したAPI キーをコピーします。
管理ページに移動したらコンフィグ＞プロパティ設定の順に移動し、「Google Maps API Key 」の入力欄に作成したAPIキーを貼り付けてください。
もし、以下のような不具合があった場合、APIキーの設定に不備があるかもしれません。以下の問題と該当するものがあった場合、対応方法をご確認ください。
ビデオユニットではYouTubeやVimeoといった動画を埋め込むのためのユニットです。テンプレートをカスタマイズすることで、下の図のようにVideo IDを入力するとそれに対応する動画を表示することができます。
入力例
出力例
動画サービスには基本的に個別の動画に対してIDが付けられています。IDは下の例のようにURL欄で確認できます。
| 動画サービス | URL | Video ID |
|---|---|---|
| YouTube | https://www.youtube.com/watch?v=kJt3v7tQ6kc | kJt3v7tQ6kc |
| Vimeo | http://vimeo.com/42647970 | 42647970 |
引用ユニットを利用するには管理画面 > 編集画面 > 編集設定から設定をする必要があります。下の図のように追加ボタンを押し、モードからビデオを選択し、それに対するラベルの名前を決めてください。ラベルの名前は任意です。保存をすれば設定したラベル名のついたボタンがエントリーの編集画面で使えるようになっています。
また、エントリーの編集画面でビデオユニットのサイズの指定が出来ます。
ビデオユニットを表示するサイズをパーセント指定、またはclass属性（例：acms-col-sm-6）を指定します。
表示されるビデオの実際の大きさを幅×高さでピクセル指定します。YouTubeの場合は16:9の割合でプレーヤーが表示されるため、横幅から計算した縦幅を入力します（例：横幅を480pxで表示したい場合は、480×(9÷16)=270のため、縦幅を270と指定します）。
下の図のように、セレクトメニューに対してそれぞれのサイズにラベル付けを行うことができます。
標準で、ビデオユニットはYouTubeの動画を出力するように出来ています。
今回はソースコードを編集しVimeoという動画共有サイトの動画をエントリーに表示させてみましょう。/themes/system/include/unit.htmlを使用しているテーマディレクトリの、includeディレクトリのなかにコピーして編集すると良いでしょう
ビデオユニットでは、Video IDを出力する{videoId}、横幅を出力する{x}、縦幅を出力する{y}などの変数が使えます。
<!-- Video -->
<div class="column-video-{align}{display_size_class}"{display_size}[raw]>
<div class="column-iframe">
<iframe width="{x}" height="{y}" src="http://www.youtube.com/embed/{videoId}?wmode=transparent" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<!-- END unit#video --><!-- Video -->
<div class="column-video-{align}{display_size_class}"{display_size}[raw]>
<div class="column-iframe">
<iframe width="{x}" height="{y}" src="http://player.vimeo.com/video/{videoId}" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<!-- END unit#video -->編集画面では下の図のようにYouTube動画を表示してしまうので、こちらもVimeo動画を表示するようにしましょう。
編集画面のためのunit.htmlは/themes/system/admin/entry/unit.htmlにあります。こちらも、編集する場合には使用しているテーマディレクトリの/admin/entry/にunit.htmlをコピーして編集するとよいでしょう。
<!-- BEGIN_IF [{videoId}/nem/] -->
<td class="entryFormFileentryFormImages">
<iframe width="240" height="150" src="http://www.youtube.com/embed/{videoId}?wmode=transparent" frameborder="0" allowfullscreen></iframe>
</td>
<!-- END_IF --><!-- BEGIN_IF [{videoId}/nem/] -->
<td class="entryFormFileentryFormImages">
<iframe width="240" height="150" src="http://player.vimeo.com/video/{videoId}" frameborder="0" allowfullscreen></iframe>
</td>
<!-- END_IF -->これで、下の図のように管理画面にもVimeo動画が表示されるようになりました。
引用ユニットとは、下の図のようにURLを入力するとリンク先のページの概要と画像をセットにして表示するユニットです。メタタグのOGP情報やディスクリプションからページの概要を取得し、メタタグのOGP画像から画像を取得します。
入力例
出力例
引用ユニットを利用するには管理画面のコンフィグ > 編集設定画面から設定をする必要があります。下の図のように追加ボタンを押し、モードから引用を選択し、それに対するラベルの名前を決めてください。ラベルの名前は任意です。保存をすれば設定したラベル名のついたボタンがエントリーの編集画面で使えるようになります。
エントリーの編集画面より下の図のように登録したラベルのボタンより、引用URLを入力してお使いください。
引用ユニットではTwitter でつぶやいたツイートを引用することもできます。
管理画面から コンフィグ > プロパティ設定 に移動し、「Twitter アプリケーション」の項目を設定します。設定後、コンフィグ > 外部認証設定 で認証を行います。詳しくは、カスタマイズTipsの Twitter と連携する際の事前設定 の記事を参考ください。
設定完了後、引用ユニットをエントリーに追加し、引用したいツイートのURLを記入します。
保存をしたら、記入したURLのツイートがエントリーに反映されています。
メディアユニットとはメディア管理ページでアップロードした画像やファイルをエントリーに挿入するためのユニットです。画像ユニットとの違いは、一度アップロードした画像やファイルがメディアとして管理されているため、再度アップロードしなくても使いまわせる点にあります。
エントリー編集画面のユニット追加ボタンから「画像・ファイル」を選択すれば画像やファイルを挿入できます。
管理画面の左のメニューにメディアの項目が無い場合はカスタマイズ管理からコンフィグを選択してください。コンフィグの機能設定ページに移動し、メディア管理の項目で、メディア管理を利用可能にするにチェックを入れてください。
「メディア管理を利用可能にする」にチェックを入れると左のサイドバーにメディアという項目が追加されます。
「メディアユニット」の選択後、以下のようなユニットが出現します。すでにアップロードしているメディアからファイルを選ぶか、新しく画像やファイルをメディアとしてアップロードし、挿入することもできます。
新しく画像やファイルをアップロードする場合はアップロードボタンをクリックします。
すると下の画像のようにメディアをアップロードするためのモーダルウィンドウが表示されます。
また画像ユニットと同じようにファイルをユニットにドラッグできます。ドラッグ後は以下のようにドラッグした画像もしくはファイル一覧が表示されるので、「アップロードして挿入」というボタンをクリックします。
すると以下のようにユニットに先ほどアップロードした画像が登録されました。
いままでエントリーのメイン画像として利用できる画像は画像ユニットに登録してある画像に限られていました。今回の改良でメディアユニットに登録した画像もメイン画像として利用できます。
メディア管理ページでは、アップロードされた画像やファイルを検索/編集したり、検索しやすいようにタグ付けなどを行えます。 メディアユニットからも「メディアから選択」ボタンをクリックすることでモーダルウィンドウ内からメディア管理ページにアクセスすることは可能です。
モーダルウィンドウ内からメディア管理ページ
メディア管理ページに直接アクセスしたい場合は、管理画面 > メディアから移動できます。
管理画面 > メディア管理ページ
メディアを検索する場合はメディア管理の上部にある、検索条件から 登録日時、タグ、ファイル名、表示タイプ、拡張子などの条件で検索できます。 ファイル名や表示タイプ、拡張子の検索は、はじめてページを訪れた際には隠れているので、下の「詳細検索」を押して表示するようにしてください。
検索条件が決まったら、左下の検索ボタンをクリックします。
また、一度アップロードした画像やファイルを探しやすくするためにタグ付けをしておくと便利です。タグをつけたいメディアを選択して、セレクトボックスを「タグを追加」に切り替え、タグ名を入力して追加します。
メディア管理機能では、リスト表示とグリッド表示に切り替えてメディア一覧を表示できます。詳しく情報を調べたい時はリスト表示、一つ一つの画像を確認したい場合はグリッド表示がむいています。
リスト表示
グリッド表示
検索ボックスの右下にあるボタンをクリックすることで表示モードの切り替えができます。
表示モード切り替えボタン
モジュールユニットとはエントリーのユニットとしてエントリーサマリーなどのモジュールを挿入することができるユニットです。テーマフォルダの決められた階層にHTMLのファイルを設置することで、選択したモジュールに対して好きなレイアウトやデザインを適応することも可能です。
モジュールユニットのテンプレートではTouchモジュールは動作しないので、お気をつけください。
管理画面 > コンフィグ > 編集設定 のユニット追加ボタンにて、下の図のようにモジュールユニットを選択できるようにモードよりモジュールを選択し、そのユニットに対するラベルを記述します。
そうすることで下記の図のようにエントリーの編集画面にてモジュールユニットを選択できるようになります。
モジュールIDをモジュールユニットで使用可能にするにはモジュールIDの編集画面にて下の図のように「レイアウトモジュール、モジュールユニットで使用」という項目にチェックを入れる必要があります。
モジュールユニットで選択したモジュールIDをどのように表示するかをテンプレート側で記述することができます。これはレイアウト機能用モジュールのテンプレート作成方法と同じになりますので、テンプレートの作成方法は、レイアウト機能のページよりご確認ください。
エントリーの編集画面にてモジュールを選択します。すると下の図のようにモジュールと書かれたボタンが表示されますので、それをクリックします。
ボタンをクリックすることで下の図のようなモーダルウィンドウが出現します。 左のモジュール一覧から任意のモジュールをクリックすることで、モーダルの右側のプレビューより選択したモジュールがどのように表示されるか確認することができます。 プレビューより表示したい内容が確認できたら、選択するボタンを押すことで、モジュールの選択は完了です。
選択したモジュールは下の図のようにエントリーの編集画面においても確認可能です。
カスタムユニットを使えば、コンテンツの内容に合わせたオリジナルのユニットを作成できます。カスタムフィールドでは、ユニットとユニットの間に挿入できませんが、カスタムユニットでは挿入できるので、管理画面の表現の幅が広がります。
カスタムユニットの例
Ver.2.7.27より、カスタムユニットでもフィールドグループが使用可能になりました。
カスタムユニットのフィールドグループの例
カスタムユニットはカスタムフィールド とは違い、カスタムフィールド検索には対応していません。カスタムユニットのフィールドグループも同様です。
他のユニットと同様、キーワード検索（全文検索）は対応しています。
カスタムユニットを利用するには、管理画面内のコンフィグの編集設定のページから、モードをカスタムに設定しているボタンを追加する必要があります。
図のようにモードのセレクトボックスから「カスタム」を選択し、それに対するラベル名を決めてください（※ラベル名は、エントリー編集の際のユニット追加ボタンのラベルとして使用されます）。
保存ボタンをクリックして、設定を保存します。
この段階でエントリー編集画面に移動し、エントリーの編集画面からユニットの追加ボタンを押しても、まだカスタマイズをしていないので空っぽのユニットが表示されるだけとなります。
次に、このユニットの部分に表示するカスタムユニットの入力フォームのカスタマイズ方法についてご説明します。
まずはカスタムフィールドを設置するためのファイルを作成します。カスタムユニットの入力フォームをカスタマイズするときには、/themes/自分のテーマ/admin/entryの中に、unitディレクトリを作り、custom.html（Ver.2.1.1.4以前をお使いの方は/admin/entryの中にcustom-unit.html）というファイルを作成してください。
作成したファイルに、カスタムユニットの入力フォームのソースコードを記述していきます（カスタムフィールドメーカー等を使って作成した入力用フォームを使うことが記述ミスが少なくなり、おすすめです）。
ご自身でカスタムフィールドまたはカスタムフィールドグループのソースコードから作成される際には以下の3つの点をご注意ください。
<!-- BEGIN product_image:veil -->
<div class="column-image- acms-admin-col-4">
<!-- BEGIN_IF [{product_image@path}/nem] -->
<img src="%{ARCHIVES_DIR}{product_image@path}" alt="" width="200" class="productImage">
<input type="hidden" name="product_image{id}@old" value="{product_image@path}"><br>
<div class="acms-admin-form-checkbox">
<input type="checkbox" name="product_image{id}@edit" value="delete" id="input-checkbox-product_image{id}">
<label for="input-checkbox-product_image{id}">
<i class="acms-admin-ico-checkbox"></i>削除
</label>
</div>
<!-- END_IF -->
<input type="file" name="product_image{id}" size="20">
<input type="hidden" name="unit{id}{id}[]" value="product_image{id}">
<input type="hidden" name="product_image{id}:extension" value="image">
<input type="hidden" name="product_image{id}@size" value="300">
<input type="hidden" name="product_image{id}@filename" value="">
</div><!-- END product_image:veil -->
<!-- BEGIN custom_table:veil -->
<div class="acms-admin-col-8">
<table class="customTable entryFormColumnTable">
<!-- BEGIN product_price:veil -->
<tr>
<th>商品価格</th>
<td><input type="text" name="product_price{id}" value="{product_price}" class="acms-admin-form-width-3quarters" placeholder="1,000"> 円
<input type="hidden" name="unit{id}{id}[]" value="product_price{id}"></td>
</tr><!-- END product_price:veil -->
<!-- BEGIN product_price:veil -->
<tr>
<th>サイズ</th>
<td><input type="text" name="product_size{id}" value="{product_size}" class="acms-admin-form-width-3quarters" placeholder="10cm x 10cm">
<input type="hidden" name="unit{id}{id}[]" value="product_size{id}"></td>
</tr><!-- END product_price:veil -->
<!-- BEGIN product_price:veil -->
<tr>
<th>重量</th>
<td><input type="text" name="product_amount{id}" value="{product_amount}" class="acms-admin-form-width-3quarters" placeholder="100g">
<input type="hidden" name="unit{id}{id}[]" value="product_amount{id}"></td>
</tr><!-- END product_price:veil -->
</table>
</div><!-- END custom_table:veil -->
<h2 class="acms-admin-admin-title2">製品スペック</h2>
<table class="js-fieldgroup-sortable adminTable acms-admin-table-admin-edit">
<thead class="acms-admin-hide-sp">
<tr>
<th class="acms-admin-table-left acms-admin-admin-config-table-item-handle"> </th>
<th class="acms-admin-table-left">製品イメージ</th>
<th class="acms-admin-table-left">詳細情報</th>
<th class="acms-admin-table-left acms-admin-admin-config-table-action">削除</th>
</tr>
</thead>
<tbody>
<!-- BEGIN group_product:loop -->
<tr class="sortable-item">
<td class="item-handle"><i class="acms-admin-icon-sort"></i></td>
<td class="js-img_resize_cf">
<!-- BEGIN_IF [{product_image@path}/nem] -->
<div>
<img src="%{ARCHIVES_DIR}{product_image@path}" class="js-img_resize_preview" style="width:300px;">
</div>
<input type="hidden" name="product_image{id}@old[]" value="{product_image@path}" />
<!-- ELSE -->
<div>
<img src="" class="js-img_resize_preview" style="width:300px;display:none;">
</div>
<!-- END_IF -->
<input type="file" name="product_image{id}[]" class="js-img_resize_input" /><br />
<input type="hidden" name="product_image{id}@size[]" value="300" />
</td>
<td>
<div class="acms-admin-margin-bottom-small">
<label for="product_price">商品価格</label>
<input type="text" name="product_price{id}[]" value="{product_price}" id="product_price" class="acms-admin-form-width-full"/>
</div>
<div class="acms-admin-margin-bottom-small">
<label for="product_size">サイズ</label>
<input type="text" name="product_size{id}[]" value="{product_size}" id="product_size" class="acms-admin-form-width-full"/>
</div>
<div class="acms-admin-margin-bottom-small">
<label for="product_amount">重量</label>
<input type="text" name="product_amount{id}[]" value="{product_amount}" id="product_amount" class="acms-admin-form-width-full"/>
</div>
</td>
<td><input type="button" class="item-delete acms-admin-btn-admin acms-admin-btn-admin-danger" value="削除" /></td>
</tr>
<!-- END group_product:loop -->
<tr class="sortable-item item-template">
<td class="item-handle"><i class="acms-admin-icon-sort"></i></td>
<td class="js-img_resize_cf">
<img src="" style="display:none;width:300px;" class="js-img_resize_preview"/>
<input type="file" name="product_image{id}[]" class="js-img_resize_input" /><br />
<input type="hidden" name="product_image{id}@size[]" value="300" />
</td>
<td>
<div class="acms-admin-margin-bottom-small">
<label for="product_price">商品価格</label>
<input type="text" name="product_price{id}[]" value="" id="product_price" class="acms-admin-form-width-full"/>
</div>
<div class="acms-admin-margin-bottom-small">
<label for="product_size">サイズ</label>
<input type="text" name="product_size{id}[]" value="" id="product_size" class="acms-admin-form-width-full"/>
</div>
<div class="acms-admin-margin-bottom-small">
<label for="product_amount">重量</label>
<input type="text" name="product_amount{id}[]" value="" id="product_amount" class="acms-admin-form-width-full"/>
</div>
</td>
<td><input type="button" class="item-delete acms-admin-btn-admin acms-admin-btn-admin-danger" value="削除" /></td>
</tr>
</tbody>
<tfoot>
<tr><td colspan="6"><input type="button" class="item-insert acms-admin-btn-admin" value="追加" /></td>
</tr>
</tfoot>
</table>
<input type="hidden" name="@group_product{id}[]" value="product_image{id}@alt" />
<input type="hidden" name="@group_product{id}[]" value="product_image{id}@path" />
<input type="hidden" name="@group_product{id}[]" value="product_image{id}@x" />
<input type="hidden" name="@group_product{id}[]" value="product_image{id}@y" />
<input type="hidden" name="@group_product{id}[]" value="product_image{id}@edit" />
<input type="hidden" name="@group_product{id}[]" value="product_image{id}@old" />
<input type="hidden" name="product_image{id}:extension" value="image" />
<input type="hidden" name="@group_product{id}[]" value="product_image{id}" />
<input type="hidden" name="unit{id}[]" value="product_image{id}" />
<input type="hidden" name="@group_product{id}[]" value="product_price{id}" />
<input type="hidden" name="unit{id}[]" value="product_price{id}" />
<input type="hidden" name="@group_product{id}[]" value="product_size{id}" />
<input type="hidden" name="unit{id}[]" value="product_size{id}" />
<input type="hidden" name="@group_product{id}[]" value="product_amount{id}" />
<input type="hidden" name="unit{id}[]" value="product_amount{id}" />
<input type="hidden" name="unit{id}[]" value="@group_product{id}" />現段階ではカスタムフィールドグループで各項目を生成し、以下の３つの項目を修正してください。
カスタムユニットの出力内容を実装していきます。カスタムユニットの出力内容をカスタマイズするときには、/themes/自分のテーマ/includeの中に、unitディレクトリを作りcustom.htmlというファイルを作成してください。
※Ver. 2.1.1.4以前をお使いの方は/themes/自分のテーマ/include/の中にcustom-unit.htmlというファイルを作成してください。
出力内容の例
<h3 id="custom_unit-{utid}">%{ENTRY_TITLE}のスペック</h3>
<!-- BEGIN product_image:veil -->
<div class="column-image-left js_notStyle acms-col-md-4">
<img src="%{ARCHIVES_DIR}{product_image@path}" alt="" />
</div><!-- END product_image:veil -->
<!-- BEGIN custom_table:veil -->
<div class="acms-col-md-8">
<div class="entry-container">
<table class="customTable">
<!-- BEGIN product_price:veil -->
<tr>
<th>商品価格</th>
<td>{product_price}円</td>
</tr><!-- END product_price:veil -->
<!-- BEGIN product_price:veil -->
<tr>
<th>サイズ</th>
<td>{product_size}</td>
</tr><!-- END product_price:veil -->
<!-- BEGIN product_price:veil -->
<tr>
<th>重量</th>
<td>{product_amount}</td>
</tr><!-- END product_price:veil -->
</table>
</div>
</div><!-- END custom_table:veil -->例：フィールドグループ
<h3 id="custom_unit-{utid}">%{ENTRY_TITLE}のスペック</h3>
<!-- BEGIN group_product:loop -->
<!-- BEGIN product_image:veil -->
<div class="column-image-left js_notStyle acms-col-md-4">
<img src="%{ARCHIVES_DIR}{product_image@path}" alt="" />
</div><!-- END product_image:veil -->
<!-- BEGIN custom_table:veil -->
<div class="acms-col-md-8">
<div class="entry-container">
<table class="customTable">
<!-- BEGIN product_price:veil -->
<tr>
<th>商品価格</th>
<td>{product_price}円</td>
</tr><!-- END product_price:veil -->
<!-- BEGIN product_price:veil -->
<tr>
<th>サイズ</th>
<td>{product_size}</td>
</tr><!-- END product_price:veil -->
<!-- BEGIN product_price:veil -->
<tr>
<th>重量</th>
<td>{product_amount}</td>
</tr><!-- END product_price:veil -->
</table>
</div>
</div><!-- END custom_table:veil -->
<!-- END group_product:loop -->
出力内容のテンプレートはカスタムフィールドのテンプレートと同じように変数を挿入するだけで出力されます。
フィールドグループの場合は、<!-- BEGIN xx:loop --><!-- END xx:loop -->の記述をループ処理をしたい箇所の前後に追加してください。
管理画面用のカスタムユニットのHTMLを手作業で記述することは、項目数が増えると手間がかかります。そこで、カスタムユニットのHTMLの生成を簡単にするカスタムフィールドメーカーにカスタムユニットの作成機能を追加で用意しました。
カスタムフィールドメーカーを使えばカスタムユニットの編集用に使用するラジオボタンや、画像等をアップロードできるHTMLをボタン操作のみで生成することができます。
カスタムフィールドメーカーでは下記の項目のHTMLを出力できます。
カスタムフィールドメーカーはVer.2.5よりa-blog cmsの管理画面、および本デベロッパーサイト内に設置されています。本デベロッパーサイト内のドキュメントのリファレンスよりカスタムフィールドメーカーを選択すると移動できます。是非サイト制作にお役立てください。
1.まず、ラジオボタンを選択します。カスタムユニットをご使用の場合は「カスタムユニット」を選択します。
2.つぎに、入力欄の種類を選びます。
3.テキストを選択するとタイトルとフィールドという入力フォームが現れますので値を入力してください。[生成]ボタンをクリックすると、カスタムユニットのHTMLが生成されます。
生成されたHTMLコードを、/themes/自分のテーマ/admin/entry/unit/の中のcustom.htmlにペーストしてご使用ください。
（※Ver. 2.1.1.4以前をお使いの方は/themes/自分のテーマ/admin/entry/の中にcustom-unit.htmlというファイルを作成して、コードを貼付けてご使用ください）
この内容は、a-blog cms Ver.2.6.0をもとに説明しています。ご利用のバージョンによって、画面表示や内容が若干異なる場合があります。ご了承ください。
ここでは、マイクロページ機能を使った、エントリーの分割表示について説明します。
マイクロページ機能を利用することで、1つのエントリーを複数のページに分けて表示できるようになります。ページの移動には、いくつかの表示方法を選択することもできます。長文エントリーを複数ページに分けて、読みやすくしたい場合などにご利用ください。
マイクロページ機能では「改ページ」というユニットを追加する必要があります。 まず、 管理ページ > コンフィグ > 編集設定 からユニット追加ボタンに項目を追加してください。
このとき、モードの選択肢に「改ページ」がある場合は改ページを選択し、無い場合はモードで「拡張」を選択して入力欄には「break」を入力してください。いずれの場合もラベルに「改ページ」を記入し、保存します。
管理ページ > コンフィグ > ユニット設定 を見ると、一番下に改ページのユニットが追加しているのを確認できます。ここで「改ページ」ボタンをクリックして、改ページリンクのラベルを設定しましょう。例では「続きを読む」としました。ラベルが設定できたら保存します。
ユニット追加ボタンにこのように記述してください
ユニット設定で追加したことを確認できます
マイクロページ機能を使用するためには、まず 管理ページ > コンフィグ > エントリー本文 ( Entry_Body ) からマイクロページ機能を有効にする必要があります。
また、これらの設定は、モジュールIDとして使用する場合も同様の手順となります。
マイクロページ機能にチェックをします
前後リンクにチェックをします
マイクロページに関連する設定は、以下の3つです。
必要に応じて変更してください。
マイクロページのページ送りのためのソースコードをテンプレートに記述する必要があります。エントリーの表示に使用しているテンプレートファイル内で Entry_Body モジュール内の ＜!-- END_MODULE Entry_Body --＞ の上に記述します。
<!-- BEGIN micropage:veil --><!-- BEGIN micropageLink -->
<p><a href="{url}">{label}</a></p><!-- END micropageLink --><!-- END micropage:veil -->
<!-- BEGIN micropager -->
<p>
全 {itemsAmount} 件中 {itemsFrom} 〜 {itemsTo} 件目を表示
<!-- BEGIN page:loop --><!-- BEGIN link#front --><a href="{url}"><!-- END link#front -->{page}<!-- BEGIN link#rear --></a><!-- END link#rear --><!-- BEGIN glue -->, <!-- END glue --><!-- END page:loop -->
<!-- BEGIN lastPage:veil --> ...<a href="{lastPageUrl}">{lastPage}</a><!-- END lastPage:veil -->
</p>
<p>
<!-- BEGIN backLink --><a href="{url}">« 前の{backNum}件</a><!-- END backLink -->
<!-- BEGIN forwardLink --><a href="{url}">次の{forwardNum}件 »</a><!-- END forwardLink -->
</p><!-- END micropager -->マイクロページ機能を使用する設定ができたら、実際にページ分割したエントリーを作成してみましょう。
エントリーの分割には「改ページ」ユニットを使用します。
「改ページ」の追加ボタン
テキストや画像のように、改ページをするユニットを、ページ分割したい部分に追加します。下記の例では3ページ構成とし、文章と画像の下に改ページを追加しています。
3つ目のユニットとして「改ページ」
このように「改ページ」ユニットを追加すると、エントリーの詳細表示時に以下のようにページが分割された状態で表示されます。今回の例では、3ページに分割しています。
1ページ目
2ページ目
3ページ目
今回は管理ページのユニット設定で「続きを読む」というラベルを設定したため、エントリー登録時に改ページユニットを追加した時には「続きを読む」というテキストでリンクされていますが、エントリー登録時にこの部分を編集することで、次ページへのリンクのテキストを変更できます。
例えば、内容に合わせて「具体的な解決方法は次のページで！」といったように、テキストを変更することで、より効果的にマイクロページを使うことができます。
ページ内でユニットを配置するには、基本的にはテキストユニットや画像ユニットなどで用意されている「配置」の設定を変更しておこないますが、ここでは、複数のユニットをまとめてカラム（段）にする「ユニットグループ」を使った入力について説明します。
ユニットグループ機能を利用することで、複数のユニットをdiv要素で囲むことができます。そのグループにはラベル(選択時の名前)とクラス(HTMLの要素に適用するclass属性)を自由に追加できます。
ユニットグループを使った段組の例
ユニットグループ機能を使用するためには、まず管理ページ > コンフィグ > 編集設定からユニットグループ機能を有効にする必要があります。
ユニットグループは複数のユニットを囲むdiv要素を付与する機能です。このため、ユニットグループとして囲むdiv要素に適用されるclass属性と、選択肢として使用するラベルを設定する必要があります。
ユニットグループに設定したclass属性に相当するスタイルは、/themes/system/css/acms.css 内に記述されているため、変更の必要はありませんが、システムのアップデートによる変更に備えて、ご利用の際はオリジナルのテーマフォルダにCSSファイルを複製してご利用ください。 幅に必要なグリッドの数に合わせて「acms-col-sm-※」の※部分の数字を変更してご利用ください。 また、1カラムに指定されている「acms-column-clear」については、デベロッパーサイトのドキュメントのコンフィグに「ユニットグループ」として記載していますので合わせてご確認ください。
以下、標準のテーマ「site2016」に設定されている内容を元に説明していきます。
site2016での設定
複数のユニットをまとめるためには、どのユニットからどのユニットまでをまとめるのかを決める必要があります。そのために、ユニットのヘッダー部分にある[グループ]を使用します。
[グループ]から選択
仮に「2カラム」のグループでまとめる場合、まとめたい最初のユニットのグループを「2カラム」にします。
「2カラム」でまとめたい最後のユニットまでは、ユニットのグループを「---」に設定します。これで複数のユニットが「2カラム(acms-col-sm-6)」というグループ(div要素)でまとめられました。
再度ユニットグループの設定をする場合には、ユニットにグループの設定を行います。例として再度「2カラム」のユニットグループを開始します。このユニットグループは、1エントリ内に何回でも作成できます。
上記のように、複数のユニットをグループ化することでどのようなレイアウトが実現できるか見てみましょう。
エントリー入力画面
上記の図は、エントリー入力画面です。
この例では「2カラム」のユニットグループと「1カラム」のユニットグループをしています。「2カラム」として囲むdiv要素にはCSS（.acms-col-sm-6）で2段組みの設定がされています。「1カラム」として囲むdiv要素ではacms-column-clearというclass属性をa-blog cmsがユニットの終わりだと解釈し、1段組み(全幅を使う)の設定がされています。
1つ目のユニットで「2カラム」を開始、2つ目のユニットには指定がないため「2カラム」が継続されます。（赤色で着色した部分です）
3つ目のユニットでは2回目の「2カラム」が指定され、2つ目のグループが始まります。4つ目のユニットには指定がないため「2カラム」が継続されます。（青色で着色した部分です）
5つ目のユニットで「1カラム」を開始しています。3つ目のグループが始まります。6つ目と7つ目のユニットには指定がないため「1カラム」が継続されます。（黄色で着色した部分です）
このように、複数のユニットをまとめる（ユニットグループ化する）ことで、段組みなどのレイアウトや、複数のユニットにまたがる枠線の表示が実現できます。
実際の表示
管理ページ > コンフィグ > 編集設定 でのユニットグループに記述されている「acms-column-clear」は、「acms-col-sm-*」などとはことなり、ユニットグループの解除（1カラム）の設定であり、システム側で使用しているものになります。class属性名を変更せず運用してください。
[ユニット設定]画面では、エントリー作成画面で入力するユニットの設定ができます。この設定により、新規にエントリーを作成する時のユニットの設定をあらかじめ決めておいたり、ユニットを追加する時のユニットの設定を決めておくことができます。入力する内容の形式が決まっている場合にユニット設定をしておけば、毎回ユニットの種類を自分で設定しなくてもよくなります。
[ユニット設定]は、管理者のみ設定可能です。編集者／投稿者／読者には[コンフィグ管理]画面は表示されません。
[ユニット設定]画面を表示するには、管理ページ > コンフィグ > ユニット設定 へ進みます。
管理ページ > コンフィグ > ユニット設定
[ユニット設定]画面
ユニット編集画面では、エントリー作成時に使用する「テキスト」「画像」などの各ユニットボタンをクリックした時に表示される情報の入力枠を編集できます。これらは 管理ページ > コンフィグ > 編集設定 の「ユニット追加ボタン」で追加したものが表示され、編集できます。以下、各ユニットに共通の追加・削除について説明します。
（1）ユニットを追加するには、[テキスト][画像]などのボタンをクリックします。削除するには、各ユニット右側の[削除]ボタンをクリックします。
（2）[保存]ボタンをクリックします。
エントリーを新規に作成する時の、入力画面のユニットの設定をおこないます。
（1）[ユニット設定]画面の[新規記事作成]項目にユニットを追加・削除し、初期設定として表示させたいユニットを設定します。それぞれのユニットの詳細設定も可能です。ここでは、例として以下の図のように設定しました。
（2）[保存]ボタンをクリックします。
（3）[エントリー作成]ボタンをクリックします。
（4）エントリー作成画面で、先ほど[ユニット設定]画面で設定したユニットが初期状態として表示されるようになります。
エントリー作成画面の初期状態
エントリー作成画面で、新しくユニットを追加する時の初期設定も可能です。
（1）[ユニット設定]画面の各ユニット（テキスト、画像など）で入力枠の追加・削除などの設定をおこない、[保存]ボタンをクリックします。
（2）エントリー作成画面の[追加]で各ボタンをクリックすると、手順（1）で設定したユニットが初期状態として表示されるようになります。
ユニットの拡張機能とは、デフォルトの各種ユニットを拡張する機能のことです。ユニットの拡張機能を使用すれば、デフォルトのユニットが出力するソースコードに足りていないHTMLやCSSを補うことが可能です。
例えば、本来であれば画像ユニットにh2要素はありませんが、ユニットを拡張すれば下記のソースコードのようにh2要素を追加できます。下記の例では、画像ユニットを拡張して画像見出しを実装しています。
<h2><img class="columnImage" src="/ablogcms/archives/001/201201/4ef13df83cca3.png" alt="ablog cms ロゴ" width="386" height="104"></h2>
編集画面の表示は画像ユニットと同じです
ユニットの拡張を利用するには、テンプレートのカスタマイズと管理画面の設定が必要です。まずはテンプレートのカスタマイズ方法を紹介します。
ご利用のテーマ内の/include/の中にunitディレクトリを作り、テキストユニットを拡張したい場合はtag-select.html、その他のユニットを拡張したい場合はextend.htmlを作成します。tag-select.htmlまたはextend.htmlにユニット拡張のブロックを追加し、ユニットを拡張します。
Ver.2.1.1.4以降より、tag-select.html とextend.htmlが利用できます。
Ver.2.1.1.3以前では、/themes/system/include/の中にあるunit.htmlをお使いのテーマのincludeディレクトリにコピーし編集することで、拡張したいユニットのカスタマイズが可能になります。
<!-- BEGIN unit#〇〇〇_△△△ -->~<!-- END unit#〇〇〇_△△△ -->
〇〇〇の部分は拡張したいユニットのブロック名を使用し、「_（アンダーバー）」で繋いで、△△△の部分はオリジナルな独自の名前をつけてください。
※拡張したいユニットのブロック名は、後述する「ユニットのブロック名の対応表」をご確認ください。
画像ユニットで、「hoge」というブロックを追加するなら、「image_hoge」になります。実際のテンプレートには、下記のようにブロックを追加します。
<!-- BEGIN unit#image_hoge -->
<h2><img class="columnImage" src="{HTTP_ROOT}{path}" alt="{alt}[delnl]" width="{x}" height="{y}"></h2>
<!-- END unit#image_hoge -->ユニットの拡張は全てのユニットが対象となっており、拡張可能です。
| ユニット | ブロック名 |
|---|---|
| テキストユニット | text |
| 画像ユニット | image |
| ファイルユニット | file |
| マップユニット | map |
| YouTubeユニット | youtube |
| 画像URLユニット | eximage |
| 改ページのユニット | break |
| Yahoo地図ユニット | yolp |
| ビデオユニット | video |
| メディアユニット | media |
| 引用ユニット | quote |
| モジュールユニット | module |
| カスタムユニット | custom |
拡張したブロックを管理画面で使用するには、編集設定とユニット設定のページで設定を追加する必要があります。
管理画面にログインし、コンフィグ＞編集設定の順にページを移動します。
編集設定のページでユニットを追加すると、追加したラベルのブロックと同じラベルのボタンが増えています。
編集設定とユニット設定に設定を追加したら、エントリー編集画面に追加した拡張ユニットのボタンが新しく追加されてるはずです。正常に作業ができているか確認しましょう。
実際にテキストユニットを拡張して、スライドするテーブルを設置する方法をサンプルとして紹介します。
実際にテキストユニットを拡張して、スライドするテーブルを設置する方法をサンプルとして紹介します。このときモードを拡張にしましょう。モードのとなりのテキストフィールドにはtext_slidetableのように拡張したいユニット名+アンダーバー+任意の文字列を入力します。
コンフィグ＞ユニット設定の順にページを移動し、設定したボタンに対して使用するユニットを設定します。今回はスライドテーブルを選択し、タグには「テーブル」を選択しましょう。
次にテンプレートの編集をしていきます。今回はテキストユニットの拡張のため、Ver2.1.1.4以降をお使いの方はtag-select.htmlまたはVer.2.1.1.3以前ではunit.htmlを編集してください。
unit#+拡張したいユニット名+アンダーバー+任意の文字列のブロックを記述します。このブロック内に出力内容を記述します。ここでいう任意の文字列とは、管理画面のコンフィグの編集設定で、拡張ユニットに対して付けた名前になります。
<!-- BEGIN unit#text_slidetable -->
<!-- BEGIN table -->
<div class="entry-container slideTable"><table{class}>{text}[table]</table></div>
<!-- END table -->
<!-- END unit#text_slidetable -->unit.htmlはsystemテーマのincludeディレクトリの中にあります。このファイルを現在お使いのテーマにコピーしましょう。 unit.htmlの<!-- BEGIN unit:loop --><!-- END unit:loop -->内に、tag-select.html と同じように追記してください。
見せ方に応じてCSSを編集しましょう。下は編集例になります。
.slideTable{
overflow-x:scroll;
}
.slideTable table,
.slideTable tbody,
.slideTable tr,
.slideTable td,
.slideTable th{
white-space: nowrap;
}エントリーの編集画面から下の図のように、スライドテーブルを追加してご利用ください
これはVer.2.7以前のテキストユニットをカスタマイズする方法です。Ver.2.8以降でテキストユニットをカスタマイズしたい場合はこちらの記事をご覧ください。
ユニットの右下には、「リンク挿入（aタグ）」、「強調1（em）」、「強調2（strong）」の3つリンクがデフォルトで用意されています。それぞれクリックするとインライン用のタグが挿入される仕組みになっているのですが、これらの項目はカスタマイズ次第で増やすことができます。
たとえば、smallタグを増やすことができます。
systemフォルダの中にある、/ajax/emoji-edit.html をカスタマイズします。カスタマイズする際は、オリジナルのテーマの中にテンプレートをコピーしてください。
a-blog cms のバージョンをアップデートしたときに、systemフォルダ上書きしないために、管理画面のテンプレートをカスタマイズする際はオリジナルテーマにテンプレートを持ってきましょう
テンプレートの中身は以下のようになっています。
<span class="js-tag_insertion"> <!--<p> --> <a href="#" class="emoji-trigger-tag" rel="a" title="リンク先のURLを入力してください">リンク挿入</a> <!--<a href="#" class="emoji-trigger-tag" rel="strong">強調</a>--> <a href="#" class="emoji-trigger-tag" rel="em">強調1</a> <a href="#" class="emoji-trigger-tag" rel="strong">強調2</a> <!--<a href="#" class="emoji-trigger-tag" rel="u">下線</a>--> <!-- 文字色 <a href="#" class="emoji-trigger-text" rel="color-red"><span class="color-red">赤</span></a> <a href="#" class="emoji-trigger-text" rel="color-blue"><span class="color-blue">青</span></a> <a href="#" class="emoji-trigger-text" rel="color-yellow"><span class="color-yellow">黄</span></a> <br /> --> <!--</p> --> </span>
8行目に以下の記述追記します。
<a href="#" class="emoji-trigger-tag" rel="small">細則</a>
<span class="js-tag_insertion"> <!--<p> --> <a href="#" class="emoji-trigger-tag" rel="a" title="リンク先のURLを入力してください">リンク挿入</a> <!--<a href="#" class="emoji-trigger-tag" rel="strong">強調</a>--> <a href="#" class="emoji-trigger-tag" rel="em">強調1</a> <a href="#" class="emoji-trigger-tag" rel="strong">強調2</a> <!--<a href="#" class="emoji-trigger-tag" rel="u">下線</a>--> <a href="#" class="emoji-trigger-tag" rel="small">細則</a> <!-- 文字色 <a href="#" class="emoji-trigger-text" rel="color-red"><span class="color-red">赤</span></a> <a href="#" class="emoji-trigger-text" rel="color-blue"><span class="color-blue">青</span></a> <a href="#" class="emoji-trigger-text" rel="color-yellow"><span class="color-yellow">黄</span></a> <br /> --> <!--</p> --> </span>
emoji-edit.htmlをカスタマイズすると、htmlでの挿入ができるようになるのですが、マークダウンでは対応しておりません。対応するには、/js/dispatch/edit/_emojiedit.js をカスマイズします。（※バージョンアップの際は上書きしないようにご注意ください）
圧縮されていますので、解凍します。Ver.2.5.1.2 では19行目から31行目に記述があります（他のバージョンでは行数が変わっている可能性がありますので、付近を探してください）ので、参考にして記述してください。
たとえば、以下のように追記します。
case "small":
$(acms_textarea).selection("<small>" + txt + "</small>");
break;2行目の<small>と</small>と書かれている場所はマークダウンのときにテキストエリア内に表示される要素になります。たとえば、強調1の場合だと以下のようになっています。
case "em":
$(acms_textarea).selection("*" + txt + "*");
break;テキストユニットは「本文」「見出し2」などの要素をセレクトメニューから選択して使用します。独自の装飾・スタイルを適用したいときにclass属性を設定したい場合があります。
このような場合は、編集設定からclass属性を設定したテキストユニットを作成します。
設定は、ログイン後に管理メニュー > コンフィグ > 編集設定 にて登録します。
編集設定のテキストタグセレクトがエントリー作成時のテキストユニットの元になっています。タグの項目に「.」 を追加してclass属性を設定できます。複数のclass属性を追加するときは「.entry-btn entry-btn-primary」のように2つめ以降はHTMLの仕様と同じようにスペースで区切ります。
#を追加してid属性を設定することも可能です。ただしユニットは自由に何度でも追加できますのでページ内でidが重複しないように注意が必要になります。
エントリーの作成・編集画面のテキストユニットで、追加した内容が選択できるようになります。
この例の場合では「ボタン（灰色）」というテキストユニットを使用した場合、p要素にclass="entry-btn" が追加されたものがエントリーに反映されます。
カスタマイズすることで、テキストユニットの設定に拡張欄を追加できます。「テキストユニットに独自のclass属性を設定したい」とは違い、それぞれのテキストユニット固有の設定を付与することができます。
たとえば、以下の画像ではid属性を追加できるように設定しました。
設定をするには管理画面とテンプレート側の設定が必要になります。
管理画面＞コンフィグ＞編集設定の順にページを移動し、テキストタグセレクトの項目に「拡張」という入力欄があります。この入力欄には、エントリー編集時の入力欄に適応したいラベルを設定してください。
「拡張」の入力欄に値が入っていると、エントリー編集ページで新しく入力欄が表示されます。
/themes/オリジナルのテーマ/include/unit.html を修正します（※オリジナルのテーマに/include/unit.htmlがない場合は、systemテーマからコピーしてください）。
{extend_tag}という変数を適応したいテキストタグセレクトに追加してください。たとえば、h2要素にid属性を付与したい場合は以下のように記述してください。
<!-- BEGIN h2 -->
<h2{class} <!-- BEGIN_IF [{extend_tag}/nem] -->id="{extend_tag}"<!-- END_IF -->>{text}[nl2br]</h2><!-- END h2 -->※最新バージョンではh2,h3,h4,h5要素にはデフォルトで/include/unit.htmlにid属性を適用するための記述が行われています。
「テキストユニットの設定に拡張フィールドを追加する」方法は以上となります。確認すると、エントリー編集時に入力した値が反映されているはずです。
標準の設定では、画像は画像ユニットを利用し、見出しはテキストユニットを利用します。ここでは、画像を見出しとして設定する「画像見出し」ユニットを用意する方法を説明します。
ユニットを追加する際に「画像見出し」を追加できるようにする必要がありますので、管理ページ ＞ コンフィグ ＞ 編集設定 ＞ ユニット追加ボタン から以下のような設定を追加します。
| モード | image_h2 |
|---|---|
| ラベル | 画像見出し |
管理ページ ＞ コンフィグ ＞ ユニット設定 にアクセスし、「画像見出しを追加」というボタンが増えているのを確認できます。また、一番下に「画像見出し」というユニットが追加されていますので、そこに「画像見出し」ボタンをクリックして1つ画像見出しユニットを追加してください。
ユニットのカスタマイズには /themes/system/include/unit.html をカスタマイズすると、テキストユニットや画像ユニットをカスタマイズできます。（※ CMSのバージョンアップデート時に上書きしてしまう可能性があるため、このファイル自身を修正するのではなく、現在制作しているテーマの include/unit.html にコピーして修正ください）
そこで、今回は画像ユニットを改良して、画像見出しユニットを作ります。アイデア次第では、同じような考え方でオリジナルのテキストユニットを作ることが可能です。
<!-- BEGIN unit#image -->
<!-- 画像 -->
<div class="column-image-{align}{display_size_class}"{display_size}[raw]><!-- BEGIN link#front -->
<a href="{url}"{viewer}[raw]><!-- END link#front -->
<img class="columnImage" src="%{HTTP_ROOT}{path}" alt="{alt}" width="{x}" height="{y}"><!-- BEGIN link#rear -->
</a><!-- END link#rear --><!-- BEGIN_IF [{caption}/nem] -->
<p class="caption">{caption}</p><!-- END_IF -->
</div><!-- END unit#image --><!-- BEGIN unit#image_h2 -->
<!-- 画像見出し -->
<h2><img src="%{HTTP_ROOT}{path}" alt="{alt}" width="{x}" height="{y}"></h2>
<!-- END unit#image_h2 -->今回のカスタマイズのポイントは、ユニット追加ボタンのモードの設定で、標準のモード＋アンダーバー＋任意の文字 でモードを記述し、標準のモードを継承したユニットを作ることです。
下記に、デフォルトのモードを一覧にした表を用意いたしました。参考にしてください。
| text | テキストユニット |
|---|---|
| table | テーブルユニット |
| image | 画像ユニット |
| file | ファイルユニット |
| map | マップユニット |
| video | ビデオユニット |
| eximage | 画像URLユニット |
| yolp | Yahoo地図ユニット |
| video | ビデオユニット |
| media | メディアユニット |
| quote | 引用ユニット |
| module | モジュールユニット |
| break | 改ページユニット |
| custom | カスタムユニット |
上のようにa-blog cmsでは、2.1からユニットに対して複数の項目を登録することができるようになりました。この機能を使えば多言語対応のサイトを作ることも可能です。 例えば、http://example.com/には日本語を、http://example.com/en/には英語をユニットに表示することが可能です。
/themes/system/admin/entry/unit.htmlを自分のテーマにコピーしてきます。 多言語したいユニットのブロックを以下のように編集します。（ソースはテキストユニットを多言語化する場合になります）
<!-- BEGIN text -->
<div class="acms-admin-tabs-inverse">
<ul class="js-acms_admin_tabs">
<li><a href="#tab{id}_ja">日本語</a></li>
<li><a href="#tab{id}_en">English</a></li>
</ul>
<div id="tab{id}_ja" class="acms-admin-tabs-panel">
<textarea type="text" name="text_text_{id}[]" rows="10" style="width:100%;" class="entryFormTextarea {diff}" placeholder="日本語">{text}[escape|escvars]</textarea>
</div>
<div id="tab{id}_en" class="acms-admin-tabs-panel">
<textarea type="text" name="text_text_{id}[]" rows="10" style="width:100%;" class="entryFormTextarea {diff}" placeholder="English">{text2}[escape|escvars]</textarea>
</div>
</div>
<br />
<div class="js-extendTagSelect">
<select name="text_tag_{id}"><!-- BEGIN textTag:loop -->
<option value="{value}" {selected} data-tag_extend="{extend}">{label}</option><!-- END textTag:loop -->
</select>
<span class="acms-admin-extend-field"></span>
<input type="text" name="text_extend_tag_{id}" value="{extend_tag}" />
</div>
<div class="editTextInsert">
<span class="emoji-edit acms-admin-hide-sp"></span><!-- BEGIN_IF [%{MEDIA_LIBRARY}/eq/on] -->
<a href="#" class="js-media_insert">メディアを挿入</a><!-- END_IF -->
</div><!-- END text -->カスタマイズのポイントは、input要素のname属性に[]をつけることで、配列化させます。また入力値を表示する変数は2つめ以降の変数に数値をつけて入力値を表示します。例：{text2} {text3}...と多言語数に応じて増えていく。
/themes/site2015/admin/entry/unit_language.html が多言語ユニット編集画面のサンプルになりますのでご参考ください。
表示側はテンプレートを分けることにより実装します。ここではテーマから分けて実装していきます。 まずカスタマイズされたテーマを継承して「en@カスタマイズテーマ」というディレクトリを/themes/に作成します。
次に、/themes/system/include/unit.htmlをen@カスタマイズテーマにコピーします。 編集画面のカスタマイズではテキストユニットを多言語化したので、表示側もテキストユニットを多言語化させます。このテーマは英語のテーマになるので、テキストユニットの英語の入力が表示されるようにします。
<!-- テキスト -->
<!-- BEGIN p -->
<p{class}>{text2}[nl2br]</p><!-- END p --><!-- BEGIN h2 -->
<h2{class} id="{extend_tag}">{text2}[nl2br]</h2><!-- END h2 --><!-- BEGIN h3 -->
<h3{class} id="{extend_tag}">{text2}[nl2br]</h3><!-- END h3 --><!-- BEGIN h4 -->
<h4{class} id="{extend_tag}">{text2}[nl2br]</h4><!-- END h4 --><!-- BEGIN h5 -->
<h5{class} id="{extend_tag}">{text2}[nl2br]</h5><!-- END h5 --><!-- BEGIN ul -->
<ul{class}>{text2}[list]</ul><!-- END ul --><!-- BEGIN ol -->
<ol{class}>{text2}[list]</ol><!-- END ol --><!-- BEGIN dl -->
<dl{class}>{text2}[definition_list]</dl><!-- END dl --><!-- BEGIN blockquote -->
<div class="entry-container"><blockquote{class}>{text2}[nl2br]</blockquote></div><!-- END blockquote --><!-- BEGIN table -->
<div class="entry-container"><table{class}>{text2}[table]</table></div><!-- END table --><!-- BEGIN pre -->
<div class="entry-container"><pre{class}>{text2}</pre></div><!-- END pre --><!-- BEGIN none -->
{text2}[raw]<!-- END none --><!-- BEGIN markdown -->
{text2}[markdown]<!-- END markdown --><!-- BEGIN wysiwyg -->
{text2}[raw]<!-- END wysiwyg -->
<!--#include file="/include/unit/tag-select.html"-->
<!-- END unit#text -->元のテキストユニットと違うところは、出力されるテキストの変数{text}が{text2}に変更されているのみになります。
/themes/site2015/include/unit_language.html が多言語ユニットの表示側サンプルになりますのでご参考ください。
エイリアス機能を使ってURLで表示言語を切り替えられるように実装します。
右上の「エイリアス作成」をクリック
多言語対応では、a-blog cmsの「エイリアス」機能を使います。エイリアス機能は、該当ブログを設定したドメイン以外のもので表示をすることができます。今回はひとつのエントリーを日本語用URLと英語用URLで表示するために使用します。
エイリアス管理画面
http://sample.com/en/ で英語表示ができるように設定します。
「ドメイン」は現在のブログで使っているドメインを、「コードネーム」はhttp://sample.com/◯◯/に入れたい文字列を入力してください。「名前」はわかりやすいものを自由につけてください。
エイリアス一覧
この後の工程で「エイリアスID」が必要になります。今回の場合（画像参照）は、「英語対応」エイリアスのIDは「1」です。
管理画面の「ルール」で先ほど作った「英語対応」エイリアスに対応する「英語対応」ルールを新規作成します。ルール機能では、各種IDやユーザーエージェントなどの条件ごとにコンフィグを変更することができます。
ルール作成画面
作成したルールの「詳細情報」内「エイリアスID」の項目にさきほどメモしたエイリアスID（本エントリーの場合は1）を入力し、演算子「=」を選択します。
ルール一覧
ルール一覧から先ほど作成した「英語対応」ルールのコンフィグに移動します。「コンフィグ」ボタンはルール名の右側にあります。
コンフィグの「テーマ」からこのルールで表示するテーマとして、「en@カスタムテーマ」を指定します。これで、http://sample.com/en/ のときにはテーマ「en@カスタムテーマ」が表示されるようになりました。
画像URLユニットは、外部に保存されている画像ファイルをエントリ内に表示させるためのユニットです。
通常、a-blog cmsでは画像ユニットを使用してサーバ上に画像ファイルをアップロードし、その画像ファイルを表示しています。
画像URLユニットは、外部のサーバにある画像のURLを直接指定して表示するものです。
画像URLユニット 出力結果
通常の画像ユニットの場合、アップロードした画像を元に標準画像と拡大画像が作られますが、画像URLユニットでは外部のサーバの画像を表示するため自動的には作られません。
このため、標準画像と拡大画像それぞれで使用する画像のURLを指定する必要があります。
管理ページ > コンフィグ > ユニット設定 にあるサイズセレクトで「画像URLサイズ選択肢」で設定したサイズが選択できます。通常の画像ユニットとは別の設定となりますのでご注意ください。
通常の画像ユニットと同様に編集画面内の「詳細」からキャプション、リンク、代替テキストの指定ができます。
画像URLユニット 編集画面
通常の画像ユニットにある拡大表示の制限、画像の回転は、画像URLユニットでは使用できません。
テーブルユニットを使うと、ExcelやGoogleスプレッドシートのように表組の中にデータを入力することができます。Ver. 2.7.0以降で使用できます。
引用ユニットを利用するには管理画面のコンフィグ > 編集設定画面から設定をする必要があります。下の図のように追加ボタンを押し、モードからテーブルを選択し、それに対するラベルの名前を決めてください。ラベルの名前は任意です。保存をすれば設定したラベル名のついたボタンがエントリーの編集画面で使えるようになっています。
まず、ユニットの追加でテーブルユニットを選択します。 選択した時点で、入力部分がテーブルユニット専用のツール等を備えた画面に切り替わります。 セル内にデータを入力し、ツールアイコンを利用することで、様々な装飾ができます。
| 1 | ソースとシートの切り替え | 入力画面の表示内容をHTMLに切り替えます |
| 2 | セルの結合 | 縦方向・横方向にセルを結合します。複数のセルを選択して使用します。 |
| 3 | セルの分割 | 結合済みのセルを分割します。 |
| 4 | 元に戻す | 入力画面上で行った動作を取り消し、1つ前の状態に戻します。 |
| 5 | td化 | 選択したセルをtd(TableData)に指定します。 |
| 6 | th化 | 選択したセルをth(TableHeader)に指定します。 |
| 7 | 左寄せ | セル内のデータを左寄せにします。 |
| 8 | 中央寄せ | セル内のデータを中央寄せにします。 |
| 9 | 右寄せ | セル内のデータを右寄せにします。 |
| 10 | セル内データの表示修正 | プルダウンメニューで「折り返し無し」「太字」「上寄せ」「縦方向中央寄せ」「下寄せ」を選択してセル内データの表示を修正します。1つのセルに対しては選択肢の1つしか反映されません。 |
| 11 | テーブル内データの表示修正 | デフォルトではプルダウンメニューで「スクロールするテーブル」が選択できるようになっています。1つのテーブルに対しては選択肢の1つしか反映されません。 |
各行および列の左端・上端には三角マークがあり、これをクリックすることで行および列の追加と削除ができます。
下の画像のようにセルの装飾項目はデフォルトで「折り返し無し」「太字」「上寄せ」「中央寄せ」「下寄せ」ですがこの装飾項目はJavaScriptを使うことで自分で増やすことが可能です。
ACMS.Ready(function(){
ACMS.Config.aTableSelector.push({
label: "グレーの背景",
value: "bg_grey"
});
});上記のJavaScriptの場合、「背景ブルー」という項目がオプションとして追加され、その項目が選ばれたセルに対しては「bg_blue」というクラスが付与されます。
またVer.2.8より、テーブル要素自体に対してもクラスを付与することができるようになりました。デフォルトでは「スクロールするテーブル」という項目が一つだけ選択でき、その際にはそのテーブルに対して、「.acms-table-scrollable」というクラスが付与されます。
ACMS.Ready(function(){
ACMS.Config.aTableOption.push({
label: '角丸のテーブル',
value: 'rounded-table'
});
});Ver. 2.9より、地図（Open Street Map）ユニットが使用できるようになりました。 地図（Open Street Map）ユニットは、下の図のように緯度と経度または住所を入力すると該当の箇所の地図をOpen Street Mapを用いて表示するユニットです。 Ver. 2.8 までは地図を表示する場合、Google Maps か Yahoo!地図に限られていたのですが、両方とも API Key が必要になります。また Google Mapsについては制限が厳しくなり クレジットカード を登録しないと表示できない場合も出てきました。こういったAPI的な制限を回避したい場合は地図（Open Street Map）ユニットを使うことをおすすめします。 下の図のように、地図（Google Map）ユニットや、Yahoo!地図ユニットと同じようなインターフェースとなっています。
表側のページでの表示は、以下のようになります。地図（Google Map）ユニットとは違い、静止画ではないため、表示にはJavaScriptが動作することが前提となります。
地図ユニットを利用するには管理画面のコンフィグ > 編集設定画面から設定をしてください（新規インストール時には、すでに地図ユニットの設定はあるはずです）。図の下に位置している追加ボタンをクリックし、モードから「標準マップ」を選択し、それに対するラベルの名前を決めてください。保存をすれば設定したラベル名のついたボタンがエントリーの編集画面で使えるようになります。
編集設定後はエントリー編集画面より、追加されたユニットのボタンをクリックすることで使用できます。
Ver.2.9では、APIの使用回数の制限から、地図（Google Map）ユニットがこれ以上使えなくなった場合の対策として、すでに登録済みのユニットを地図（Open Street Map）ユニットに一括で変換する機能を用意しています。 変換したい場合は、下の図のように編集画面より、データ修正 > マップユニットのタイプ修正 と進んでください。
その後、ターゲットに「GoogleMaps」変更値に「標準マップ（Open Street Map）」を選択して修正ボタンを押すことで既存の地図（Google Map）ユニットが全て地図（Open Street Map）ユニットに変換されます。
リッチエディターユニットとはVer.2.11から追加された、ブロックでHTMLを記述できるエディター（SmartBlock）を搭載したユニットです。
ブロックにカーソルを合わせると以下のような見た目になります。
あらかじめ設定したタグ以外の情報が一切入りません。そのため、一般的なエディターでよくあるような、意図しないタグが知らない間に挿入されているといったことが起こりません。また他のページの内容をコピー、ペーストした際もあらかじめ設定したタグ以上の情報は入りません。
また、ブロックベースの考え方でできているため、見出しと本文を入れ替えたり画像と本文を入れ替えたり、順番の制御が容易に行えます。
SmartBlockはカスタマイズ性にもすぐれ、JavaScriptにそれほど精通していない人でも独自のブロックを作成することができます。
デフォルトでは追加ユニットのボタン群にリッチエディターボタンが追加されていないので、追加しましょう。 管理画面 > コンフィグ > 編集設定 の順にページを移動し、 ユニット追加ボタンより以下のようにリッチエディターを追加してください。
その後、エントリー編集画面に行くと以下のようにボタンが追加されているのが確認できます。
ボタンをクリック後、下図のような見た目でユニットが表示されます。
デフォルトでは、本文ブロック、見出し2ブロック、見出し3ブロック、リストブロック、番号付きリストブロック、引用ブロック、メディアブロックが利用できます。
本文ブロック
見出し2ブロック
見出し3ブロック
リストブロック
番号付きリストブロック
引用ブロック
メディアブロック
また、デフォルトで使えるブロック以外にも、テーブルブロック、ハイライトブロック、カスタムブロックが利用できます。
追加するにはJavaScriptを記述する必要があり、acms.jsの読み込み以降に ACMS.Ready関数を記述してください。以下はhead要素内の記述例です。
<script src="%{JS_LIB_JQUERY_DIR}jquery-%{JS_LIB_JQUERY_DIR_VERSION}.min.js"></script>
<!-- BEGIN_MODULE Js -->
<script src="%{ROOT_DIR}acms.js{arguments}" id="acms-js"></script><!-- END_MODULE Js -->
<!-- BEGIN_MODULE Touch_Unlogin --><!-- BEGIN_MODULE Blog_Field -->{google_analytics}[raw]<!-- END_MODULE Blog_Field --><!-- END_MODULE Touch_Unlogin -->
<script>
ACMS.Ready(function() {
// ここに処理を書いていく
});
</script>以下のJavaScriptを記述することでテーブルブロックを追加できます。
ACMS.Config.SmartBlockAdds = function(Extensions) {
return [new Extensions.Table()];
};以下のような見た目のブロックが出現し、行の追加・削除、列の追加・削除などテーブルを編集できるようになります。
テーブルブロック
セルを複数選択することで、セルの結合解除なども可能です。
テーブルブロック
またエンジニアには嬉しいコードブロックもあります。こちらは入力するたびに書いたソースコードがハイライトされるブロックです。 以下のJavaScriptを記述することでコードブロックを追加できます。
ACMS.Config.SmartBlockAdds = function(Extensions) {
return [new Extensions.Code()];
};コードブロック
また独自にブロックを定義して追加することも可能です。
ACMS.Config.SmartBlockAdds = function(Extensions) {
return [
new Extensions.CustomBlock({
tagName: 'div',
className: 'acms-alert',
customName: 'alert',
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 1792 1792"><title>アラート</title><path d="M1777.67,1567.49,960.05,49.07c-35.23-65.43-92.87-65.43-128.1,0L14.33,1567.49c-35.22,65.43-3.25,119,71.06,119H1706.61C1780.92,1686.45,1812.89,1632.92,1777.67,1567.49ZM1024,1536H768V1280h256Zm0-384H768L704,576h384Z"/></svg>'
})
]
};オリジナルブロック
カスタムブロックには以下のようなオプションが指定できます。
| プロパティ名 | 説明 | 記述例 |
|---|---|---|
| tagName | HTML要素を指定 | 例）p |
| className | クラス名を指定 | 例）acms-text-error |
| customName | ユニークな名前を記述 | 例）error-text |
| icon | アイコンを挿入するときはHTMLタグを記述 | 例）'<i class="fa fa-user"></i>' |
また、リッチエディターでは以下の画像のように、インライン装飾をするための仕組みがあります。デフォルトでは、強調、アンダーライン、打ち消し線、リンクの装飾を施すことができます。
また存在しない装飾はブロックと同じように独自に定義して追加することができます。以下のソースコードは、redというclass属性が適用されたspan要素を追加するサンプルコードになります。
ACMS.Config.SmartBlockAdds = function(Extensions) {
return [
new Extensions.CustomMark({
tagName: 'span',
className: 'red', // 任意の項目です。class属性を指定する際はこの項目を記述してください
customName: 'red-text',
icon: '<svg>...</svg>' // SVGまたはimg要素が指定可能です
})
]
};複数の設定を追加するときは、「,（カンマ）」区切りで記述します。
ACMS.Config.SmartBlockAdds = function(Extensions) {
return [
new Extensions.CustomMark({
tagName: 'span',
className: 'red',
customName: 'red-text',
icon: '<svg>...</svg>' // SVGまたはimg要素が指定可能です
}),
new Extensions.CustomMark({
tagName: 'span',
className: 'blue',
customName: 'blue-text',
icon: '<svg>...</svg>' // SVGまたはimg要素が指定可能です
})
]
};