Shopifyのディレクターさんや構築者さんが多く使われていて、ちょっとだけポイントを説明したい時に便利!
- 画像・動画をスクリーンショットで保存
- URLを共有
だけでとても簡単
プラン
※2025/02/07 地点

無料でも使えるけれども、自ら消さない限り、画像・動画の保存期間に制限は無いので、アクセス数が無制限の有料バージョンにしておく方がお勧め。
少しの事だけどちりつも!!
とせうかな・・・? と思っている期間は月払いが良いけど、使い続けるのが確定しているものは、月580円が、年間1,200円も安くなるなら、お気に入りのメロンパン10個買える!
断然年払い。

ショートカット

キャプチャーした画像一覧
キャプチャーした画像一覧から確認
アイコンから確認の手順
クリックすると、サイトが開いてログインすると一覧が表示されます。
キャプチャーした画像一覧に別画像保存
共有用に、別で作成した画像を保存して共有する事も出来ます。

無料版では画像の編集が出来ないので、数百円でプチ共有サーバーとしても使えるので説明を沢山する人にはお勧めです。
動画のHTMLを取得してShopifyの</> に張り付ける
Gyazo に保存した動画を選択してシェアボタンの中の「HTML」➡ 「video」を選択してHTMLを取得

Shopify 説明画面の </> コード編集に張り付け。
そのまま貼り付けると 1756px 幅になりバカでかくなるので、780px 程度に編集。
でサイズ調整をすると、スマホの時に上手く表示がされません。
video に対してレスポンシブりCSS設定
コードをそのまま貼り付けても、レスポンシブになるようにCSSを追加する
video { width: 100%; max-width: 780px; height: auto; } |
HTMLをそのまま貼り付けた動画の表示
上記のCSS をテーマに設定 + HTMLをそのまま張り付け
で、スマホでもPCでもサイズに不具合なく表示されます。
▼表示サンプル
私はテーマ全体になるようにテーマ自体のカスタムCSS に追記しましたが、トップページに貼る時に小さく表示れる可能性もあるので、微調整してください。
メールにHTML添付してみた
表示サイズが大きすぎるのでサイズ調整は必要そうだけれども
HTML 形式のメールが受信可能な設定をされている場合は、自動再生の動画でメールが届きました!
すごいなここ!
- Youtubeと違い自動再生される
- 保存したファイルは消さない限りGyazoフォルダに保存される
- 何のふぁいるかグループ分けできる
- そのままURLで共有できる
- 公開・非公開が設定できる
チョット動画の共有はかなり便利!