ワードプレスとインスタグラムの応用編!サイズ変更と自動投稿もできる?

ワードプレスLINEブログインスタグラム画像を貼り付けたり、ブログとインスタグラムを連携して自動投稿したいと考えている人もいるでしょう。

また、ブログに埋め込んだ画像のサイズを小さくしてスッキリさせたいという人もいると思います。

 

ワードプレスやLINEブログにインスタグラムを使うことで、ブログの見栄えを良くすることもできますし、読者層によってはブログのファンやフォロワーを増やしたりすることも出来るので、この記事を参考に取り入れてみてください。

インスタグラムをワードプレスに埋め込む方法

インスタグラムをワードプレスに貼り付けるには、インスタグラムの利用規約に違反しないようにしなければいけません。

少し難しいように感じるかもしれませんが、簡単に言えばインスタグラムが認めている方法でブログに貼り付ければ問題ありません。

 

  • インスタグラムが認めている方法
  • URLを貼り付ける
  • 埋め込みコードを使用する

 

  • インスタグラムが認めていない方法
  • 他人のインスタグラムの画像をダウンロードして貼り付ける
  • スクリーンショットを撮って貼り付ける

 

インスタグラムが認めていない方法でブログに画像を貼り付けると、著作権違反となりますので絶対にしないようにしてくださいね!

また、インスタグラムに投稿されている画像がそもそも著作権違反の画像という場合もありますので、くれぐれも慎重に扱うようにしてください。

 

それでは、著作権違反にならない貼り付け方について解説していきます。

まずは、パソコンでインスタグラムを開きましょう。

Instagramhttps://www.instagram.com/

 

URLを貼り付ける方法

一番簡単な方法としては、インスタグラムの投稿URLを貼り付ける方法です。

 

Instagramの投稿URLを貼り付ける方法①

 

ブログに貼り付けたい投稿の右上にある【…】をクリックして【リンクをコピー】をクリックしましょう。

 

Instagramの投稿URLを貼り付ける方法②

ビジュアルモードでもテキストモードでもどちらでもいいので、表示させたいところにURLを貼り付ければ完了です!

上記のように表示されるかもしれませんが、プレビューで確認すればちゃんと表示されていると思います。

ただし、ワードプレスのバージョンが古いままだと、上記のように表示されませんし、プレビューで見ても表示さないので注意されてください。

 

この方法はとても簡単ではありますが、横幅が広いのであまり使い勝手はよくないかもしれません。

サイズ調整もできないので、あまり使う機会がないかもしれません。

 

埋め込みコードを使用する

次に、『埋め込みコード』を使用する方法について解説します。

 

Instagramの投稿URLを貼り付ける方法③

ブログに埋め込みたい投稿の右上にある【…】をクリックして【埋め込み】をクリックしましょう。

 

Instagramの投稿URLを貼り付ける方法④

【埋め込みコードをコピー】をクリックするだけでコードがコピーされますので、テキストモードにして貼り付ければ完了です。

また、【キャプションを追加】の意味は、投稿のコメントを載せるか載せないかの違いとなります。

下記を見比べてみるとわかりやすいと思います。

 

【キャプションを追加】にチェックありの場合。

 【キャプションを追加】にチェックなしの場合。  

 

 

 

この投稿をInstagramで見る

 

スターバックス公式さん(@starbucks_j)がシェアした投稿


またサイズ変更をする場合は、埋め込みコードの最初の方にある『max-width:540px』という部分の数値を変更すると、小さく表示させることができます。

Instagramの投稿URLを貼り付ける方法⑤

 

 

この投稿をInstagramで見る

スターバックス公式さん(@starbucks_j)がシェアした投稿


小さく表示させることができました!

好みに合わせて表示サイズを変更してみてくださいね!

 

LINEブログにインスタグラムの投稿を埋め込む方法

 

スマホだけで簡単に投稿できるLINEブログですが、LINEブログにインスタグラムの投稿を埋め込む場合もスマホから簡単にできます。

その操作手順を簡単に解説すると、

  1. インスタグラムの[リンクをコピー]をタップ
  2. LINEブログの[リンク]をタップ

これで完了です!

詳しく解説しますね^^

 

埋め込みたいインスタグラムの投稿のリンクをコピーする

LINEブログにインスタ埋め込み①

LINEブログに埋め込みたいインスタグラムの写真をタップすると、右上に【・・・】のマークが表示されます。

そこをタップすると、【リンクをコピー】という項目があるのでタップします。

すると、『リンクがクリップボードにコピーされました』というコメントが表示されます。

 

