Mine text-統合版用装飾エディター

ブログ
#§ #ウェブツール #看板 #統合版
YK developer
いいね！
読み込み中...
130(週:1 月:11) 0 1 0
投稿日：2025.06.20
スポンサーリンク

§の煩わしさを解消するツール

テキストの装飾って皆さん使っていますか？テキストの装飾は統合版では§（せくしょん）というものを使うのですが結構覚えるのが大変かつ、§が打ちにくい機種もあるんですよねー(-_-;)
なので直観的に操作できるUIで装飾ができるサイトを作ってみました！

  • 色付け
  • 太字
  • 斜体
  • 装飾のリセット

の装飾ができるようにしました。

https://yukkurim.github.io/mine-text/

で使うことができます！

ぜひ使ってみてください！

HTMLコード

<!DOCTYPE html>r
<html lang="ja">r
<head>r
  <meta charset="UTF-8">r
  <meta name="viewport" content="width=device-width, initial-scale=1">r
  <title>Mine-text</title>r
  <style>r
    @font-face {r
      font-family: "Minecraft";r
      src: url("https://fonts.cdnfonts.com/s/8456/Minecraftia-Regular.woff") format("woff");r
    }r
    body {r
      margin: 0;r
      padding: 0;r
      font-family: "Minecraft", monospace;r
      background: linear-gradient(to bottom, #ccefff, #ffffff);r
      display: flex;r
      flex-direction: column;r
      align-items: center;r
      min-height: 100vh;r
    }r
    h1 {r
      position: fixed;r
      top: 10px;r
      left: 20px;r
      font-size: 24px;r
      color: #111;r
      z-index: 10;r
    }r
    .board {r
      background: #c6a961;r
      border: 6px solid #7b5b2a;r
      padding: 20px;r
      margin-top: 70px;r
      width: 90%;r
      max-width: 800px;r
      box-shadow: 0 0 15px rgba(0,0,0,0.4);r
      display: flex;r
      flex-direction: column;r
      align-items: center;r
    }r
    textarea {r
      width: 100%;r
      height: 150px;r
      font-size: 18px;r
      padding: 10px;r
      resize: none;r
      border: none;r
      font-family: "Minecraft", monospace;r
      background: #fefefe;r
      box-sizing: border-box;r
    }r
    .preview {r
      background: #333;r
      color: #fff;r
      padding: 12px;r
      margin-top: 16px;r
      font-size: 18px;r
      width: 100%;r
      white-space: pre-wrap;r
      border: 3px inset #000;r
      box-sizing: border-box;r
    }r
    .buttons {r
      display: flex;r
      flex-wrap: wrap;r
      justify-content: center;r
      gap: 6px;r
      margin-top: 12px;r
    }r
    .buttons button {r
      font-family: "Minecraft", monospace;r
      font-size: 14px;r
      padding: 6px 10px;r
      cursor: pointer;r
      border: none;r
    }r
    .copy-area {r
      margin-top: 16px;r
    }r
    .copy-btn {r
      font-size: 16px;r
      padding: 8px 16px;r
      font-family: "Minecraft", monospace;r
    }r
    .theme-switcher {r
      margin-top: 20px;r
      display: flex;r
      gap: 8px;r
      flex-wrap: wrap;r
      justify-content: center;r
    }r
    .theme-switcher button {r
      font-size: 14px;r
      padding: 6px 14px;r
      font-family: "Minecraft", monospace;r
    }r
r
    /* ネザーテーマ */r
    body.nether {r
      background: linear-gradient(to bottom, #2a0000, #000);r
    }r
    body.nether .board {r
      background: #722222;r
      border-color: #aa0000;r
    }r
    body.nether .preview {r
      background: #220000;r
    }r
  </style>r
</head>r
<body>r
  <h1>Mine-text</h1>r
  <div class="board">r
    <textarea id="inputText" placeholder="ここに文字を入力..."></textarea>r
    <div class="buttons">r
      <button data-code="§0" style="background:#000; color:#fff">黒</button>r
      <button data-code="§1" style="background:#00A; color:#fff">濃青</button>r
      <button data-code="§2" style="background:#0A0; color:#fff">濃緑</button>r
      <button data-code="§3" style="background:#0AA; color:#fff">青緑</button>r
      <button data-code="§4" style="background:#A00; color:#fff">濃赤</button>r
      <button data-code="§5" style="background:#A0A; color:#fff">紫</button>r
      <button data-code="§6" style="background:#FA0; color:#000">金</button>r
      <button data-code="§7" style="background:#AAA; color:#000">灰</button>r
      <button data-code="§8" style="background:#555; color:#fff">濃灰</button>r
      <button data-code="§9" style="background:#55F; color:#fff">水色</button>r
      <button data-code="§a" style="background:#5F5; color:#000">明緑</button>r
      <button data-code="§b" style="background:#5FF; color:#000">明青</button>r
      <button data-code="§c" style="background:#F55; color:#000">明赤</button>r
      <button data-code="§d" style="background:#F5F; color:#000">ピンク</button>r
      <button data-code="§e" style="background:#FF5; color:#000">黄</button>r
      <button data-code="§f" style="background:#FFF; color:#000">白</button>r
      <button data-code="§l" style="background:#222; color:#fff">太字</button>r
      <button data-code="§o" style="background:#222; color:#fff">斜体</button>r
      <button data-code="§r" style="background:#444; color:#fff">リセット</button>r
    </div>r
    <div id="preview" class="preview"></div>r
  </div>r
r
  <div class="copy-area">r
    <button id="copy" class="copy-btn">コピー</button>r
  </div>r
r
  <div class="theme-switcher">r
    <button onclick="switchTheme("normal")">通常テーマ</button>r
    <button onclick="switchTheme("nether")">ネザーテーマ</button>r
  </div>r
r
  <script>r
    const input = document.getElementById("inputText");r
    const preview = document.getElementById("preview");r
r
    function applyCode(code) {r
      const start = input.selectionStart;r
      const end = input.selectionEnd;r
      const text = input.value;r
      const selected = text.slice(start, end);r
      const before = text.slice(0, start);r
      const after = text.slice(end);r
      input.value = before + code + selected + after;r
      updatePreview();r
    }r
r
    function updatePreview() {r
      const text = input.value;r
      let result = "";r
      let i = 0;r
      let styles = {r
        color: "#FFF",r
        fontWeight: "normal",r
        fontStyle: "normal"r
      };r
r
      const resetStyles = () => {r
        styles = {r
          color: "#FFF",r
          fontWeight: "normal",r
          fontStyle: "normal"r
        };r
      };r
r
      const applyStyles = () => {r
        return `color:${styles.color}; font-weight:${styles.fontWeight}; font-style:${styles.fontStyle}`;r
      };r
r
      while (i < text.length) {r
        if (text[i] === "§" && i + 1 < text.length) {r
          const code = text[i + 1];r
          switch (code) {r
            case "0": styles.color = "#000"; break;r
            case "1": styles.color = "#0000AA"; break;r
            case "2": styles.color = "#00AA00"; break;r
            case "3": styles.color = "#00AAAA"; break;r
            case "4": styles.color = "#AA0000"; break;r
            case "5": styles.color = "#AA00AA"; break;r
            case "6": styles.color = "#FFAA00"; break;r
            case "7": styles.color = "#AAAAAA"; break;r
            case "8": styles.color = "#555555"; break;r
            case "9": styles.color = "#5555FF"; break;r
            case "a": styles.color = "#55FF55"; break;r
            case "b": styles.color = "#55FFFF"; break;r
            case "c": styles.color = "#FF5555"; break;r
            case "d": styles.color = "#FF55FF"; break;r
            case "e": styles.color = "#FFFF55"; break;r
            case "f": styles.color = "#FFFFFF"; break;r
            case "l": styles.fontWeight = "bold"; break;r
            case "o": styles.fontStyle = "italic"; break;r
            case "r": resetStyles(); break;r
          }r
          i += 2;r
        } else {r
          result += `<span style="${applyStyles()}">${text[i]}</span>`;r
          i++;r
        }r
      }r
      preview.innerHTML = result;r
    }r
r
    document.querySelectorAll(".buttons button").forEach(btn => {r
      const code = btn.getAttribute("data-code");r
      if (code) {r
        btn.addEventListener("click", () => applyCode(code));r
      }r
    });r
r
    input.addEventListener("input", updatePreview);r
    window.addEventListener("load", updatePreview);r
r
    document.getElementById("copy").addEventListener("click", () => {r
      navigator.clipboard.writeText(input.value).then(() => alert("コピーしました！"));r
    });r
r
    function switchTheme(mode) {r
      document.body.classList.toggle("nether", mode === "nether");r
    }r
  </script>r
</body>r
</html>
※投稿記事に含まれるファイルやリンクにより発生した被害についてクラフターズコロニーは責任を取りません
投稿通報

コメント

コメント通報