画像タグ

画像タグ

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

<画像>
<画像>タグは、画像を定義するために使用します。
親タグ :
子タグ : --

属性

1. 種類

種類属性は画像の種類を決定します。

有効な値
  • icon
  • computer
  • weburl
初期設定値
  • weburl

2. 値

The 値 属性 indicates the path or 名前 of the 画像 or icon.

Possible Values
  • The 値 属性 depends オン the 種類.
種類 値 例

icon

以下の構文を使用してアイコン名を定義します：

 icon-クラス* icon-名前

<画像 種類='icon' 値='zc-li-solid shopping-tag'/>

gallery

画像ライブラリに保存されている画像の名前を示します。

 <画像 種類='gallery' 値='product1.jpeg'/>

weburl

 画像のURLを提供してください。 <画像 種類='weburl' 値='https://www.Zoho.com/sites/初期設定/files/creator5-ロゴ-2x.png'>/
メモ

 メモ:

  • *icon-クラスは実線またはアウトラインアイコンを指します。
  • 利用可能なicon-クラスの一つを使用してください: zc-li-solid または zc-li-outline
  • サポートされている画像形式: .jpeg, .jpg, .pngで、最大2MBまでのファイルサイズが許容されます。
 
3. サイズ

サイズ 属性ではアイコンのサイズを定義します。
許容可能な値
  • 1から9までの数値が対象です。

初期設定値

  • 4

例

構文

<画像 種類='icon' 値='zc-li-solid weather-fahrenheit' size='4'/>

出力

Notes

メモ:

  • size 属性は 'icon' 種類のみ適用されます

4. cornerRadius

The cornerRadius 属性は、画像の角を丸くするために使用されます

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

例

構文 <画像 種類='icon' 値='zc-li-outline 出張-world' cornerRadius='5'/>

出力


Notes
 メモ：
  • cornerRadius属性はオプションです。

5.color

Thecolor属性はアイコンに色を割り当てます。

可能な値

例

構文

<画像 種類='icon' 値='zc-li-solid sport-tennis-ball' color='#B3EB31'/>
出力

Notes

メモ:

  • color 属性はオプションです。
  • <種類='icon'/>にのみ適用される属性です。

6. bgColor

bgColor属性は、<画像>要素の背景色を設定します。

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


Notes
ノート：
  • bgColor 属性はオプションです。

7. width

width属性は、<画像>の幅を設定します。

可能な値
「height」属性は<画像>の高さを指定します。

設定できる値
  • ピクセル単位の数値

例

記述方式 <画像 種類='computer' 値='eiffel-tower.jpg' height='400px'/>
出力結果


メモ
メモ:
  • height 属性はオプショナルです。

9. padding

padding 属性は、画像とその境界との間に指定された金額の空間を作ります。

可能な値
  • ピクセル単位の数値値
例
構文 <画像 種類='computer' 値='カスタム-apps。jpg' パディング='10px'/>
出力  


メモ
注記:
  • パディング属性はオプションです。

10. paddingTop

paddingTop 属性は、画像とそのボーダーの上側との間に指定された金額のスペースを作ります。

可能な値
  • ピクセル単位の数値
例
構文 <画像 種類='computer' 値='custom-apps.jpg' paddingTop='10px'/>
出力  


Notes
 メモ:
  • paddingTop 属性はオプションです。

11. paddingRight

ThepaddingRight属性は画像とその右側のボーダーの間に指定された金額のスペースを作成します。

可能な値
  • ピクセルでの数値
例
構文 <画像 種類='computer' 値='カスタム-apps.jpg' paddingRight='10px'/>
出力  

 
Notes
ヒント:
  • paddingRight属性は任意です。

12. paddingBottom

The paddingBottom 属性は、指定された金額の空間を画像とそのボーダーの下側の間に作り出します。

可能な値
  • ピクセル単位の数値
例
構文 <画像 種類='computer' 値='カスタム-apps。jpg' paddingBottom='10px'/>
出力  

Notes
 メモ:
  • paddingBottom属性はオプションです

13. paddingLeft

ThepaddingLeft属性は、画像とその左側の境界の間に所定の金額のスペースを作り出します。

可能性のある値
  • ピクセル単位の数値
例
構文 <画像 種類='computer' 値='カスタム-apps.jpg' paddingLeft='10px'/>
出力  

Notes
 注記:
  • paddingLeft属性はオプショナルです

14. マージン

「margin」属性は、指定された金額のスペースが次の間、画像とその親コンテナのすべての四辺に作成されます。

可能な値
  • ピクセルでの値
例
構文 <画像 種類='computer' 値='カスタム-apps。 jpg' margin='20px'/>
出力  

