フルCSSテンプレートのトップにある画像を、Flashタイトルに変更するには以下の操作を行います。

▼注意

■操作

1. フルCSSテンプレートを使用したページを表示し、トップの画像を選択します。

   トップ画像全体がフォーカス枠（色のついた枠）で囲まれていることを確認します。

2. スタイルに応じて以下の操作を行います。

   ※〔かんたん〕〔スタンダード〕：かんたんナビバーの［背景画像の編集］ボタンをクリックし、［Flashタイトルに変換］を選択します。

   ※〔エディターズ〕：画像を右クリックし、表示されるメニューから［背景画像の編集-Flashタイトルに変換］を選択します。

   ［Flashタイトルの挿入］ダイアログボックスが表示されます。

3. ［画像］タブ／［効果］タブ／［リンク・BGM］タブ／［表示設定］タブで各項目を設定します。
   • ［プレビュー］／［再生］ボタン：［画像］タブに追加されている画像のうち、先頭画像の縮小版がプレビュー表示されます。［再生］ボタンをクリックすると、Flashタイトルを再生して効果などを確認できます。
   • ［全体の設定］：各タブの設定内容を確認できます。

   ※［実際のサイズで確認］ボタンをクリックすると、別ウィンドウが開き、Flashタイトルを実際の大きさで再生して効果などを確認できます。

4. ［画像］タブで、Flashタイトルに使用したい画像を選択します。
   • ［追加］ボタン：クリックして［ファイルから］または［素材集から］を選択し、画像ファイルを選択して画像を追加します。
   • ［変更］ボタン：画像の一覧で選択した画像を別の画像に置き換えます。

   ※画像ごとに効果（画像効果・リンク・BGM・文字）を設定することができます。画像の一覧で画像を選択し［編集］ボタンをクリックします。

5. ［効果］タブで、Flashタイトルの画像効果を設定します。
   • ［効果］：Flashタイトルにかける効果を選択します。選択した効果によっては、［効果パターン］を選択します。
   • ［効果時間］：効果をかける時間を設定します。
   • ［画像表示時間］：Flashタイトルの画像を静止して表示する時間を設定します。
6. ［リンク・BGM］タブで、Flashタイトルをクリックしたときのジャンプ先やFlashタイトル表示中のBGMを設定します。
   • ［リンク］：Flashタイトルをクリックしたときのジャンプ先のURLを設定します。必要に応じて［ターゲット］を選択します。
   • ［BGM］：Flashタイトルの表示中に再生する音声ファイルを設定します。必要に応じて［再生開始時間］で、Flashタイトルが表示されてから何ミリ秒後に音声を再生するかを設定します。
7. ［表示設定］タブで、Flashタイトルの表示方法を設定します。
   • ［繰り返し再生する］：Flashタイトルの画像をくり返し再生するかしないかを設定します。

     オンにすると、最後の画像を表示したあと、再び先頭の画像から表示されるようになります。

   • ［画像を表示サイズに合わせて拡大縮小表示する］：オンにすると、Flashタイトルの表示サイズに合わせて画像を拡大縮小して表示します。オフにすると、画像の縦横比を保持したまま、表示サイズ内で最大の大きさで表示します。その際に画像が表示されない領域は、［背景色］で指定した色が表示されます。

   ※［表示サイズ］の設定を変更すると、ページのレイアウトが崩れる場合があります。
   背景画像をFlashタイトルに変更する場合、表示サイズは、背景画像と同じサイズが指定されています。あとから追加した画像が表示サイズより大きい場合は、領域の中央に、縦横比に保ったまま縮小して表示されます。［画像の最大サイズに合わせる］を選択すると、Flashタイトルの表示サイズが追加した画像に合わせて変更されますが、ページのレイアウトが崩れる場合があります。

8. 設定が終わったら、［プレビュー］を再生したり、実際のサイズで確認したりします。
9. ［OK］ボタンをクリックします。

   背景画像がFlashタイトルに変更されます。枠内には、Flashタイトルの先頭画像が表示されます。

   ※作成したFlashタイトルは、［挿入-ファイル-Flash ファイル］などで挿入した Flash と区別するために、枠の左上に「Flashタイトル」と表示されます。

