【デザイン例あり】STUDIOのカスタムコードで活用方法を解説！

STUDIO

前回までの記事では、STUDIOを使ったUIボタンの作成やTOPページの構築方法をご紹介しました。今回はさらに一歩踏み込んで、カスタムコードを使ったデザイン作成について深掘りしていきます。また、記事の最後には、私がココナラで提供しているサービスの紹介もありますので、お見逃しなく！

カスタムコードとは？

STUDIOのカスタムコード機能とは、利用者が直接HTML、CSS、JavaScriptを編集し、ウェブサイトやアプリのデザインをカスタマイズできる強力な機能です。基本的な使い方をマスターした後、この機能を使えば、さらに個性的で魅力的なデザインが可能になります。

カスタムコードを使うとできること
・詳細なスタイリング: 標準の機能では実現できない細かいスタイル調整が可能。
・動的なインタラクション: JavaScriptを使用して、ユーザーのアクションに応じた動的な変化を実装。
・サードパーティの統合: 外部APIやウィジェットを組み込み、機能を拡張。

【基礎】カスタムコード使用方法

まずはSTUDIOを使って、基本的なカスタムコードを作成する方法をご紹介します。

①まずはカスタムコードを書き込むためのパーツを追加します。下記の動画のように、STUDIOのデザインエディタ上で左側の「追加」から「Blank」を追加してください。

②追加された「Blank」を選択すると、右側の詳細設定の部分で「埋め込みコード」と書かれた欄が出てきます。その中に具体的なコードを記載します。（※コードは、直接HTML、CSS、JavaScriptを記載できます。）

③今回は例として、ある枠の中にマウスポインタが入っている間、ポップアップが表示されるようなコードを書いていきます。（※使用イメージとしては、バナーの表示を想定しています。）

実際のコードはこちら↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>バナーポップアップデモ</title>
<style>
  .banner {
    /* バナーのスタイル設定 */
    width: 300px;
    height: 100px;
    border: 1px solid black;
    text-align: center;
    line-height: 100px;
    cursor: pointer;
  }

  .popup {
    /* ポップアップのスタイル設定 */
    width: 300px;
    position: absolute;
    top: 120px; /* バナーの下に表示 */
    border: 1px solid black;
    background-color: white;
    text-align: center;
    display: none; /* 初期状態では非表示 */
  }
</style>
</head>
<body>

<div id="banner" class="banner">
  <!-- バナーの内容 -->
  <p>マウスをここに置いてください</p>
</div>
<div id="popup" class="popup">
  <!-- ポップアップの内容 -->
  <p>こんにちは、ポップアップです！</p>
</div>

<script>
  // マウスがバナーに乗った時のイベント
  document.getElementById('banner').addEventListener('mouseover', function() {
    // ポップアップを表示
    document.getElementById('popup').style.display = 'block';
  });

  // マウスがバナーから外れた時のイベント
  document.getElementById('banner').addEventListener('mouseout', function() {
    // ポップアップを非表示
    document.getElementById('popup').style.display = 'none';
  });
</script>

</body>
</html>

④ライブプレビューで結果を確認すると、枠の中にマウスポインタが入った時だけ、ポップアップが表示されることを確認できました。

【応用】カスタムコード活用例

ここからは、カスタムコードを活用した具体的なデザイン例をご紹介します。
この記事の最後に、今回作成した実際のコードを載せておきます。

僕がココナラでフリーランスとしてSTUDIOを使ったWEBサイト制作をしている中で、作成したものや、個人的に作成してみたいと思ったものをSTUDIOで作成してみました。

これらのカスタムコードを実際に触ってみたい人はこちら。

※1.上記のURLのページでは、どのボタンを押しても、別の画面へ遷移しないようにしています。
※2.上記のURLのページでは、レスポンシブを設定はしていないので、スマホの画面で見ると、上の動画とは少し違った見え方になるかもしれません。

【宣伝】ココナラで出品中のサービス紹介

最後に、私がココナラで提供しているサービスについてご紹介します。STUDIOを使ったウェブデザインの作成を行うサービスを出品しています。ご紹介したカスタムコードのデザインだけでなく、様々なデザインをご提案させていただきます。もし、この記事を読んで少しでも興味を持っていただけたら、ぜひ私のページをチェックしてみてください。

STUDIOでオリジナルWEBサイト作成します 修正制限無し！デザイン/画像/文章丸投げOK!【２名様限定】

カスタムコードを活用した事例ではないですが、以前作成したWEBサイトの参考例です。
ご興味があればご覧ください。
①https://simple-template1.studio.site
②https://simple-template2.studio.site

まとめ

STUDIOのカスタムコード機能は、ウェブデザインの可能性を大きく広げてくれます。基本的な使い方をマスターした後は、ぜひこの機能を活用して、あなただけのオリジナルデザインを創り上げてみてください。また、デザイン作成でお困りのことがあれば、いつでも私のココナラサービスをご利用ください。それでは、皆さんの創作活動が充実したものになりますように！

