コードのカスタマイズ

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

コードスニペットとは、Webサイトの機能を拡張するために追加できる短いコードです。外部のソースプロバイダーが提供するウィジェットやスクリプトをサイトに挿入できます。よく利用されるコードをページに組み込み、Webサイトのヘッダーやフッターに追加してサイト全体に適用したり、コードスニペット要素を使用して特定のページに適用したりできます。

Webサイトにページ上部へ戻るフローティングボタンを追加するには

ページ上部へ戻るフローティングボタンを追加するには、次のコードをコピーして、Webサイトのヘッダー／フッターコードに貼り付けます。特定のページだけに追加する場合は、各ページのヘッダー／フッターコードボックスに追加します。

<style>
.rounded-floating-btn {
position: fixed;
right: 20px;
width: 50px !important;
height: 75px !important;
bottom: 20px;
padding: 15px;
z-index: 5;
border-radius: 2px;
cursor: pointer;
background-color: #101010;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
color: #fff;
font-size: 70%;
font-weight: 400;
}
.floated-btn-svg-icon {
width: 20px;
fill: #fff;
margin: 0 auto;
margin-top: 3px;
}
.rounded-floating-btn .zptext {
margin-top: 3px;
}
</style>
<script>
window.onload=function(){
var div = document.createElement('div');
div.innerHTML='<div class='zpelem-box zpelement zpbox-container zpdefault-section zpdefault-section-bg rounded-floating-btn' data-background-type='none' style='display:none' id='scrollToTop'><div class='floated-btn-svg-icon'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 268.831 268.832'><path d='M223.255 83.659l-80-79.998c-4.881-4.881-12.797-4.881-17.678 0l-80 80c-4.883 4.882-4.883 12.796 0 17.678 2.439 2.44 5.64 3.661 8.839 3.661s6.397-1.221 8.839-3.661l58.661-58.661v213.654c0 6.903 5.597 12.5 12.5 12.5 6.901 0 12.5-5.597 12.5-12.5V42.677l58.661 58.659c4.883 4.881 12.797 4.881 17.678 0 4.882-4.881 4.882-12.795 0-17.677z'></path></svg></div><div class='zptext zptext-align-center'><p>TOP</p></div></div>';
div.addEventListener('click',function(e){
e.preventDefault();
window.scrollTo(0,0);
})
document.body.appendChild(div);
}
window.onscroll = function() {
var threshold = 50; // Pixels after the scrol to top should show
var scrollToTop = document.getElementById('scrollToTop')
scrollToTop.style.display = (document.body.scrollTop > threshold || document.documentElement.scrollTop > threshold) ? 'block' : 'none';
};
</script>

開始時にすべてのアコーディオンを閉じておくには

開始時にすべてのアコーディオンを閉じておくには、次のコードをコピーして、Webサイトのヘッダー／フッターコードに貼り付けます。特定のページだけに適用する場合は、各ページのヘッダー／フッターコードボックスに追加します。

<script>
function closeAccordian(){
var accordianHeader = $D.getByClass('zpaccordion-active')
var accordianContent = $D.getByClass('zpaccordion-active-content')
for(var i=0;accordianHeader.length>0;){
$D.removeClass(accordianHeader[i],'zpaccordion-active')
}
for(var i=0;accordianContent.length>0;){
$D.removeClass(accordianContent[i],'zpaccordion-active-content')
}
}
document.addEventListener('DOMContentLoaded',closeAccordian)
</script>

開始時にすべてのタブを閉じておくには

すべてのタブを閉じておくには、次のコードをコピーして、Webサイトのヘッダー／フッターコードに貼り付けます。特定のページだけに適用する場合は、各ページのヘッダー／フッターコードボックスに追加します。

<script>
function closeTabs(){
var tabHeader = $D.getByClass('zptab-active')
var tabContent = $D.getByClass('zptab-active-content')
for(var i=0;tabHeader.length>0;){
$D.removeClass(tabHeader[i],'zptab-active')
}
for(var i=0;tabContent.length>0;){
$D.removeClass(tabContent[i],'zptab-active-content')
}
}
document.addEventListener('DOMContentLoaded',closeTabs)
</script>

RSS購読ボタンを非表示にするには

次のCSSコードをコピーし、カスタムCSSセクション（［カスタマイズ］→［コード］、［カスタムCSSエディター］タブ）に貼り付けます。

.theme-blog-category-column .theme-blog-category-container.theme-blog-rss-feed {
display: none;
}

Sitesで作成したフォームを自動入力するには

以下のコードをコピーして、Webサイトのヘッダーコードまたはフッターコードに貼り付けます。特定のページでのみ使用する場合は、ページ固有のヘッダーコードまたはフッターコードの入力欄に追加します。

