② ライブプレビュー
変更するとプレビューを再生します。初期設定は1回のみ。
③ HTML・CSSを書き出す
生成されるのはアニメーション文字パーツのHTMLと専用CSSです。既存サイトへの組み込みは「HTML＋CSSを一括コピー」、単体で確認する場合は「HTMLファイル保存」を使います。
一括コードは他サイトのCSSとの競合を抑えるため、固有クラスで出力します。設置先で最終確認してください。
操作方法と書き出し
完成見本を見ながら編集して、動く文字パーツのHTML・CSSを作成します。操作は次の5ステップです。
- ① 動きを選ぶ：左側の見本から、フェード・スライド・文字集合などを選択します。
- ② 文字と装飾を編集する：右側で見出し・本文、囲みや下線、書体、文字間隔、左右のグラデーション色などを設定します。不要な文字欄は空欄にすると非表示になります。
- ③ アニメーションを調整する：再生回数（初期値は1回）、速度、開始時間、動きの大きさを調整します。中央の「もう一度再生」で繰り返し確認でき、PC／スマホ表示も切り替えられます。
- ④ コードを書き出す：「HTML＋CSSを一括コピー」で装飾を含むコードをまとめてコピーします。HTMLとCSSを別々に管理する場合は、下のタブでそれぞれをコピーできます。「HTMLファイル保存」は単体での確認・納品用です。
- ⑤ 設置先で確認する：HTMLを挿入できる場所にコードを組み込み、表示・動作を確認してください。例えばWordPressでは投稿や固定ページの「カスタムHTML」ブロックに一括コードを貼り付けます。通常のHTMLサイトではHTMLとCSSをソースに組み込みます。
出力方法の選び方
一括コピー：HTMLとCSSをまとめて貼り付けたいとき。
個別コピー：HTMLとCSSを別々の場所で管理するとき。
HTMLファイル保存：ブラウザで単体表示を確認したいとき。
ご注意：設置先のCSSやCMSの設定によって表示が変わる場合があります。公開前にバックアップを取り、PC・スマートフォンで動作をご確認ください。