ゲムマブログの画像をスマホでもはみ出さないように加工するツール（オープンβ）
こんばんは、カイゲです。
ゲムマブログの画像が消えるというつらい事件が起きてしまいましたね。マジで悲しいです。
5月15日午前10時頃、ゲームマーケットサイトを管理するサーバーが不正アクセスを受け、その結果、各出展者様よりこれまでゲームマーケットサイトに掲載いただきました情報の内、「画像」がすべて不正に削除されました。
今回はちょっとでも出展者側のゲムマブログ画像復旧がラクになってほしいとの思いから、作りかけのツールを公開しちゃおうというものになります。
そもそもゲムマブログの画像、そのまま貼るとスマホで見たときにはみ出す
以前からゲムマブログの画像、そのまま貼るとスマホで見たときにはみ出すと言われていて、これを回避するにはCSSを書くしかないのでした。しかしﾋﾄﾂﾋﾄﾂ設定し直すのはかなり辛い…。
ゲムマブログの画像は、
— 符亀@土N07 (@Hu_games) November 29, 2023
画像を普通に貼る
→「ソース」をクリックする
→ 画像部分の「style="width: 〇〇px; height: 〇〇px"」のところを「style="width:100%; height: 100%"」に直す
と、パソコンでもスマホでもいい感じに見えるようになるよ#ゲムマ2023秋 #ゲームマーケット2023秋 https://t.co/Rzgw5N09t3 pic.twitter.com/wvKwoE1rtm
そこで、ちょっと前に「ソースをぶち込んだら<img>タグにいいかんじのCSSを入れる」というものを作って試用してました。
解決ツールはこちら（オープンβ）
いい感じに見た目を整形できたら公開しよ〜〜と寝かせてサボっていた…のですが、今回の件を受けて仮公開します。オープンβということでお願いします。
マジの簡素ですが、使い方は簡単。
箱の中にソースを全部コピペし、ボタンを押します。
プレビューが表示され、その一番下に加工済のソースが出てきますので、これを使ってください。
しくみ
<img>にmax-widthが指定されていなければ、CSSを自動で追加する。
もとのコードに width と height の属性が設定されていた場合に削除する。
デカすぎ画像が嫌な場合は、max-widthを指定します。既に指定してあるmax-widthは上書きしません。
半分くらいGPTに作ってもらいました。こう言うのには強いよね…
今後したいことのメモ
- youtube動画が埋め込まれていたら同様にiframeのアス比を保ったまま拡縮する。
- ゲムマブログ側で設定されてる画像の背景灰色を透明に
- 見た目をなんとか
免責事項
このツールを使って起きたことへの責任は負いかねますのでご了承ください
ご意見お待ちしてます！
（宣伝）
作ったボドゲを遊んでほしいのだ！
スキ・フォローも励みになります！とても………とても励みになります！
え〜〜んゲムマブログ… このツールが要らなくなるような編集しやすいのにリニューアルされるその日まで…！