新しい背景画像アクションを追加しました

背景に登録した画像が次々に表示される際のアクションの種類が増えました。
アクションの時間指定や、アクションを停止する選択肢も増え、表現の幅が増えました。
同時に新しくなった画像の上下左右寄せ・サイズ指定と合わせて説明します。

背景画像のアクション

これまでの「横にスライド」に「フェードアウト」など3種類を追加、アクションなしの「静止」も追加して5つから選べます。
横にスライドの表現も少し変わリました。
以下のサンプルをご参考ください。

その1:横にスライド

その2:フェードアウト

その3:縦移動&フェードアウト

その4:横に常時移動

その5:静止

3つのボールの画像をそれぞれ左上・中央・右下に配置しています

背景画像のサイズ・配置

これまでの2種類だけだった背景サイズに、以下のサイズを追加しました(「横一杯に引伸し」は「自動幅1」と名称変更)。

名称サイズ
自動幅1領域全体を覆うように背景画像を自動調整
自動幅2背景画像の全体が見えるように背景画像を自動調整
元の幅アップロードした画像の元の幅
(アップロード時に横幅は1,920px以下に縮小されます)
100%~25%幅背景画像の横幅を、画面の横幅の100~25%に調整

一方、上下左右寄せや画像ドラッグによる縦方向の微調整は、制限を取り除き、各サイズと組合せて利用できます。
以下のサンプルをご参考ください。

画像サイズ:自動幅1

画像サイズ:自動幅2

画像サイズ:25%幅

画像サイズ:50%幅

2枚の画像を左右に配置

使い方

背景画像アクションは、あらゆるブロックの「装飾」から利用できます。

メイン画像エリアでは、下部に常時表示される「メイン画像の登録」欄から利用できます。

利用手順

画像の登録

画像は次の3つのボタンから追加できます。

  • 画像のアップロード
    PCやスマホに保存した画像を利用
  • URLからコピー
    ネット上にある画像を利用
  • 画像集からコピー
    まめわざで用意した画像を利用

画像はこのボタンから複数登録できます。

アクションの設定

複数登録した画像は「複数画像アクション」で設定した動作により順番に表示されます。
アクションは「1枚の表示秒数」で時間設定ができます。

画像のサイズ設定

登録した画像は小さなプレビュー画像付きのリストで表示されます。リストにある3つの選択欄で、画像のサイズ・上下位置・左右位置を設定出来ます。
プレビュー画像をドラッグして画像の上下位置を細かく調整できます。

画像の順番入替・削除

プレビュー画像の上にある「上」「下」ボタンから常時順の入れ替えができます。
また隣の「削除」ボタンから画像の削除ができます。

その他の使い方

「静止」の使い方

複数画像アクションを「なし(静止)」にすると、複数の画像を重ねて1枚の静止画のように表示できます。
ただし、順番が後方の画像が優先表示されるので、サイズとの組合せで利用する必要があります。

画像の繰り返し表示

画像は枚数とアクションの設定により、繰り返し表示の有無が自動で切り替わります。
繰り返しが「有」の場合は、画像がタイルのように並んで表示されます。領域よりも画像が小さい場合に、空いた隙間に画像が表示されることで確認できます。

繰り返しの有無
アクション=なし(静止)アクション=なし(静止)以外
画像枚数=1枚
画像枚数=複数1枚目のみ有
2枚目以降は無

まめわざの背景画像アクションの特徴と注意点

CSSのみによるアクション

いずれのアクションもCSSのみで構成されているのが最大の特徴です。
そのため、次のような特徴があります。

  • Javascriptによるアクションより軽量です
  • AMPなどJavascriptがOFFの環境でもアクションを表示できます
  • あらゆる背景に利用できます。例えば表の背景をアクションさせることも可能です

注意点

  • 低速なCPUでは、アクションがカクカクしたり不自然な動きをする場合があります
  • フェードアウトでは、背景画像の上のコンテンツもフェードアウトします(一瞬見えなくなります)
  • 背景画像の上のコンテンツをアクションすることは出来ません(例えば、背景画像の切替に連動させて、上のテキストを変えることはできません)
  • IEでは仕様上、表現が若干異なります
2017/7/4