SWELL画像ブロックの使い方｜画像の横並びやスクロール表示させる小技あり！

「画像の設定項目について知りたい…」

「画像にリンクを貼る方法は？」

「画像を横並びにできる？」

この記事では、そんな方に向けて、SWELLで画像ブロックの使い方を解説します。

この記事を読めば、あなたも簡単に

• 画像ブロックの使い方と細かな設定方法が理解できる

ようになります。

私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、オシャレな画像を記事内に挿入することができました。

どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください！

＼SWELL購入を検討中の人はこちらもご覧ください！／

SWELL画像ブロックでできること4選

画像ブロックはWordPress標準ブロックですが、SWELLではその機能が拡張しています。

SWELLで機能拡張した画像ブロックでは以下のようなことができます。

それぞれ詳しく解説します。

画像をおしゃれなデザイン装飾ができる

SWELLの画像ブロックのデザインは「スタイル」「デュオトーン」を選べ、以下のようなオシャレな画像に装飾できます。

豊富なカスタマイズ性から、自サイトのデザインとの相性の良さだったり、ユーザーに与えたい印象を考慮して選べます。

画像に内部リンクと外部リンクを設定できる

SWELLの画像には内部リンクだけではなく、外部リンクも設定できます。

テキストリンクより視覚効果が高いので、クリック率に良い影響も与えるでしょう。

画像をクリックで拡大表示できる

SWELLには画像をクリックで拡大表示させる機能も付いています。

PCより表示画面の小さいスマホで画像を大きく表示させたいときに便利です。

画像のサイズ変更や切り抜きができる

SWELLで画像のアスペクト比や表示サイズの変更や切り抜きができます。

ページ内の画像サイズを統一させたいときや不要な部分を切り抜きたいときに便利です。

SWELL画像ブロックの使い方とカスタム設定11つ

SWELLの画像ブロックの使い方は以下のとおりです。

ちなみに、画像ブロックは以下2つの方法からも呼び出せます。

自分の好きな方法で呼び出しましょう。

画像ブロックで設定可能な項目は11つあります。

それぞれ詳しく解説します。

7種類のスタイルから選ぶ

SWELLでは、画像のスタイルを以下の7種類から選ぶことができます。

例えば、スタイル「影あり」に設定すれば画像に立体感を持たせることができたり、

スタイル「ブラウザ風」「デスクトップ風」に設定すればオシャレな額縁に入った画像にデザインすることができます。

代替テキストを設定する

SWELLの画像ブロックでは、記事内にある画像が何らかのエラーで表示されなかったときに表示される代替テキストを設定できます。

以下の画像は、正常に画像が表示された場合と何らかの異常があって画像が表示されなかった場合の比較です。

設定した画像が非表示になってしまった場合の備えとして、代替テキストは必ず設定しましょう。

アスペクト比・幅・高さを決める

SWELLで画像ブロックのアスペクト比を以下の８種類から設定できます。

基本的に「元のサイズ」もしくは、普段見慣れている地デジやYouTube画面と同じ比率の「ワイド – 16:9」がおすすめですよ。

アスペクト比を変更すると画像が引き延ばされ、画質が悪化することがあるので注意してください。

また、アスペクト比「元のサイズ」以外では伸縮の設定ができ、「cover」「contain」の2つから選べます。

アスペクト比「標準 – 4:3」を例に、伸縮の設定を見比べてみましょう。

「cover」では画像がアスペクト比になるようサイズが変更されるが、

「contain」では画像サイズはそのままでアスペクト比になるように空白が入るイメージです。

さらに、画像の幅と高さも1px単位で細かく調整することもできますよ。

クリックで画像を拡大する機能をつけるか選ぶ

SWELLでは画像をクリックで拡大させる機能を付けるかどうか設定できます。

＼クリックしてみてね／

デフォルトの「全体設定に従う」を変更するには、以下の手順で行います。

画像の表示サイズを指定する

画像の表示サイズを「指定しない」「少し小さく表示」「小さく表示」の3パターンから選べます。

キャプションを追加する

画像にキャプションを追加することができます。

キャプションとは…画像に付け加える短い説明文やタイトルのこと

設定方法は、画像ブロックを選択して表示されるツールバーの項目「キャプションを追加」をクリックすると設定できます。

リンクを挿入する

画像にリンクを挿入できます。

設定方法は、画像ブロックを選択して表示されるツールバーの項目「リンク」をクリックします。