おまけ

今回ご紹介したデザインの具体的なコードをご紹介します。
ご自身のSTUDIOで、実際に貼り付けて試してみてください。

マウスポインタを横に動かすと色が変わるカスタムコード 
<script>
document.addEventListener('mousemove', function(e) {
    var width = window.innerWidth;
    var mouseX = e.clientX;
    var hue = (mouseX / width) * 360; // 色相: 0〜360
    var saturation = 100; // 彩度: 0〜100 (低いほど灰色に近くなる)
    var lightness = 50; // 明るさ: 0〜100 (低いほど暗く、高いほど明るい)
    var alpha = 0.7; // 透明度: 0〜1 (0で完全透明、1で不透明)
    document.body.style.backgroundColor = 'hsla(' + hue + ', ' + saturation + '%, ' + lightness + '%, ' + alpha + ')';
});
</script>
マウスポインタを縦に動かすと色が彩度が変わるカスタムコード 
<script>
document.addEventListener('mousemove', function(e) {
    var height = window.innerHeight; // ウィンドウの高さを取得
    var mouseY = e.clientY; // マウスのY座標を取得
    var hue = 240; // 青色の色相 (HSLの240度は青色)
    var saturation = 100; // 彩度は100% (完全な色)
    var lightness = (1 - (mouseY / height)) * 100; // 高さに応じて明るさを計算 (上に行くほど暗く、下に行くほど明るい)
    var alpha = 0.7; // 透明度は0.7で一定

    // 背景色を動的に変更
    document.body.style.backgroundColor = 'hsla(' + hue + ', ' + saturation + '%, ' + lightness + '%, ' + alpha + ')';
});
</script>
マウスポインタにオブジェクトがついてくるカスタムコード 
<style>
/* マウスポインタの周囲に透明な円を作成するスタイル */
.circle {
  width: 100px; /* 円のサイズ */
  height: 100px; /* 円のサイズ */
  border-radius: 50%; /* 円形にする */
  position: fixed; /* 画面に対して固定位置 */
  pointer-events: none; /* マウスイベントを無視させる（クリックを妨げない） */
  mix-blend-mode: difference; /* 背景とのブレンドモードを設定 */
  background: white; /* 円の色を白に設定 */
  transform: translate(-50%, -50%); /* 中心をマウスポインタに合わせる */
  opacity: 0.5; /* 半透明にする */
  transition: transform 0.2s ease-out; /* 移動にかかる時間とタイミング関数を指定 */
}
</style>

<div id="circle" class="circle"></div> <!-- 透明な円 -->

<script>
// マウスポインタの位置に基づいて円を移動する関数
document.addEventListener('mousemove', function(e) {
    var circle = document.getElementById('circle');
    // ページ上のマウス位置に円を移動させる
    circle.style.transform = `translate(${e.pageX - 50}px, ${e.pageY - 50}px)`;
});
</script>
マウスポインタの軌跡にカラフルな星が表示されるカスタムコード 
<!DOCTYPE html>
<html>
<head>
<style>
    .sparkle {
        position: absolute;
        display: block;
        pointer-events: none;
        color: #ff69b4;
        opacity: 0.8;
        transition: all 0.5s ease-out;
    }
</style>
</head>
<body>

<script>
document.addEventListener('mousemove', function(e) {
    let body = document.querySelector('body');
    let sparkle = document.createElement('div');
    sparkle.classList.add('sparkle');
    sparkle.style.left = e.clientX + 'px';
    sparkle.style.top = e.clientY + 'px';
    sparkle.innerHTML = '★';
    let color = `hsl(${Math.random() * 360}, 100%, 75%)`;
    sparkle.style.color = color;
    sparkle.style.fontSize = Math.random() * 24 + 'px';
    body.appendChild(sparkle);
    setTimeout(function() {
        sparkle.remove();
    }, 1000);
});
</script>

</body>
</html>
３D方向にオブジェクトを動かすカスタムコード 
<style>
/* コンテナスタイル */
.container {
  display: flex; /* コンテナ内の要素を横に並べる */
  flex-wrap: wrap; /* オブジェクトが多い場合は折り返す */
}

/* 3Dボックスの共通スタイル */
.three-d-box {
  width: 100px;
  height: 100px;
  margin-right: 20px; /* 各ボックス間の余白 */
  margin-bottom: 20px; /* 下への余白 */
  perspective: 500px;
}

