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

当ページのリンクには広告が含まれています。
初心者ブロガー

WordPress側で用意してくれている「コアブロック」の画像に対してSWELL独自のカスタマイズを加えて使いやすくした「画像装飾」について詳しく教えてほしいです。

こういった疑問にお答えします。

本記事で学べること

  • 画像装飾の全6スタイルが見れる
  • 画像ブロックの使い方が分かる

是非、最後まで読んでみて下さい。

本記事の内容

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

スタイル

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

デフォルト

角丸

枠あり

影あり

フォトフレーム

ブラウザ風

デスクトップ風

設定

代替テキスト

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

アタッシュケースとカメラと5枚の写真

アスペクト比

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

  • 元のサイズ
  • 正方形 – 1:1
  • 標準 – 4:3
  • ポートレイト – 3:4
  • クラシック – 3:2
  • クラシックポートレイト – 2:3
  • ワイド – 16:9
  • 縦長 – 9:16
  • カスタム ※ 幅と高さを設定するとアスペクト比がカスタムになります。

「ポートレイト」とは

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

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

「クラシック」とは

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

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

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

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

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

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

アスペクト比

元のサイズ

正方形 – 1:1

標準 – 4:3

ポートレイト – 3:4

クラシック – 3:2

クラシックポートレイト – 2:3

ワイド – 16:9

縦長 – 9:16

カスタム – 幅:300px 高さ:300px

※ 幅と高さを設定するとアスペクト比がカスタムになります。

伸縮

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

  • cover:縦横比が保持され、要素全体を覆うように自動的に背景画像が表示されます。
  • contain:要素全体を覆うのではなく、縦横比を保持したまま背景画像の全体が表示されます。

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

cover

contain

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

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

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

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

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

下記の 「ココをクリック」から検索結果を見ることができます!
ココをクリック

フォーラム

検索キーワード:アスペクト比

検索キーワード:ポートレイト

検索キーワード:クラシックポートレイト

Discord

検索キーワード:アスペクト比

検索キーワード:ポートレイト

検索キーワード:クラシックポートレイト

追加設定

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

  • 全体設定に従う
  • オンにする ※ 下記画像をクリックすると画像が拡大されます。
  • オフにする

「全体設定に従う」とは

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

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

画像の表示サイズ

指定しない

少し小さく表示

小さく表示

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

画像ブロックの挿入

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

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

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

画像の拡大縮小

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

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

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

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

  • 影:#333333
  • ハイライト:#CCCCCC

配置

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

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

  • なし
  • 左寄せ
  • 中央揃え
  • 右寄せ
  • 幅広
  • 全幅

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

キャプションを追加

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

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

リンクを挿入

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

切り抜き

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

ズーム

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

縦横比

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

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

回転

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

切り抜きの適用

  • ズーム:150
  • 縦横比:正方形 ※ 画像の位置を調整しています。
  • 回転:180°

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

画像上にテキストを追加

画像上にテキストを追加

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

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

固定背景

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

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

繰り返し背景

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

焦点ピッカー

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

左:50% 上:50%

左:50% 上:100%

コンテンツ位置を変更

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

フルハイトを切り替え

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

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

以上で解説を終わります。

最後まで読んで頂きありがとうございました。

本記事が読者の疑問を解決する役に立つと幸いです。

また、色々と触ってみることで実装の幅を増やして頂ければと思います。

おわり。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
本記事の内容