Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressでInstagramのような写真フィルターを追加する方法(ステップバイステップ)

画像はオーディエンスを惹きつける重要な権限グループであり、フィルターを使ってこれらの画像を強化することで、サイトにプロフェッショナルでクリエイティブなタッチを加えることができます。

Instagramのようなフィルターを使ってWordPressサイトの写真を編集すれば、見栄えが変わり、コンテンツが際立ちます。

WPBeginnerでは、多くのチュートリアルを書いているため、ブログ投稿にスクリーンショットを追加することがよくあります。しかし、他のサイトが画像にフィルターを使っていることに気づきました。そこで私たちは、WordPressの画像に簡単にImagelyスタイルのフィルターを追加できるよう、さまざまなソリューションを徹底的に研究し、テストしました。

この投稿では、WordPressでInstagramのような写真フィルターを追加する方法を説明します。

Add Instagram like photo filters in WordPress

なぜWordPressにInstagramのような写真フィルターを追加するのか?

Instagramフィルターは、写真を個別クリックで編集できるソーシャルメディアプラットフォームの機能だ。あらかじめ設定された画像編集のライブラリから選択するだけで、Instagramが自動的にそれらの変更を適用する。

各写真に適用するフィルターの量は、0~100%の範囲で選択できます。

Instagram filters

では、なぜInstagramのフィルターを使うべきなのでしょうか?主な理由をいくつか挙げてみよう:

  • 写真の編集をもっと簡単に、もっと素早く: WordPressサイトに美しい画像を投稿したいのはすべて同じです。あなたの写真がすでに素晴らしいものであったり、Adobe Photoshopの達人であったりしない限り、もっと簡単に写真をレタッチしたいはずです。
  • 一貫したブランドイメージを作る: ブランディングがすべてです。どのような会社なのか、どのようなメッセージをオーディエンスに送りたいのかを伝えるものです。ブランドに合ったフィルターを使うことで、サイトの視覚的な魅力が増し、よりまとまりのある外観になります。
  • クリエイティブに:フィルターはコンテンツに多様性を与え、画像を際立たせることができます。商品やポートフォリオの項目を紹介する際に役立ちます。

注:画像に他の変更を加える方法を知りたい場合は、WordPressで基本的な画像編集を行う方法についての投稿日をご覧ください。

それでは、WordPressサイトにInstagramのような写真フィルターを追加する方法を説明しよう。以下がその手順だ:

簡単な画像フィルターでInstagramの写真効果を追加する方法

朗報は、WordPressで画像フィルターを無料で追加できることだ。Instagramのような区切りのプラットフォームや写真編集ソフトを使う手間は必要ない。

始めるには、Easy Image Filtersプラグインをインストールして有効化する必要があります。

ステップバイステップの手順が必要な場合は、WordPressプラグインのインストール方法をご覧ください。

有効化したら、編集したい写真をWordPressメディアライブラリにアップロードしてください。

そのためには、Media ” Add New Media Fileにアクセスしてください。そこから追加したい画像ファイルを選び、「アップロード」を選択します。

upload media files

フィルターを追加したい写真をすべてアップロードしてください。

次に、メディア ” ライブラリタブに移動し、編集したい写真を選択します。

Select photo in media library

画像の添付ファイルの詳細が開き、写真のプレビューが表示されます。

右下にある「Edit more details」をクリックする。

Edit more details

説明フィールドの下に「画像エフェクトの追加」機能があり、選択した画像に様々なフィルターを適用することができます。

追加」をクリックする。

Add image filter

この画面では、画面上部に画像が表示され、次に使用可能な調整とプリセットが表示されます。

写真に変更を加えることができる重要な調整には、次のようなものがあります:

  • 明るさ
  • コントラスト
  • 活気
  • 飽和
  • 露出
  • 色相
  • さらに

また、25種類のプリセットが用意されている。プリセットは、特定のルックを達成するために設計された設定の構成です。写真の特定の色や照明を自動的に調整するので、手動で調整する必要はありません。

Adjustments and presets

調整項目を切り替えるか、好みに合ったプリセットを選択する。

フィルターの強化に満足したら、「保存」をクリックします。画像を元の状態に戻したい場合は、代わりに「リセット」を選択できます。

Save filter enhancements

編集を保存すると、更新された画像が自動的にメディアライブラリに表示されます。

メディア ” ライブラリタブに戻れば、Instagramのようなフィルターが追加された更新画像が見つかります。

Image with Instagram-like filter in WordPress

これで、サイト上のどこにでも写真をアップロードできるようになった。

例えば、WordPressのページや投稿に画像を追加すると、次のようになります。

Adding filtered image to wordpress

フィルター画像のアップダーにお困りの場合は、WordPressで画像を正しく追加する方法をご覧ください。

画像にフォトエフェクトを加えることは、画像を際立たせる素晴らしい方法です。しかし、場合によっては、フィルターをかけた写真をイメージギャラリーに追加したいこともあるでしょう。

これが役に立つ例をいくつか挙げてみよう:

  • あなたは写真家で、自分のポートフォリオを紹介したいと考えています。
  • 不動産会社を経営しており、住宅の写真を強調したいと考えている場合。
  • あなたは、潜在的なクライアントに、どのような仕事ができるかをプレビューして見せたいと考えているデジタルエージェンシーです。

