SWELLで使える「画像装飾」とブロックの使い方【全6スタイル】

こういった悩みにお答えします。

是非、最後までご覧ください。

SWELLで使える「画像装飾」とブロックの使い方【スタイル・設定・追加設定】

スタイル

デフォルトを除き、6つのスタイルが用意されています。

設定

代替テキスト

画像が表示されない際に画像の代わりにテキストで内容が表示されたり、スクリーンリーダーなどがテキストを読み上げます。

アスペクト比

元のサイズを除き、8つが用意されています。

「ポートレイト」とは

ググればすぐにヒットします。

下記画像のように人物に焦点が合い背景をぼかした写真のことです。

「クラシック」とは

ググって頂ければ分かると思うのですがピンポイントでヒットしません、、、

以下はほんの一例ですが下記画像がクラシックに該当するのではないかと。

「クラシックポートレイト」とは

こちらもググって頂ければ分かると思うのですがヒットしません、、、

ポートレイトとクラシックの融合ではないかと。

例えば、下記の背景ぼかし＋白黒の写真とか。

アスペクト比

伸縮

※ アスペクト比で「元のサイズ」以外を選択することで出現します。

例：アスペクト比：縦長 – 9:16

アスペクト比で「ポートレイト」と「クラシックポートレイト」が反映されない件

個人的には、アスペクト比で、例えば「ポートレイト – 3:4」を選択すると画像の背景にぼかしが入ると思っていましたが、どのアスペクト比を選択しても変化しませんでした。

※ そこで、アップデート情報の全てに目を通し、また「フォーラム」および「Discord」で反映されない理由を調べてみました。

結論から先に言いますと詳細な情報を得ることはできませんでした、、、

一応、以下に検索結果を載せておきます。

追加設定

クリックして拡大する機能

「全体設定に従う」とは

管理画面メニューの「SWELL設定」＞「機能停止タブ」内にある「投稿画像をクリックで拡大表示する機能」を停止するのことです。

この項目にチェックを入れると画像をクリックしても拡大表示されなくなります。

画像の表示サイズ

【SWELL】画像ブロックの使い方【画像の挿入・ブロックツールバー】

画像ブロックの挿入

管理画面メニューから、「投稿」＞「新規投稿を追加」を選択します。

（ブロック挿入ツールを切り替え）から、「ブロック」＞「メディア」＞「画像」を選択します。

画像ブロックが挿入されました。

画像の拡大縮小

赤枠内の丸を動かすことで画像の拡大縮小を行うことができます。

デュオトーンフィルターを適用

ブロックツールバーから、「 （デュオトーンフィルターを適用）」を選択します。

下記画像は、影とハイライトを以下に設定しています。

配置

ブロックツールバーから、「 （配置）」を選択します。

配置は、以下の6つから選択できます。

サイドバーありの「投稿」では幅広と全幅の区別ができないので、サイドバーなしの「固定ページ」に配置した画像をスクショしました。

キャプションを追加

キャプションとは：写真などの視覚的な要素に付けられる短い説明文やタイトルのことです。 

ブロックツールバーから、「 （キャプションを追加）」を選択します。

リンクを挿入

ブロックツールバーから、「 （リンクを挿入）」を選択します。

切り抜き

ブロックツールバーから、「 （切り抜き）」を選択します。

ズーム

 （切り抜き）から、「 （ズーム）」を選択します。

縦横比

 （切り抜き）から、「 （縦横比）」を選択します。

縦横比で正方形を選択していますが、画像の位置を調整することができます。

回転

 （切り抜き）から、「 （回転）」を選択します。

切り抜きの適用

適応した画像はメディアに保存されます。

画像上にテキストを追加

画像上にテキストを追加

ブロックツールバーから、「 （画像上にテキストを追加）」を選択します。

画像上にテキストを追加できるようになります。

固定背景

下記の記事をご覧ください。

あわせて読みたい

【SWELL】背景画像をスクロール時に固定して表示させる方法 SWELLで背景画像をスクロール時に固定して表示させる方法を知りたいですか？本記事では、SWELLブロックのフルワイドを用いて背景画像をスクロール時に固定して表示させる方法を解説しています。SWELLで背景画像をスクロール時に固定して表示させる方法を知りたい方は是非ご覧ください。

繰り返し背景

同じ画像が繰り返し表示されます。

焦点ピッカー

左右の画像の違いを探してみて下さい。笑

コンテンツ位置を変更

 （画像上にテキストを追加）から、「コンテンツ位置を変更」を選択することで下記画像のようにコンテンツ位置を変更することができます。

フルハイトを切り替え

 （画像上にテキストを追加）から、「 （フルハイトを切り替え）」を選択します。

画像が縦幅いっぱいに表示されます。

今回は以上です。