HTMLの<img>タグで公開画像URLを作成する方法（Zoho Sites、Zoho WorkDrive）

HTMLの<img>タグで公開画像URLを作成する方法（Zoho Sites、Zoho WorkDrive）

お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

HTML <img>タグで公開画像URLを作成する方法（Zoho SitesとZoho WorkDrive）

概要

HTML <img>タグに画像を埋め込む場合、ブラウザーが画像を取得して表示するには、一般公開されている直接URLが必要です。URLへのアクセスにサインインが必要な場合、元のファイルではなくプレビューページを参照している場合、またはアクセスが特定のユーザーに制限されている場合、画像は読み込まれず、代わりに破損した画像のアイコンが表示されます。

このガイドでは、公開画像URLを生成するためにサポートされている次の2つの方法について説明します。

  1. Zoho Sites - Site Builderからファイルをアップロードして公開する方法
  2. Zoho WorkDrive - 直接ダウンロード用パラメーターを付けた外部ダウンロードリンクを使用する方法

>タグで画像を表示するには、ブラウザーが画像を取得して表示できる一般公開されている直接URLが必要です。URLへのアクセスにサインインが必要な場合、元のファイルではなくプレビューページを参照している場合、またはアクセスが特定のユーザーに制限されている場合、画像は読み込まれず、代わりに破損した画像のアイコンが表示されます。

このガイドでは、公開画像URLを生成するためにサポートされている次の2つの方法について説明します。

  1. Zoho Sites - Site Builderからファイルをアップロードして公開する方法
  2. Zoho WorkDrive - 直接ダウンロード用パラメーターを付けた外部ダウンロードリンクを使用する方法

主な用途

公開画像URLは、HTMLコードを直接挿入し、すべての閲覧者に画像を表示する必要がある次のような場面で使用します。

  • メールテンプレートと署名 - Zoho CRMのメールテンプレート、Zoho Campaignsのニュースレター、トランザクションメールにロゴ、バナー、商品画像を追加し、受信者がログインしなくても受信トレイで表示できるようにします。
  • ナレッジベースとヘルプ記事 - HTMLブロックを使用して、注釈付きのスクリーンショットや図をZoho Deskのナレッジベース記事やその他のヘルプセンターに埋め込みます。
  • WebサイトへのHTML埋め込みとウィジェット - ファイルを直接アップロードできないカスタムHTMLセクション、ランディングページ、外部サービスのサイトビルダー内に画像を表示します。
  • Zoho Creator／カスタムアプリ - アプリ内のHTMLスニペット、レポート、カスタムページに画像を表示します。
  • 請求書、見積書、ドキュメントテンプレート - Zoho Books／InvoiceのテンプレートやHTMLベースのドキュメントテンプレートに、会社のロゴやヘッダーバナーを配置します。
  • フォームとアンケート - Zoho Formsやアンケートのヘッダーに、HTMLを使用してブランド画像や説明用画像を表示します。
  • チャットボットとポータル - HTMLに対応するチャットボットの返信、顧客ポータル、埋め込みウィジェット内に画像を表示します。

つまり、顧客、メールの受信者、一般の訪問者など、ログイン中のセッション外でHTMLが表示される場合、画像は公開URL上に配置する必要があります。以下の2つの方法で、この公開URLを作成できます。


方法1：Zoho Sitesの使用

手順1：画像ファイルのアップロードと公開

  1. Zoho Site Builderを開きます。
  2. ［ファイル］に移動します。
  3. ［ファイルを追加］をクリックし、画像をアップロードします。
  4. アップロードしたファイルを選択して公開します。

手順2：公開画像URLの作成

  1. 公開したファイル名をコピーします（例：logo.png）。
  2. 公開済みのZoho SitesのURLの末尾にファイル名を追加します。

形式例：
https://your-site-domain.com/logo.png

Step 3: Use in HTML <img> tag

    方法2：Zoho WorkDriveの使用

    手順1：Zoho WorkDriveへの画像のアップロード

    1. Zoho WorkDriveを開きます。
    2. 画像をフォルダーにアップロードします。
    1. 画像のダウンロードリンクを生成します。


    2. URLの末尾に次のクエリーパラメーターを追加します。
      ?directDownload=true

    これにより、HTML <img>タグで表示できるよう、ファイルのURLに直接アクセスできるようになります。

    例：

    https://workdrive.zohoexternal.com/external/5bac3e1d76070588694c1dd4eb31c431ef977bd42d26c6c1933ae66sddseff35b932/download?directDownload=true

    手順3：HTML <img>タグでの使用

    <img src='https://workdrive.zohoexternal.com/external/5bac3e1d76070588694c1dd4eb31c431ef977bd42d26c6c1933ae66sddseff35b932/download?directDownload=true' alt='WorkDrive Image'>

    トラブルシューティング

    • 画像が読み込まれない場合
      • ファイルがアップロードされ、正しく公開または共有されていることを確認します。
      • URLが完全で、余分なスペースが含まれていないことを確認します。
      • Zoho WorkDriveのリンクでは、?directDownload=trueが正確に追加されていることを確認します。

    • ブラウザーに破損した画像のアイコンが表示される場合
      • 画像のURLをブラウザーのタブで直接開き、一般公開されていることを確認します。
      • サインインを求められる場合、そのファイルは一般公開されていません。

    • 画像のパスが正しくない場合
      • 正確なファイル名を再度コピーするか（Zoho Sites）、ダウンロードリンクを再生成します（Zoho WorkDrive）。

    推奨事項

    • 分かりやすいファイル名を使用します（例：header-banner.jpg、company-logo.png）。
    • ページの読み込み速度を向上させるため、最適化されたサイズの画像を使用します。
    • アクセシビリティーを確保するため、分かりやすいaltテキストを必ず指定します。
      <img src='IMAGE_URL' alt='画像の説明'>


    Quote
    カスタムソリューション作成者：Nick｜Zohoパートナーサポート

    ご不明な点がございましたら、partner-support@zohocorp.comまでお気軽にお問い合わせください。

    Notes
    また、ヨーロッパおよび英国のすべてのパートナーは、partner-support@eu.zohocorp.comまでお問い合わせください。