このブログの新しい文章は、markdown で書いている。といっても以前はてなブログでも markdown で書いていたのでほぼ困っていなかったのだけど、とりわけ困るのは画像貼り付け。

はてなブログではフォトライフにアップした画像を簡単に貼り付けられるのだけど、テキストエディタ(というか VSCode)の markdown では簡単に画像をピックアップして貼り付けられない。また markdown は文章表現は強いけど、画像レイアウトの表現は普通に html 要素を書くケースがほとんど。

ので、そのため自分のはてなフォトライフにアップした画像を選択して html をクリップボードにコピーする Pickerを作った。 レイアウトとしては

1. 普通に貼り付け
2. 横 100%で貼り付け
3. グルーピングで貼り付け

ができるようにしている。

横 100% で貼り付ける

ブログの本文は通常、親要素が左右の margin / padding を入れていることが殆どで、そのため横幅 100%画像貼り付けが普通には出来ない。そもそもそんな構造で作るのが悪い、というのは最もなのだけど、親での指定が楽なのでどうしてもやってしまう。

なので、良くないやり方(将来的にはうまく動かない、ブラウザによってはうまく動かない)なのだけど、だいたいうまくいく CSS を指定して無理やり行うようにした。

.photos-full-width img {
  display: block;
  max-width: none !important;
  max-height: none;
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

グルーピングして貼り付け

何枚も画像を貼りたいが、一枚一枚大きなサイズでなくても良い、適当に貼り付けたい、JS 使わないで CSS だけでやりたい、そんなときに便利なのが flexbin という CSS 。

これを使うことで、いい感じにグルーピングができる。このブログのスタイルシートは Sass で書いてるので、flexbin を使いやすい (Sass だと細かくカスタマイズできる) のも良い。

ただ完全に縦横比が分かって計算して出しているわけではないので、画像の縦か横がちょっと切れてしまうけどしょうがない。完ぺきを求めるなら、JS で書くのが手っ取り早いけど、今のところそこまでのモチベーションは無いから、適当でだいたいうまくいく、で十分だ。

その他・自分のフォトライフ画像一覧を取得

フォトライフの Atom フィード があるので、そこから持ってきて表示している。CORS の関係で、Google Cloud Functions を挟んで CORS を許可してちょっと整形して、 HTTPS API 経由でとってきてる。Google Cloud Functions、ちゃんとデプロイできるように環境を整えるとすごく簡単に使えるようになるのだけど、そこまでが手間感がある。