わんコメのアンケート用カスタムCSS-わんコメ🐾なび

2023年5月4日・更新（選択式・リクエスト式を判別してそれぞれの投票方法の案内文を表示 /「アンケート準備中」の文章も変更可能に）
2023年5月5日・更新（結果でヘッターの案内文が出てしまっていたのを修正）

わんコメのアンケートテンプレートのデフォルトは、背景透過のシンプルなデザインとなっています。
このページで紹介するカスタムCSSをコピペすれば、背景用にフレーム画像を用意する必要なく、おしゃれなデザインにすることが可能です。

また、アンケート下部には、自動的に「選択式アンケート」と「リクエスト式アンケート」を判別してそれぞれの案内文を表示されるので、視聴者へ投票方法を説明することを省くことができます。

「アンケート準備中」の文章変更も可能です。

デザインサンプル

シンプル

CSSを表示


 @import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&family=Noto+Sans+JP:wght@700;900&display=swap');

:root {
  --one-bg-color: #f1f1f1; /* 背景色 */
  --one-text-color: #000; /* 基本的な文字色 */
  --one-selector-color: #f1f1f1; /* 番号の文字色 */
  --one-selector-bg-color: #000; /* 番号の背景色 */
  --one-bar-bg-color: #e6e6e6; /* グラフのバーの背景色 */
  --one-bar-color: #ff5800; /* グラフのバーの色 */
  --border-size: 15px; /* 角丸のサイズ */
  --Q-color: #deecea; /* Qの文字色 */
  --one-perparing-text: '　～準備中につき、しばらくお待ちください～　'; /* 回答受付前の文章 */
  --selective-info-text: '🔰「#番号」をコメントすることで投票できます'; /* 選択式の下部の説明文 */
  --request-info-text: '🔰「#リクエスト内容」をコメントすることで投票'; /* リクエスト式の下部の説明文 */
  --info-text-color: var(--one-selector-bg-color); /* 下部の説明文の色 */
  --one-base-margin: 1.5vh;
  --one-base-padding: .5vh 1.45vh;
  --one-font-size: 2.5vh;
  --one-shadow-0: none;
  --one-shadow-color: #000;
  --one-border-color: rgba(0, 0, 0, 0);
}

/* 質問タイトルの前に「Ｑ」をつける */
.title span::before {
  display: block;
  position: absolute;
  top: -.15em;
  bottom: 0;
  left: -.9em;
  margin: auto;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: calc(var(--one-font-size) * 3);
  content: 'Q';
  color: var(--Q-color);
  opacity: 0.5;
}

/* 下部に「投票方法の説明文」をつける */
.result-table-selective:after {
  position: relative;
  top: .5em;
  content: var(--selective-info-text);
  white-space:pre;
  font-size: calc(var(--one-font-size) * 1.3);
  color: var(--info-text-color);
}
.result-table-request:after {
  position: relative;
  top: .5em;
  content: var(--selective-info-text);
  white-space:pre;
  font-size: calc(var(--one-font-size) * 1.3);
  color: var(--info-text-color);
}
.esult-table-quiz:after {
}

/* ここから下は編集しないでください */
.container {
  height: auto;
  margin: 0;
  padding: 0;
  background-color: var(--one-bg-color);
  text-shadow: var(--one-shadow-0);
  border-radius: var(--border-size);
  box-shadow: 0px 3px 16px -2px rgba(10,10,10,0.2);
}
.header {
  color: #f1f1f1;
  background: #000;
  border-radius: var(--border-size) var(--border-size) 0 0;
  border: 0;
  margin: 0;
  padding: 0;
}
.title {
  position: relative;
  padding: .7em 0 .7em 0;
  font-size: calc(var(--one-font-size) * 1.6);
}
.title .preparing::before {
  content: var(--one-perparing-text);
  font-size: calc(var(--one-font-size) * 1.6);
  opacity: 1;
}
.title span[class="preparing"]::before {
  position: relative;
  top: .01em;
  content: var(--one-perparing-text);
}
.main {
  background: var(--one-bg-color);
  margin: 0;
  padding: 0;
  border-radius: 0 0 var(--border-size) var(--border-size);
}
.result-table {
  padding: 1em .8em 2em 1.5em;
  margin: 0;
}
.result-table td {
  background: rgba(0, 0, 0, 0);
  padding: var(--one-base-padding);
}
.result-table td:first-child, .result-table[data-type="request"] .label-cell {
  border-radius: 0;
}
.result-table td:last-child {
  border-radius: 0;
}
.result-table .selector-cell {
  width: calc(4vh * 2.3);
  left: 0;
  background: var(--one-selector-bg-color);
}
.selector {
  font-size: calc(var(--one-font-size) * 1.3);
}
.no {
  width: auto;
  margin: 0;
  padding: 0;
}
.label {
  font-size: calc(var(--one-font-size) * 1.3);
}
.result-table .graph {
}
.result-table .count{
  padding: 0 .5em;
}
.result-table .rank-cell {
  padding-left: .3em;
  padding-right: 2.8em;
}
.result-table .rank[data-is-top='true']::before {
  font-size: 1.5rem;
}
.other-items {
  font-size: calc(var(--one-font-size) * 1.2);
}

