WEBデザイン本舗 - カテゴリー１ , 小技集WEBデザイン本舗 - カテゴリー１ , 小技集https://www.opdweb.jp/blogs/tricksMon, 02 Mar 2026 12:17:23 -0800http://zoho.com/sites/<![CDATA[グラデーションの角丸ボタン]]>https://www.opdweb.jp/blogs/post/gradient-button

Q: こんなグラデーションのボタンを設置できますか？

こんなボタンいいな

A: はい！できます。今のところ、Zoho Sitesでで設置できるボタンの背景は単色のみになっています。そのため今回はボタンではなく、コードスニペットを追加して、ボタンを表示させる方法をご紹介します。

手順

１. コードスニペットを追加

画面左上の＋→［要素］→［コードスニペット］をクリックします。>>要素の追加方法や基本操作はこちら

２. コードスニペットの登録

①［スニペットを追加する］をクリック

②コード名にわかりやすい名前をつけ（ここではbutton1）

③に以下のコードを貼り付け［OK］をクリック

----------------------------------------------------------------

<a href="リンク先URL"><span>こんなボタンいいな</span></a>
----------------------------------------------------------------

  • リンク先URLは、ボタンを押した時のリンク先のアドレスを入力します。
  • 「こんなボタンいいな」の部分はボタンのテキストになります。

コードスニペットが追加されました。

２. CSS(スタイルシート)でカスタマイズ

①カスタマイズオプションの［CSS］をクリック

②独自クラス名に「btn btn-gradient」と入力

③［CSS編集ツールを開く］をクリック

④カスタムCSS編集ツールでボタンにグラデーションやフォントの設定をします。

以下のコードを貼り付け［保存］をクリック

--------------------------------------------------------------------------

.btn,

a.btn,

button.btn {

  font-size: 1.6rem;

  font-weight: 700;

  line-height: 1.5;

  position: relative;

  display: inline-block;

  padding: 1rem 4rem;

  cursor: pointer;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

  -webkit-transition: all 0.3s;

  transition: all 0.3s;

  text-align: center;

  vertical-align: middle;

  text-decoration: none;

  letter-spacing: 0.1em;

  color: #212529;

}

