SWELL画像ブロックの使い方｜11の設定と応用テクニックを解説

本記事では、SWELLの画像ブロックの全11の設定項目と、プロっぽく見せる応用テクニックを徹底解説します。

この記事を読んで実践すれば、基本操作から「ブロークングリッド」や縦長画像の「スクロール表示」といった高度な装飾まで完全に習得できます。

そして、画像ブロックを自在に扱えるようになるので、あなたの記事の表現力とデザイン性が格段に向上するでしょう。

SWELLの多彩な機能をフル活用し、読者が「思わず読み進めたくなる」おしゃれな記事を一緒に作っていきましょう。

まだSWELLを導入していない方は、以下の記事を参考にSWELLをチェックしてみてください。

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

SWELLの画像ブロックを使えば、専門知識がなくても直感的にプロ並みのデザインが作れます。

「標準機能だけだと物足りない…」と感じていた方も、クリック操作だけで見違えるほどオシャレになりますよ。

主な4つの特徴を紹介しますね。

ワンクリックで選べる豊富な装飾

難しいCSSコードを書かなくても、クリック一つで画像の雰囲気をガラッと変えられます。

SWELLには「フォトフレーム」や「デスクトップ風」など、実用的なスタイルが最初から用意されています。

例えば、スクリーンショットに「デスクトップ風」を選ぶだけで、PC画面のような本格的な見た目に早変わりします。

クリック時の拡大表示（Lightbox）

画像をクリックした際に、ふわっと拡大表示させる機能（Lightbox）も標準で使えます。

通常ならプラグインが必要ですが、SWELLならプラグインなしですぐに利用できるのが大きなメリットです。

デバイス別の表示切り替え

パソコンとスマホで、画像の表示・非表示を個別に設定できる機能も便利です。

画面の大きさに合わせて、それぞれに最適な画像を見せたい場面って意外と多いんですよね。

具体的には、PCでは横長の図解、スマホでは縦長の画像、といった使い分けが可能です。

どの端末でも「読みやすい！」と思ってもらえる記事作りに欠かせない機能です。

サイズ調節やトリミングも自由自在

サイズ調整や切り抜きもエディター上で完結 SWELLなら、画像のサイズ変更や切り抜きもWordPressの管理画面だけで完結します。

わざわざ外部の画像編集ソフトを開いて保存し直す手間がかからないからです。

例えば、「画像の縦横比を統一したい」「端を少しトリミングしたい」といった調整もクリック操作だけで可能です。

記事を書きながらサクッと修正できるので、作業効率がグッと上がります。

SWELL画像ブロックの基本操作

SWELLの画像ブロックは、直感的に操作できるのが大きな特徴です。

「設定項目が多くて難しそう…」と不安に感じる必要はありません。

まずは、記事作成に欠かせない画像の挿入方法から、最低限覚えておきたい基本操作を一緒に見ていきましょう。

画像の挿入と選択手順

まずは記事内に画像を配置する方法です。

基本はブロックメニューから選択しますが、ファイルを直接ドラッグ＆ドロップすると素早く挿入できます。

配置とサイズを直感調整

配置やサイズの変更も、マウス操作だけで直感的に行えます。

わざわざ数値入力しなくても、見た目のバランスを見ながら調整できるので便利です。

配置を変えたいときは、画像上のツールバーにある「配置アイコン」を使います。

「中央揃え」や「幅広」など、記事のデザインに合わせて選びましょう。

サイズ調整は、画像をクリックして青い丸を動かすだけです。

感覚的に大きさを変えられるので、プレビューを見ながら調整してみてください。

代替テキスト（Alt）の設定

画像の設定で忘れてはいけないのが、代替テキスト（Alt属性）の入力です。

これは検索エンジンに「何の画像か」を伝える重要な役割を持っています。

設定は右側のサイドバーから行います。

「画像設定」の中にある入力欄に、画像の内容を簡潔に入力しましょう。

万が一画像が表示されない時に代わりの文字が表示されるため、読者への配慮にもなりますよ。

SWELL画像ブロックの11の設定項目

SWELLの画像ブロックには、デザインや機能を細かく調整できる11個の設定項目があります。

これらを使いこなせば、ただ画像を貼るだけでなく、より読みやすく洗練された記事に仕上げることが可能です。

設定場所は主に「ブロックツールバー」と「サイドバー」の2箇所です。

