画像・動画をスクリーンショットで簡単共有【Gyazo】

画像・動画をスクリーンショットで簡単共有【Gyazo】

Shopifyのディレクターさんや構築者さんが多く使われていて、ちょっとだけポイントを説明したい時に便利!

  • 画像・動画をスクリーンショットで保存
  • URLを共有

だけでとても簡単

 

プラン

※2025/02/07 地点

https://gyazo.com/pricing

画像・動画をスクリーンショットで簡単共有【Gyazo】

 

無料でも使えるけれども、自ら消さない限り、画像・動画の保存期間に制限は無いので、アクセス数が無制限の有料バージョンにしておく方がお勧め。

 

少しの事だけどちりつも!!

とせうかな・・・? と思っている期間は月払いが良いけど、使い続けるのが確定しているものは、月580円が、年間1,200円も安くなるなら、お気に入りのメロンパン10個買える!

断然年払い。

画像・動画をスクリーンショットで簡単共有【Gyazo】

 

ショートカット

 

画像・動画をスクリーンショットで簡単共有【Gyazo】


キャプチャーした画像一覧

キャプチャーした画像一覧から確認

https://gyazo.com/captures

 

アイコンから確認の手順

 

クリックすると、サイトが開いてログインすると一覧が表示されます。



キャプチャーした画像一覧に別画像保存

 

共有用に、別で作成した画像を保存して共有する事も出来ます。

 

画像・動画をスクリーンショットで簡単共有【Gyazo】

 

無料版では画像の編集が出来ないので、数百円でプチ共有サーバーとしても使えるので説明を沢山する人にはお勧めです。

 

動画のHTMLを取得してShopifyの</> に張り付ける

 

Gyazo に保存した動画を選択してシェアボタンの中の「HTML」➡ 「video」を選択してHTMLを取得


画像・動画をスクリーンショットで簡単共有【Gyazo】

 

 

Shopify 説明画面の </> コード編集に張り付け。

そのまま貼り付けると 1756px 幅になりバカでかくなるので、780px 程度に編集。

 

でサイズ調整をすると、スマホの時に上手く表示がされません。

video に対してレスポンシブりCSS設定

 

コードをそのまま貼り付けても、レスポンシブになるようにCSSを追加する

 video {
  width: 100%;
  max-width: 780px;
  height: auto;
}

 

HTMLをそのまま貼り付けた動画の表示

上記のCSS をテーマに設定 + HTMLをそのまま張り付け

で、スマホでもPCでもサイズに不具合なく表示されます。

▼表示サンプル

 

私はテーマ全体になるようにテーマ自体のカスタムCSS に追記しましたが、トップページに貼る時に小さく表示れる可能性もあるので、微調整してください。

 

メールにHTML添付してみた

 

表示サイズが大きすぎるのでサイズ調整は必要そうだけれども

HTML 形式のメールが受信可能な設定をされている場合は、自動再生の動画でメールが届きました!

すごいなここ!

 

  • Youtubeと違い自動再生される
  • 保存したファイルは消さない限りGyazoフォルダに保存される
  • 何のふぁいるかグループ分けできる
  • そのままURLで共有できる
  • 公開・非公開が設定できる

 

チョット動画の共有はかなり便利!

ブログに戻る

お問い合わせ

ご依頼・ご相談はこちらからお問い合わせ下さい。