a.btn-gradient {

  font-weight: normal;

  border-radius: 0.5rem;

  color: #fff;

  background-image: -webkit-gradient(

    linear,

    left top,

    right top,

    color-stop(40%, #ff3cac),

    to(#562b7c)

  );

  background-image: -webkit-linear-gradient(left, #ff3cac 40%, #562b7c 100%);

  background-image: linear-gradient(90deg, #ff3cac 40%, #562b7c 100%);

}

a.btn-gradient:after {

    border-radius: 0.5rem;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  content: "";

  -webkit-transition: all 0.5s;

  transition: all 0.5s;

  background-image: -webkit-gradient(

    linear,

    left top,

    right top,

    from(#ff3cac),

    color-stop(#562b7c),

    to(#2b86c5)

  );

  background-image: -webkit-linear-gradient(left, #ff3cac, #562b7c, #2b86c5);

  background-image: linear-gradient(90deg, #ff3cac, #562b7c, #2b86c5);

}

a.btn-gradient span {

  position: relative;

  z-index: 1;

}

a.btn-gradient:hover {

  color: #fff;

}

a.btn-gradient:hover:after {

  opacity: 0;

}


--------------------------------------------------------------------------

４. 公開して確認

ボタンを置きたい場所に移動させたら、［公開する］で確認します。

※プレビューでは、リンクに飛ばないことがあります。

ちゃんと、ボタンが表示されました！

]]>Wed, 17 Aug 2022 16:22:10 +0900<![CDATA[Google Mapを日本語にする方法]]>https://www.opdweb.jp/blogs/post/map

Q: Google mapを追加したのですが、英語表記になっています。日本語にできますか？

A: はい、できます！Zoho Sitesで追加できるGoogle Mapは今のところ英語表記になっています。日本語にするには、インラインフレームのコードを埋め込む必要があります。少しだけ複雑なので、順を追ってご説明します。

今回はGoogleのデベロッパーツールを使用するので、Zoho SitesへはGoogle Chromeでログインしておいて下さい。

手順

１. マップを追加

  1. 画面左上の＋→［要素］→［Google Map］をドラッグして任意の場所に追加します。
  2. 住所をローマ字で入力します。※ローマ字での住所入力方法は、写真を参考にして下さい。>>要素の追加方法や基本操作はこちら

［追加する］をクリックすると、マップが追加されますが、英語表記になっています。

２. デベロッパーツールの起動

  1. まずは、画面をプレビュー表示に切り替えましょう。
  2. 地図のどこか文字を選択して、右クリック→［検証］をクリックすると、デベロッパーツールが起動します。

２. コードを探す

少し上にスクロールすると、＜iframe...というタグの中にGoogle Mapのアドレスが見つかります。

３. アドレスの一部を変更

Google Mapのアドレスの中に「en」という部分があります。これを「jp」に打ち直します。すると、地図が日本語表記になるのが分かると思います。

４. コードをコピー

<iframeclass......から</iframe>までのコードを、コピーします。これで日本語版Google Mapのコードが取得できました。プレビュー画面は×で消してしまってかまいません。

５. 日本語版マップを追加

編集画面に戻り、改めて日本語のマップを追加します。

画面左上の＋→［要素］→［埋め込み］をドラッグして任意の場所に追加します。

コピーしておいたiframeコードを貼り付けます。

５. 完成

ちゃんと、日本語表記の地図が表示されました！お疲れさまです。
]]>Fri, 12 Aug 2022 14:28:21 +0900<![CDATA["最初は閉じた状態の" 折りたたみメニューの作り方]]>https://www.opdweb.jp/blogs/post/closed-accordion

Q: 下のような最初は閉じた状態の折り畳みメニューは作れましすか？

クリックすると開閉します

コンテンツは、このように文章や見出し、写真など自由にコンテンツを追加できます。

Icon Button
クリックすると開閉します２

コンテンツは、このように文章や見出し、写真など自由にコンテンツを追加できます。

A: はい、できます！Zoho Sitesには折り畳みメニュー（アコーディオン）があります。デフォルトでは最初から上のメニューが開いた状態になっています。最初から閉じられているようにするには、コードをヘッダーに追加します。

手順

１. アコーディオンを追加

画面左上の＋→［要素］→［アコーディオン］の順にクリックしてアコーディオンを追加。タブ名とアコーディオンのコンテンツを編集します。（アコーディオンの色は、ビジュアルエディターで変更できます）

>>要素の追加方法や基本操作はこちら

２. コードを追加

［設定］→［ヘッダーとフッターのコード］をクリックします。

［ヘッダーコード］に以下のコードを貼り付けます。

--------------------------------------------------

<script>
function bindEvents(){
var accordianHeader = $D.getByClass('zpaccordion')
for (var i = 0; i < accordianHeader.length; i++) {
accordianHeader[i].addEventListener('click',function(){
if($D.hasClass(this,'zpaccordion-active') && this.hasAttribute('data-opened')){
$D.removeClass(this,'zpaccordion-active')
this.removeAttribute('data-opened')
var contentId = this.getAttribute('data-content-id');
var content = $D.getByDataId(contentId);
$D.removeClass(content,'zpaccordion-active-content')
}else{
var accordions = $D.getAll('[data-opened]');
for (var i = 0; i < accordions.length; i++) {
accordions[i].removeAttribute('data-opened');
}
this.setAttribute('data-opened','true')
}
})
}
}
  document.addEventListener("DOMContentLoaded",bindEvents)
</script>
--------------------------------------------------

３. 確認

サイトを公開して、閉じられた折りたたみメニューになっているか確認しましょう。※プレビューでは反映されません。

]]>Thu, 11 Aug 2022 13:05:28 +0900<![CDATA[文章を縦書きにしたい]]>https://www.opdweb.jp/blogs/post/tategaki

Q：こんな風にできますか？

A：はい。できます！上のホームページもZoho Sitesで作っています。縦書きはホームページでは珍しいですが、日本らしい「和」を表現することや、おしゃれ感を出すことができますよね。Zoho Sitesは、現在縦書きツールはありません。しかし、カスタムCSS編集ツールにコードを追加することで、縦書きレイアウトを実現できます。

文章を縦書きにする手順

１. 文章の入力

パラグラフ（文章）を追加し、普通に横書きで文章を入力します。配置は左寄せにしておきましょう。>>要素の追加方法や基本操作はこちら

２. CSS編集ツールを開く

パラフラフが選択されている状態で、横に表示されるカスタマイズオプションの｛CSS｝→｛CSS編集ツールを開く｝をクリックします。

３. コードを貼り付ける

以下のコードを貼り付けます。

--------------------------------------------------

.tategaki{

-ms-writing-mode: tb-rl;

writing-mode: vertical-rl;

}
--------------------------------------------------

４. クラス名を入力

クラス名は、先ほど貼り付けたコードの「tategaki」の部分です。独自クラス名に「tategaki」と入力すると、文章が縦書きに変わります。

縦書きは、テンプレートやレイアウトによっては、思うような位置に配置できないことがあります。その場合、余白や行のカラム数を変更したり調整を加えることで思うような位置に表示できることがあります。また、スマホ表示では思うようなレイアウトにならないこともあります。その場合、スマホ用に別の画像を用意して対応することでも納得のいく見た目にすることができます。

もし、Zoho Sitesで実現したいけど上手くいかないことがあれば、一度ご相談下さい。有料サポートで対応できることがたくさんあります。

問い合わせる
]]>Wed, 10 Aug 2022 11:46:52 +0900