デザイン変更中につき、表示が崩れている箇所があります

WordPressテーマ「SWELL」の画像ブロックは、枠や影が簡単に付けられるスタイル設定があり、サイズ制御もできる!

WordPressテーマ「SWELL」の画像ブロックは、枠や影が簡単に付けられるスタイル設定があり、サイズ制御もできる!

頻繁にアップデートされてくWordPressテーマ「SWELL」。

その度に、新機能が増えたり、使い勝手がどんどん良くなっていっていくブロックエディター完全対応のテーマです。

SWELLの画像ブロックは、とても使い勝手が良いです。クリックするだけで、画像の縁に枠線や影を、画像ごとに付けることができます。

また、WordPress自体の画像設定ではできない、サイズを少し小さくできたりもします。

SWELLの画像ブロックについてご紹介します。

目次

画像にスタイルを設定

WordPressブロックエディターで、背景と画像背景が同じ

背景と同じ色の画像だったりすると、伝わりづらい場合があります。

SWELLの画像ブロックから枠線をつけてみます。

WordPressブロックエディターで、画像を選択した状態

画像を選択します。

WordPressテーマ「SWELL」の画像ブロックのスタイル設定

画像ブロックの設定メニューで、[スタイル]をクリックします。

4つのスタイルが表示されます。初期状態の何も装飾のないデフォルト、枠あり、影あり、フォトフレームがあります。

WordPressテーマ「SWELL」の画像ブロックのスタイル設定

今回は、枠ありを選んで、枠線をつけます。

WordPressテーマ「SWELL」の画像ブロックの枠ありスタイル設定をしたところ

グレーの枠線が画像の縁につき、画像と背景の境目がはっきりしました。画像がわかりやすくなりました。

画像サイズをちょっと小さくする追加スタイル

WordPressで、縦長の画像を挿入したところ

特に縦長の画像の場合、パソコンで見ると、大きすぎて全体が見れなかったりします。

WordPressテーマ「SWELL」の画像ブロック設定メニュー

SWELLの画像ブロックは、[追加スタイル]という項目があり、サイズを2段回で調節できます。

調節したい画像をクリックし、画像ブロックの設定メニューから、[追加スタイル]を選びます。

[画像の表示サイズ]のドロップダウンリストをクリックします。

WordPressテーマ「SWELL」の画像ブロック設定メニュースタイル追加
  • 少し小さく表示
  • 小さく表示

2つのサイズを選択できます。

WordPressテーマ「SWELL」の画像ブロックの小さく表示設定
[小さく表示]を選択しました。

WordPressテーマ「SWELL」の画像ブロックの小さく表示設定をしたところ

二回りほど小さくなって、画像全体がわかりやすくなりました。

まとめ

SWELLの画像ブロックは、クリックだけで画像に枠線や影をつけるスタイル設定があります。

また、少し画像サイズを調整したい場合には、追加スタイル項目で、画像を少し小さく表示させる設定もあります。

わざわざコードを書いて設定する必要がなく、テーマを導入してすぐに使うことができる優れたWordPressテーマです。

WordPressテーマSWELL
あわせて読みたい
WordPressテーマ「SWELL」に変更!クールなデザインで、ブロックエディター完全対応でとても使いやすい!
WordPressテーマ「SWELL」に変更!クールなデザインで、ブロックエディター完全対応でとても使いやすい!2019年10月頭に、当サイトのWordPressテーマを「SWELL(スウェル)」に変更しました。以前は、「Snow Monkey」を使っていました。どちらもWordPress最新型のブロックエ...

合わせて読みたい関連記事

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

関連記事

目次
目次