画像タグ

画像タグ

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

<image> 
「<image>」タグは画像を定義します。
親タグ : <pc>
子タグ   :  --

属性

1. タイプ

画像のタイプを指定するには、type 属性を使用します。

可能な値 
  • アイコン 
  • コンピューター
  • ウェブURL
デフォルト値
  • ウェブURL

2. 値

value属性は、画像またはアイコンのパスまたは名前を指定します。

可能な値 
  • 値属性はタイプによって決まります。
タイプ 値 例

アイコン

次の構文を使用してアイコン名を指定します：

 アイコンクラス* <スペース> アイコン名

<image type='アイコン' value='zc-li-solid shopping-tag'/>

コンピューター

イメージライブラリーに保存されているイメージの名前を指定してください。

 <image type='computer' value='product1.jpeg'/>

ウェブURL

 画像のURLを指定してください。 <image type='weburl' value='https://www.zoho.com/sites/default/files/creator5-logo-2x.png'>/


 注：  

  • *icon-class は、ソリッドまたはアウトラインのアイコンを指します。
  • プリビルドされたicon-classのいずれかを使用してください： zc-li-solid または zc-li-outline
  • サポートされている画像形式：.jpeg、.jpg、.png。最大サイズは2 MBまで許可されます。
 
3. サイズ

アイコンのサイズを指定するのは size 属性です。

可能な値 
  • 1から9までの数字。

デフォルト値

  • 4番目

例

構文

<image type='icon' value='zc-li-solid weather-fahrenheit' size='4'/>

出力

注意：  

  • サイズ 属性は、type='icon' の場合にのみ適用されます。

4. 角丸

cornerRadius属性は、画像の丸い角を定義します 

可能な値 
  • ピクセル単位の数値

例

構文 <image type='icon' value='zc-li-outline travel-world' cornerRadius='5'/>

出力


 注意：  
  • cornerRadius 属性は任意です。

5. 色

色属性は、アイコンの色を指定します。 

可能な値 
  • 16 進数のカラー値。こちらのリンクを参照してください  16 進数のカラーコードをご覧ください。

例

構文

<image type='icon' value='zc-li-solid sport-tennis-ball' color='#B3EB31'/>
出力

注意：  

  • 色属性は任意です。
  • <type='icon'/>にのみ適用されます。

6. bgColor
6. bgColor（背景色）

bgColor 属性は、<image>要素の背景色を指定します。

可能な値 
  • 16 進数のカラー値です。16 進数のカラーコードは、こちらのリンクを参照してください：こちら。


注意：  
  • bgColor 属性は任意です。

7. 幅

「width」属性は、<image>の幅を定義します。

可能な値 
  • ピクセル単位の数値

例

構文 <image type='computer' value='scenary.jpg' width='500px'/>
出力


注意：  
  • width 属性は任意です。
 
8. 高さ

「height」属性は、<image>の高さを定義します。

可能な値 
  • ピクセル単位の数値

例

構文 <image type='computer' value='eiffel-tower.jpg' height='400px'/>
出力


注：  
  • 高さの属性は任意です。

9. パディング

padding 属性は、画像とその枠の間に指定された量のスペースを生成します。

可能な値 
  • ピクセル単位の数値
例
構文 <image type='computer' value='Custom-apps.jpg' padding='10px'/>
出力  


注意：  
  • padding 属性は任意です。

10. paddingTop
10. paddingTop
10. paddingTop
10. paddingTop
10. paddingTop
10. paddingTop
10. paddingTop
10. paddingTop
10. paddingTop
10. paddingTop 属性は、画像とその枠の上側の間に指定された量の空間を生成します。

可能な値 
  • ピクセル単位の数値
例
構文 <image type='computer' value='Custom-apps.jpg' paddingTop='10px'/>
出力  


 注意：  
  • paddingTop 属性は任意です。

11. paddingRight
11. 右パディング

paddingRight 属性は、画像とその境界の右側の間に指定された量の空間を生成します。

可能な値 
  • ピクセル単位の数値
例
構文 <image type='computer' value='Custom-apps.jpg' paddingRight='10px'/>
出力  

 
注意:  
  • paddingRight 属性は任意です。