.three-d-content {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

/* 異なるアニメーション */
@keyframes rotateY {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}
@keyframes rotateX {
  from { transform: rotateX(0deg); }
  to { transform: rotateX(360deg); }
}
@keyframes rotateZ {
  from { transform: rotateZ(0deg); }
  to { transform: rotateZ(360deg); }
}
@keyframes rotateXY {
  from { transform: rotateX(0deg) rotateY(0deg); }
  to { transform: rotateX(360deg) rotateY(360deg); }
}
@keyframes rotateXYZ {
  from { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  to { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}

/* 異なる形状 */
.shape1 { transform: skew(10deg, 20deg); }
.shape2 { transform: rotateX(45deg); }
.shape3 { transform: rotateY(45deg); }
.shape4 { transform: rotateZ(45deg); }
.shape5 { transform: rotateX(30deg) rotateY(20deg); }
</style>

<div class="container">
  <!-- 各オブジェクトを追加、異なる形状、位置、色、回転アニメーションを適用 -->
  <div class="three-d-box">
    <div class="three-d-content shape1" style="background-color: salmon; animation-name: rotateY;"></div>
  </div>
  <div class="three-d-box">
    <div class="three-d-content shape2" style="background-color: teal; animation-name: rotateX;"></div>
  </div>
  <div class="three-d-box">
    <div class="three-d-content shape3" style="background-color: violet; animation-name: rotateZ;"></div>
  </div>
  <div class="three-d-box">
    <div class="three-d-content shape4" style="background-color: orange; animation-name: rotateXY;"></div>
  </div>
  <div class="three-d-box">
    <div class="three-d-content shape5" style="background-color: lightgreen; animation-name: rotateXYZ;"></div>
  </div>
</div>
３D要素を表示するカスタムコード 
<style>
.container {
  display: flex; /* コンテナ内の要素を横に並べる */
}

.cube {
  width: 100px;
  height: 100px;
  margin-right: 20px; /* 各ボックス間の余白 */
  margin-bottom: 20px; /* 下への余白 */
  perspective: 800px; /* 立方体の深度感を調整 */
}

.cube-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: rotate 10s infinite linear;
  transform-origin: 50% 50%; /* 回転の原点を立方体の中心に設定 */
}

/* 立方体の各面 */
.face {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: teal;
  border: 1px solid #fff;
  transform-origin: 50% 50%; /* 各面の原点を中心に設定 */
}

.front  { transform: translateZ(50px); }
.back   { transform: rotateY(180deg) translateZ(50px); }
.right  { transform: rotateY(90deg) translateZ(50px); }
.left   { transform: rotateY(-90deg) translateZ(50px); }
.top    { transform: rotateX(90deg) translateZ(50px); }
.bottom { transform: rotateX(-90deg) translateZ(50px); }

/* 異なるアニメーション */
@keyframes rotate {
  from { transform: rotateX(0deg) rotateY(0deg); }
  to { transform: rotateX(360deg) rotateY(360deg); }
}
</style>

<div class="container">
  <div class="cube">
    <div class="cube-inner">
      <div class="face front"></div>
      <div class="face back"></div>
      <div class="face right"></div>
      <div class="face left"></div>
      <div class="face top"></div>
      <div class="face bottom"></div>
    </div>
  </div>
  <!-- 他の立方体を追加してください -->
</div>
ドロップダウンメニューを表示するカスタムコード 
<style>
/* ドロップダウンメニューの親要素のスタイルを設定 */
.dropdown {
  position: relative; /* ポジションを相対的に設定 */
  display: inline-block; /* インラインブロック要素として表示 */
  color: white; /* テキストの色を白に設定 */
  background-color: #0000FF; /* 背景色を青に設定 */
  padding: 10px; /* 内側の余白を設定 */
  border-radius: 5px; /* 角を丸くする */
  width: 20%; /* 親要素の横幅をウェブサイト全体の30%に設定 */
}

/* ドロップダウンメニューの内容部分のスタイルを設定 */
.dropdown-content {
  display: none; /* 最初は非表示 */
  position: absolute; /* 絶対位置 */
  background-color: #f9f9f9; /* 背景色を設定 */
  width: 100%; /* 横幅を親要素と同じにする */
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* 影をつける */
  z-index: 1; /* 重なり順序を設定 */
}

/* 各ドロップダウン項目のスタイルを設定 */
.dropdown-content a {
  padding: 12px 16px; /* パディングを設定 */
  text-decoration: none; /* テキストの下線をなくす */
  display: block; /* ブロック要素として表示 */
  color: black; /* テキスト色を黒に設定 */
  background-color: white; /* 背景色を白に設定 */
  transition: color 0.3s, background-color 0.3s; /* 色の変化を滑らかにする */
}

/* ドロップダウン項目にホバーしたときのスタイルを設定 */
.dropdown-content a:hover {
  color: white; /* テキスト色を白に */
  background-color: #555; /* 背景色を暗めの色に */
}

/* ドロップダウンメニューの親要素にホバーしたときに内容を表示 */
.dropdown:hover .dropdown-content {
  display: block; /* ブロックとして表示 */
}
</style>

<div class="dropdown">
  Hover over me <!-- ホバーするとドロップダウンメニューが表示されるテキスト -->
  <div class="dropdown-content">
    <a href="#">項目1</a> <!-- ドロップダウンメニューの各項目 -->
    <a href="#">項目2</a>
    <a href="#">項目3</a>
    <a href="#">項目4</a>
    <a href="#">項目5</a>
  </div>
</div>

コメント