URLを入力して適用をクリックすると画像にリンクを挿入できます。

リンクを設定した画像を新しいタブで開くこともできますよ。

画像を差し替える

ページに挿入した画像を差し替えたい場合は、画像ブロックを選択して表示されるツールバーの項目「置換」をクリックします。

「メディアライブラリを開く」もしくは「アップロード」をクリックして新しい画像を挿入できます。

画像上にテキストを追加する

SWELLでは画像上にテキストを追加することができます。

設定方法は、画像ブロックを選択して表示されるツールバーの項目「画像上にテキストを追加」をクリックするとできます。

画像上にテキストを追加すると画像ブロックがカバーブロックに変換され、以下の8項目の設定が新たにできるようになります。

これら8つの設定は長くなるので、以下の記事で詳しく解説します。

※記事準備中

デュオトーンフィルターを適応する

画像にデュオトーンフィルターを適応することができます。

デュオトーンとは…2つの色を組み合わせて表現するデザインのこと

以下のオリジナル画像にデュオトーンフィルターを適応してみました。

設定方法は、画像ブロックを選択して表示されるツールバーの項目「デュオトーンフィルターを適応」をクリックするとできます。

もし使いたい色がなかったり、自分で色を指定して決めたい場合は、以下の方法で行ってください。

カラーピッカーとは…画面上に表示された色を選択することで、その色を文字色や背景色に使うことができる機能のこと

カラーコードとは…色を数字やアルファベットなど文字の羅列で表した符号のこと

_{＼クリックで開く／}

画像を切り抜く

SWELLでは画像をページ上で切り抜くことができます。

設定方法は下記のとおりです。

それぞれの項目で切り抜きした場合の画像を作ってみました。

【実体験】SWELL画像ブロックを横並びやスクロール表示してみた

SWELLでは少し工夫することで以下のような設定ができます。

それぞれ詳しく解説します。

画像を横並びにする

SWELLのリッチカラムブロックを使えば、以下のように画像を横並びにすることができます。

画像を横スクロール表示にする

SWELLのリッチカラムブロックを使えば、以下のように画像を横スクロール表示にすることができます。

_{＼クリックで開く／}

縦に長い画像を縦スクロール表示にする

SWELLのブロック機能の「デスクトップ風」装飾を使えば、以下のように縦に長い画像を縦スクロール表示にすることができます。

_{＼クリックで開く／}

SWELL画像ブロック以外で画像を挿入する5つの方法

SWELLの画像ブロック以外でも、下記5つのブロックで画像を挿入できます。

それぞれ詳しく解説します。

①バナーリンクブロックを使う

SWELL専用ブロックであるバナーリンクブロックを使って画像を挿入することができます。

画像ブロックでは設定できないブラー効果をつけたり、デバイスごとで画像の高さの設定がバナーリンクブロックでは可能です。

ブラー効果とは…画像をぼかす視覚効果のこと

バナーリンクブロックについて詳しく知りたい方は、下の記事を参考にしてください。

②フルワイドブロックを使う

SWELL専用ブロックであるフルワイドブロックを使えば画像を挿入できます。

画像ブロックでは設定できない画像の境界線を波にしたり、画像の横幅を画面いっぱいに広げることがフルワイドブロックでは可能です。

フルワイドブロックについて詳しく知りたい方は、下の記事を参考にしてください。

③ギャラリーブロックを使う

WordPress標準ブロックであるギャラリーブロックを使って画像を挿入できます。

ギャラリーブロックでは以下のように複数の画像をまとめてページに挿入することができます。

④カバーブロックを使う

WordPress標準ブロックであるカバーブロックを使うと画像を挿入できます。

画像ブロックのツールバー項目「画像上にテキストを追加」からでもカバーブロックと同様の設定が可能です。

大きな特徴として、テキストカラーとオーバーレイカラーを設定することができます。

オーバーレイカラーとは…画像に重ねる色のこと

⑤メディアとテキストブロックを使う

WordPress標準ブロックであるメディアとテキストブロックを使えば画像を挿入できます。

以下のように右側に挿入した画像と左側に入力したテキストの一部分を重ねて表示させることができます。

SWELL画像ブロックまとめ

今回は、SWELLで画像ブロックの使い方を紹介しました。

当ブログでは、SWELLに関する記事をいくつか書いてます。

下のカテゴリーページにまとめていますので、のぞいてみてください。