Q.CSS編集(カスタムCSS)を設定したのに反映されない
#A.
#主な原因は実装上5パターンあります。まず切り分けとして、<head> に <link id="al-injected-css-..."> タグが存在するかどうかを確認してください。
#タグが無い → 原因②③④(そもそもCSSが登録・配信されていない)
#タグはあるが効いていない → 原因①⑤(配信はされているが、適用時にブロック/上書きされている)
#① CSPでブロックされている
CSSは https://cdn.autolingual.io から <link> タグで読み込む仕様のため、サイトのCSP(Content-Security-Policy)の style-src に許可がないとブラウザ側でブロックされます。
見分け方: タグは<head>にあるのに、開発者ツールのConsoleに violates ... Content Security Policy のエラーが出ている。
対処法: サイトのCSPに以下を追加してください(検証環境・本番環境それぞれで確認が必要です)。
script-src ... https://.autolingual.io
style-src ... https://.autolingual.io
connect-src ... https://*.autolingual.io
#② プランにCSS編集の権限(entitlement)が付いていない
CSS配信APIは、プロジェクトに custom_css の権限が無い場合、CSSデータそのものを返しません。
この場合SDKはそもそも <link> タグを作成しません(①のようにタグだけ残ることもありません)。
見分け方: <head> に al-injected-css-... のタグ自体が無い。
対処法: プランを確認し、CSS編集機能が有効かどうかを確認してください。
#③ 保存時の「対象言語」が、確認している表示言語と一致していない
CSS編集画面では保存時に「全言語」または「特定の言語(保存時に表示していた言語)」を選べます。
特定の言語で保存した場合、その言語で表示したときしか反映されません
(原文表示や別の言語では、その分の <link> タグ自体が作られません)。
見分け方: CSS編集画面で保存したときの「対象言語」欄の選択を確認する。
対処法: 全ての言語に適用したい場合は、保存時に「全言語」を選択してください。
#④ ページ個別CSSの登録パスと、実際のURLパスが完全一致していない
「このページ」(ページ個別)でCSSを登録した場合、登録時のパスと、実際にブラウザが表示しているパスが文字列として完全一致しないと適用されません。末尾スラッシュの有無なども区別されます。
見分け方: CSS編集画面の「適用範囲」が「このページ」になっている場合に発生しやすい事象です。
対処法: パスが変わりうる画面(クエリやルーティングでURLが微妙に変わる画面)では、「全ページ」を選んで登録するか、パスの表記を実際のURLと合わせてください。
#⑤ サイト本来のCSSに上書きされている(詳細度・読み込み順の問題)
CSSは正しく読み込まれていても、サイト本来のCSSの方が詳細度が高い、または後から読み込まれる場合、SDKが注入したCSSが上書きされて見た目に反映されないことがあります。
見分け方: 開発者ツールでCSS編集の<link>タグ内の該当ルールに取り消し線(打ち消し)が付いている。
対処法: セレクタの詳細度を上げる、または !important を付けて登録してください。