12. paddingBottom
12. paddingBottom
12. paddingBottom
12. paddingBottom
12. paddingBottom
12. paddingBottom
12. paddingBottom
12. paddingBottom
12. paddingBottom
12. paddingBottom
12. paddingBottom
12. paddingBottom
paddingBottom属性は、画像とそのボーダーの下側の間に指定された量の空間を生成します。

可能な値 
  • ピクセル単位の数値
例
構文 <image type='computer' value='Custom-apps.jpg' paddingBottom='10px'/>
出力  

 注意：  
  • paddingBottom 属性は任意です

13. paddingLeft
13. paddingLeft
13. paddingLeft
13. paddingLeft
13. paddingLeft
13. paddingLeft
13. paddingLeft
13. paddingLeft
13. paddingLeft
13. paddingLeft 属性は、画像とそのボーダーの左側との間に指定された量の空間を生成します。

可能な値 
  • ピクセル単位の数値
例
構文 <image type='computer' value='Custom-apps.jpg' paddingLeft='10px'/>
出力  

 注意:  
  • paddingLeft 属性は任意です

14. マージン

margin属性は、画像とその親コンテナーの間のすべての四方のスペースに指定された量を生成します。 

可能な値 
  • ピクセル単位の数値
例
構文 <image type='computer' value='Custom-apps.jpg' margin='20px'/>
出力  

 注：  
  • マージン 属性は任意です

15. marginTop
15. marginTop
15. marginTop
15. marginTop
15. marginTop
15. marginTop
15. marginTop
15. marginTop
15. marginTop
15. marginTop 属性は、画像の上側とその親コンテナーの間に指定された量の空間を生成します。

可能な値 
  • ピクセル単位の数値
例
構文 <image type='computer' value='Custom-apps.jpg' marginTop='20px'/>
出力  

 注意：  
  • marginTop 属性は任意です

16. marginRight
16. 右マージン

marginRight属性は、画像の右側とその親コンテナーの間に指定された空間を生成します。

可能な値 
  • ピクセル単位の数値
例
構文 <image type='computer' value='Custom-apps.jpg' marginRight='400px'/>
出力  

 注意:  
  • marginRight 属性は任意です

17. marginBottom（マージンボトム）

marginBottom属性は、画像の下側とその親コンテナーの間に指定された量の空間を生成します。

可能な値 
  • ピクセル単位の数値
例
構文 <image type='computer' value='Custom-apps.jpg' marginBottom='20px'/>
出力  

 注意：  
  • marginBottom 属性は任意です

18. marginLeft
18. marginLeft
18. marginLeft（マージンレフト）

marginLeft 属性は、画像の左側とその親コンテナーの間に指定された量のスペースを生成します。

可能な値 
  • ピクセル単位の数値
例
構文 <image type='computer' value='Custom-apps.jpg' marginLeft='400px'/>
出力

 注意：  
  • marginLeft 属性は任意です

19. 行動

クリックした際にトリガーされるアクションを指定するのが、action属性です。

可能な値 
  • リンク
  • フォーム
  • レポート
  • ページ
  • 機能 

例

アクション 構文

リンク

<image value='https://www.zoho.com/sites/default/files/creator5-logo-2x.png'  action='Link'   url='開くURL'/>*

フォーム

 <image value='https://www.zoho.com/sites/default/files/creator5-logo-2x.png'   action='Form'   componentLinkName='Zoho Creatorフォームを開くためのリンク名'   appLinkName='フォームが所属するZoho Creatorアプリケーションのリンク名' />*
レポート <image value='https://www.zoho.com/sites/default/files/creator5-logo-2x.png'  action='レポート'   componentLinkName='Zoho Creatorレポートを開くリンク名'   appLinkName='レポートが所属するZoho Creatorアプリケーションのリンク名' />*
ページ <image value='https://www.zoho.com/sites/default/files/creator5-logo-2x.png'   action='Page'   componentLinkName='Zoho Creator ページのリンク名'   appLinkName='Zoho Creator アプリケーションに属するページのリンク名' />*
機能 <image value='https://www.zoho.com/sites/default/files/creator5-logo-2x.png'   action='Function'   functionName='カスタム関数の名前を記入' />*

