使える!遊べる!フィルターなどの画像表示方法を追加

画像ブロックでは、編集時に「画像の並列数」や「文章と画像の位置関係」などを選択できます。
今回はこの表示設定の選択肢を増やしましたので、ここで紹介します。
多くのまめわざユーザーの方の利用が想定されるお話ですので、ぜひお目通しください。

追加された表示設定

画像の表示設定一覧

画像の表示設定を、既設の項目も含めて以下にまとめます。

設定項目項目の説明今回の更新
枠の並列数画像の枠がいくつまで並列で並ぶかを設定しますなし
文章の位置文章(見出し・文章・リンク)と画像の配置を設定しますなし
画像の形画像の表示領域の形を設定します
画像が複数枚ある場合は、選択した形の中に複数枚が配置されます
選択肢を追加
複数画像の配置1枠に複数画像を配置する場合、その画像の配置方法を設定しますなし
画像サイズ領域に対する画像のサイズを%で設定します新設
傾き画像の傾きを設定します新設
画像フィルター画像の彩度・明るさ・コントラストなどを変えるフィルターを設定します新設

今回更新した、画像の形・画像サイズ・傾き・画像フィルターについて、以下で説明します。

画像の形

ラグビーボール・葉・タル・タル(横)・ドア・グラス・りんご、の形を追加しました(正方形・元画像・横長・縦長・円は既存の選択肢です)。

画像のサイズ

画像ブロックの領域に対する画像のサイズ(横幅)を設定する「画像のサイズ」を新設しました。
自動・75%・50%・25%・10%から選べます。
「自動」は文字の位置が右・左・左右・右左の場合は50%、その他の場合は100%です。

傾き

画像を左右10%、左右45%傾けて表示できる「傾き」を新設しました。
スライド表示の場合でも有効で、少し面白い表示が可能です。

傾き+スライド表示の例

画像フィルター

モノクロ・セピアなど画像の色合いを変化させる「画像フィルター」を新設しました。
IEは未対応のため、利用できません。

利用例

画像の形:ラグビーボール
画像のサイズ:75%
傾き:10度
画像フィルター:モノクロ

その他の変更点

拡大表示に対応したブロックにマウスを当てた際のアクションを、画像の微動から、モノクロへの色変化に変更しました。
IEでは色変化が利用できないため、従来の画像の微動のままです。

使い方

元々画像の表示設定として「枠の並列数」「文章の位置」「画像の形」「複数画像の配置」がありました。
これらの設定欄に新たに「画像サイズ」「傾き」「画像フィルター」が追加されました。
画像ブロックの編集時に、これまでの表示設定と同じ感覚で利用できます。

2019/6/14