Q.コード編集：ボタンの色のカスタマイズ方法は？

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ページでコードを入力後は、右上のボタンから必ず保存をしてください。

保存せずにページを移動した場合、書いたコードが消えてしまいますのでご注意ください。