A . コード編集機能を使った、体験画面UIのカスタマイズについてサンプルコードと共に案内します。
コード編集では何ができますか?
1.編集画面を開く
AR編集画面の左のタブからコード編集を開き、カスタムCSSを選択いただくと、こちらの画面でコードを書いていただけます。
※ カスタムCSSページでコードを入力後は、必ず保存するようにしてください。
保存せずにページを移動した場合、書いたコードが消えてしまいますのでご注意ください。
注意点
- 埋め込むコードにより、ARやその他の機能と干渉しうまく表示されない場合があります。
- 埋め込みコードの詳細についてはサポートしていません。
2.用途別にコードを入れていく
用途別に、サンプルコードの赤文字にカラーコードを入カし、カスタマイズを行なってください。
このサンプルコードでは、モーダルコンテンツ・モーダルボタン・共有ボタン・保存ボタン・閉じるボタンの5箇所の色をそれぞれ変化させることができます。また、複数カスタマイズしたい場合の方法についても記載しております。
◯モーダルコンテンツ
.modal-container .modal-content{
background-color: #FFFFFF; /* ボタンの背景色 */
border: 2px solid #FFFFFF; /* ボタンの輪郭線の色 */
color: #000000; /* テキストの色 */
}
◯モーダルボタン
.modal-container .ar-modal-button {
background-color: #FFFFFF; /* ボタンの背景色 */
border: 2px solid #FFFFFF; /* ボタンの輪郭線の色 */
color: #000000; /* テキストの色 */
}
◯撮影後:共有ボタン
.modal-container .capture-share {
background-color: #FFFFFF; /* ボタンの背景色 */
border: 2px solid #FFFFFF; /* ボタンの輪郭線の色 */
color: #000000; /* テキストの色 */
}
◯撮影後:保存ボタン
.modal-container .capture-save {
background-color: #FFFFFF; /* ボタンの背景色 */
border: 2px solid #FFFFFF; /* ボタンの輪郭線の色 */
color: #000000; /* テキストの色 */
}
◯撮影後:閉じるボタン
.modal-container .capture-close {
background-color: #FFFFFF; /* ボタンの背景色 */
border: 2px solid #FFFFFF; /* ボタンの輪郭線の色 */
color: #000000; /* テキストの色 */
}
◯複数のカスタマイズ
赤文字部分を変更し、カスタマイズしたい場所・カラーコードを入力してください。
また、画像赤枠のようにカスタマイズしたい場所を増やすことで、同時により多くのボタンをカスタマイズできます。
▶︎同じ色でカスタマイズしたい場合はこちら
.modal-container .capture-share,
.modal-container .capture-save {
background-color: #FFFFFF; /* ボタンの背景色 */
border: 2px solid #FFFFFF; /* ボタンの輪郭線の色 */
color: #000000; /* テキストの色 */
}
▶︎異なる色でカスタマイズしたい場合はこちら
.modal-container .modal-content{
background-color: #FFFFFF; /* ボタンの背景色 */
border: 2px solid #FFFFFF; /* ボタンの輪郭線の色 */
color: #000000; /* テキストの色 */
}
.modal-container .ar-modal-button {
background-color: #FFFFFF; /* ボタンの背景色 */
border: 2px solid #FFFFFF; /* ボタンの輪郭線の色 */
color: #000000; /* テキストの色 */
}
〇カラーコード例
3.保存
カスタムCSSページでコードを入力後は、右上のボタンから必ず保存をしてください。
保存せずにページを移動した場合、書いたコードが消えてしまいますのでご注意ください。
コメント
0件のコメント
サインインしてコメントを残してください。