カラー設定
使い方
- プリセット：お好みのテーマをクリックで一括設定
- カラーピッカー：色をクリックして視覚的に選択
- カラーコード入力：#ff0000 形式で直接入力も可能
- プレビュー：右側で実際の見た目を確認しながら調整
プリセットテーマ
サイドバー・背景
テキスト色
プライマリボタン・ユーザー吹出し
「新しい会話を始める」ボタン
クイックリプライ
プレビュー
生成されたコード
<script>
// miiboカラーカスタマイズ - 自動生成コード
(function() {
var customStyleInjected = false;
var css = '\
.card-body h5 { color: #212529 !important; }\
.card-body .text-muted { color: #6c757d !important; }\
.sidebar { background-color: #F5F6FA !important; }\
.card-body .btn.btn-secondary { background-color: #EDEEF6 !important; border-color: #EDEEF6 !important; }\
.card-body .btn.btn-secondary:hover { background-color: #D3D7E9 !important; border-color: #D3D7E9 !important; }\
.list-group .text-dark { color: #495057 !important; }\
.message-row .message-content.bg-light { background-color: #f8f9fa !important; color: #212529 !important; }\
.message-content.bg-primary { background-color: #0176FF !important; }\
.btn-primary, button.btn-primary, input.btn-primary, a.btn-primary, .btn.btn-primary, [class*="btn-primary"] { background-color: #0176FF !important; border-color: #0176FF !important; }\
.btn-primary:hover { background-color: #0064DA !important; border-color: #0064DA !important; }\
.card .btn-block.btn-basic { background-color: #f8f9fa !important; border-color: #e9ecef !important; color: #495057 !important; }\
.card .btn-block.btn-basic:hover { background-color: #e9ecef !important; border-color: #dee2e6 !important; color: #343a40 !important; }\
';
function injectStyles() {
if (customStyleInjected) return;
var style = document.createElement('style');
style.type = 'text/css';
style.setAttribute('data-gtm-style', 'custom');
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
var head = document.head || document.getElementsByTagName('head')[0];
if (head) {
head.insertBefore(style, head.firstChild);
customStyleInjected = true;
}
}
injectStyles();
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', injectStyles);
}
if (window.MutationObserver) {
var observer = new MutationObserver(function(mutations) {
var shouldUpdate = mutations.some(function(mutation) {
return mutation.addedNodes.length > 0;
});
if (shouldUpdate) {
setTimeout(injectStyles, 10);
}
});
if (document.body) {
observer.observe(document.body, {
childList: true,
subtree: true
});
}
}
})();
</script>
設定方法
Google Tag Managerの設定方法はこちらの公式記事をご覧ください
記事タイトル：「Google Tag ManagerでmiiboのUIカラーをカスタマイズする」