読者です 読者をやめる 読者になる 読者になる

HHS

変デジはてな支所

はてなブログにinstagramの写真を貼るときの注意点

はてなブログの「見たまま編集」でinstagramの写真を貼るときの注意点

はてなブログの「見たまま編集」はとても便利です。たとえばinstagramと連携すれば右サイドバーから自分が投稿した写真をパパッと貼る事が出来ます。

f:id:lonestartx:20150127181757j:plain

この方法で貼れば問題なくinstagramの写真をはてなブログに貼る事が出来ます。しかしコレは自分のinstagramアカウントの写真だけです。たとえば知り合いの写真を紹介したい時などには使えません。

instagramのサイトへアクセスします

instagramが提供している貼り付け機能を使ってブログに写真を貼りたい場合、まずはinstagramのサイトにアクセスします。

f:id:lonestartx:20150127182125j:plain

自分の写真を表示して右下にある「・・・」みたいなマークをクリック。

f:id:lonestartx:20150127182248j:plain

次に「Embed」をクリック。

f:id:lonestartx:20150127182315j:plain

表示されたコードをコピーして・・・はてなブログに戻ります。

f:id:lonestartx:20150127182343j:plain

「HTML編集」にして先ほどのコードをペーストします。このまま「HTML編集」を維持して記事を書き上げ公開すれば問題ありません。しかし、、、ペースト後「見たまま編集」に戻ると・・・

f:id:lonestartx:20150127182528j:plain

instagramの埋め込みが成功しているように見えます。しかし、、、もう一度「HTML編集」に戻ると・・・

f:id:lonestartx:20150127182631j:plain

分かりますか?instagramでコピーしてきたコードとは全く違うコードに変換されます。この状態でアップしても枠だけ表示されて写真は全く表示されません。

今回はinstagramで記事を書きましたが、同じ様にどこかからコードをコピーしてペーストする場合も注意が必要です。見たまま編集は凄く便利ですが、、、自分が思っていた表示と変わってしまう場合があります。

そんな時は一度「HTML編集」をチェックしてください。ここをチェックすると解決方法が分かると思いますよ。あ、基本的な知識は必要ですが。