a-blog cms テーブルユニットに任意の項目を追加したい

以前のブログはこちら

広告

こんにちは。ましじめの田村です。

私が執筆した著書、『現場のプロから学ぶ CSSコーディングバイブル』は、Web制作の現場で役立つテクニックやノウハウをまとめています。
興味を持っていただけた方は、ぜひご覧ください。
https://amzn.to/3A8kNHC

このリンクは Amazon のアフィリエイトプログラムを通じて設定されています。

a-blog cmsのユニットでテーブルユニットというテーブル用の便利ユニットがあります。
今回はテーブルユニットの装飾項目を増やす場合の手順を紹介します。

装飾項目はJavaScriptで追加可能です。
全体で読み込んでいるJSファイルに次の形で追加します。

追加方法

.push()で項目の追加 [ ]で項目の再定義が可能です。

//セルの装飾項目
ACMS.Config.aTableSelector.push({
  "label": "ラベル名",
  "value": "クラス名"
})
ACMS.Config.aTableSelector = []

 //テーブルの装飾項目
ACMS.Config.aTableOption.push()
ACMS.Config.aTableOption =  []

labelは表示される項目名です。
valueはクラス名です。複数指定したい場合は半角スペースの後に続けて記入します。

使用例

ACMS.Ready(function() {})の中に記述します。

ACMS.Ready(function() {

//セルの装飾項目

ACMS.Config.aTableSelector.push({
       "label": "改行させない",
       "value": "is-nowrap"
 });

 //テーブルの装飾項目

  ACMS.Config.aTableOption = [
    {
      label: "テーブル",
      value: "table"
    },
    {
      label: "縦線なし",
      value: "table is-table-borderless"
    },
    {
      label: "SP時ブロック",
      value: "table is-table-sp-block"
    },
    {
      label: "SP時スクロール",
      value: "table is-table-scrollable acms-table-scrollable "
    }
  ];
})

});

画像のように項目が増えたと思います。

JavaScriptのオプション追加で設定を変更できるのはうれしいですね。
テーブルユニットの項目を追加したい場合は参考にしてみてください。

テーブルユニットについて詳しくはマニュアルをご覧ください。
テーブルユニット


関連するタグ

この記事を書いた人

たむら しょうご

HTML&CSSコーダー

ウェブアクセシビリティ対応、フロントエンド開発、CMSを利用したウェブサイト制作を担当しています。
趣味はガーデニングです。

ましじめのスキルが必要ですか?

遠慮なくご相談ください。我々はあなたのプロジェクトに最善を尽くし、あなたのウェブサイトの制作を強力にサポートいたします。

お問い合わせはこちらから