グラデーション

CSSを表示


@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&family=Noto+Sans+JP:wght@700;900&display=swap');

:root {
  --one-bg-color: #f1f1f1; /* 背景色 */
  --one-text-color: #000; /* 基本的な文字色 */
  --background-color-left: #6d69f7; /* 質問の背景色（グラデーション左上側） */
  --background-color-right: #34efd7; /* 質問の背景色（グラデーション右上側） */
  --one-selector-color: #fff; /* 番号の文字色 */
  --one-selector-bg-color: #6d69f7; /* 番号の背景色 */
  --one-bar-bg-color: #e6e6e6; /* グラフのバーの背景色 */
  --bar-color-left: #ff8838; /* グラフのバーの色・左 */
  --bar-color-right: #ff64d8; /* グラフのバーの色・右 */
  --border-size: 15px; /* 角丸のサイズ */
  --Q-color: #deecea; /* Qの文字色 */
  --one-perparing-text: '　～準備中につき、しばらくお待ちください～　'; /* 回答受付前の文章 */
  --selective-info-text: '🔰「#番号」をコメントすることで投票できます'; /* 選択式の下部の説明文 */
  --request-info-text: '🔰「#リクエスト内容」をコメントすることで投票'; /* リクエスト式の下部の説明文 */
  --info-text-color: var(--one-selector-bg-color); /* 下部の説明文の色 */
  --one-base-margin: 1.5vh;
  --one-base-padding: .5vh 1.45vh;
  --one-font-size: 2.5vh;
  --one-shadow-0: none;
  --one-shadow-color: #000;
  --one-border-color: rgba(0, 0, 0, 0);
}

/* 質問タイトルの前に「Ｑ」をつける */
.title span::before {
  display: block;
  position: absolute;
  top: -.15em;
  bottom: 0;
  left: -.9em;
  margin: auto;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: calc(var(--one-font-size) * 3);
  content: 'Q';
  color: var(--Q-color);
  opacity: 0.5;
}

/* 下部に「投票方法の説明文」をつける */
.result-table-selective:after {
  position: relative;
  top: .5em;
  content: var(--selective-info-text);
  white-space:pre;
  font-size: calc(var(--one-font-size) * 1.3);
  color: var(--info-text-color);
}
.result-table-request:after {
  position: relative;
  top: .5em;
  content: var(--selective-info-text);
  white-space:pre;
  font-size: calc(var(--one-font-size) * 1.3);
  color: var(--info-text-color);
}
.esult-table-quiz:after {
}

