Guides

スクリプトでデザインを修正する

Suggest Edits

デザインの修正方法

スクリプトでAction SDKのユーティリティを利用すると、スクリプトで配信ページやアクションのデザインをカスタマイズすることができます。

配信ページをカスタマイズするには、SDKの applyGlobalCssとloadGlobalStyleを利用します。また、アクションをカスタマイズするには、applyCssとloadStyleを利用します。

詳細な情報は以下のドキュメントを参照してください:

アクションのデザイン修正の情報

アクションのデザイン修正では、以下のDOM要素の属性が利用します:

名前説明ユースケース
.karte-action-rootアクションのルートのDOM 要素が持つクラス名ページ内のアクションを特定するために利用
.modalアクションのDOM要素が持つクラス名アクションのレイアウトのデザイン調整
.backgroundアクションの背景のDOM要素が持つクラス名アクションの背景のデザイン調整
.state-itemアクションのステートのDOM要素が持つクラス名ステート単位のデザイン調整
.gridグリッドレイアウトのDOM要素が持つクラス名グリッドレイアウトのデザイン調整
.grid-itemグリッドエレメントのDOM要素が持つクラス名グリッドエレメントのデザイン調整
.text-elementアクションのテキストエレメントのDOM要素が持つクラス名テキストエレメントのデザイン調整。

特定のエレメントのデザイン調整をしたい場合に、data-grid-item-idと合わせて利用。
.text-button-elementアクションのテキストボタンエレメントのDOM要素が持つクラス名テキストボタンエレメントのデザイン調整。

特定のエレメントのデザイン調整をしたい場合に、data-grid-item-idと合わせて利用。
.image-elementアクションの画像エレメントのDOM要素が持つクラス名画像エレメントのデザイン調整。

特定のエレメントのデザイン調整をしたい場合に、data-grid-item-idと合わせて利用。
.closeアクションの閉じるボタンのDOM要素が持つクラス名閉じるボタンのデザイン調整
data-karte-action-idアクションのルートのDOM要素が持つアクションIDのデータ属性.karte-action-rootと合わせて、ページ内で複数のアクションが配信されているとき、アクションを特定するために利用
data-state-pathアクションのステートIDのデータ属性特定のステートのデザイン調整
data-grid-item-idアクションのグリッドエレメントのIDのデータ属性。

グリッドエレメントのIDが格納される。		特定のグリッドエレメントのデザイン調整

ページのデザイン修正の情報

KARTE Action Viewerを利用すると、ページのDOM要素のCSSセレクタを簡単に取得できます。

具体的な利用方法

配信ページのデザインを調整する

import { showAction, loadGlobalStyle, applyGlobalCss, applyCss } from '@plaidev/karte-action-sdk';

export default () => {
  showAction();

  // Styleファイルを配信ページへロード
  loadGlobalStyle('https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css');

  // CSSを配信ページへ適用
  applyGlobalCss(`\
    body {
      color: blue;
    }
  `);
};

アクションの位置の調整

import { showAction, onShow, applyCss } from '@plaidev/karte-action-sdk';

onShow(() => {
  applyCss(`\
    .modal {
      top: 12px;
      left: 12px;
      transform: none;
    }
  `);
});

export default () => {
  showAction();
};

アクションの背景の色の変更

import { showAction, onShow, applyCss } from '@plaidev/karte-action-sdk';

onShow(() => {
  applyCss(`\
   .background {
      background-color: red !important; /* スタイルによってimportant指定が必要 */
    }
  `);
});

export default () => {
  showAction();
};

アクションのサイズの変更

import { showAction, onShow, applyCss } from '@plaidev/karte-action-sdk';

onShow(() => {
  applyCss(`\
    .grid {
      width: 400px;
      height: 400px;
    }
  `);
});

export default () => {
  showAction();
};

テキストエレメントのパディングの調整

import { showAction, onShow, applyCss } from '@plaidev/karte-action-sdk';

onShow(() => {
  applyCss(`\
    .text-element {
      padding: 8px;
    }
  `);
});

export default () => {
  showAction();
};

テキストボタンエレメントのボーダースタイルの変更

import { showAction, onShow, applyCss } from '@plaidev/karte-action-sdk';

onShow(() => {
  applyCss(`\
    .text-button-element {
      border-style: dashed;
    }
  `);
});

export default () => {
  showAction();
};

画像サイズの調整

import { showAction, onShow, applyCss } from '@plaidev/karte-action-sdk';

onShow(() => {
  applyCss(`\
    .image-element img {
      width: 100px;
      height: 100px;
    }
  `);
});

export default () => {
  showAction();
};

閉じるボタンのSVG画像の調整

import { showAction, onShow, applyCss } from '@plaidev/karte-action-sdk';

onShow(() => {
  applyCss(`\
    .close path {
      fill: red;
    }
  `);
});

export default () => {
  showAction();
};

特定ステートのアクションの背景色の変更

import { showAction, onShow, applyCss } from '@plaidev/karte-action-sdk';

onShow(() => {
  applyCss(`\
    .state-item[data-state-path="/"] ~ .modal {
      background-color: pink;
    }
  `);
});

export default () => {
  showAction();
};

特定の画像エレメントの表示領域の調整

import { showAction, onShow, applyCss } from '@plaidev/karte-action-sdk';

onShow(() => {
  applyCss(`\
    .grid-item[data-grid-item-id="eJYQw25Q"] .image-element img {
      object-position: 12px 12px;
    }
  `);
});

export default () => {
  showAction();
};

Updated 12 months ago

What’s Next