はじめに
現在はてなブログの運営は、残念ながら、とてもひどい状態です。
Googleフォト連携が完全復活していない上に、インスタグラムのリンクが切れるという、運営としてあってはならない機能障害が出ているにも関わらず、まったく改善される傾向にありません。
対応方法の検討
ということで、Wordpressに移行を検討したものの、Googleフォトの連携しなおしておかないと、再度貼り付け直しになり、かなり面倒だと感じたので、いったんはてなブログで立て直すことを優先することにしました。
ただ、はてなの環境に依存すると、今後の移行も面倒になると考え、独立性が確保できるように、HTML埋め込みで対応できるように検討しました。
その結果、多少手間ではあるものの、
・インスタグラムの投稿をはてなブログに埋め込み
・OneDriveから写真をはてなぶろぐに埋め込み
にすることにしました。
インスタグラムの投稿をはてなブログに埋め込み
インスタグラムが埋め込み用のHTMLコードを発行してくれるため、はてなぶろぐのHTML編集モードで、任意の場所に張り付ければ簡単に張り付けることができます。
詳細は以下の記事の"Instagramの投稿埋め込み用コードをHTML編集画面で貼り付ける"を参考にしてください。
OneDriveから写真をはてなぶろぐに埋め込み
OneDriveを選んだ理由
今今、はてなブログのGoogleフォト運営は、はてなの写真保存場所（フォトライフ）にアップロードされ、ブログに張り付けることになります。
そうすると、現状の問題は、移行したときにはてなブログの利用料を払い続けて、写真の保管とリンクを維持する必要があり、さらにはいつ使えなくなるか不明な状態となっています。
そこで、OneDriveを活用することにしました。
理由は、個々の事情にもよりますが、
・仕事でMicrosoft365を使用している
・OneDriveであればリンク独自に発行しているため独立性を確保できる
・ドラック＆ドロップで、日頃の写真管理もできる
・スマホやパソコン問わず、共有可能
に加えて、OneDriveであれば、HTMLに埋め込み用のコードを発行できることもあり、利便性を損なわずに使えることも、決め手となりました。
OneDriveの写真埋め込み方法
OneDriveにアクセス
埋め込みリンクを生成したい対象写真をチェックし、画面右上の埋め込みをクリックしてください。
生成リンクをクリック
別の写真で申し訳ないですが、生成をクリックして、埋め込み用のURLを生成します。
埋め込み用HTMLのコピー
HTMLに張り付けるために、埋め込み用のHTMLにタグを含める必要があるので、HTMLタグを含めるにチェックをしてください。
その上で、枠内の文字列をすべてコピーしてください。
はてなブログに貼り付け
はてなブログにアクセスし、HTML編集画面を開きます。
HTML編集欄の任意の場所に貼り付ければ、埋め込み完了です。
レスポンシブ対応でひと手間
普通に張り付けると画像の縦横比が・・・
実は上記の通りに、ただ単に張り付けてしまうと、画像の縦横比が崩れてしまいます。
パソコンモードでプレビューするとわかりずらいですが、スマホモードでプレビューすると悲惨な感じに。。。。
そこで張り付ける際に、ひと手間加える必要があります。
height="720"を削除
はてなブログのしような気がしますが、レスポンシブ化する際に、幅（width="")で強制的に調整しているようですが、高さ（height=""）はどうやら調整してくれないようです。
そのため、高さ（height=""）を固定しなければと考えて、やってみるとまさにその通りになりました。
張り付ける際は注意してください。
まとめ
みなさまいかがでしたでしょうか？
仕事に気を取られているので、企画の時間も確保できていないですが、改廃にも時間を取られてしまい、なかなかうまく運用ができませんね。
すこしでも、運用がやりやすくなるように参考にして頂ければと思います。