それぞれの機能を順番に解説していきますね。

7つの装飾スタイルを選択する

SWELLの大きな特徴である「装飾スタイル」を使えば、ワンクリックで画像の雰囲気を変えられます。

画像を選択し、右サイドバーの「スタイル」から好みのデザインをクリックするだけ。

「枠あり」や「影あり」だけでなく、「ブラウザ風」などユニークなデザインも選べるのが嬉しいポイントです。

記事全体のトーンに合わせて統一感を持たせると、プロフェッショナルな仕上がりになりますよ。

代替テキスト（Alt属性）を入力する

前章でもお伝えしましたが、画像が表示されない場合や音声読み上げ機能のために、「代替テキスト（Alt）」を設定しておきましょう。

右サイドバーの代替テキスト欄に、画像の内容を簡潔に説明する文章を入力してください。

これはGoogleの検索エンジンに画像の内容を正しく伝えるためにも、欠かせない重要な項目です。

設定した画像に異常があると以下（右の図）のように表示されますよ。

アスペクト比や画像の大きさを調整する

画像の縦横比（アスペクト比）や具体的なサイズも、管理画面上で自在に調整可能です。

アスペクト比「元のサイズ」以外を選択すると「伸縮」が有効になり、「cover」と「contain」を選択して表示が変更できるようになります。

「cover」にすると、画像をその比率に変更します。

たとえば、ポートレート-3：4の場合は以下のように拡大されます。

一方、「contain」にすると、画像を余白部分も含めてその比率に変更します。

たとえば、ポートレート-3：4の場合は以下のように表示されます。

さらには、画像の横（幅）と縦（高さ）の大きさを1px単位で設定することも可能です。

クリック時の拡大表示（Lightbox）を設定する

細かい図解や大きな写真を見せたい場合は、「クリックして拡大する機能」を活用しましょ

「追加設定」の「クリックして拡大する機能」から「オンにする」を選択しましょう。

「全体設定に従う」の場合はSWELL設定が適用されます。

画面上の表示サイズを変更する

画像の見た目の大きさを、ざっくりと「小さく」したい場合に便利な設定です。

具体的な数値指定ではなく、感覚的にサイズ感を調整したい時に役立ちます。

右サイドバー下部の「画像の表示サイズ」から「少し小さく」や「小さく」を選んでみてください。

デュオトーンフィルターで色味を変更する

画像の色味を2色のトーンに変換し、おしゃれなフィルター加工を施せます。

デュオトーンとは、2つの色を組み合わせて表示するデザインのことをいいます。

サイトのブランドカラーに合わせたり、写真の雰囲気を統一したい時に役立つ機能です。

デュオトーンを適用すると以下のようになります。

設定方法はブロックツールバーの「デュオトーンフィルターを適用」をクリックして好きな色の組み合わせをクリックするだけ。

カスタムカラーも設定できるので、自分だけのオリジナルフィルターも作れます。

自分だけのオリジナルフィルターの作り方は以下の通り。

「⚪︎影」または「⚪︎ハイライト」をクリックしてください。

①用意されている色の中から、お好みの色を選んでください。

②用意されている色の中に使いたい色がない場合は上部のチェック柄の部分をクリックします。

「カラーピッカー」（＊1）や「カラーコード」（＊2）を入力して色を選びましょう。

カラーコードを調べるのには、「Color Picker for Chrome」が便利です。

画像にリンク先を設定する

画像自体をクリック可能なリンクにすることで、関連ページやアフィリエイトリンクへ誘導できます。

文字リンクよりも視認性が高く、読者のクリックを促しやすいのがメリットです。

リンクを設定する方法はまずブロックツールバーの「リンク」アイコンをクリックします。

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

「 」をクリックして、「新しいタブで開く」をONにすれば新しいタブで開くことも可能です。

画像のトリミング（切り抜き）を行う

画像の不要な部分を切り取ったり、角度を回転させたりする編集も可能です。

アップロード後に「ちょっと構図を変えたいな」と思った時に、すぐ修正できます。

切り抜きアイコンをクリックすると、ブロックツールバーに3つのアイコンが追加されます。

トリミングで画像を作成すると、自動でその画像がライブラリーに保存されます。

画像の上にテキストを重ねる

画像の上に直接文字を重ねて、ポスターのようなデザインを作れる機能です。

ツールバーの「画像上にテキストを追加」アイコン（画像にAの文字）をクリックしましょう。

