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

WordPressテーマ「SWELL」画像ブロックで枠や影のスタイル設定
URLをコピーする
URLをコピーしました!

頻繁にアップデートされてく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」のブロックは、標準ブロックでも豊富なデザインを簡単に装飾することができます。リストブロックは、リストブロック単体で、周囲や背景の装飾...
あわせて読みたい
WordPressで、WebサイトのようなトップページをWPテーマ「SWELL」で作る方法! WordPressテーマ「SWELL」は、ブログのデザインテーマだけでなく、Webサイト(ホームページ)風のトップページを作る機能も持っています。もともとWordPressの機能とし...

ブログ・サポートsupport

ブログコンサルティングサポートサービス

ブログを継続的に発信していくサポートを行っています。

ブログのお悩みや技術的なことを相談できます。

WordPressブログのコンサル・運用サポートプランもあり、メンテナンスやトラブルにも対応します。

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

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

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる