記事中にインスタの投稿を埋め込んでみよう!

ブログ管理Instagram, ブログ管理, 初心者

インスタ埋め込みヘッダー

トリ師匠
トリ師匠
前に「Twitter」「Google Map」の埋め込みしたんは覚えてるか?

ぐず夫
ぐず夫
はぁ? そんなん知らん。
ワシは過去に縛られん男やねん。
トリ師匠
トリ師匠
(つい数日前のことやないか…)
ニワトリは三歩歩けば忘れるとかバカにされるけど、ニワトリやなくてぐず夫に変えた方がええな。
ぐず夫
ぐず夫
は、バカにすなよ。
ワシは8年前の今日食べたパンの種類まで事細かに覚えてるわ!
トリ師匠
トリ師匠
…ちなみに何食ったんや?
ぐず夫
ぐず夫
廃棄されてた「エクストラバージンプリンドーナツ」「米粉とほうれん草とメザシをふんだんに盛り込んだコロネ」を2つや。どや、参ったか!
トリ師匠
トリ師匠
(どんな食生活やねん…)

ということで、今回は記事中にインスタの投稿を埋め込んでみようという試みです。

インスタの投稿も埋め込める?

ぐず夫
ぐず夫
Twitterの呟きがブログにのってんのはたまに見るけど、インスタもできるんか?
トリ師匠
トリ師匠
インスタの投稿も、TwitterやGoogle Mapのように埋め込むことが可能やで。
ひとまず上の埋め込み見てみ。
ぐず夫
ぐず夫
ワシのパワプロ画面や!
そ、それでワシに”いんすた”のアカウント作って投稿しろ言うたんか。
ワシのスマホ、メインカメラ壊れてるで大したもん撮れへんで難儀やったで。

トリ師匠
トリ師匠
そんなら今回はぐず夫のインスタ投稿を例に、Gutenbergやクラシックエディタで組み込む方法を確認するで!

実際にインスタ投稿を埋め込んでみよう!

トリ師匠
トリ師匠
まずは前準備やな。
下のリンクの本文入力まで進めたら、いよいよ埋め込んでみるで。

○ 投稿の前準備はコチラ!

トリ師匠
トリ師匠
ほんなら早速、埋め込みたいインスタの投稿を見てみよかの。
埋め込みたい投稿を確認
ぐず夫の投稿したものを例に説明します
ぐず夫
ぐず夫
なんでもええから投稿せえ言われたから、ワシのパワプロのホーム画面をのっけてみたで。
トリ師匠
トリ師匠
(毎日毎日ゲームゲーム、ゲームばっか…)
そしたら早速埋め込み準備や。まずは右上の「…」を押して、「埋め込み」を選択してみよか。

オプションから埋め込みを選択

ぐず夫
ぐず夫
お、なんやまた出たな。
トリ師匠
トリ師匠
すると早速、埋め込み用のコードが表示されるで。
「キャプションを追加」は、コメントなんかを一緒に表示させたい時にチェック入れるとええで。表示させたないときはチェック不要や。

埋め込み画面

ぐず夫
ぐず夫
ふーん。ならチェックはそのまんまで…
トリ師匠
トリ師匠
そしたらインスタのAPI利用規約(埋め込みコード使用の規約)をちゃんと読んで、OKなら「埋め込みコードをコピー」をクリックや。

承諾とコードのコピー

ぐず夫
ぐず夫
コピーしたで。
トリ師匠
トリ師匠
ほんなら次や。
ブログの投稿欄に戻って、いつもみたいに「+」ボタンを押して、「フォーマット」項目ん中の「カスタムHTML」ブロックを選択してちょ。

カスタムHTML選択(インスタ)

トリ師匠
トリ師匠
HTMLブロックの「HTMLを入力」て書いてる部分に、さっきの埋め込みコードを貼り付けたって。ダラダラ~っとなが~いコードが貼っつけられたら成功や。

インスタコード貼り付け

ぐず夫
ぐず夫
…この作業、どっかでやった気がするで。
トリ師匠
トリ師匠
そらそやろ。
Twitterの埋め込みと工程はほぼ同じやもん。実際の埋め込み具合を見てみたいなら、ブロックメニューの「プレビュー」か、投稿メニューの「プレビュー」押して確認してみるとええわ。これでGutenbergを使った埋め込みは完了や。

確認はプレビューを押下

ぐず夫
ぐず夫
(なんやさっきの絵とコードちゃうし、この画像どっかで見たことあるで…)
まぁ、…簡単やな。
トリ師匠
トリ師匠
簡単やで。
簡単な埋め込みで見栄えも満天。
便利なオシャレツールとして使ってみるとええんちゃう? 知らんけど。

クラシックブロックでも埋め込めるの?