メモ
 メモ:
  • margin 属性はオプショナルです

15. marginTop

The marginTop 属性は、画像の上辺と親コンテナの間に特定の金額のスペースを作ります。

可能な値
  • ピクセルでの値
例
構文 <画像 種類='computer' 値='カスタム-apps。jpg' marginTop='20px'/>
出力  

 ヒント:
  • marginTop 属性はオプショナルです

16. marginRight

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

可能な値
  • ピクセル単位のA値
例
構文 <画像 種類='computer' 値='カスタム-apps。jpg' marginRight='400px'/>
出力  

 注：
  • marginRight 属性はオプションです

17. marginBottom

「marginBottom 」属性は、画像の下側とその親コンテナの間に特定の金額のスペースを作成します。

可能な値
  • ピクセル単位の値
例
文法 <画像 種類='computer' 値='カスタム-apps。jpg' marginBottom='20px'/>
出力  

 注意:
  • marginBottom 属性はオプションです

18. marginLeft

The marginLeft 属性 specifies the amount of space to be created between the left side of an image and its surrounding container.

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

 注意:
  • marginLeft 属性はオプショナルです

19. 操作

The 操作 属性は画像がクリックされたときに実行済みとなる操作を決定します。

使用可能な値
  • リンク
  • Form
  • レポート
  • Page
  • Function

例

操作 構文

リンク

<画像 値='https://www.zoho.com/sites/default/files/creator5-logo-2x.png' 操作='リンク' url='開くべきURL'/>*

フォーム

<画像 値='https://www.zoho.com/sites/default/files/creator5-logo-2x.png' 操作='フォーム' componentLinkName='開くべきZoho Creatorフォームのリンク名' appLinkName='フォームが属するZoho Creatorアプリケーションのリンク名'/>* レポート <画像 値='https://www.zoho.com/sites/default/files/creator5-logo-2x.png' 操作='レポート' componentLinkName='開くべきZoho Creatorレポートのリンク名' appLinkName='レポートが属するZoho Creatorアプリケーションのリンク名'/>* ページ <画像 値='https://www.zoho.com/sites/default/files/creator5-logo-2x.png' 操作='ページ' componentLinkName='開くべきZoho Creatorページのリンク名' appLinkName='ページが属するZoho Creatorアプリケーションのリンク名'/>* 機能 <画像 値='https://www。Zoho。com/sites/初期設定/files/creator5-ロゴ-2x。png' 操作='Function' functionName='カスタム関数の実行する名前' />*

* 各操作タイプについての詳細は以下のセクションをご覧ください。

 注意:

  • 操作 属性はオプションです。
  • The 操作 属性はデータソース属性として機能します。例えば以下の属性： url, componentLinkName, appLinkName, functionName, パラメーター, successMessage, target, popupWidth 及び popupHeight が、操作が指定された場合のみ適用されます。

20. url

The url 属性は、画像をクリックした時に開かれるリソースの場所を指示します。

有効な値
  • 他のWebサイトへのurl
  • ご自身のZoho Creator アカウントのコンポーネントを指すurl

例

メモ:

  • url 属性はオプションです。 
  • <操作='リンク'>が設定されている場合のみ適用されます。

21. componentLinkName

The componentLinkName 属性はクリック時に開かれるZoho Creatorコンポーネントのリンク名を指定します。

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

例

操作 構文
フォーム <画像 値='https://www.Zoho.com/sites/初期設定/files/creator5-ロゴ-2x.png' 操作='フォーム' componentLinkName='User_Details'/>
レポート <画像 値='https://www.Zoho.com/sites/初期設定/files/creator5-ロゴ-2x.png' 操作='レポート' componentLinkName='User_Details_Report'/>
ページ <画像 値='https://www.Zoho.com/sites/初期設定/files/creator5-ロゴ-2x.png' 操作='ページ' componentLinkName='User_Dashboard'/>

 注意:

  • componentLinkName の属性は任意です。 
  • この属性は<操作='Form'/'レポート'/'Page'>の場合にのみ適用されます。

22. appLinkName

The appLinkName 属性は、それが関連付けられているZoho Creatorアプリケーションの名前を示します。

考えられる値
  • 開くべきZoho Creatorアプリケーションのリンク名です。あなたのZoho Creatorアカウントのすべてのアプリケーションのリンク名に関してはこちらのページを参照してください。

例

