コードカスタマイズ

コードカスタマイズ

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

コードスニペットは、Webサイトを強化するために追加可能な小さなコードの断片です。データ元からのウィジェットとスクリプトをサイトに挿入することができます。これにより、あなたのページは最も要求されるスニペットを含めることができ、Webサイトのヘッダーとフッターセクションにそれらを追加することで、またはコードスニペット要素を使用して特定のページに適用することで、サイト全体にそれらを適用できます。

​

Webサイトに'トップへ戻る'浮かび上がるボタンをどのように追加できますか？ 

Webサイトのヘッダー／フッターコードに以下のコードをコピーして貼り付けることで、Webサイトに'トップへ戻る'浮かび上がるボタンを追加することができます。特定のページだけにボタンを表示したい場合は、そのページ特有のヘッダー／フッターコード領域に追加してください。


すべてのアコーディオンを開始時に完了済みにするための方法は？ 

すべてのアコーディオンを開始時に閉じて保つために、下のコードをコピーして、ウェブサイトのヘッダーやフッターのコードに貼り付けてください。この機能を特定のページだけに適用したい場合は、そのページに固有のヘッダー/フッターコードボックスにそれを追加してください。

 

開始時にすべてのタブを閉じた状態にする方法は？ 

開始時にすべてのタブを完了済みにするには、以下のコードをWebサイトのヘッダー/フッターコードにコピーして貼り付けてください。この機能を特定のページでのみ使用したい場合は、それらのページに固有のヘッダー/フッターコードボックスに追加してください。

 

RSS サブスクリプション管理ボタンをどのように隠しますか? 

RSS サブスクリプション管理ボタンを隠すには、以下の CSS コードをコピーしてカスタム CSS セクション（カスタマイズ -> コード; カスタム CSS エディタータブ）に貼り付けてください。

  1. .theme-blog-カテゴリー-列 .theme-blog-カテゴリー-container。theme-blog-rss-feed {
  2. display: なし;
  3. }

 

サイトで作成したフォームを自動的に記入するにはどうすればいいですか? 

次のコードをWebサイトのヘッダーやフッターのコードにコピーペーストしてください。特定のページのみに適用したい場合は、その特定のページのヘッダー/フッターコードボックスに追加してください。

 

任意のページに最新のブログを表示するにはどうすればいいですか? 

必要な場所にコードスニペット要素をドラッグ＆ドロップで作成します。

