サイトの色や雰囲気に合わせて見た目を変えたいときの設定と操作を説明します。
こんなときに使います
たとえば：サイトの色や雰囲気に合わせて見た目を変えたい。
操作する画面の開き方
OptiBチャット → チャット設定 → デザイン。
1 メインカラー ／ 2 背景色 ／ 3 ヘッダータイトル
画像を押すと原寸で確認できます。
チャットの開き方を選ぶ
管理画面「OptiBチャット」の 「チャット設定」タブ > 「デザイン」 を開くと、「開き方」 という選択欄があります。
| 選ぶもの | どうなるか |
|---|---|
| パネル（標準） | これまでどおり、画面の右下（または左下）にチャットが開きます |
| 画面中央に大きく表示 | 画面全体が半透明の黒で覆われ、その中央に大きめのチャットが開きます |
選んだあとは、画面下の「デザインを保存」を押してください。
押さえておいていただきたいこと
- スマホでは、どちらを選んでも全画面で開きます。 「開き方」の違いが出るのはパソコンの画面だけです。
[optib_chat mode="fullscreen"]を貼ったページでは、この設定は使われません。 そのページは、これまでどおりページ全体がチャット画面になります。- 管理画面のプレビューでも中央表示になります。 「画面中央に大きく表示」を選んで保存すると、管理画面のプレビューも画面中央に開き、管理画面が黒い幕で覆われます。閉じるときは、チャット右上の「×」か、キーボードの Esc キーです。
- 「画面中央に大きく表示」のとき、黒くなった部分を押しても閉じません。 閉じるのは、チャット右上の 「×」 と、キーボードの Esc キー です。
書きかけの文が、画面の端をうっかり押しただけで消えてしまわないように、そうしてあります。
これらは同じ内容が「開き方」の欄のすぐ下にも小さく書かれています。
背景の暗さを変える
「画面中央に大きく表示」を選ぶと、「開き方」のすぐ下に 「背景の暗さ」 という欄が出ます（パネルを選んでいる間は出ません）。
- 0〜90 の数字で指定します。大きいほど背景が暗くなり、チャットに集中しやすくなります。
- 標準は 55 です。薄いと感じるときは 70〜85 あたりまで上げてみてください。
- 0 にすると背景は暗くなりません（幕は残るので、背景を押しても閉じない点は変わりません）。
変更したら、画面下の「デザインを保存」を押してください。管理画面のプレビューでも暗さを確かめられます。
背景をぼかす
そのすぐ下に 「背景のぼかし」 という欄も出ます（これもパネルを選んでいる間は出ません）。0〜20 の数字で指定し、大きいほど背景の形がぼやけて奇麗に引っ込み、チャットが浮き上がります（写真の多いページで特に効きます）。
標準は 0（ぼかさない）で、今までと見え方は変わりません。試すときは 6〜10 あたりから。背景の暗さと一緒に使えます。
表示位置を選ぶ
同じ「チャット設定 > デザイン」に 「表示位置」 の欄があり、右下 / 左下 から選べます。
チャットのボタンとパネルを、画面のどちら側に出すかの設定です。
アイコン画像の切り抜き（どこを見せるか決める）
「チャット設定 > デザイン」のアイコン欄で「メディアから選択」を押すと、切り抜き画面が開きます。
- 画像をドラッグして位置を合わせる
- スライダーで拡大・縮小する
- 横に出ている仕上がりの見本を見ながら決める
- 「この範囲で決定」を押す
ヘッダーアイコンは2か所に出ます
ヘッダーアイコンに入れた画像は、吹き出しの横のアイコンにも同じものが使われます。
ただし形が違います——ヘッダーは角の丸い四角、吹き出しの横はまん丸です。
そのため切り抜き画面には、両方の見え方が並んで出ます。
どちらでも不自然にならない位置を、それを見ながら決めてください。
知っておいていただきたいこと
- 切り抜き直したいときは、もう一度「メディアから選択」で同じ画像を選んでください。 元の画像はメディアライブラリに残っているので、何度でもやり直せます。
- 拡大は300%までです。 小さい画像を選んだときは、それより手前で止まります。引き伸ばしてぼやけた画像が保存されないようにするためです。
- 旧形式のアイコンは扱えません。 JPEG・PNG・GIF・WEBP に対応しています（GIFは切り抜くと動かなくなるので、静止画として保存されます）。
見た目を細かく調整する（カスタムCSS）
「チャット設定 > デザイン」のいちばん下に 「カスタムCSS」 という大きな入力欄があります。
色や余白の欄だけでは足りないとき、ここに CSS を書くと、チャットの見た目を自分で細かく変えられます。
空のままなら何も起きません（標準は空です）。
まず知っておいていただきたいこと
ここに書いた CSS は、そのままページ全体に対して有効になります。
「チャットの中だけに効く」ようにはなっていません。たとえば div { display: none; } と書くと、
チャットだけでなくサイト中の見出しや本文まで消えます。
チャットの中だけを変えるには、変えたい場所を名指しする記号（セレクタ）から書き始めます。
その一覧が、入力欄のすぐ下に載っています。 迷ったらそこから選んでコピーしてください。
（たとえば呼び出しの丸ボタンなら #optib-chat-toggle、AI側の吹き出しなら .optib-chat-msg.assistant です。）
管理画面が崩れて直せなくなったときの逃げ道（必ず先にお読みください）
前項のとおり、ここに書いた CSS は管理画面のプレビューにも当たります。
そのため、body や div のような広い書き方をして保存すると、
管理画面そのものが崩れて、カスタムCSSの欄を直せなくなることがあります。
そうなったときは、ブラウザのアドレス欄に次の URL を入れて開いてください。
（サイトのURL）/wp-admin/admin.php?page=optib-chat&optib_chat_no_custom_css=1
この URL で開いた画面だけ、カスタムCSSを読み込まずに表示します。
崩れていない画面で「デザイン」タブを開き、欄を直すか、空にして「デザインを保存」を押してください。
直したあとは、ふつうに管理画面を開き直せば元に戻ります。
この URL で開いている間は、「デザイン」タブのカスタムCSS欄の上に
「いまカスタムCSSを外して表示しています」と出ます。
プレビューだけが素の見た目になりますが、保存した CSS が消えたわけではありません。
URL から optib_chat_no_custom_css=1 を消して開き直せば元に戻ります。
同じリンクはカスタムCSSの欄のすぐ下にも置いてありますので、
画面が多少崩れていても、そこを押せば戻れます。
この逃げ道は管理画面だけのものです。公開ページには効きません
（お客様が URL を叩いてデザインを外す、ということは起きません）。
書き方の例
/* 呼び出しの丸ボタンを、角丸の四角にする */
#optib-chat-toggle { border-radius: 12px; }
/* AI側の吹き出しの文字を少し大きくする */
.optib-chat-msg.assistant { font-size: 15px; }
/* 選択肢のボタンを太字にする */
.optib-chat-option-btn { font-weight: 700; }
書けたら、画面下の「デザインを保存」を押してください。
管理画面のプレビューにも同じ CSS が当たりますので、そのまま見え方を確かめられます。
うまくいかないとき
- 見た目が変わらない … 書いた記号が、欄の下の一覧と一致しているか確かめてください。
行末の;や}の閉じ忘れがあると、そこから後ろがまるごと無視されます。 - サイトの別の場所まで変わってしまった … 一覧にある記号から書き始めていない可能性が高いです。
いったん欄を空にして保存すると、書く前の状態に完全に戻ります。 - 書いた内容は保存されるが動かない …
<から始まるタグのような記述は、安全のため無効化されます。
ここに書けるのは CSS だけで、HTML や JavaScript は書けません。
ここまでできたら完了
- デザインを保存し、PCとスマートフォンの公開ページで確認できる。
次に読むマニュアル
単体プラグイン版 v1.33.1 ／ 更新日：2026年9月22日