しかし、ギャラリーはこれらのビジネスに限定されるものではありません。ほとんどのサイトが、商品やサービスを視覚的に紹介するためにイメージギャラリーを利用することができます。

フィルターをかけた写真のイメージギャラリーを作成するには、Envira Galleryプラグインをインストールして有効化する必要があります。

注:画像スライダーを追加することだけに興味がある場合、Envira Galleryの無料版を使用することができます。しかし、より多くのギャラリーテーマ、ライトボックス、または動画スライダーのような高度な機能が必要な場合は、プロバージョンの使用を検討する必要があります。

Envira Galleryは WordPressのための最高の画像ギャラリープラグインです。ドラッグアンドドロップビルダーを使用して、美しいモバイルレスポンシブの写真や動画ギャラリーを作成することができます。

Is Envira Gallery the right photo and video gallery plugin for you?

私たちのパートナーブランドのいくつかは、このツールを使って魅力的なギャラリーの作成に成功しています。詳細はEnvira Galleryのレビューをご覧ください。

最初に必要なことは、Envira Galleryプラグインをインストールして有効化することです。ステップバイステップの手順が必要な場合は、WordPressプラグインのインストール方法のガイドをご覧ください。

有効化した後、Envira Gallery “ 新規 追加ページに行き、新しいギャラリーを作成する必要があります。後で簡単に参照できるようにタイトルを付けてください。

次に「コンピューターからファイルを選択」をクリックします。

Upload images to Envira Gallery

次に、コンピューターから画像を選択する必要があります。

写真がアップロードされると、スクロールダウンして「ギャラリー」タブに追加されたすべての画像を見ることができます。

images added to gallery

設定’タブでは、ギャラリーのレイアウト、画像サイズ、画像寸法などを選択することができます。

そうすれば、ギャラリーの外観をあなたのニーズに合わせてカスタマイズすることができます。

Configurations tab

そこから、右側のパネルにある「公開する」ボタンを押すだけだ。

Enviraギャラリーブロックを使用して、投稿やページにギャラリーを追加することができます。

publish envira gallery

デモサイトではこんな感じです。

詳しくは、WordPressで画像ギャラリーを作成する方法をご覧ください。

Gallery example

ボーナス:WordPressにInstagram Feedを埋め込む

Instagramのようなフィルターを追加するだけでなく、Instagramのフィード全体をサイトに追加することもできます。そうすることで、ユーザーはソーシャルメディアであなたのコンテンツを見ることができ、エンゲージメントを高め、顧客を長く維持することができる。

そのためには、Smash BalloonのInstagram Feed Proを使用することができます。Smash BalloonのInstagramFeed Proは、ビジュアルビルダー、ソーシャルメディアプラットフォームとの簡単な統合、Shoppableフィードを作成できる、市場で最高のInstagramプラグインです。

Smash Balloon Instagram feed

私たちは個人的にこのツールをテストし、超初心者向けで拡張性があることを発見しました。さらに詳しく知りたい方は、Smash Balloonのレビューをご覧ください。

フィードレイアウトを選択し、「Load More」と「Follow」ボタンを追加することができます。

その他にも、ライトボックスを有効化したり、配色を変更したり、モバイル端末用にフィードを最適化したりすることができる。詳しくは、WordPressにInstagramを簡単に埋め込む方法のチュートリアルをご覧ください。

Smash Balloon's color scheme settings

WordPressでInstagramのような写真フィルターを追加する方法について、この投稿がお役に立てば幸いです。また、専門家が選ぶ最高のウェブデザインソフトウェアやWordPressで背景画像を追加する方法についてのガイドもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

8件のコメントLeave a Reply

  1. Jose

    Hello,

    Your pressgram knowledge base link is a 404.

    Jose

  2. rafael armstrong

    Glad to hear an Android version is in the works– I just heard about the app in the last week or so, and based on what I read, I can’t wait to try it out.

  3. Andy Green

    “Next, you just need to choose which blog(s) you’d like to publish the photos to and whether you want to share it on Facebook and Twitter. That’s it.”

    Can you positively confirm this? I tried many times to publish to a self-hosted blog with zero success. It was when I installed the WP plugin on the site that it started working, no problem at all.

    I created a ticket on the PG support page but never got a reply whether the plugin is required.

    So, are you sure it works without the plugin?

    • WPBeginner Support

      yes we can confirm this. It works smoothly on self hosted WordPress blogs without installing the plugin.

      Admin

      • Jim

        Not always. I have yet to be able to get it work with self-hosted, regardless of whether or not the plugin is installed.

  4. Zimbrul

    Thanks for the tutorial. Pressgram is not that intuitive to set up and this tutorial is quite good in this respect.
    I was trying to publish something to my blog on the day they released the app but it didn’t work. It might be because my blog is in maintenance mode…

  5. Jonathan Blundell

    I’ve been using Pressgram since July or so (Alpha testing) and LOVE it.

    The WordPress mobile app (and plugins for importing Instagram or Flickr images) has always left me wanting when it comes to publishing photos and Pressgram fills that void. I’m not as concerned about the filters as I am about having an easy way to share my photos on my WordPress sites on the go.

    I’m already seeing an increase in my visits and page views thanks to adding Pressgram to my site. No more losing traffic to a third-party site and *hoping* I can bring them back to my site.

    Plus, the ability to publish to multiple WordPress sites with a couple clicks is HUGE.

    Really excited now that Pressgram has officially launched and can’t wait to see what’s in store.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.