* 以下の各セクションで、アクションタイプの詳細を学びましょう。

 注意：  

  • アクション 属性は任意です。
  • アクション属性はソース属性として機能します。つまり、以下の属性のうちの1つ以上、すなわち： url、componentLinkName、appLinkName、functionName、parameters、successMessage、target、popupWidth および popupHeight は、アクションが指定された場合にのみ適用されます。

20. URL
20. URL
20. URL
20. URL
20. URL
20. URL
20. URL
20. URL
20. URL
20. URL
20. 
url 属性は、画像をクリックしたときに開かれるリソースの位置を指定します。

可能な値 
  • A url を指している別のウェブサイト
  • A url を指しているZoho Creatorアカウント内のコンポーネント

例 

注意：  

  • URL 属性は任意です。 
  • <action='Link'> の場合にのみ適用されます。

21. コンポーネントリンク名

componentLinkName属性は、画像をクリックしたときに開かれるZoho Creatorコンポーネントのリンク名を指定します。

可能な値 
  • Zoho Creatorアプリケーションコンポーネントを開くためのリンク名。参照は こちらのページ で、Zoho Creatorアカウント内の全てのアプリケーションのコンポーネントのリンク名をご確認ください。

例 

アクション 構文
フォーム <image value='https://www.zoho.com/sites/default/files/creator5-logo-2x.png' action='Form' componentLinkName='ユーザー_詳細'/>
レポート <image value='https://www.zoho.com/sites/default/files/creator5-logo-2x.png' action='レポート' componentLinkName='ユーザー詳細レポート'/
ページ <image value='https://www.zoho.com/sites/default/files/creator5-logo-2x.png' action='ページ' componentLinkName='User_Dashboard'/>

 注意：  

  • componentLinkName 属性は任意です。 
  • <action='Form'/'Report'/'Page'> の場合にのみ適用されます。

22. appLinkName
22. アプリリンク名

appLinkName属性は、関連するコンポーネントが属するZoho Creatorアプリケーションの名前を指定します。

可能な値 
  • Zoho Creatorアプリケーションのリンク名を開きます。 リンク名は、Zoho Creatorアカウントのすべてのアプリケーションについて、このページを参照してください。

例

アクション 構文
フォーム <image value='https://www.zoho.com/sites/default/files/creator5-logo-2x.png' action='Form' componentLinkName='User_Details' appLinkName='Resource_management'/>
レポート <image value='https://www.zoho.com/sites/default/files/creator5-logo-2x.png' action='レポート' componentLinkName='ユーザー_詳細_レポート' appLinkName='リソース_管理'/>
ページ <image value='https://www.zoho.com/sites/default/files/creator5-logo-2x.png' action='Page' componentLinkName='User_Dashboard' appLinkName='Resource_management'/>

 注意：  

  • appLinkName 属性は任意です。 同じアプリケーションに関連付けられたアクションを指定する必要はありません。
  • <action='Form'/'Report'/'Page'/'Function'> の場合にのみ適用されます。

23. 関数名

functionName 属性は、Zoho Creatorアプリケーション内のカスタム関数の名前を指定します。画像をクリックすると、この関数がトリガーされます。 

可能な値 
  • Zoho Creatorアプリケーションのいずれかに定義されたカスタム関数です。アプリケーション内のカスタム関数のリストを取得するには、設定→拡張→カスタム関数を選択してください。

