Title: デュオトーンフィルターで画像に色付け Author: Naoko Takano Published: 2021年5月27日 --- 日本語 * [テーマ](https://ja.wordpress.org/themes/) * [プラグイン](https://ja.wordpress.org/plugins/) * [ニュース](https://ja.wordpress.org/news/) - [ドキュメンテーション](https://ja.wordpress.org/support/) - [フォーラム](https://ja.wordpress.org/support/forums/) * [概要](https://ja.wordpress.org/about/) * [参加・貢献](https://ja.wordpress.org/get-involved/) * [このサイトについて](https://ja.wordpress.org/faq/) * [WordPress を入手](https://ja.wordpress.org/download/) [ WordPress を入手 ](https://ja.wordpress.org/download/) [ニュース](https://ja.wordpress.org/news/) デュオトーンフィルターで画像に色付け 2021年5月27日 [Naoko Takano](https://profiles.wordpress.org/nao/) による # デュオトーンフィルターで画像に色付け --- 以下は、[](https://profiles.wordpress.org/matt/)[](https://profiles.wordpress.org/chanthaboune/) [](https://profiles.wordpress.org/cbringmann/)[Josepha](https://profiles.wordpress.org/chanthaboune/) による WordPress.org 公式ブログの記事 “[An Update on the Classic Editor Plugin](https://wordpress.org/news/2021/08/an-update-on-the-classic-editor-plugin/)” を訳したものです。 誤字脱字誤訳などありましたら[フォーラムまでお知らせください](https://ja.wordpress.org/support/forum/alphabeta/)。 --- _文章: [Alex Lende](https://profiles.wordpress.org/ajlende/)_ WordPress 5.8より、デュオトーンフィルターを使って画像やカバーブロックに色付けできる ようになりました。デュオトーンは、デザインにポップな色を加えたり、テーマとうまく 調和するように画像をスタイリングすることができます。 ## フィルターとは、Instagram みたいなものですか ? デュオトーンは、Instagram のフィルターとまったく同じようには機能しません。Instagram のフィルターは、色の調整 (色レベル/カーブ、ヴィネットなど) を行いますが、新しいデュオ トーンフィルターは、画像の色を完全に置き換えます。 ⌊Cat – Original⌉⌊Cat – Original⌉ 写真: [Charles Pragnell](https://www.pexels.com/photo/grey-cat-close-up-photography-2524164/) デュオトーン効果は、白黒のフィルターのようなものであり、シャドーが黒・ハイライト が白になっている代わりに、シャドウとハイライトの色を自分で選ぶことができます。 例えば、シャドー/ハイライトの色を黒と白にすればグレースケールフィルター、茶色と褐色 にすればセピアフィルターになります。 ![](https://i2.wp.com/wordpress.org/news/files/2021/05/image6.png?resize=632%2C622& ssl=1) 類似色を選ぶと繊細な効果が演出でき、文字を目立たせたいカバーの背景にぴったりです。’ ![](https://i1.wp.com/wordpress.org/news/files/2021/05/image1.png?resize=632%2C622& ssl=1) 補色を使うと、より鮮やかで面白い効果が得られます。 ![](https://i2.wp.com/wordpress.org/news/files/2021/05/image2.png?resize=632%2C622& ssl=1) ## デュオトーンフィルターを追加するには デュオトーン効果はコントラストの高い画像で最も効果を発揮するため、大きな暗い部分 と明るい部分がたくさんある画像から始めましょう。ブロックツールバーの「フィルター」 ボタンからプリセットを選択します。 また、テーマのパレットから色を選ぶこともできますし、カスタムカラーを選ぶこともでき ます。 デュオトーンは、画像ブロックに加えて、カバーブロックでも画像と映像の両方に適用でき ます。 Duotone ## デュオトーンはメディアライブラリの画像を上書きしてしますか ? メディアライブラリの画像や動画が変更されることはありません。デュオトーン効果は、 [SVG フィルター](http://メディアライブラリの画像や動画は変更されません。デュオトーン効果は、SVGフィルタとCSSのフィルタプロパティを使って動作するため、ライブラリ内の画像や動画が変更されることはありません。このことは、メディアライブラリに存在しないリンク先の画像にフィルタを適用できることを意味します。一方で、RSSフィードや画像のURLを直接使用する場所では、フィルターが表示されないことを意味します。) と [CSS のフィルター属性](https://www.w3.org/TR/filter-effects-1/)を使って動作する ため、ライブラリ内の画像や動画が変更されることはありません。このことは、メディア ライブラリに存在しないリンク先の画像にフィルターを適用できることを意味します。一方で、 RSS フィードや画像の URL を直接使用する場所では、フィルターが表示されないことを意味 します。 ## 自分で開発したブロックやテーマにデュオトーンカラーを追加することはできますか ? ブロックにデュオトーンカラーを追加する API は、Gutenberg v10.6では実験的なものです。 とはいえ、独自のブロックで使用するためのドキュメントはブロックエディターハンドブック の「[Supports Color](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/block-api/block-supports/#color)( 色対応)」に掲載されており、更新される予定です。テーマでは、theme.json でデュオトーン のプリセットを追加できます。詳細は「ブロックエディターハンドブック」の「[グローバル設定とスタイルのプリセット](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/themes/theme-json/#%E3%83%97%E3%83%AA%E3%82%BB%E3%83%83%E3%83%88)」 に記載されています。 ## Gutenberg プラグインを使って今すぐ試してみましょう デュオトーン機能は、[Gutenberg プラグイン](https://ja.wordpress.org/plugins/gutenberg/) のバージョン10.6でリリースされたため、7月の WordPress 5.8 のリリースに先立って、 今すぐお試しいただけます。 ### 共有: * [ Facebook ](https://ja.wordpress.org/2021/05/27/coloring-your-images-with-duotone-filters/?share=facebook) * [ X ](https://ja.wordpress.org/2021/05/27/coloring-your-images-with-duotone-filters/?share=twitter) * [ メールアドレス ](https://ja.wordpress.org/2021/05/27/coloring-your-images-with-duotone-filters/?subject=%5B%E5%85%B1%E6%9C%89%E6%8A%95%E7%A8%BF%5D%20%E3%83%87%E3%83%A5%E3%82%AA%E3%83%88%E3%83%BC%E3%83%B3%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF%E3%83%BC%E3%81%A7%E7%94%BB%E5%83%8F%E3%81%AB%E8%89%B2%E4%BB%98%E3%81%91&body=https%3A%2F%2Fja.wordpress.org%2F2021%2F05%2F27%2Fcoloring-your-images-with-duotone-filters%2F&share=email) [前 Internet Explorer 11 サポート終了](https://ja.wordpress.org/2021/05/19/dropping-support-for-internet-explorer-11/) [次 WordPress が18歳になりました](https://ja.wordpress.org/2021/05/27/wordpress-at-18/) ## カテゴリー * [Announcement](https://ja.wordpress.org/category/announcement/) (77) * [Community](https://ja.wordpress.org/category/community/) (47) * [Cousins](https://ja.wordpress.org/category/cousins/) (3) * [Design](https://ja.wordpress.org/category/design/) (1) * [Development](https://ja.wordpress.org/category/development/) (279) * [Documentation](https://ja.wordpress.org/category/documentation/) (3) * [Events](https://ja.wordpress.org/category/events/) (25) * [Features](https://ja.wordpress.org/category/features/) (13) * [Focus](https://ja.wordpress.org/category/focus/) (1) * [General](https://ja.wordpress.org/category/general/) (23) * [Hosting](https://ja.wordpress.org/category/hosting/) (2) * [Meta](https://ja.wordpress.org/category/meta/) (11) * [Month in WordPress](https://ja.wordpress.org/category/month-in-wordpress/) ( 7) * [Podcast](https://ja.wordpress.org/category/podcast/) (2) * [Releases](https://ja.wordpress.org/category/releases/) (396) * [Security](https://ja.wordpress.org/category/security/) (76) * [Testing](https://ja.wordpress.org/category/testing/) (24) * [Themes](https://ja.wordpress.org/category/themes/) (4) * [Updates](https://ja.wordpress.org/category/updates/) (7) * [User Interface](https://ja.wordpress.org/category/user-interface/) (13) * [WordCamp](https://ja.wordpress.org/category/wordcamp/) (9) ## 購読する メールアドレスを入力… * [WordPress とは](https://ja.wordpress.org/about/) * [ニュース](https://ja.wordpress.org/news/) * [ホスティング](https://wordpress.org/hosting/) * [プライバシー](https://ja.wordpress.org/about/privacy/) * [ショーケース](https://wordpress.org/showcase/) * [テーマ](https://ja.wordpress.org/themes/) * [プラグイン](https://ja.wordpress.org/plugins/) * [パターン](https://ja.wordpress.org/patterns/) * [Learn](https://learn.wordpress.org/?locale=ja) * [サポート](https://ja.wordpress.org/support/) * [開発者](https://developer.wordpress.org/) * [WordPress.tv ](https://wordpress.tv/) * [参加・貢献](https://make.wordpress.org/) * [イベント](https://events.wordpress.org/) * [寄付 ](https://wordpressfoundation.org/donate/) * [Swag ](https://mercantile.wordpress.org/) * [WordPress.com ](https://wordpress.com/?ref=wporg-footer) * [Matt ](https://ma.tt/) * [bbPress ](https://bbpress.org/) * [BuddyPress ](https://buddypress.org/) [ 日本語 ](https://make.wordpress.org/polyglots/teams/?locale=ja) The WordPress® trademark is the intellectual property of the WordPress Foundation. * [X (旧 Twitter) アカウントへ](https://www.x.com/WordPress) * [Bluesky アカウントへ](https://bsky.app/profile/wordpress.org) * [Mastodon アカウントへ](https://mastodon.world/@WordPress) * [Threads アカウントへ](https://www.threads.net/@wordpress) * [Facebook ページへ](https://www.facebook.com/WordPress/) * [Instagram アカウントへ](https://www.instagram.com/wordpress/) * [LinkedIn アカウントへ](https://www.linkedin.com/company/wordpress) * [TikTok アカウントへ](https://www.tiktok.com/@wordpress) * [YouTube チャンネルへ](https://www.youtube.com/wordpress) * [Tumblr アカウントへ](https://wordpress.tumblr.com/) Code is Poetry.