/* ここから下は編集しないでください */
.container {
  height: auto;
  margin: 0;
  padding: 0;
  background-color: var(--one-bg-color);
  text-shadow: var(--one-shadow-0);
  border-radius: var(--border-size);
  box-shadow: 0px 3px 16px -2px rgba(10,10,10,0.2);
}
.header {
  color: #fff;
  background-image: linear-gradient( 135deg, var(--background-color-left) 20%, var(--background-color-right) 100%);
  border-radius: var(--border-size) var(--border-size) 0 0;
  border: 0;
  margin: 0;
  padding: 0;
}
.title {
  position: relative;
  padding: .7em 0 .7em 0;
  font-size: calc(var(--one-font-size) * 1.6);
}
.title .preparing::before {
  content: var(--one-perparing-text);
  font-size: calc(var(--one-font-size) * 1.6);
  opacity: 1;
}
.title span[class="preparing"]::before {
  position: relative;
  top: .01em;
  content: var(--one-perparing-text);
}
.main {
  background: var(--one-bg-color);
  margin: 0;
  padding: 0;
  border-radius: 0 0 var(--border-size) var(--border-size);
}
.result-table {
  padding: 1em .8em 2em 1.5em;
  margin: 0;
}
.result-table td {
  background: rgba(0, 0, 0, 0);
  padding: var(--one-base-padding);
}
.result-table td:first-child, .result-table[data-type="request"] .label-cell {
  border-radius: 0;
}
.result-table td:last-child {
  border-radius: 0;
}
.result-table .selector-cell {
  width: calc(4vh * 2.3);
  left: 0;
  background: var(--one-selector-bg-color);
}
.selector {
  font-size: calc(var(--one-font-size) * 1.3);
}
.no {
  width: auto;
  margin: 0;
  padding: 0;
}
.label {
  font-size: calc(var(--one-font-size) * 1.3);
}
.result-table .graph {
}
.result-table .bar {
  background-image: linear-gradient( 45deg, var(--bar-color-left) 5%, var(--bar-color-right) 100%);
  opacity: 0.8;
  animation: huerotator 3s infinite alternate;
}
@keyframes huerotator {
  0% {
    -webkit-filter: hue-rotate(0deg);
    filter: hue-rotate(0deg);
  }

  100% {
    -webkit-filter: hue-rotate(180deg);
    filter: hue-rotate(180deg);
  }
}
.result-table .count{
  padding: 0 .5em;
}
.result-table .rank-cell {
  padding-left: .3em;
  padding-right: 2.8em;
}
.result-table .rank[data-is-top='true']::before {
  font-size: 1.5rem;
}
.other-items {
  font-size: calc(var(--one-font-size) * 1.2);
}

レインボー

※ 現在、グラフのバーのみアニメーションしていますが、将来、OBSが最新のCSSに対応すれば、縁のグラデーションも回転アニメーションするようになります。

CSSを表示


@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&family=Noto+Sans+JP:wght@700;900&display=swap');

:root {
  --one-bg-color: #232323; /* 背景色 */
  --one-shadow-color: #3c3c3c;
  --one-text-color: #fff; /* 基本的な文字色 */
  --one-selector-color: #fff; /* 番号の文字色 */
  --one-selector-bg-color: #6d69f7; /* 番号の背景色 */
  --one-bar-bg-color: #3e3e3e; /* グラフのバーの背景色 */
  --bar-color-left: #ff8838; /* グラフのバーの背景色・左 */
  --bar-color-right: #ff64d8; /* グラフのバーの背景色・右 */
  --border-color-1: #ff64d8; /* 背景の色（グラデーション） */
  --border-color-2: #458aff; /* 背景の色（グラデーション） */
  --border-color-3: #47ff76; /* 背景の色（グラデーション） */
  --border-color-4: #ff8838; /* 背景の色（グラデーション） */
  --border-size: 15px; /* 角丸のサイズ */
  --border-width: 8px; /* ボーダーのサイズ */
  --angle: 45deg; /* グラデーションの角度 */
  --opacity: 0.5; /* ボーダーの透明度 */
  --Q-color: #deecea;  /* Qの文字色 */
  --one-perparing-text: '　～準備中につき、しばらくお待ちください～　'; /* 回答受付前の文章 */
  --selective-info-text: '🔰「#番号」をコメントすることで投票できます'; /* 選択式の下部の説明文 */
  --request-info-text: '🔰「#リクエスト内容」をコメントすることで投票'; /* リクエスト式の下部の説明文 */
  --info-text-color: var(--one-selector-bg-color); /* 下部の説明文の色 */
  --one-base-margin: 1.5vh;
  --one-base-padding: .5vh 1.45vh;
  --one-font-size: 2.5vh;
  --one-border-color: rgba(0, 0, 0, 0);
  --one-shadow-0: none;
}

/* 質問タイトルの前に「Ｑ」をつける */
.title span::before {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -.9em;
  margin: auto;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: calc(var(--one-font-size) * 3);
  content: 'Q';
  color: var(--Q-color);
  opacity: 0.5;
}