LINEブログのリンクマークから埋め込む

LINEブログにインスタ埋め込み②

LINEブログの記事作成画面を開き、インスタグラムを埋め込みたい場所にカーソルを合わせたら【リンクマーク】をタップします。

すると、先ほどインスタグラムでコピーしたリンク先が表示されるので【登録】をタップすれば完了です。

とても簡単ですね!

 

LINEブログで収益化は無理!?

LINEブログは、スマホから簡単に投稿できるので手軽なブログではありますが、【ブログで収益化する】となると不向きです。

理由はいくつかありますが、簡単に言えば『借り物のブログ』だからですね。

 

インスタグラムの写真を貼り付けるだけの趣味ブログには向いていますが、せっかくコツコツと記事を投稿するのであれば、収益化できる方法で運用した方がいいですよね^^

 

ブログで収益を上げる方法は、無料メルマガでご紹介しています。

ブログでお金を稼いでみたい!という人は、ぜひメルマガを参考に収益化できるブログの運用方法を学んでみてくださいね!

無料メルマガ登録

 

ワードプレスとインスタグラムを連携させる

インスタグラムを手動での埋め込み方法をご紹介しましたが、ここからはワードプレスとインスタグラムをプラグインを使って連携させる方法を解説していきます。

使用するプラグインは 1.Custom Feeds for Instagram】と 2.【Blog2Social:Social Media Auto Post & Scheduler】というものです。

この2つのプラグインの違いは、

  1. インスタグラムの投稿をブログに反映させる
  2. ワードプレスの記事をパソコンからインスタグラムに投稿させる

という違いがあります。

 

インスタグラムをどのように使っていくかによって、使用するプラグインを使い分けていきましょう。

では、それぞれ解説していきますね!

 

Custom Feeds for Instagramの設定方法

Custom Feeds for Instagram

Cutom Feeds for Instagramは、インスタグラムに投稿した写真などを自動でブログにも反映させることができるプラグインです。

ブログからインスタグラムへ読者さんを誘導したい場合に便利なプラグインです。

 

Custom Feeds for Instagramインストール・有効化

まずはプラグインの新規追加より、Cutom Feeds for Instagramと検索してプラグインをインストール・有効化しましょう。

参考:プラグインのインストールと削除方法

 

 

Custom Feeds for Instagram設定①

インストール・有効化をすると、左サイドバーに【Instagram Feed】という項目が追加されていますので、クリックして設置を行います。

初めに、【Instagram|Connect an Instagram Account】をクリックして、自分のインスタグラムと紐づけしていきます。

 

Custom Feeds for Instagram設定②

上記の画面が表示されたら【Authorize】をクリック。

 

Custom Feeds for Instagram設定③-1

 

インスタグラムのアカウントとの紐づけができると、①自分のインスタグラムが表示されます。

 

②【Check for new posts every】は、インスタグラムをチェックしてブログに反映させる頻度を決めることができます。

1日にインスタグラムに何度も写真を投稿するような人であれば、1時間に1回などの頻度でもいいかもしれませんが、そうでなければ特に気にする必要はありません。

 

Custom Feeds for Instagramのカスタマイズ

Custom Feeds for Instagramは、その名の通り様々なカスタマイズが可能です。

デフォルトのままでももちろん使えますが、最低限のカスタマイズ方法をご紹介します。

 

Custom Feeds for Instagram設定④

【2.Customize】タブの[General]では、表示させるフィードのサイズや背景色を設定できます。

とりあえずはそのままでも問題はありませんが、自分の好きなように調整をされてみてください。

 

Custom Feeds for Instagram設定⑤

[Layout]では、表示させるフィードの写真の枚数や、1行に表示させる写真の数、写真と写真の隙間サイズなどが調整できます。

Disable mobile layoutのチェックを入れると、スマホやタブレットでもPCと同じように表示させることができます。

チェックを外すと、写真が1枚ずつ縦に表示さるので、このチェックは入れておくことをおすすめします。

 

Custom Feeds for Instagram設定⑥

[Photos]では、フィードに表示させる写真の設定が可能です。

[Sort Photos By]は、写真を新しい順番に表示させるNewest to oldestか、ランダムに表示させるRamdomかを選択できます。

[Image Resolution]は、画像の解消度を設定できますが、ここはデフォルトのまま(Auto-detect)でいいかと思います。

 

Custom Feeds for Instagram設定⑦

 

[’Load More’ Button][’Follow’ Button]は、フィードに表示された写真以外も見るときのボタンとインスタグラムのフォローボタンの設定になります。