<script type='text/javascript'>
var count = 0;
var autoFillFunction = setInterval(
function() {
count++;
var formElement = document.querySelector('[elname='<form_link_name>']');
if(formElement != null) {
var paramString = window.location.search.substr(1),
paramArray = paramString.split('&');
for(var i=0; i<paramArray.length; i++) {
var fieldName = paramArray[i].split('=')[0];
var fieldValue = paramArray[i].split('=')[1];
var autoFillElement = formElement.querySelector('[name='' + fieldName +'']');
autoFillElement.value = fieldValue;
}
clearInterval(autoFillFunction);
} else if(count > 4) {
clearInterval(autoFillFunction);
}
},2000);
</script>

メンバーポータルとブログ投稿に関するZoho Flowのトリガー

Zoho Sitesの所有者は、Zoho Flowを通じてポータルへの招待を送信できます。
ユーザーが招待を承諾してユーザー登録すると、そのユーザーをメンバーポータルのグループに割り当てることができます。

Zoho Sitesの所有者は、Zoho Flowを使用してユーザーをポータルに再招待することもできます。

Zoho CRMなどの外部サービスでの操作に応じて、Zoho Sitesからユーザーを削除することもできます。

Zoho Sitesの所有者は、Zoho Flowのアクションを通じてブログ投稿を作成することもできます。

Zoho Sitesにポップアップを追加するには

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

手順1：このコードをWebサイトのヘッダーコードに追加します。

<script>
function openPopup(event, class_name) {
event.preventDefault();
var target = $D.getByClass(class_name)[0];
$D.removeClass(target, 'zp-hidden-md');
$D.removeClass(target, 'zp-hidden-sm');
$D.removeClass(target, 'zp-hidden-xs');
var modalContainer = $D.getByClass('modal-content')[0];
modalContainer.appendChild(target);
var closeElement = document.createElement('span')
closeElement.classList += 'close'
closeElement.innerHTML= '×'
modalContainer.appendChild(closeElement)
var modal = document.getElementById('myModal');
modal.style.display = 'flex';
var span = document.getElementsByClassName('close')[0];
if (span) {
span.onclick = function() {
modal.style.display = 'none';
}
}
window.onclick = function(event) {
if (modal && event.target == modal) {
modal.style.display = 'none';
}
}
}
</script>

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

<div id='myModal' class='modal'><div class='modal-content'></div></div>

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

/* モーダル（背景） */
.modal {
justify-content:center;
display: none; /* 標準では非表示 */
position: fixed; /* 位置を固定 */
z-index: 300; /* 最前面に表示 */
padding-top: 100px; /* ボックスの場所 */
left: 0;
top: 0;
width: 100%; /* 全幅 */
height: 100%; /* 全高 */
overflow: auto; /* 必要に応じてスクロールを有効にする */
background-color: rgb(0,0,0); /* 代替色 */
background-color: rgba(0,0,0,0.4); /* 不透明度を設定した黒 */
}
/* モーダルコンテンツ */
.modal-content {
display:inline-flex;
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 60%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* アニメーションを追加する */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* 閉じるボタン */
.close {
color: white;
position: absolute;
top: -13px;
right: -13px;
float: right;
font-size: 20px;
font-weight: bold;
border-radius: 50%;
width: 30px;
height: 30px;
background:#969494;
text-align:center;
}
.close:hover,
.close:focus {
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}

手順4：セクションを追加し、［設定］アイコンをクリックして、［表示］タブに移動します。次のように、表示を［すべてのデバイスで非表示］に設定します。

手順5：非表示にしたセクション内の行を選択し、［CSS］タブを選択して、次のように［クラス名］に「target」と入力します。

手順6：ボタンを選択して［JS］タブを選び、openPopup(event,'target')を［関数名］の入力欄に入力し、［イベントの種類］として［onclick］を選択します。次を参照してください。

手順7：サイトを公開します。ボタンをクリックすると、次のように行がポップアップとして開きます。ポップアップに合わせて、必要に応じて行を編集できます。

メモ：使用する関数はopenPopup(event,'target')です。ここで、「target」はポップアップに変換する要素に入力するクラス名です。

スクリプトを使用して、Zoho Sitesにログインしているユーザーのメールアドレスを取得するには

fetch('/portaluser/userProfile')
.then(response => response.json())
.then(response => {
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('User not present');
}
});

または

$X.get({

    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('User not present');
        }
    }

});

コードのカスタマイズ

コードのカスタマイズ

Webサイトにページ上部へ戻るフローティングボタンを追加するには

開始時にすべてのアコーディオンを閉じておくには

開始時にすべてのタブを閉じておくには

RSS購読ボタンを非表示にするには

Sitesで作成したフォームを自動入力するには

最新のブログ投稿を任意のページに表示するには

​メンバーポータルとブログ投稿に関するZoho Flowのトリガー

Zoho Sitesにポップアップを追加するには

スクリプトを使用して、Zoho Sitesにログインしているユーザーのメールアドレスを取得するには

メンバーポータルとブログ投稿に関するZoho Flowのトリガー