/* 下部に「投票方法の説明文」をつける */
.result-table-selective:after {
  position: relative;
  top: .5em;
  content: var(--selective-info-text);
  white-space:pre;
  font-size: calc(var(--one-font-size) * 1.3);
  color: var(--info-text-color);
}
.result-table-request:after {
  position: relative;
  top: .5em;
  content: var(--selective-info-text);
  white-space:pre;
  font-size: calc(var(--one-font-size) * 1.3);
  color: var(--info-text-color);
}
.esult-table-quiz:after {
}

/* ここから下は編集しないでください */
*,
*::before,
*::after {
  box-sizing: border-box;
}
.container {
  height: auto;
  margin: 0;
  padding: .05rem;
  text-shadow: var(--one-shadow-0);
  border-radius: 25px;
  border: var(--border-width) dotted transparent;
  background-image: linear-gradient(
      to right,
      rgb(255 255 255 / var(--opacity)),
      rgb(255 255 255 / var(--opacity))
    ),
    conic-gradient(
      from var(--angle),
      var(--border-color-1),
      var(--border-color-2),
      var(--border-color-3),
      var(--border-color-4)
    );
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

@supports (background: paint(houdini)) {
  @property --angle {
    syntax: "";
    initial-value: 0deg;
    inherits: false;
  }

  @keyframes rotate {
    to {
      --angle: 360deg;
    }
  }

  .container {
    animation: rotate 5s linear infinite;
  }
}

.header {
  color: #fff;
  background: var(--one-bg-color);
  border-radius: var(--border-size) var(--border-size) 0 0;
  border: 0;
  margin: 0;
  padding: 0;
}
.title {
  position: relative;
  padding: 1em 0 .7em 0;
  font-size: calc(var(--one-font-size) * 1.6);
}
.title .preparing::before {
  content: var(--one-perparing-text);
  font-size: calc(var(--one-font-size) * 1.6);
  opacity: 1;
}
.title span[class="preparing"]::before {
  top: .2em;
  position: relative;
  content: var(--one-perparing-text);
}
.main {
  background: var(--one-bg-color);
  margin: 0;
  padding: 0;
  padding-top: 0;
  padding-bottom: 1.5em;
  border-radius: 0 0 var(--border-size) var(--border-size);
}
.result-table {
  padding: 0 .8em 0 1.5em;
  margin-bottom: 1em;
}
.result-table td {
  background: rgba(0, 0, 0, 0);
  padding: var(--one-base-padding);
}
.result-table td:first-child, .result-table[data-type="request"] .label-cell {
  border-radius: 0;
}
.result-table td:last-child {
  border-radius: 0;
}
.result-table .selector-cell {
  width: calc(4vh * 2.3);
  left: 0;
  background: var(--one-selector-bg-color);
}
.selector {
  font-size: calc(var(--one-font-size) * 1.3);
}
.no {
  width: auto;
  margin: 0;
  padding: 0;
}
.label {
  color: #fff;
  font-size: calc(var(--one-font-size) * 1.3);
}
.result-table .graph {
}
.result-table .bar {
  background-image: linear-gradient( 45deg, var(--bar-color-left) 5%, var(--bar-color-right) 100%);
  opacity: 0.8;
  animation: huerotator 3s infinite alternate;
}
@keyframes huerotator {
  0% {
    -webkit-filter: hue-rotate(0deg);
    filter: hue-rotate(0deg);
  }

  100% {
    -webkit-filter: hue-rotate(360deg);
    filter: hue-rotate(360deg);
  }
}
.result-table .count{
  color: #fff;
  padding: 0 .5em;
  text-shadow: var(--one-shadow-3);
}
.result-table .rank-cell {
  padding-left: .3em;
  padding-right: 2.8em;
}
.result-table .rank[data-is-top='true']::before {
  font-size: 1.5rem;
}
.marquee-text-wrap {
  width: auto;
}
.other-items {
  font-size: calc(var(--one-font-size) * 1.2);
}

レインボーPlus

レインボーにプラスして、質問タイトルの上に疑似フッターを付け加えたデザインです。
※ 現在、グラフのバーのみアニメーションしていますが、将来、OBSが最新のCSSに対応すれば、縁のグラデーションも回転アニメーションするようになります。

CSSを表示


@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&family=Noto+Sans+JP:wght@700;900&display=swap');

:root {
  --one-bg-color: #232323; /* 背景色 */
  --one-text-color: #fff; /* 基本的な文字色 */
  --one-selector-color: #fff; /* 番号の文字色 */
  --one-selector-bg-color: #6d69f7; /* 番号の背景色 */
  --one-bar-bg-color: #3e3e3e; /* グラフのバーの背景色 */
  --bar-color-left: #ff8838; /* グラフのバーの背景色・左 */
  --bar-color-right: #ff64d8; /* グラフのバーの背景色・右 */
  --border-color-1: #ff64d8; /* 背景の色（グラデーション） */
  --border-color-2: #458aff; /* 背景の色（グラデーション） */
  --border-color-3: #47ff76; /* 背景の色（グラデーション） */
  --border-color-4: #ff8838; /* 背景の色（グラデーション） */
  --border-size: 15px; /* 角丸のサイズ */
  --border-width: 8px; /* ボーダーのサイズ */
  --angle: 45deg; /* グラデーションの角度 */
  --opacity: 0.5; /* ボーダーの透明度 */
  --Q-color: #6d69f7; /* Qの文字色 */
  --one-info-text: '視聴者投票'; /* ヘッダー（一番上のテキスト） */
  --one-perparing-text: '　～準備中につき、しばらくお待ちください～　'; /* 回答受付前の文章 */
  --selective-info-text: '🔰「#番号」をコメントすることで投票できます'; /* 選択式の下部の説明文 */
  --request-info-text: '🔰「#リクエスト内容」をコメントすることで投票'; /* リクエスト式の下部の説明文 */
  --info-text-color: var(--one-selector-bg-color); /* ヘッダー＆フッターの説明文の色 */
  --one-base-margin: 1.5vh;
  --one-base-padding: .5vh 1.45vh;
  --one-font-size: 2.5vh;
  --one-border-color: rgba(0, 0, 0, 0);
  --one-shadow-0: none;
}

/* ヘッダー */
.header::before {
  display: block;
  position: relative;
  top: 0;
  content: var(--one-info-text);
  font-size: calc(var(--one-font-size) * 2);
  font-weight: 900;
  color: var(--info-text-color);
}

/* 下部に「投票方法の説明文」をつける */
.result-table-selective:after {
  position: relative;
  top: .5em;
  content: var(--selective-info-text);
  white-space:pre;
  font-size: calc(var(--one-font-size) * 1.3);
  color: var(--info-text-color);
}
.result-table-request:after {
  position: relative;
  top: .5em;
  content: var(--selective-info-text);
  white-space:pre;
  font-size: calc(var(--one-font-size) * 1.3);
  color: var(--info-text-color);
}
.esult-table-quiz:after {
}

/* ここから下は編集しないでください */
*,
*::before,
*::after {
  box-sizing: border-box;
}
.container {
  height: auto;
  margin: 0;
  padding: .05rem;
  text-shadow: var(--one-shadow-0);
  border-radius: 25px;
  border: var(--border-width) dotted transparent;
  background-image: linear-gradient(
      to right,
      rgb(255 255 255 / var(--opacity)),
      rgb(255 255 255 / var(--opacity))
    ),
    conic-gradient(
      from var(--angle),
      var(--border-color-1),
      var(--border-color-2),
      var(--border-color-3),
      var(--border-color-4)
    );
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

@supports (background: paint(houdini)) {
  @property --angle {
    syntax: "";
    initial-value: 0deg;
    inherits: false;
  }

  @keyframes rotate {
    to {
      --angle: 360deg;
    }
  }

  .container {
    animation: rotate 5s linear infinite;
  }
}

.header {
  color: #fff;
  background: var(--one-bg-color);
  border-radius: var(--border-size) var(--border-size) 0 0;
  border: 0;
  margin: 0;
  padding:0;
  padding-top: 1.2em;
  padding-bottom: .5em;
  text-align: center;
}
.title {
  position: relative;
  padding: 0;
  font-size: calc(var(--one-font-size) * 1.6);
}
.title .preparing::before {
  content: var(--one-perparing-text);
  font-size: calc(var(--one-font-size) * 1.6);
  opacity: 1;
}
.title span[class="preparing"]::before {
  position: relative;
  top: .2em;
  content: var(--one-perparing-text);
}
.main {
  background: var(--one-bg-color);
  margin: 0;
  padding: 0;
  padding-top: .3em;
  padding-bottom: 1.5em;
  border-radius: 0 0 var(--border-size) var(--border-size);
}
.result-table {
  padding: 0 .8em 0 1.5em;
  margin-bottom: 1em;
}
.result-table td {
  background: rgba(0, 0, 0, 0);
  padding: var(--one-base-padding);
}
.result-table td:first-child, .result-table[data-type="request"] .label-cell {
  border-radius: 0;
}
.result-table td:last-child {
  border-radius: 0;
}
.result-table .selector-cell {
  width: calc(4vh * 2.3);
  left: 0;
  background: var(--one-selector-bg-color);
}
.selector {
  font-size: calc(var(--one-font-size) * 1.3);
}
.no {
  width: auto;
  margin: 0;
  padding: 0;
}
.label {
  font-size: calc(var(--one-font-size) * 1.3);
}
.result-table .graph {
}
.result-table .bar {
  background-image: linear-gradient( 45deg, var(--bar-color-left) 5%, var(--bar-color-right) 100%);
  opacity: 0.8;
  animation: huerotator 3s infinite alternate;
}
@keyframes huerotator {
  0% {
    -webkit-filter: hue-rotate(0deg);
    filter: hue-rotate(0deg);
  }

  100% {
    -webkit-filter: hue-rotate(180deg);
    filter: hue-rotate(180deg);
  }
}
.result-table .count{
  padding: 0 .5em;
}
.result-table .rank-cell {
  padding-left: .3em;
  padding-right: 2.8em;
}
.result-table .rank[data-is-top='true']::before {
  font-size: 1.5rem;
}
.other-items {
  font-size: calc(var(--one-font-size) * 1.2);
}

使い方

上の「デザインサンプル」からお好みのデザインの［CSSを表示］をクリックし、［コピー］をクリック。

OBSに入れたアンケートテンプレート（index.html）をダブルクリックし、プロパティを開く。

アンケートテンプレートをOBSに入れる方法

わんコメの［］>［アンケート］にある［ここをドラッグしてOBSに入れる］をOBSのプレビュー画面にドラッグ＆ドロップ。

プロパティの［カスタム CSS］にコピーしたCSSをペーストし、［OK］をクリック。

TIPS

フォントサイズは、プロパティの高さに依存します。
文字を大きくしたい場合は、高さの数値を大きくしてください。

案内文を変更する場合

下記の ' ' 内の文章を編集してください。


 :root {
  --one-info-text: '視聴者アンケート'; /* ヘッダー（一番上のテキスト） */
  --one-perparing-text: '　～準備中につき、しばらくお待ちください～　'; /* 回答受付前の文章 */
  --selective-info-text: '🔰「#番号」をコメントすることで投票できます'; /* 選択式の下部の説明文 */
  --request-info-text: '🔰「#リクエスト内容」をコメントすることで投票'; /* リクエスト式の下部の説明文 */
 }

TIPS

「レインボーPlus」は「ヘッダー（一番上のテキスト）」の編集もできます。
クイズの場合は「視聴者クイズ」、人狼ゲームの場合は「視聴者投票」など、臨機応変に変更してみてください。

質問タイトルに「Q」が必要ない場合

下記の部分を削除してください。


/* 質問タイトルの前に「Ｑ」をつける */
.title span::before {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -.9em;
  margin: auto;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: calc(var(--one-font-size) * 3);
  content: 'Q';
  color: var(--Q-color);
  opacity: 0.5;
}

TIPS

OBSのテンプレートにおいて、回答受付中のタイトル部分は［質問タイトル］になりますが、わんコメ5.0の新機能「クイズ」で［結果をテンプレートに表示］した際のタイトル部分は、［アンケート名］になります。

クイズで使う場合の注意点

［Ｑ］装飾は［結果をテンプレートに表示］した際にも表示されてしまうため、クイズ機能を使う場合は、［Ｑ］装飾を削除するか、［Ｑ］装飾のない「レインボーPlus」のCSSをご利用ください。

わんコメのアンケート用カスタムCSS

デザインサンプル

シンプル

グラデーション

レインボー

レインボーPlus

使い方

案内文を変更する場合

質問タイトルに「Q」が必要ない場合

クイズで使う場合の注意点

0 件のコメント:

コメントを投稿

このブログを検索

カテゴリ

人気の記事

わんコメ公式X