悩む人WordPress側で用意してくれている「コアブロック」の画像に対してSWELL独自のカスタマイズを加えて使いやすくした「画像装飾」について詳しく教えてほしいです。
こういった悩みにお答えします。
本記事で解決できること
- 画像装飾の全6スタイルが見れる
- 画像ブロックの使い方が分かる
是非、最後までご覧ください。
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
SWELLで使える「画像装飾」とブロックの使い方【スタイル・設定・追加設定】
スタイル
デフォルトを除き、6つのスタイルが用意されています。
デフォルト
角丸
枠あり
影あり
フォトフレーム
ブラウザ風
デスクトップ風
設定
代替テキスト
画像が表示されない際に画像の代わりにテキストで内容が表示されたり、スクリーンリーダーなどがテキストを読み上げます。
アスペクト比
元のサイズを除き、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°
適応した画像はメディアに保存されます。
画像上にテキストを追加
画像上にテキストを追加
ブロックツールバーから、「（画像上にテキストを追加）」を選択します。
画像上にテキストを追加できるようになります。
固定背景
下記の記事をご覧ください。
繰り返し背景
同じ画像が繰り返し表示されます。
焦点ピッカー
左右の画像の違いを探してみて下さい。笑
左：50％ 上：50％
左：50％ 上：100％
コンテンツ位置を変更
（画像上にテキストを追加）から、「コンテンツ位置を変更」を選択することで下記画像のようにコンテンツ位置を変更することができます。
フルハイトを切り替え
（画像上にテキストを追加）から、「（フルハイトを切り替え）」を選択します。
画像が縦幅いっぱいに表示されます。
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
今回は以上です。