トリ師匠
トリ師匠
そんならコードのコピーまでは上の章と全部同じやわ。
さっさとコードをコピーしぃや。
ぐず夫
ぐず夫
もう少し言い方あるやろ。
適当すぎるのは印象悪いで。
トリ師匠
トリ師匠
はいはい。
なら次はいつもみたいに投稿の画面を出してから「+」ボタン押して、「フォーマット」の項目ん中の「クラシック」ブロックを選択やな。

クラシックブロック選択

ぐず夫
ぐず夫
(Twitterの埋め込み…?)
ふ、ふむふむ。
トリ師匠
トリ師匠
次はブロック右上の「︙」(詳細設定)ボタン押して、項目ん中から「HTMLとして編集」を選んでみよか。

HTML表示切り替え

ぐず夫
ぐず夫
(ん、これ、まさか、まさかやで…)
トリ師匠
トリ師匠
画面変わったら、枠ん中にさっきのコードをペタッと貼ったりこんだけで埋め込み作業は終了や
ぐず夫
ぐず夫
…まさか思うけど、Twitterの埋め込みの中身をそのまんま写してる、なんてことはないやろな?
トリ師匠
トリ師匠
写してるで。
だってやることおんなじやもん。引き続きビジュアル編集で文章を記入したかったら、貼り付けた後に、また「︙」ボタン押して「ビジュアル編集」に戻したってな。
ビジュアルモードに戻す
この例はTwitterのコードになってるけど、皆さんはちゃんとインスタのコードを貼ってね!
ぐず夫
ぐず夫
サラッと正直に言うな!
トリ師匠
トリ師匠
編集画面では、なんや変な表示になるかもしれへんけど、記事の「プレビュー」で確認するとちゃんと表示されると思うで見たってな。そんなら最後はクラシックエディタの場合も見とくかの

 

クラシックエディタでもできるんか?

トリ師匠
トリ師匠
クラシックエディタは楽勝や。
上の章と同じコードをコピーして、投稿画面で「テキスト」を選んだら、そのままピッと貼っ付けるだけ。下の絵はTwitterのコードになってるけど、実際はインスタのコードをちゃんと貼るんやで。はい、おしまい。
テキストを選択し貼り付け
テキストモードを選択し、下の赤枠にコードを貼り付け
ぐず夫
ぐず夫
子パンダより適当な説明すな!
トリ師匠
トリ師匠
だって「テキスト」モードにして貼っ付けるだけやで。大層な説明いらんやろ。
ぐず夫
ぐず夫
そ、それでも親切丁寧がウチのブログの「こんせぷと」ちゃうんか?!

トリ師匠
トリ師匠
(誰が言ってんねん…)
はいはい、偉い偉い。


インスタ投稿を埋め込む場合の注意点は?

トリ師匠
トリ師匠
最後に1個だけ注意や
Twitterなんかは規約でちゃんと決まってるで大丈夫なんやけど、インスタは一部「著作権」に関してグレーな部分が残っててな。
ぐず夫
ぐず夫
猪八戒?
なんやそれ、どっかの豚の話か?
トリ師匠
トリ師匠
「著作権」や。
Twitterなんかに関しては、規約ん中で埋め込み機能を使う場合「引用になる」て決まってて基本的に埋め込みOKなんやけど、インスタの規約はそこんとこはっきりせぇへんでな。ひょっとすると、他人様の投稿をブログに埋め込むと著作権的にNGになる可能性があんねん。あくまでグレーなんやけど。
ぐず夫
ぐず夫
なんやそれ。
面倒なこと言うやん。
トリ師匠
トリ師匠
せやから他人様の投稿のっける場合は、のっけて良いか許可を取っとくと、よからぬトラブルに巻き込まれるリスクが減るでてことや。そのうち規約も変更されるか知らんけど、今んところはグレーやねん。気ぃつけといてな。

ぐず夫
ぐず夫
(別に使わへんでええわ…)
はいはい、ごめんやでごめんやで。

インスタ投稿の埋め込みを終えて

ぐず夫
ぐず夫
いんすたねぇ。
やっぱワシには不要なツールやな。
トリ師匠
トリ師匠
なんでやねん。
華やかで見てて楽しいやん。
ぐず夫
ぐず夫
ワシ、キラキラしたもん嫌いやねん。
日常がひとっつもキラキラしてない一般人が、写真の中でだけ着飾ってなーにがオモロいねん。くぅだらなくて腹減るわ。スターだけやれ、スターだけ。
トリ師匠
トリ師匠
……一言ええか?
ぐず夫
ぐず夫
なんや、いよいよワシを褒めちぎる気になったんか?
トリ師匠
トリ師匠
バーカ。(逃亡)
ぐず夫
ぐず夫
なんやとこのトリ!
逃げるな!
ダンパ
ダンパ
ということで、WordPressでブログを作ると色々楽しいよ~♪

素人でもできるWordPressのブログ立ち上げ手順一覧!

ぐず夫
ぐず夫
おのれも唐突に宣伝すな!

以上、Instagramの記事埋め込みでした。
皆さんもブログの華やぎに一つ埋め込んでみてはいかがでしょうか?

ではまた次回。