操作説明
データの保存に関して
アイコン画像、全体デザインの設定については、ローカルのブラウザに直接保存されます。フキダシトークで操作したデータについては一切サーバ側に送信していません。トーク部分については保存されないので、最終出力の HTML / CSS を保存するようにして下さい。
アイコン画像の修正
出力された CSS にはアイコン画像が Base64 化された Data URI スキーマで埋め込まれています。これらの都合が悪い場合は、実際の画像ファイルの URL に置き換える事で、それを利用することも可能です。
HTML/CSS の修正
出力された HTML や HTML の class を追加・修正することで、デザインの修正、吹き出しの追加などを行う事が出来ます。
| カテゴリ | class 名 | 効果 |
|---|
全体デザイン
(<div id="ft-talk">タグの class に指定) | アイコン | サイズ | ft-icon-size-l | 大 (128px) |
| ft-icon-size-m | 中 (96px) |
| ft-icon-size-s | 小 (64px) |
| ft-icon-size-xs | 極小 (32px) |
| シェイプ | ft-icon-shape-rounded-square | 角丸 |
| ft-icon-shape-square | 四角 |
| ft-icon-shape-circle | 丸 |
| ボーダー | ft-icon-border-thin | 細枠 (1px) |
| ft-icon-border-thick | 太枠 (4px) |
| ft-icon-border-double | 二重枠 (4px) |
| ft-icon-border-none | 枠なし |
| シャドウ | ft-icon-shadow-show | 影あり |
| ft-icon-shadow-none | 影なし |
| 吹き出し | シェイプ | ft-baloon-shape-rounded-square | 角丸 |
| ft-baloon-shape-square | 四角 |
| ボーダー | ft-baloon-border-thin | 細枠 (1px) |
| ft-baloon-border-thick | 太枠 (4px) |
| ft-baloon-border-none | 枠なし |
| シャドウ | ft-baloon-shadow-show | 影あり |
| ft-baloon-shadow-none | 影なし |
| 横幅 | ft-talk-width-full | 100% |
| ft-talk-width-240 | 240px |
| ft-talk-width-320 | 320px |
| ft-talk-width-480 | 480px |
| ft-talk-width-600 | 600px |
| ft-talk-width-800 | 800px |
| ft-talk-width-960 | 960px |
吹き出しデザイン
(<li class="ft-talk">タグの class に指定) | アイコン位置 | ft-icon-pos-right | 左 |
| ft-icon-pos-right | 右 |
| 背景色 | ft-baloon-color-white | 白 |
| ft-baloon-color-red | 赤 |
| ft-baloon-color-orange | オレンジ |
| ft-baloon-color-yellow | 黄色 |
| ft-baloon-color-green | 緑 |
| ft-baloon-color-cyan | 水色 |
| ft-baloon-color-blue | 青 |
| ft-baloon-color-purple | 紫 |
| ft-baloon-color-grey | 灰色 |
| ft-baloon-color-black | 黒 |