操作 構文
フォーム <画像 値='https://www。Zoho。com/sites/初期設定/files/creator5-ロゴ-2x。png' 操作='フォーム' componentLinkName='User_Details' appLinkName='Resource_management'/>
レポート <画像 値='https://www。Zoho。com/sites/初期設定/files/creator5-ロゴ-2x。png' 操作='レポート' componentLinkName='User_Details_Report' appLinkName='Resource_management'/>
ページ <画像 値='https://www。Zoho。com/sites/初期設定/files/creator5-ロゴ-2x。png' 操作='ページ' componentLinkName='User_Dashboard' appLinkName='Resource_management'/>

 注記:

  • appLinkName 属性はオプションです。 現在使用しているアプリケーション内のコンポーネントに操作を関連付ける場合は、appLinkNameを指定する必要はいいえ。
  • この属性は<操作='Form'/'レポート'/'Page'/'Function'>の場合のみ適用対象です。

23. functionName

関数名 functionName 属性は、Zoho Creatorアプリケーション内のカスタム関数の名前を示し、画像をクリックした際に実行されます。
可能な値
  • どのZoho Creatorアプリケーションにおいても定義されたカスタム関数。アプリケーションにおけるカスタム関数のリストを取得するには：設定に移動 -> 拡張機能 -> カスタム Functions

例

メモ：

  • The functionName は、初期設定のnamespaceまたはカスタムnamespaceに属することができます。
  • カスタムnamespaceに属する場合: <functionName='namespace_name。function_name'>
  • functionName属性は任意です。
  • この属性は<操作='Function'>が設定され、関数名が指定されている場合のみ適用されます。
24. パラメーター

The パラメーター 属性は操作と関連付けるためのパラメーターを指定します。

可能な値
  • <操作='Form' / 'レポート' / 'Page'>の際、パラメーターは該当コンポーネントの固定リンクに追加されるクエリ文字列を指します。フォーム、レポート、ページの固定リンクでクエリ文字列を使用する方法についてはこのページを参照してください。
  • <操作='Function'>の際、パラメーターは選択されたカスタム関数の引数を指します。

例

操作 構文

フォーム

<画像 値='https://www.zoho.com/sites/初期設定/files/creator5-ロゴ-2x.png' 操作='フォーム' componentLinkName='User_Details' appLinkName='Resource_management'  パラメーター='App_name=${名前}'/>

または

<画像 値='https://www.zoho.com/sites/初期設定/files/creator5-ロゴ-2x.png' 操作='フォーム' componentLinkName='User_Details' appLinkName='Resource_management' パラメーター='App_name=Zoho Creator'/>
レポート

画像タグ 'https://www.Zoho.com/sites/default/files/creator5-ロゴ-2x.png' を使用し、操作として 'レポート' を指定し、componentLinkName='User_Details' および appLinkName='Resource_management'、パラメーターとして 'App_name=${名前}' を設定します。

又は

画像タグ 'https://www.Zoho.com/sites/default/files/creator5-ロゴ-2x.png' を使用し、操作として 'フォーム' を指定し、componentLinkName='User_Details' および appLinkName='Resource_management'、パラメーターとして 'User_Name='Rob' を設定します。

 

ページ 画像タグ 'https://www.Zoho.com/sites/default/files/creator5-ロゴ-2x.png' を使用し、操作として 'ページ' を指定し、componentLinkName='Zoho Creatorのページを開くためのlinkname' および appLinkName='ページが属しているZoho Creatorアプリケーションのlinkname'、パラメーターとして 'App_name=${名前}' を設定します。

 メモ:

  • parameter 属性はオプションです。
  • この属性は<操作='Form'/'レポート'/'Page'/'Function'>のときのみ適用対象です。
  • パラメーターは、静的な値（例：名前='Rob'）またはページパラメーターとして指定できます。
  • ページパラメーターは次のように指定する必要があります：App_name=${名前}（ここで名前はページパラメーターです）。

25. successMessage

The successMessage 属性は、指定された機能の実行が成功した時に表示されるメッセージを定義します。

可能な値
  • 文字列

例

注記：

  • successMessage属性はオプションです。
  • <操作='Function'>の場合のみ適用されます。

26. target

The target 属性は、リンクされた操作が画像をクリックした際に開く場所を決定します。

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

初期値

  • 新規ウィンドウ

注記：

  • 「<操作='リンク'/'Form'/'レポート'/'Page'>」の時のみ適用対象です

27. popupWidth

「popupWidth」属性は、リンクが表示されるポップアップウインドウの幅を定義します。

可能な値
  • 割合（％）、またはピクセルでの数値

28. popupHeight

「popupHeight」属性は、リンクが表示されるポップアップウインドウの高さを定義します。

可能な値
  • 数値型の値で、割合（%）またはピクセルで表します

以下のリストで、アイコン（アウトラインとソリッド）および事前に作成されたアイコンクラスについての包括的なリストを確認できます。

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

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

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

    Zoho CRM Training



              Zoho WorkDrive Resources




                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.