すると、中央にテキストを入力することができるようになります

また、画像ブロックは自動的に「カバーブロック」という別のブロックに変換されます。

「カバーブロック」には以下の機能があります。

「カバーブロック」については以下の記事で詳しく説明していますので参考にしてください。

関連記事（現在執筆中）

画像下のキャプション（説明文）を入力する

画像の下に、補足説明や出典元を表示するための「キャプション」を追加できます。

本文の流れを止めずに、画像に関するちょっとした情報を添えたい時に便利です。

ツールバーにあるキャプションアイコンをクリックし、テキストを入力しましょう。

挿入した画像を別の画像に置換する

一度挿入した画像を、設定を保ったまま別の画像に差し替えたい時は「置換」機能を使いましょう。

置換する方法は「置換」アイコンをクリックして、「メディアライブラリを開く」か「アップロード」をクリックすれば画像を置き換えることができます。

実際に使える応用テクニック

SWELLの画像ブロックには、知っていると差がつく便利な使い方があります。

ここでは、デザイン性を高める「重ね合わせ」や、情報をスッキリ見せる「スクロール表示」など、プロのようなレイアウトを簡単に作る3つのテクニックを紹介しますね。

ブロークングリッドの作成

この方法は画像ブロックではなく「メディアとテキスト」ブロックを使う方法です。

画像とテキストをあえて重ねて配置する「ブロークングリッド」は、雑誌のような洗練された雰囲気を作れます。

SWELLならCSSコードを書かずに、標準ブロックの設定だけで導入可能です。

画像を横並びにする技

2枚の画像を横に並べて比較したい場合は、SWELL専用の「リッチカラム」ブロックを使うのがおすすめです。

通常のカラム機能よりも余白や枠線の調整がしやすく、綺麗に整列させられます。

画像を横並びにする手順は次のとおりです。

縦長画像のスクロール表示

Webサイトのトップページ全体など、縦に長い画像を掲載する時は「デスクトップ風」スタイルを活用しましょう。

画像をそのまま貼ると記事が長くなりすぎますが、この機能なら枠内に収めてスクロール表示させられます。

縦長画像をスクロール表示する手順は以下の通りです。

外部ツール活用のコツ

SWELLの機能だけでも十分きれいなブログは作れますが、外部ツールを組み合わせるとさらにクオリティが上がります。

特に「デザイン作成」と「表示速度対策」は、専用ツールに任せるのが賢い方法です。

ここでは、初心者がまず導入すべき2つの活用法を紹介しますね。

高度な装飾はCanvaで

凝ったアイキャッチや複雑な図解を作りたいなら、デザインツールの「Canva」を使うのがおすすめです。

WordPressの機能はあくまで「配置」が得意で、自由なデザイン作成には向いていないからです。

Canvaならテンプレートを選ぶだけで、誰でも簡単におしゃれな画像が作れます。

まずはCanvaで画像を作り込み、完成した画像をSWELLに貼り付ける流れを基本にしましょう。

事前の画像圧縮で高速化

画像をブログにアップロードする前に、必ずファイルサイズの圧縮を行いましょう。

スマホで撮った写真などは容量が大きく、そのまま載せるとページの表示速度が遅くなる原因になるからです。

「TinyPNG」などの無料サイトを使えば、きれいな画質のまま容量だけを軽くできます。

表示速度は読者の離脱率や検索順位にも関わるので、圧縮は投稿前の習慣にしてくださいね。

まとめ｜SWELL画像ブロックの活用

今回は、SWELLの画像ブロックが持つ全機能と、それを活用したデザインテクニックを解説しました。

本記事の内容は以下のとおりです。

記事で紹介した「装飾スタイル」をうまく活用すれば、読者にとって見やすく洗練された記事を作ることができます。

特に、画像をただ貼るだけでなく、クリック拡大やキャプション入力を活用することで、情報の伝わりやすさも格段に向上します。

SWELLの画像ブロックを使いこなせば、デザイン調整の手間を最小限に抑え、記事の内容そのものに集中できるようにもなります。

本記事を参考に、SWELLの機能をフル活用して、読者の満足度を高めるコンテンツ作成に役立ててください。

これだけの多彩な画像表現が標準機能だけで完結するのはSWELLならではの強みです。

まだSWELLを導入していない方は、ぜひ以下のレビュー記事で他の機能もチェックしてみてください。