Title: Enable Responsive Image Author: Aki Hamano Published: 2023年12月12日 Last modified: 2026年3月3日 --- プラグインを検索 ![](https://ps.w.org/enable-responsive-image/assets/banner-772x250.png?rev=3008450) ![](https://ps.w.org/enable-responsive-image/assets/icon-256x256.png?rev=3008450) # Enable Responsive Image 作者: [Aki Hamano](https://profiles.wordpress.org/wildworks/) [ダウンロード](https://downloads.wordpress.org/plugin/enable-responsive-image.1.6.0.zip) [ライブプレビュー](https://ja.wordpress.org/plugins/enable-responsive-image/?preview=1) * [詳細](https://ja.wordpress.org/plugins/enable-responsive-image/#description) * [レビュー](https://ja.wordpress.org/plugins/enable-responsive-image/#reviews) * [インストール](https://ja.wordpress.org/plugins/enable-responsive-image/#installation) * [開発](https://ja.wordpress.org/plugins/enable-responsive-image/#developers) [サポート](https://wordpress.org/support/plugin/enable-responsive-image/) ## 説明 Enable Responsive Image は、画面の幅に応じて異なる画像を表示する設定を画像ブロック に追加します。 複数の画像を追加し、画像ごとにメディアクエリーと解像度を設定できます。 画面幅がそのメディアクエリーの条件と一致すると、対応する画像に切り替わります。 ### リソース #### スクリーンショットの画像 * ライセンス: パブリックドメイン * ソース: https://openverse.org/image/cd8e5cc5-d38a-462e-b4c1-1ea5c6f94e20 ## スクリーンショット * [[ * 画像ブロックのブロックサイドバーに追加された設定 * [[ * 画面幅による画像の変化 ## インストール 1. `/wp-content/plugins/` ディレクトリに `enable-responsive-image` フォルダーをアップ ロードします。 2. WordPress のプラグインメニューからプラグインを有効化してください。 ## FAQ ### このプラグインはどのように動作しますか ? このプラグインは、フロントエンドでレンダリングされる画像ブロックの HTML マークアップ を書き換えます。img 要素を picture 要素で囲み、追加された画像の設定にもとづいて、 picture 要素内に srcset 属性と media 属性を持つ source 要素を追加します。 ### 複数の画像ソースが設定されている場合に正しく動作しません。 画像の順番を並べ替えてみてください。たとえば、両方の画像のメディアクエリータイプ が max-width である場合、値が小さい方が上に並べられる必要があります。 ### エディター上で画面幅やデバイスを切り替えても、設定した画像に切り替わりません。 エディター側では、デフォルトでは画像は切り替わりません。ブロックツールバーの「レスポンシブ 画像プレビューを有効にする」ボタンをクリックします。 ### どのようなフィルターを使用できますか ? 利用可能なフィルターの一覧は、[Github の readme](https://github.com/t-hamano/enable-responsive-image#filters) にあります。 ## 評価 ![](https://secure.gravatar.com/avatar/83fabe163ff5f3406b03ffa2337bc87c0ebc5c3c2cfcca2c36286a8ca9f3e4bb? s=60&d=retro&r=g) ### 󠀁[Great Plug-In. Should be added to Core](https://wordpress.org/support/topic/great-plug-in-should-be-added-to-core/)󠁿 [digberlin](https://profiles.wordpress.org/digberlin/) 2025年3月17日 Must-have plug-in for responsive websites. ![](https://secure.gravatar.com/avatar/2892d0b180230dc82c8c8898e5b5d925837b0e51f80f8a5df52ed0d5150028b2? s=60&d=retro&r=g) ### 󠀁[Must install for website creation at work.](https://wordpress.org/support/topic/must-install-for-website-creation-at-work/)󠁿 [けい (Kei Nomura)](https://profiles.wordpress.org/mypacecreator/) 2025年3月12日 This is exactly the plugin I wanted. Thank you. ![](https://secure.gravatar.com/avatar/a7276235fb250f091f56688568365e47d4536c5acc9b22873be5d89ded125a3e? s=60&d=retro&r=g) ### 󠀁[5 Stars](https://wordpress.org/support/topic/5-stars-594/)󠁿 [iz4atkal](https://profiles.wordpress.org/iz4atkal/) 2024年12月8日 Very convenient! ![](https://secure.gravatar.com/avatar/dee401e1fe480a559f65112ceee2d7a9d2f95dfebde8d00eebc9697c6fe63a80? s=60&d=retro&r=g) ### 󠀁[Very useful for professional site builds](https://wordpress.org/support/topic/very-useful-for-professional-site-builds/)󠁿 [onetrev](https://profiles.wordpress.org/onetrev/) 2024年7月26日 Working well, just what was needed. Thanks for making this! While I understand this functionality not being the core image block, it’s essential for any kind of professional site build so thank you very much for making it! ![](https://secure.gravatar.com/avatar/62fe212021d456e5fdb54e3ee53bdd71b42a195b3e9ca74c7c0494cb96425d30? s=60&d=retro&r=g) ### 󠀁[The Plugin I Have Been Waiting For!!](https://wordpress.org/support/topic/the-plugin-i-have-been-waiting-for-2/)󠁿 [stevieboy23](https://profiles.wordpress.org/stevieboy23/) 2024年2月7日 At last! I have waited a long time for this functionality to come to Gutenberg… As far as I know, this is the only plugin out there that will allow you to set different images for different screen sizes – all inside the block editor!! No more outside- the-editor workarounds needed to achieve this – Brilliant!!!By-the-way, this developer has created a whole “swiss army knife” range of additional plugins for Gutenberg: Flexible Spacer Block, Flexible Table Block and more. Well done, thank you, and keep up the great work, Very Best Wishes!!!! [ 5件のレビューをすべて表示 ](https://wordpress.org/support/plugin/enable-responsive-image/reviews/) ## 貢献者と開発者 Enable Responsive Image はオープンソースソフトウェアです。以下の人々がこのプラグ インに貢献しています。 貢献者 * [ Aki Hamano ](https://profiles.wordpress.org/wildworks/) * [ Toro_Unit (Hiroshi Urabe) ](https://profiles.wordpress.org/toro_unit/) “Enable Responsive Image” は4ロケールに翻訳されています。 [翻訳者](https://translate.wordpress.org/projects/wp-plugins/enable-responsive-image/contributors) のみなさん、翻訳へのご協力ありがとうございます。 [“Enable Responsive Image” をあなたの言語に翻訳しましょう。](https://translate.wordpress.org/projects/wp-plugins/enable-responsive-image) ### 開発に興味がありますか ? [コードを閲覧](https://plugins.trac.wordpress.org/browser/enable-responsive-image/) するか、[SVN リポジトリ](https://plugins.svn.wordpress.org/enable-responsive-image/) をチェックするか、[開発ログ](https://plugins.trac.wordpress.org/log/enable-responsive-image/) を [RSS](https://plugins.trac.wordpress.org/log/enable-responsive-image/?limit=100&mode=stop_on_copy&format=rss) で購読してみてください。 ## 変更履歴 #### 1.6.0 * WordPress 7.0で動作確認 * WordPress 6.8のサポートを停止 * 機能改善: ブロックサイドバーの調整 * アクセシビリティ: ソースボタンの aria-label を改善 #### 1.5.0 * WordPress 6.9で動作確認 * 機能改善: ブロックツールバーアイコンの更新 * WordPress 6.6と6.7のサポートを停止 * PHP7のサポートを停止 #### 1.4.0 * WordPress 6.8で動作確認 * 機能改善: 完全な srcset URL を表示する * アクセシビリティ: CSS トランジションのユーザー設定を尊重する * WordPress 6.5のサポートを停止 #### 1.3.0 * WordPress 6.7で動作確認 * WordPress 6.4のサポートを停止 #### 1.2.0 * WordPress 6.6で動作確認 #### 1.1.1 * 不要な変更ログを削除 #### 1.1.0 * WordPress 6.5で動作確認 * 機能改善: ブロックサイドバーの調整 #### 1.0.0 * 初回リリース ## メタ * バージョン **1.6.0** * 最終更新日 **1か月前** * 有効インストール数 **1,000+** * WordPress バージョン ** 6.9またはそれ以降 ** * 検証済み最新バージョン: **7.0** * PHP バージョン ** 8.0またはそれ以降 ** * 言語 * [Chinese (Taiwan)](https://tw.wordpress.org/plugins/enable-responsive-image/)、 [English (US)](https://wordpress.org/plugins/enable-responsive-image/)、[Japanese](https://ja.wordpress.org/plugins/enable-responsive-image/)、 [Spanish (Chile)](https://cl.wordpress.org/plugins/enable-responsive-image/)、 [Spanish (Spain)](https://es.wordpress.org/plugins/enable-responsive-image/). * [プラグインを翻訳](https://translate.wordpress.org/projects/wp-plugins/enable-responsive-image) * タグ * [block](https://ja.wordpress.org/plugins/tags/block/)[gutenberg](https://ja.wordpress.org/plugins/tags/gutenberg/) [image](https://ja.wordpress.org/plugins/tags/image/)[responsive](https://ja.wordpress.org/plugins/tags/responsive/) * [詳細を表示](https://ja.wordpress.org/plugins/enable-responsive-image/advanced/) ## 評価 5つ星中5つ星 * [ 5 5-星レビュー ](https://wordpress.org/support/plugin/enable-responsive-image/reviews/?filter=5) * [ 0 4-星レビュー ](https://wordpress.org/support/plugin/enable-responsive-image/reviews/?filter=4) * [ 0 3-星レビュー ](https://wordpress.org/support/plugin/enable-responsive-image/reviews/?filter=3) * [ 0 2-星レビュー ](https://wordpress.org/support/plugin/enable-responsive-image/reviews/?filter=2) * [ 0 1-星レビュー ](https://wordpress.org/support/plugin/enable-responsive-image/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/enable-responsive-image/reviews/#new-post) [すべてのレビューを見る](https://wordpress.org/support/plugin/enable-responsive-image/reviews/) ## 貢献者 * [ Aki Hamano ](https://profiles.wordpress.org/wildworks/) * [ Toro_Unit (Hiroshi Urabe) ](https://profiles.wordpress.org/toro_unit/) ## サポート 意見や質問がありますか ? [サポートフォーラムを表示](https://wordpress.org/support/plugin/enable-responsive-image/)