Good Omen Factory

クルマ、バイク、パソコン、カメラ、ガジェット系をご紹介!!

【ライフハック】はてなブログでインスタ投稿とOnedriveの写真を埋め込み

 

はじめに

現在はてなブログの運営は、残念ながら、とてもひどい状態です。

Googleフォト連携が完全復活していない上に、インスタグラムのリンクが切れるという、運営としてあってはならない機能障害が出ているにも関わらず、まったく改善される傾向にありません。

help.hatenablog.com

 

 

対応方法の検討

ということで、Wordpressに移行を検討したものの、Googleフォトの連携しなおしておかないと、再度貼り付け直しになり、かなり面倒だと感じたので、いったんはてなブログで立て直すことを優先することにしました。

ただ、はてなの環境に依存すると、今後の移行も面倒になると考え、独立性が確保できるように、HTML埋め込みで対応できるように検討しました。

 

その結果、多少手間ではあるものの、

・インスタグラムの投稿をはてなブログに埋め込み

・OneDriveから写真をはてなぶろぐに埋め込み

にすることにしました。

 

 

インスタグラムの投稿をはてなブログに埋め込み

インスタグラムが埋め込み用のHTMLコードを発行してくれるため、はてなぶろぐのHTML編集モードで、任意の場所に張り付ければ簡単に張り付けることができます。

詳細は以下の記事の"Instagramの投稿埋め込み用コードをHTML編集画面で貼り付ける"を参考にしてください。

www.howtonote.jp

 

 

OneDriveから写真をはてなぶろぐに埋め込み

OneDriveを選んだ理由

今今、はてなブログのGoogleフォト運営は、はてなの写真保存場所(フォトライフ)にアップロードされ、ブログに張り付けることになります。

そうすると、現状の問題は、移行したときにはてなブログの利用料を払い続けて、写真の保管とリンクを維持する必要があり、さらにはいつ使えなくなるか不明な状態となっています。

そこで、OneDriveを活用することにしました。

 

理由は、個々の事情にもよりますが、

・仕事でMicrosoft365を使用している

・OneDriveであればリンク独自に発行しているため独立性を確保できる

・ドラック&ドロップで、日頃の写真管理もできる

・スマホやパソコン問わず、共有可能

に加えて、OneDriveであれば、HTMLに埋め込み用のコードを発行できることもあり、利便性を損なわずに使えることも、決め手となりました。

 

OneDriveの写真埋め込み方法

OneDriveにアクセス

埋め込みリンクを生成したい対象写真をチェックし、画面右上の埋め込みをクリックしてください。

 

生成リンクをクリック

別の写真で申し訳ないですが、生成をクリックして、埋め込み用のURLを生成します。

 

埋め込み用HTMLのコピー

HTMLに張り付けるために、埋め込み用のHTMLにタグを含める必要があるので、HTMLタグを含めるにチェックをしてください。

その上で、枠内の文字列をすべてコピーしてください。

はてなブログに貼り付け

はてなブログにアクセスし、HTML編集画面を開きます。

HTML編集欄の任意の場所に貼り付ければ、埋め込み完了です。

 

レスポンシブ対応でひと手間

普通に張り付けると画像の縦横比が・・・ 

実は上記の通りに、ただ単に張り付けてしまうと、画像の縦横比が崩れてしまいます。

パソコンモードでプレビューするとわかりずらいですが、スマホモードでプレビューすると悲惨な感じに。。。。

そこで張り付ける際に、ひと手間加える必要があります。

 

height="720"を削除

はてなブログのしような気がしますが、レスポンシブ化する際に、幅(width="")で強制的に調整しているようですが、高さ(height="")はどうやら調整してくれないようです。

そのため、高さ(height="")を固定しなければと考えて、やってみるとまさにその通りになりました。

張り付ける際は注意してください。

 

 

まとめ

みなさまいかがでしたでしょうか?

仕事に気を取られているので、企画の時間も確保できていないですが、改廃にも時間を取られてしまい、なかなかうまく運用ができませんね。

すこしでも、運用がやりやすくなるように参考にして頂ければと思います。