次に、次のコードを貼り付けます：

  4. {{#blog_list}}

  9. {{件名}}

  • {{{説明}}}

  • 詳細を見る
  • 読み込み中...

    •  

    ​
    メンバーポータルとブログ記事のためのZoho Flowトリガー


    Zoho Flowにより、Zohoサイトの所有者はポータルへ招待を送ることができます。 
    ユーザーは招待を承認し、ユーザー登録を行うと、メンバーポータルグループの担当者になることができます。
    Zohoサイトの担当者は、Zoho Flowを使用してポータルへの招待を再送することもできます。
    ユーザーは、Zoho CRMなどのサードパーティの処理に基づいて、Zohoサイトから削除することもできます。
    Zoho Flowの処理により、Zohoサイトの所有者はブログ記事も作成することができます。

    Zohoサイトにポップアップを追加する方法は？ 

    以下のコードをあなたのWebサイトのヘッダー/フッターコードにコピーして貼り付けます。特定のページのみに適用したい場合は、そのページのヘッダー/フッターコードボックスに追加します。

    ステップ 1: このコードをWebサイトのヘッダーコードに追加します。


    手順 2:次のコードをサイトのフッターコードセクションに追加します。


    手順 3:次のコードをカスタムCSSファイルに追加します。

    1. /* The Modal (background) */
    2. .modal {
    3. justify-content:center;
    4. display: none; /* 初期設定では非表示 */
    5. position: fixed; /* 場所は固定 */
    6. z-index: 300; /* 上に配置 */
    7. padding-top: 100px; /* 箱の位置 */
    8. left: 0;
    9. top: 0;
    10. width: 100%; /* 全幅 */
    11. height: 100%; /* 全高 */
    12. overflow: auto; /* 必要に応じてスクロールを有効にする */
    13. background-color: rgb(0,0,0); /* フォールバックカラー */
    14. background-color: rgba(+10、-10,+10、-10,+10、-10,+10、-10。4); /* 黒/透明度 */
    15. }
    16.  
    17. /* モーダルコンテンツ */
    18. .modal-content {
    19. display:inline-flex;
    20. position: relative;
    21. background-color: #fefefe;
    22. margin: auto;
    23. padding: +10、-10;
    24. border: 1px solid #888;
    25. width: 60%;
    26. box-shadow: +10、-10 4px 8px +10、-10 rgba(+10、-10,+10、-10,+10、-10,+10、-10。2),+10、-10 6px 20px +10、-10 rgba(+10、-10,+10、-10,+10、-10,+10、-10。19);
    27. -webkit-animation-名前: animatetop;
    28. -webkit-animation-期間: +10、-10。4s;
    29. animation-名前: animatetop;
    30. animation-期間: +10、-10。4s
    31. }
    32.  
    33. /* 追加する Animation */
    34. @-webkit-keyframes animatetop {
    35. 差出人 {top:-300px; opacity:+10、-10}
    36. to {top:+10、-10; opacity:1}
    37. }
    38.  
    39. @keyframes animatetop {
    40. 差出人 {top:-300px; opacity:+10、-10}
    41. to {top:+10、-10; opacity:1}
    42. }
    43.  
    44. /* 閉じるボタン */
    45. .閉じる {
    46. 色: 白;
    47. 位置: 絶対;
    48. 上: -13px;
    49. 右: -13px;
    50. フロート: 右;
    51. フォントのサイズ: 20px;
    52. フォントの重さ: Bold;
    53. border-radius: 50%;
    54. width: 30px;
    55. height: 30px;
    56. background:#969494;
    57. text-align:center;
    58. }
    59. .閉じる:hover,
    60. .閉じる:focus {
    61. text-decoration: none;
    62. cursor: pointer;
    63. }
    64.  
    65. .modal-header {
    66. padding: 2px 16px;
    67. background-color: #5cb85c;
    68. color: white;
    69. }
    70.  
    71. .modal-本文 {padding: 2px 16px;}
    72.  
    73. .modal-footer {
    74. padding: 2px 16px;
    75. background-color: #5cb85c;
    76. color: white;
    77. }


    手順 4:asectionを追加し、設定アイコンをクリックし、表示設定タブに移動します。ここで表示設定を全てのdevices上で非表示に設定します。下記の通りです。



    手順 5:作成したsectionの中から行を選択し、CSSタブを選択し、クラス名に'target'を入力します。下記の通りです。


    手順 6:ボタンを選択し、JS タブを選択し、処理の種類をonclickに設定し、関数名入力欄にopenPopup(event,'target')を入力します。下記の画像を参照してください。




    手順 7:サイトを公開し、ボタンをクリックしたら、下図のようなポップアップとして行が開きます。必要に応じてポップアップを編集できます。

    Notes
    メモ: 使用中の関数は openPopup(event,'target') です。ここで、'target'はポップアップに変更される要素に入力されるクラス名です。

    Zoho Sitesでスクリプトを使用してログインユーザーのメールアドレスを取得する方法は何ですか？

    1. fetch('/portaluser/userProfile')
    2. .then(response => response.json())
    3. .then(response => {
    4. if(response.status_code == +10、-10) {
    5. var email_address = response.データの内容.権限.email_address; var zuid = response.データの内容.権限.zuid;
    6. console.log(zuid);
    7. } else {
    8. console.log('ユーザーは存在しません');
    9. }
    10. });
    または
    1. $X.取得する({ 
          url : '/portaluser/userProfile',
          handler : function() {
              var response = JSON.parse(this.responseText);
              if(response.status_code == 0) {
                  var email_address =    response.payload.profile.email_address;        var zuid =    response.payload.profile.zuid;
                  console.log(zuid);
              } else {
                  console.log('ユーザーは存在しません');
              }
          }
      });