# PageFlyで画像と動画を管理する方法 ### Image Managerとメディアファイルについて Image Managerを使用すると、ページのデザイン中に画像をアップロードして選択できます。 画像または動画をPageFlyにアップロードすると、Shopifyのコンテンツ > ファイルに保存され、その後PageFlyのメディアファイルに反映されます。PageFlyにアップロードした画像や動画は、メディアファイル内で編集できます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-2ecd475f63da7036e67c23fc83e3bc147bc0f45c%2FAD_4nXduheg0rYEsm2z55Tbc9xApkyl5mXpEIr8mQmIa7pcWM4jv0D8XeYrZNFth4lIQzA9twzPCnOa6IqzqsI3OybrjAyK4pIzlZJrRaxjwQnmAh4DwCBVg7iY5V83qAoYQLkQc9t3OpyHPHYDKzy5r3gkeyoK0tdYdEYzxbaf9b9FXbQQ.png?alt=media) こちらの動画チュートリアルをご確認ください： {% embed url="" %} ### Image Managerを使用してメディアファイルをアップロードする方法 #### ステップ1：Image Managerにアクセスする Image Managerは以下の場所にあります： * Image要素の一般設定 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-8bf9e8e0266f0cca06e8cdf4a5c117499a5172a8%2FAD_4nXdsfd8zVMEjx6-tesvjZgolqfwkvxoxe3MHJ2NCjEXHAgKAdnNj4-jW4L2Y4qwx9hAQRujl8vxIIQ-7W2fA-sVQGRYTfNM_8SflRLV2rf5xKtTAWJfGchz3MWPnjss8sjoSvdhGNNhLiow5qG-Q?alt=media) * コンテナの背景設定 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-4114c0ecbf503e9232795286075e0d494df02fe5%2FAD_4nXc18NGqS-ZSzi2EhvbQjSfrxjOPc74Vk2K-_1CiQ3qqljwyaZBvdjxKU63yutyKW38jBMTRuRhG65H25KbwPYa1e9R9Lkg0Zx8B9fkSENFOoC_Bofq4X55e-WFkJvyYkzqG0iyr4ku5NcSHOH8EvQkeyoK0tdYdEYzxbaf9b9FXbQQ.png?alt=media) * HTML Video要素のカバー画像設定 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-4ee455d1d911f41143d07d74271e8a1b8c3e8386%2FAD_4nXcEGw_ssCLIzCqgGQCgikUA6BWE_zMiF7xAL98vmWrPYjkZt7IN1Yuznyvmin9YZRO-9NYK6RGwp7P8Hql9vLbSff-jCmLSn8CEtXSGcbVpAlnuDUKzaVatukAkp32LzluEkLR1wa1b4g7RAFMqsAkeyoK0tdYdEYzxbaf9b9FXbQQ.png?alt=media) * HTML Video要素のHTML動画ソース (動画形式のアップロードのみ) ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-8248096e9f16ddc7cd9176d026dbeb1b02679005%2FAD_4nXfg9kY8FbncSA95L5r6H2EafVnIMAriv1JM3Gb_yTFaqXxgc4d4oCJ89gr4biBLJfsECS4cxUO7wVKu7VpRXuLZuO8XSdDRz9KsELgZg0-0EIZOL_J-eW51QCHvTy1y6ZAqzAk9XiqZZGlEWR7RkeyoK0tdYdEYzxbaf9b9FXbQQ.png?alt=media) #### ステップ2：画像をアップロードする Image Managerでは、画像をアップロードする方法が2つあります： 1. 「**Select image**」ボタンをクリックしてコンピュータから直接アップロードし、その後「**Add image**」ボタンをクリックします。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXco_FXR6HHFFTi4V4p2u3yJ5-359_53t1i4T7j08y9VpZg1u3n970977y2s3t31s21_9v7Q2v0_6z9y53v7Y5u9z63Q1K0_4y0u7Z1y7v8Vz3y1y2q7C3p4p8j1T9n8d6w4z1y8g4F4y0d6w2z0q3p1u2q4z1v8s3p1t6z5q1d4r8y5x7y0.gif) 2. 「**Select image**」ボタンをクリックし、右上のリンクアイコンをクリックしてURLからアップロードします。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-705eb362cc228c62dd6dc5d4bc554c9b0b832f8b%2FAD_4nXdPqHPYnXGS2VEYS-0ubulz2saGWgeXrWGQ-U4VstRUkIH_hxWLugcyY-3Ioh-Vj9N6AsZ9ee1cwyAa9kem3LCtQweNOyC_4GaU-21JJ79lNb2XPzaMjp-1pLlL3u_N5RD_qtQRf8Z13PzZkYD1pwkeyoK0tdYdEYzxbaf9b9FXbQQ.png?alt=media) {% hint style="warning" %} **重要**: PageFlyはShopifyのフリー画像ライブラリと統合されたため、ユーザーはShopifyから直接フリー画像をアップロードできるようになりました。 {% endhint %} ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXcQAnW6RfiUX2zMTc5hjlWWgjkmkm1Fs1bLwFi0O1UkKFs8iTunyAnYm4eux5_MqL04hcdtZKRtXHlPB-T9WdQVbiA8yHRjWcG34-qov7D_4y2x0q1z4p0r8z6t4c6r2t4t4p8t4r0z1q5q3u7w8y6z6u8y3r9q2t8z9r0p3t1z7u8y0.png) Shopifyからフリー画像を選択すると、メディアファイルの最上部に保存され表示されます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-c15b6e0bfcb9d0e229c8b3be99648c5936f8bb46%2FAD_4nXeoZmhe4RnSv8xILyuR8RFX2TJVBEZlyvxR2lwdtut2jV683Mgd44JgQumE5SNMtZf_8r0xD7knT1ygpa6Lh8oqbBlCh5RISlkysvViR4sm3mThghyNXPaUdu6kbOEnmvROpypezppJcPWa0EC8IAkeyoK0tdYdEYzxbaf9b9FXbQQ.png?alt=media) ### メディアファイルを使用する方法 #### ステップ1：メディアファイルにアクセスする Image Managerから「Open media files」をクリックして、メディアファイルにアクセスできます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-5b48e82cdc74e8f711aeed3fc41b79e27f039b36%2FAD_4nXczC9fO54ZNFATQBLcErBzsve1NG3sZVl8uAGyga2F4Le_n7784wbW-5Q2VlBr8uSJ2S1bGkAWZp4XvnHjnhHQ_42HfaA5HJFwOFwXqBrB5hmtkZSjIZ2LH4-WmZIt7iP2oaqmjPwu0dls-NfPHCQkeyoK0tdYdEYzxbaf9b9FXbQQ.png?alt=media) または、PageFlyダッシュボードから左側のメニューに進み、「Extra functions」>「Media files」>「Manage」を選択します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-1a49762be143920c850a0fe46c6bfd15536ab4f0%2FAD_4nXdoVeG09G1m6tsR1pvx1p0e-EjztsKCC39GGFJ_WkQq2qaAf3UkutJH8vHiyAY_qw14KnsNOaHHm7lBFKPCLyukXUpo-MgVEpxQWUvBb2y5kG0_Fu5ofFK-x-m8eprVOAzIR-evI_bk5s1UQ6v-keyoK0tdYdEYzxbaf9b9FXbQQ.png?alt=media) #### ステップ2：画像/動画をアップロードする メディアファイルでは、画像または動画をアップロードする方法が2つあります： * コンピュータからアップロード * URLから追加 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-58f29322de5ac99f9cedb807bfec6ff55c7c917b%2FAD_4nXf2wM16AGCGdvNaEqq5B6dkvR2tpY1lAgFk5KXnnpGTT7LvTreHkeQ6NwpuAUzp09XAmm8LBzqJEgWUy3AaeTwmIjseYXvXknNoImVghYh9nDphr41yoQgeM6pMeFcGTpVU1mNDZUUP6nNhR6lN0wkeyoK0tdYdEYzxbaf9b9FXbQQ.png?alt=media) {% hint style="info" %} **注**: 保存されたセクションも、メディアファイル内に \[Section\_name]-PF\_DO\_NOT\_DELETE という名前の画像として保存されます。 {% endhint %} ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-fc9a14a2cf25d03483bd55b9d688e924597379f8%2FAD_4nXc564ySfA2bpL-ILQ2BXDJ4YrRzMCMGE-7Z4q2midXYmwEtDf2iesmETnMr5kani1W5_NXbTa9Uf1C9BU7CzXsITnCkaL9_bVg8cZcFpQavAoF5yof3cQKgW87diLt0eBzzAEhcULWf9ZXd7JP2keyoK0tdYdEYzxbaf9b9FXbQQ%20\(1\).png?alt=media) #### ステップ3：画像/動画を編集する 編集したい画像または動画の編集アイコンをクリックします。 画像の場合、Image Editorで画像のトリミング、回転、サイズ変更、ズームイン/ズームアウト、altテキストの編集が可能です。編集された画像は、メディアファイル内に新しい画像として保存されます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-98a803028929b209c38080ce8b9ec7e6b3161140%2FAD_4nXeYsKNCy9iG58TgNBuxHpHsOFHbQbUhWzVrGY3EWPnyb3-Eo9aNHd_5jCDi9eT0492fsic-RbG8EBIaKfIv1L9ErxN5uYFsxhm1trEi7oz6RO3m-e1F3CQNhH3ezTs0uu5OYoPpyg_CMQJKY5V-?alt=media) 動画の場合、動画のaltテキストのみ編集できます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-9d58239923eb3c51687b9aab8c42155094704a28%2FAD_4nXfZzMkgSHh448xLcDBl-copxDtEU-N53mW82Gtc1l89LIrbR5oP1HanXALy3_OkwgXZpb1LWW25vGzWc7hL2zbgcREsyLRTXze8_dZdKHzr6aJiK7p_Crn1wOQYU6jwOn1KfG-gOp_B33Smuaz5TgkeyoK0tdYdEYzxbaf9b9FXbQQ.png?alt=media) ### よくある質問 **1. Image managerとメディアファイルの違いは何ですか？** メディアファイルは、PageFlyにアップロードしたすべての画像と動画を保存する場所です。PageFlyにアップロードした画像は、Shopifyのコンテンツ > ファイルに保存され、メディアファイルとImage Managerの両方に反映されます。 Image Managerは、メディアファイルで利用可能な画像を選択したり、PageFlyエディターから画像をアップロードするのに役立ちます。 **2. PageFlyでアップロードした画像を編集できますか？** はい、メディアファイルのImage editorを使用してPageFlyにアップロードした画像を編集できます。 **3. メディアファイルで削除した画像を復元できますか？** いいえ、できません。メディアファイルで画像を削除すると、完全に削除され、復元する方法はありません。 **4. Image managerにGIFをアップロードできますか？** はい、他の画像形式と同様に、GIF形式をImage managerにアップロードできます。 ### 追加リソース * [How To Access HTML Video Element](https://help.pagefly.io/manual/html-video-element/) * [How to Use Image Element with PageFly?](https://help.pagefly.io/manual/image-element/)