カスタムコードブロックの追加情報

注:この記事では、2019年2月18日にリリースされた新しいビジュアルデザインスタジオガイド(Visual Design Studio Guide)の操作性を取り上げます。この日付以前からのお客様で、クラシックデザイナーを使用したいとお考えの場合は、前のバージョンを参照してください。

概要

ビジュアルデザインスタジオ(Visual Design Studio)は、技術者以外のユーザーにも使いやすいように作られていますが、技術者の方はコードブロックを使用することで、ガイドで追加のカスタマイズオプションを活用できます。[コードブロック(Code Block)]を選択すると、HTML、CSS、またはJavaScriptを追加するよう求められます。

custom-code-block.png

ビルディングブロックのクラスを見つける方法

それぞれのビルディングブロックにはIDが割り当てられています。現在、ブラウザの検証機能で、カスタムコード内で使用するクラスを見つけることができます。例えば、Chromeユーザーがガイドのプレビューで要素を右クリックして検証を行うと、以下のような表示になります。

inspect-example.png

この検証例ではp#pendo-text-521f03a1...の中のpがクラスを示し、#pendo-text-521f03a1が一意のIDを示しています。

CSSセレクターについて詳しくは、こちらのW3の記事を参照してください。

グローバルスタイルをガイドに追加する方法

近日公開予定。Pendoでは、ビジュアルデザインスタジオで、管理者がCSSを使わずにテーマと呼ばれるグローバルスタイルを設定できるオプションを現在開発中です。グローバルスタイルを設定すると、ユーザーが新しいガイドを作成する際に、ガイドテーマのオプションが継承されます。

テーマは現在、ベータ版プログラムで使用できます。Pendoの管理者であれば、Pendoの[ガイド(Guide)]セクションに[テーマ(Theme)]ボタンが表示されますので、お試しください。

ガイドのボタンクリック数を確認する方法

[ガイド]ボタンをフィーチャーとしてタグ付けすることで、誰が何回クリックしたを確認できます。詳細は、ガイド内のボタンのタグ付けの記事をご覧ください。

Pendoサブスクリプションでコードブロックを無効にすることはできますか?

はい。Pendoサブスクリプションのコードブロックを無効にしたい場合は、Pendoの担当者に連絡してリクエストを追加してください。