例

  • 注意：  

    • 関数名（functionName）は、デフォルトのネームスペースまたはカスタムのネームスペースに属しています。
    • 関数がカスタムのネームスペースに属している場合：<functionName='namespace_name.function_name'>
    • functionName 属性はオプションです。
    • <action='Function'> と関数名を指定する必要がある場合にのみ適用されます。

    24. パラメーター

    パラメーター属性は、アクションに関連付けるパラメーターを指定します。 

    可能な値 
    • 「フォーム」「レポート」「ページ」のとき、パラメーターは、対応するコンポーネントのパーマリンクに追加されるクエリ文字列を指します。パーマリンク内のクエリ文字列の使用方法については、このページを参照してください。
    • 「機能」のとき、パラメーターは、選択したカスタム関数の引数を指します。

    例

    アクション 構文

    フォーム

    <image value='https://www.zoho.com/sites/default/files/creator5-logo-2x.png'   action='Form' componentLinkName='ユーザーの詳細'   appLinkName='リソース管理'  parameters='App_name=${name}'/>

    または

    <image value='https://www.zoho.com/sites/default/files/creator5-logo-2x.png'   action='Form' componentLinkName='ユーザーの詳細'   appLinkName='リソース管理'  parameters='App_name=Zoho Creator'/>

    レポート

    <image value='https://www.zoho.com/sites/default/files/creator5-logo-2x.png'  action='レポート'   componentLinkName='ユーザーの詳細'   appLinkName='リソース管理' parameters='アプリ名=${name}' />

    または

    <image value='https://www.zoho.com/sites/default/files/creator5-logo-2x.png'  action='フォーム' componentLinkName='ユーザーの詳細'   appLinkName='リソース管理'  parameters='ユーザー名='Rob'/>

     

    ページ <image value='https://www.zoho.com/sites/default/files/creator5-logo-2x.png'  action='ページ'   componentLinkName='Zoho Creator ページを開くリンク名'   appLinkName='ページが属する Zoho Creator アプリケーションのリンク名' parameters='App_name=${name}' />*

     注意：  

    • パラメータ 属性は任意です。
    • <action='Form'/'Report'/'Page'/'Function'> の場合のみ適用されます。
    • パラメータは、Name='Rob' のような静的な値、またはページパラメータのいずれかです。
    • ページパラメータは、App_name=${name} のように指定する必要があります。ここで、name はページパラメータです。

    25. 成功メッセージ

    successMessage 属性は、指定された関数を正常に実行した場合に表示されるメッセージを指定します。

    可能な値
    • 文字列

    例

    注意：  

    • successMessage 属性は任意です。
    • <action='Function'> の場合にのみ適用されます。

    26. 目標

    ターゲット属性は、画像をクリックしたときにリンクされたアクションが開く場所を指定します。

    可能な値 
    • 新しいウィンドウ 
    • 同じウィンドウ
    • ポップアップ

    デフォルト値 

    • 新しいウィンドウ

    注：

    • これは、<action='Link'/'Form'/'Report'/'Page'>のときにのみ適用されます。

    27. popupWidth
    27. ポップアップの幅

    popupWidth属性は、リンクが開かれるポップアップウィンドウの幅を指定します。

    可能な値 
    • パーセンテージまたはピクセルの値

    28. ポップアップの高さ

    popupHeight属性は、リンクが開かれるポップアップウィンドウの高さを指定します。

    可能な値 
    • パーセンテージまたはピクセルの値

「
は、アイコン（アウトラインおよびソリッド）とプリビルトアイコンクラスの詳細なリストを参照することができます。
」

    Zoho CRM 管理者向けトレーニング

    「導入したばかりで基本操作や設定に不安がある」、「短期間で集中的に運用開始できる状態にしたい」、「運用を開始しているが再度学び直したい」 といった課題を抱えられているユーザーさまに向けた少人数制のオンライントレーニングです。

    日々の営業活動を効率的に管理し、導入効果を高めるための方法を学びましょう。

    Zoho CRM Training




              Zoho Desk Resources

              • Desk Community Learning Series


              • Digest


              • Functions


              • Meetups


              • Kbase


              • Resources


              • Glossary


              • Desk Marketplace


              • MVP Corner


              • Word of the Day






                        Latest Feature Updates



                                • Related Articles

                                • 「JS APIドキュメント」

                                  お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 このヘルプページはCreator 6のユーザー向けです。もし古いバージョン（Creator 5）の場合は、 こちらをクリック してください。Creatorの バージョンを確認 してください。 最新のJS SDKライブラリを以下のCDN ...

                                Resources

                                Videos

                                Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                eBooks

                                Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                Webinars

                                Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                CRM Tips

                                Make the most of Zoho CRM with these useful tips.