Q . コード編集：フォトフレームのカスタマイズ方法は？

コード編集機能を使った、体験画面UIのカスタマイズについてサンプルコードと共に案内します。
コード編集では何ができますか？

基本

各要素のIDやclass属性などを利用してセレクタを定義し、スタイルやイベントを適用することで見た目や動作のカスタマイズができます。

各要素の属性値

フォトフレームの各要素は固有のdata-ar-photoframe-id値を持ちます。

data-ar-photoframe-id値の確認

この値は編集画面より確認できます。(※)
（※ 現在開発中のためまだご利用になれません。それまではブラウザの開発ツールを使ってid値をご確認ください。）

 

サンプルコード

カスタムCSS

フォトフレームを体験時には非表示にして、撮影画面のみ表示させるサンプルです。

/* フォトフレーム */
#ar-photoframe-container {
opacity: 0;
}