ユニットの拡張機能

ユニットの拡張機能

ユニットの拡張機能をつかえば、デフォルトで出力されるエントリーのテキストユニットや画像ユニットに足りないHTMLやCSSを補うことが出来ます。この機能を使うことで、HTMLやCSSを知らない一般の方々でも簡単に装飾したユニットを扱っていただくことができます。
例としましては、下の図のようにテーブルを左右にスライドするテーブルや画像を画像見出しを作成することがカスタマイズで可能になります。

テーブルをスライドするテーブルに

入力例


出力例

<div class="entry-container slideTable">
    <table>
        <tbody>
            <tr>
                <th>会社名</th>
                <th>郵便番号</th>
                <th>住所</th>
                <th>電話番号</th>
            </tr>
            <tr>
                <td>有限会社アップルップル</td>
                <td>〒450-0002</td>
                <td>愛知県名古屋市中村区 3丁目18−5 モンマートビル5F</td>
                <td>052-485-8577</td>
            </tr>
        </tbody>
    </table>
</div>

画像を画像見出しに

入力例


出力例

<h2><img class="columnImage" src="/ablogcms/archives/001/201201/4ef13df83cca3.png" alt="ablog cms ロゴ" width="386" height="104"></h2>

標準ユニット一覧

拡張できるユニットはテキストユニットだけではなく、全てのユニットを拡張することができます。

textテキストユニット
image画像ユニット
fileファイルユニット
mapマップユニット
youtubeYouTubeユニット
eximage画像URLユニット
break改ページのユニット
yolpYahoo地図ユニット
videoビデオユニット
mediaメディアユニット
quote引用ユニット
moduleモジュールユニット
customカスタムユニット

カスタマイズするテンプレート

ご利用のテーマ内の/include/の中にunitディレクトリを作り、テキストユニットを拡張したい場合はtag-select.html、その他のユニットを拡張したい場合はextend.htmlを作成します。tag-select.htmlまたはextend.htmlに記述することで拡張することができます。

Ver.2.1.1.4以降より、unit.htmlに<!--#include file="/include/unit/tag-select.html"-->と<!--#include file="/include/unit/extend.html"-->のインクルード文が追加されました。

Ver.2.1.1.3以前のバージョンをお使いの方へ

Ver.2.1.1.3以前では、/themes/system/include/の中にあるunit.htmlをお使いのテーマのincludeディレクトリにコピーし、編集することで拡張したいユニットをカスタマイズすることができます。

実際にスライドするテーブルを作成する

今回はテキストユニットを拡張して、スライドするテーブルを設置してみましょう。先の例にありました画像見出しのカスタマイズについては画像の見出しを設定できるようにする | ユニットのカスタマイズ の記事で詳しく説明しておりますので、ご参考にしてください。

編集設定

管理画面のコンフィグにある編集設定より、下の図のように新たにユニットを追加します。このときモード拡張にしましょう。モードのとなりのテキストフィールドにはtext_slidetableのように拡張したいユニット名+アンダーバー+任意の文字列を入力します。


ユニット設定

設定したボタンに対して使用するユニットを設定します。今回はスライドテーブルを選択し、タグには「テーブル」を選択しましょう。


テンプレートの編集

次にテンプレートの編集をしていきます。今回はテキストユニットの拡張のため、Ver2.1.1.4以降をお使いの方はtag-select.htmlまたはVer.2.1.1.3以前ではunit.htmlの編集です。

tag-select.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の編集

unit.htmlはsystemテーマのincludeディレクトリの中にあります。このファイルを現在お使いのテーマにコピーしましょう。 unit.htmlの<!-- BEGIN unit:loop --><!-- END unit:loop -->内に、tag-select.html と同じように追記してください。

CSSの編集

見せ方に応じてCSSを編集しましょう。下は編集例になります。

.slideTable{
	overflow-x:scroll;
}
.slideTable table,
.slideTable tbody,
.slideTable tr,
.slideTable td,
.slideTable th{
	white-space: nowrap;
}

エントリーの編集画面

エントリーの編集画面から下の図のように、スライドテーブルを追加してご利用ください