①チェックを入れるとボタンを表示。

②ボタンの色を変更。

③ボタンのテキストの色を変更。

④ボタンに表示される文字を編集できる。

 

これ以外にもカスタマイズをする項目がありますが、最低限ここまでをチェックしておくといいでしょう。

興味のある人は、さらにカスタマイズをされてみてくださいね!

 

インスタグラムのフィードをワードプレスに表示する方法

各カスタマイズが終わったら、ワードプレスに表示させましょう。

 

Custom Feeds for Instagram設定⑧

[3.Display Your Feeds]のタブをクリックし、[instagram-feed]というコードをコピーして、表示させたい部分に貼り付けるだけで完了です。

記事本文中に表示させてもいいですし、サイドバーに表示させることもできます。

 

Custom Feeds for Instagram設定⑨

サイドバーに表示させる場合は[外観][ウィジェット][テキスト]をサイドバーにドラッグして、コピーしたコードを貼り付ければOKです。

 

Custam Feeds for Instagramの設定は以上です。

 

Blog2Social:Social Media Auto Post & Schedulerの設定方法

Blog2Social

 

ブログ記事のアイキャッチなどをインスタグラムに投稿して、インスタグラムからブログへ誘導したいときに便利なプラングインがBlog2Social:Social Media Auto Post & Schedulerです。

ただし、インスタグラムの投稿ではブログ記事のURLなどはリンクとして扱われず、普通の文字列として扱われます。

フォロワーが10,000人を超えた場合・ビジネスアカウント(いつでも切り替えられる)の条件を満たせば、ストーリーにブログURLやYoutubeのURLなどをリンクとして載せることができますが、その条件を満たさなければリンクとして貼り付けることができません。

そのため、人によってはまだ必要のないプラグインかもしれません。

プラグインが多すぎると、不具合が出ることもありますので必要な方のみ使ってみてください。

 

Blog2Socialインストール・有効化

プラグインの新規追加より、Blog2Socialと検索してプラグインをインストール・有効化しましょう。

参考:プラグインのインストールと削除方法

 

 

Blog2Social設定①

インストール・有効化すると、左サイドバーに【Blog2Social】の項目が追加されていますので、その中の【Networks】をクリックします。

今回はインスタグラムと連携させたいので、Instagramの欄【+Profile】をクリックしましょう。

 

 

Blog2Social設定②

インスタグラムに使っている[Username][Password]を入力して【authorize】をクリックします。

 

 

Blog2Social設定③

確認を求められますので、間違いなければ【confirm】をクリック。

 

 

Blog2Social設定④

インスタグラムを登録しているメールアドレスに確認のセキュリティコードが送られてきますので、セキュリティコードを入力し【Verify account】をクリック。

これで連携は完了です。

 

Blog2Socialでインスタグラムに投稿する方法

インスタグラムに投稿する方法を解説します。

 

Blog2Social設定⑤

[Blog2Social][Posts&Sharing]をクリックします。

記事の一覧が表示されますので、インスタグラムに投稿したい記事の横にある【Share on Social Media】をクリック。

 

Blog2Social設定⑥-1

 

テキストボックス欄には、ブログ記事の前半部分がすでに表示されていますが、そのままでもいいですし書き直すこともできます。

テキストを整えたら【Share】をクリックして完了です。

インスタグラムにはすぐに投稿され、ブログ記事に設定したタグもハッシュタグとして反映されます。

 

最初に説明しましたが、インスタグラムは、条件を満たしていないとブログの記事リンクを貼っていても文字列として扱われます。

ですので、自分に必要なければBlog2Socialのプラグインを使うことはありません。

自分の状況に合わせて使用されてくださいね!

 

まとめ

ワードプレスにインスタグラムの写真を貼り付ける場合は、リンクをコピーして貼り付けるか、埋め込みコードを使用します。

埋め込みコードはサイズの変更も可能ですので、状況に合わせて使い分けていきましょう。

 

また、ワードプレスとインスタグラムを連携させるにはプラグインを使用します。

  • Custom Feeds for Instagram
  • Blog2Social

それぞれ目的が違っているので、状況に合わせて使い分けていきましょう。

 

毎日、平均5.6人が登録中

googleメールアドレス(g mail)推奨


コメントを残す

※メールアドレスの間違いが多くなっております。

コメント内容によっては、個別にメール返信にて回答させていただきますので

メールアドレスの入力は正しく行っていただきますようお願いします。

Facebookで最新情報お届け!

特化型ブログについて!