装飾の表現力アップ!2層化や「ぼけ」など

見た目を変える「装飾」機能を更新しました。
2層化・新しい線の追加・「ぼけ」設定・色のフィルタなど、表現力の上がる新しい機能を紹介します。

多くのブロックに「内側の背景・枠線」を追加

背景・枠線は各ブロックで設定が可能です。
見出しなど一部のブロックでは、外側と内側の2層で背景・枠線の設定が可能でしたが、その利用範囲を拡大しました。

文章・箇条書き・2列箇条書き・表・動画・フォーム・地図・カレンダー・メニューなどの頻出ブロックから、SNS系・掲示板・ファイル・よくある質問・時系列・試合結果・クチコミ・商品・物件表示・カウントダウンなど多くのブロックが対象です。

使い方

通常通り装飾を行うと、「内側の背景・枠線」として選択肢(タブ)が表示されます。

新しい枠線を追加&一部の枠線を修正

下記の枠線を追加しました。
これらの枠線を使った装飾雛形も各ブロックに用意しています。

また、端が薄くなる枠線の階調を改善しました。

背景画像の「ぼけ」の設定が可能に

透過の背景色を設定した際、その後ろの画像や模様がぼけて表示される「ぼけ」効果が設定可能になりました。

使い方

色設定の際、「色」の「微調整」タブに追加された「ぼけ」バーで値を1以上にすることで反映されます。

「ぼけ」を使うには、色が透過で、背景画像が必須です。また、Firefoxなど未対応ブラウザがあります。

上で説明をした「内側の背景・枠線」と「背景・枠線」を併用し、外側に画像、内側に「ぼけ」を提供した透過色を設定して利用するのがおすすめです。

小話

昨今はPCよりスマホの利用者の方が多く、ホームページ閲覧者の割合も同様です。PCで一定のシェアがあったFirefoxはChromeやEdgeにシェアを奪われ、スマホ利用者を含めた全体で考えると極めて低いシェアとなりました。
同時に開発者の頭を悩ませたIEはMicrosoftの方針によりEdgeへの切り替えが推奨されシェアが激減しています。

以上から「ぼけ」に未対応のFirefoxとIEのシェアの低さを考えて導入をしました。

色設定のグラデをフィルタに変更

色設定欄の項目の「フィルタ」に、白・黒・その他の色の透過フィルタを追加しました。

「フィルタ」はもともとグラデーションを設定する「グラデ」でしたが、今回名称を「フィルタ」に変更しました。

使い方

背景色を設定する際、「フィルタ」タブで選択肢を選ぶだけで適用できます。

「フキダシ」と「めくれ感」の併用が可能に

ブロックをフキダシ風にする「フキダシ」と、ブロックがめくれたように見せる影の「めくれ感」は、システムの都合で併用が出来ませんでした。
今回のシステム更新によりこれらの併用が可能となりました。

尚、「境界の形」と「線」は引き続き併用ができないのでご了承願います。

背景画像の明暗を3つの方法でコントロール

背景画像上の文字の判読性を上げるのに、背景画像を明暗を今ロールすることは有効です。
今回追加した3つの要素により、手軽に設定可能になりました。

「重ね色」でもう1色を塗る

色設定欄では「色」「重ね色」(旧「部分色」から名称変更)の2色が設定できます。
画像がある場合は、「重ね色」は「画像」の上に配置されるため、「重ね色」に透過色を設定することで画像にフィルター効果を反映できます。

「重ね色」は「形状」の選択が必須です。今回追加した「全面」を選択すれば画像全体に色を重ねられます。

フィルタで明暗や色味を変える

上で説明したフィルタ(旧「グラデ」から名称変更)の透過フィルタを使うことで画像全体の明暗や色味が変えられます。

上の説明ではカラー系のフィルタを使っていますが、シンプルな白・黒も濃淡別に3つずつ選択肢があるので、画像にあわせて手軽に利用できます。

「内側の背景・枠線」で色を重ねる

上で説明した「内側の背景・枠線」を使い、外側(下層)に背景画像、内側(上層)に透過色を設定することで、背景の明暗をコントロールできます。
この方法では、新設した「ぼけ」も併用できるので更に多様な表現が可能です。

2021/10/15