▼注意

◆補足

挿入したFlashタイトルが、トップ画像の枠の大きさよりも小さくなってしまった場合は、上記の■操作を行う前に、次のいずれかの操作で画像の大きさを調整します。

【方法1：Flashタイトル作成時に大きさを設定する方法】

※この方法は、画像の大きさを強制的に変更するので、画像サイズが小さい場合は、画像がぼやける場合があります。

1. トップの画像を選択し、右クリックして表示されるショートカットメニューの［背景画像の編集-ウェブアートデザイナーで編集］を選択します。

   ウェブアートデザイナーのキャンパスにトップの画像が表示されます。

2. ［編集-キャンパスの設定］を選択し、［情報］シートの「幅」と「高さ」をメモしておきます。
   《例》
   ［テーマ］を「企業」、［デザイン］を「モダン」で作成したフルCSSテンプレートのトップ画像の場合は、以下の大きさです。
   

   「幅」900
   「高さ」220
   
3. ダイアログボックスを閉じて、ウェブアートデザイナーを終了します。
4. ■操作の1.〜6.を実行します。
5. Flashタイトルを作成する際に、［Flashタイトルの挿入］ダイアログボックスで［表示設定］シートを選択し、［表示サイズ］の［サイズを指定する］をオンにして、手順2.でメモした「幅」と「高さ」を入力します。

   ※すでにFlashタイトルを挿入している場合は、右クリックして表示されるショートカットメニューの［Flashタイトルの編集］を選択して、同様に「幅」と「高さ」を変更することができます。

【方法2：あらかじめ画像編集ソフトで大きさを調整する方法】

※この方法は、ご使用環境に画像編集ソフトが必要です。
以下の操作では、ウェブアートデザイナーを使用して編集する方法をご説明します。

1. 上記の方法1.の手順1.〜2.と同様の操作で、「幅」と「高さ」を確認しメモしておきます。
2. ウェブアートデザイナーを起動し、［編集-キャンパスの設定］を選択します。
3. ［情報］シートを選択し、「幅」と「高さ」に、手順1.でメモした「幅」と「高さ」より大きいサイズを入力して［OK］をクリックします。
4. ［編集-ファイルから貼り付け］を選択して、Flashタイトルで使用したい画像ファイルを読み込みます。

   キャンパス上に画像が挿入され、画像の周囲に■が表示されます。

5. ［編集-オブジェクトの編集］を選択します。
6. ［縦横比保持］をオンにして、「幅」と「高さ」を手順1.でメモしたサイズか、それよりも大きい数字を設定します。
   入力したら、ダイアログボックスは右上の［×］をクリックして閉じます。

   画像のサイズが、設定した大きさに変更されます。

   ※元々サイズが小さい画像の場合は、画質が粗くなることがあります。

7. ［ツール-切り抜き-四角形］を選択し、画像上で切り抜きたい部分をドラッグします。

   ドラッグした範囲が四角形の枠で囲まれ、その大きさのピクセル数が、画面右下に表示されます。

8. 画面右下に表示されたピクセル数を確認しながら、四角形の枠上に表示された□にマウスを合わせてドラッグし、手順1.でメモした「幅」と「高さ」になるように調整します。
9. 右クリックして［切り抜き］を選択します。
10. ［ファイル-Web用保存ウィザード］を選択します。
11. ［保存の対象を選んでください］で［選択されたオブジェクトを保存する］をオンにして［次へ］をクリックし、画面の内容に従って操作を進めて画像を保存します。

    このあと、■操作の7.でFlashタイトルを作成するときに、この画像を使用します。

※挿入したFlashタイトルを削除したい場合は、Flashタイトルを選択して［Delete］キーを押すか、右クリックして［削除］を選択します。

▼注意

■関連情報

→フォトモーションで動きのある写真演出をする

▲ページの先頭へ戻る