留言內容主體調整與美化

⚠️提醒:CSS請按照以下編排順序列入編輯，以免出現語法讀取錯誤.ᐟ

留言外框圓角加陰影　 數字填入width""

/* 留言外框 */
table[width="你的樣式表格寬度"][cellspacing="1"] {
  border-collapse: separate;
  border-radius: 15px;  /* 圓角度 */
  overflow: hidden;
  background: #f4f4f4;  /* 邊框色 */
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);  /* 陰影 */
  margin-bottom: 35px;  /* 留言框外間距 */
}

底部頁數顯示樣　　

/* 頁數邊框色 */
table[bgcolor="000000"] {
  background-color: #fff !important;
  border-radius: 25px;    /* 圓角度 */
}

/* 頁數字型大小 */
table[bgcolor="000000"] th {
  background-color: #fff;  /* 頁數背景色 */
  border-radius: 25px;
  font-size: 7pt;
  font-family: Calibri;
}

/* 游標移入頁數背景色 */
table[bgcolor="000000"] th[bgcolor="e2e8f3"]:hover {
  background-color: #fff !important;
}

首篇留言區塊內距 範例

/* 首篇留言 */
td[height="50"][valign="top"] {
  padding-top:15px;     /* 與上方暱稱距離 */
  padding-right: 30px; /* 與右邊框間距 */
}

回應留言區塊邊距 (防文字貼邊) 範例

/* 回應留言區塊 */
td[colspan="3"][height="20"] {
  padding-top:10px;      /* 與上方暱稱距離 */
  padding-right: 30px;   /* 與右邊框間距 */
}

留言區塊左側空間縮減 範例

/* 縮減左側寬度  */
td[rowspan="2"][width="80"][height="80"][align="center"][valign="bottom"] {
  width: 50px !important;  /* 改成你要的寬度 */
}

留言時間顯示樣+游標靠近轉變深色 範例

/* 日期時間  */
td[colspan="3"][align="right"],
div[align="right"] {
  padding-top:15px;       /* 與上方留言距離 */
  padding-right: 15px;    /* 與右邊框距 */
  padding-bottom:10px;    /* 與下方距離 */
  font-family: Calibri;   /* 字型 */
  font-size: 7.6pt;       /* 數字大小 */
  color: #e5e5e5;         /* 淺色字 */
  transition: color 0.5s ease; /* 過渡延遲效果 */
}

/* 游標移入換色 */
td[colspan="3"][align="right"]:hover,
div[align="right"]:hover {
  color: #999999;
}

留言區塊文字行距 範例

/* 留言行距 */
font {
  line-height: 25px;
}

文字網址轉換超連結

<!-- 文字網址轉換連結 -->
<script>      
(function () {
  function linkifyText(text) {
    const frag = document.createDocumentFragment();
    const parts = text.split(/(https?:\/\/[a-zA-Z0-9./?=&_%#-]+)/);
    parts.forEach(part => {
      if (!part) return;
      if (/^https?:\/\//.test(part)) {
        const a = document.createElement("a");
        a.href = part;
        a.target = "_blank";
        a.style.color = "#FA9AB2";
        a.style.textDecoration = "none";
        a.innerHTML =
          "連結文字<img style=\"vertical-align: middle\" src=\"圖檔\">";
        frag.appendChild(a);
      } else {
        frag.appendChild(document.createTextNode(part));
      }
    });
    return frag;
  }

  // 對一個元素處理所有文字節點
  function linkifyContent(el) {
    const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null);
    const textNodes = [];
    let node;
    while ((node = walker.nextNode())) {
      textNodes.push(node);
    }
    textNodes.forEach(node => {
      if (/https?:\/\//.test(node.nodeValue)) {
        const frag = linkifyText(node.nodeValue);
        node.replaceWith(frag);
      }
    });
  }

  document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll("font").forEach(el => linkifyContent(el));
  });
})();
</script>

✏️保留原網址

♂♀轉換留言專屬圖

<!-- 轉換專屬圖 -->
<script>
function processNameNode(node) {
  const text = node.nodeValue;
  if (!text || !text.trim()) return;

  let span = document.createElement("span");

  if (/^[♂♀]名稱A/.test(text)) {
    span.innerHTML =
      '<img src="圖示1" style="width:20px;vertical-align:middle;"> 名稱A';
  } else if (/^[♂♀]名稱B/.test(text)) {
    span.innerHTML =
      '<img src="圖示2" style="width:20px;vertical-align:middle;"> 名稱B';
  } else if (/^[♂♀]名稱C/.test(text)) {
    span.innerHTML =
      '<img src="圖示3" style="width:20px;vertical-align:middle;"> 名稱C';
  } else if (/^[♂♀]/.test(text)) {
    const rest = text.replace(/^[♂♀]/, "").trim();
    span.innerHTML =
      '<img src="其餘訪客圖示" style="width:20px;vertical-align:middle;"> ' + rest;
  } else {
    return; // 不是以♂♀開頭就不處理
  }

  node.replaceWith(span);
}

function processNames(el) {
  const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null);
  const textNodes = [];
  let node;
  while ((node = walker.nextNode())) {
    textNodes.push(node);
  }
  textNodes.forEach(processNameNode);
}

document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll("font").forEach(el => processNames(el));
});
</script>

✏️使用方法

替換下課時間留言按鈕圖示

⭐文字按鈕版

/* 1. 替換訪客回應按鈕 */
a[href*="aft=re"] img[src*="re.gif"] {
  display: none;              /* 隱藏原本圖片 */
}
a[href*="aft=re"]::after {
  content: "訪客回應";
  display: inline-block;
  color: #999;                /* 字色 */
  background-color: #f4f4f4;  /* 背景色 */
  padding: 5px 5px;           /* 上下+左右內距 */
  border-radius: 5px;         /* 圓角度 */
  font-family: Verdana;       /* 字型 */
  margin:0px 6px;             /* 上下+左右外距 */
  margin-bottom:15px;         /* 加強下方間距 */
}

/* 2. 替換觀看密語按鈕 */
a[href^="javascript:look"] img[src*="look.gif"] {
  display: none;
}
a[href^="javascript:look"]::after {
  content: "觀看密語";
  display: inline-block;
  color: #999;
  background-color: #f4f4f4;
  padding: 5px;
  border-radius: 5px;
  text-decoration: none;      /* 取消連結下劃線 */
  font-family: Verdana;
  margin:0px 6px;
  margin-bottom:15px;
}

/* 3. 替換回留言板按鈕 */
a[href="/book.php?A=留言板帳號"] img[src*="back.gif"] {
  display: none;
}
a[href="/book.php?A=留言板帳號"]::after {
  content: "回留言板";
  display: inline-block;
  color: #999;
  background-color: #f4f4f4;
  padding: 5px;
  border-radius: 5px;
  font-family: Verdana;
  margin:0px 6px;
  margin-bottom:15px;
}

<!-- 4.替換等待&回應滿按鈕 -->
<script>
const replacements = {
  "wait.gif": "等待回覆",
  "over.gif": "回應滿囉"
};

Object.entries(replacements).forEach(([filename, text]) => {
  document.querySelectorAll(`img[src*='${filename}']`).forEach(img => {
    const span = document.createElement("span");
    span.textContent = text;
    span.style.color = "#999";
    span.style.fontStyle = "Verdana";
    span.style.padding = "6px";
    span.style.backgroundColor = "#f4f4f4";
    span.style.borderRadius = "5px";
    span.style.margin = "5px";
    span.style.marginBottom = "15px";
    span.style.marginRight  = "10px";
    span.style.display = "inline-block";
    img.replaceWith(span);
  });
});
</script>

⭐更換圖示版

/* 1. 替換訪客回應圖示 */
a[href*="aft=re"] img[src*="re.gif"] {
  display: none;
}
a[href*="aft=re"]::after {
  content: url("新圖路徑");
  display: inline-block;
  margin: 6px 10px;
}

/* 2. 替換觀看密語圖示 */
a[href^="javascript:look"] img[src*="look.gif"] {
  display: none;
}
a[href^="javascript:look"]::after {
  content: url("新圖路徑");
  display: inline-block;
  margin:  6px 10px;
}

/* 3. 替換回留言板圖示 */
a[href="/book.php?A=留言板帳號"] img[src*="back.gif"] {
  display: none;
}
a[href="/book.php?A=留言板帳號"]::after {
  content: url("新圖路徑");
  display: inline-block;
  margin: 6px 10px;
}

/* 以下語法除Firefox瀏覽器不支援,亦可選用js換圖法 */
/* 4. 替換等待回覆&留言已滿圖示 */
img[src*="wait.gif"],
img[src*="over.gif"] {
  display: none;
}

/* 替換等待回應圖示  */
td:has(> img[src*="wait.gif"])::after {
  content: url("新圖路徑");
  display: inline-block;
  margin: 6px 10px;
}

/* 替換留言已滿圖示 */
td:has(> img[src*="over.gif"])::after {
  content: url("新圖路徑");
  display: inline-block;
  margin: 6px 10px;
}

<!-- 4.替換等待&回應滿圖檔 -->
<script>
const replacements = {
  "wait.gif": "新等待回覆圖徑",
  "over.gif": "新回應已滿圖徑"
};

// 遍歷對照表
Object.entries(replacements).forEach(([filename, newSrc]) => {
  document.querySelectorAll(`img[src*='${filename}']`).forEach(img => {
    const newImg = document.createElement("img");
    newImg.src = newSrc;
    newImg.style.margin = "6px 10px";   /* 上下+左右外距  */
    img.parentNode.replaceChild(newImg, img);
  });
});
</script>

隱藏與美化回應留言輸入欄

/* 簽寫區其他輸入欄 */
input,
select {
  background-color: #fff;       /* 背景顏色 */
  border: 1px solid #fff;       /* 邊框樣式 */
  border-radius: 3px;           /* 圓角度 */
  outline: none;
}

/* 留言輸入欄 */
textarea[name="mess"] {
  color: #898989 !important;              /* 文字固定字色 */
  letter-spacing: 1.3pt;                  /* 文字間距 */
  margin: 5px 0px;                        /* 輸入欄外距 */
  background-color: #fff;                 /* 輸入欄背景色 */
  background: 
    url("背景圖") no-repeat right bottom,  /* 背景圖置右下 */
    rgba(255, 255, 255, 0.75);            /* 0.75透明度0~9 */
  background-blend-mode: overlay;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 153px auto;            /* 調整背景圖大小 */
  border: 1px solid #fff;                 /* 邊框樣式 */
  border-radius: 8px;                     /* 圓角度 */
  width: 340px;                           /* 輸入欄寬 */
  height: 160px;                          /* 輸入欄高 */
  padding: 6px 10px;                      /* 上下+左右內距 */
  outline: none;                          
  box-sizing: border-box;  
}

/* 回應區暱稱站名網址欄 */
input[name="name"],
input[name="urlname"],
input[name="url"] {
  background-color: #ffffff;
  border: 1px solid #fff;
  border-radius: 3px;
  outline: none;
  box-sizing: border-box;
  padding: 6px 10px;
  margin-top: 3px;
  width: 130px;
  height: 25px;
}

/* 驗證碼輸入欄獨立寬度 */
input[name="authinput"],
input[name="password"] {
  width: 60px;
}

/* 美化送出 重寫 回上頁按鈕樣式 */
input[type="submit"],
input[type="reset"],
input[type="button"] {
  background-color: #f9f9f9; /* 按鈕背景色 */
  color: #888; /* 文字顏色 */
  border: none; /* 去除框線 */
  border-radius: 8px; /* 圓角度 */
  padding: 4px 12px; /* 上下+左右內距 */
  font-size: 12px; /* 文字大小 */
  cursor: pointer; /* 手指型游標 */
  transition: background 0.3s, transform 0.2s; /* 動畫平滑效果 */
  margin: 5px 10px; /* 外間距 */
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
  background-color: #f1f1f1;
  transform: translateY(-1px);
}

input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active {
  transform: translateY(1px);
  box-shadow: inset 0 0 3px rgba(0,0,0,0.2);
}

將下方Script貼於：版面配置 > 留言板下方

<!-- 隱藏不要的欄位 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  // 隱藏欄位
  const hideSelectors = [
    'select[name="sex"]',       // 性別
    'input[name="user"]',       // 好友密碼
    'select[name="color"]',     // 回應字色
    'input[name="email"]',      // 電子郵件
    'input[name="icq"]',        // ICQ
    'input[name="msn"]',        // MSN
    'input[name="yahoo"]'       // 即時通
  ];

  document.querySelectorAll(hideSelectors.join(',')).forEach(el => {
    const td = el.closest('td');
    if (!td) return;

    td.style.display = 'none';
    const prev = td.previousElementSibling;
    if (prev && prev.tagName.toLowerCase() === 'td') {
      prev.style.display = 'none';
    }
  });
});
</script>

✏️線條樣式

去除留言IP隱藏符號

<!-- 去除IP符號 -->
<script>
function hideAllIPPatterns() {
  const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);

  while (walker.nextNode()) {
    const node = walker.currentNode;
    const text = node.nodeValue;

    // 檢查是否含有 IP 樣式
    if (text.includes('---') && /\*.*\*/.test(text)) {
      // 僅保留日期之前的文字
      const cleaned = text.split('---')[0].trim();
      node.nodeValue = cleaned;
    }
  }
}

// 初次執行
hideAllIPPatterns();

// 防止留言載入延遲
let counter = 0;
const checkTimer = setInterval(() => {
  hideAllIPPatterns();
  counter++;
  if (counter > 20) clearInterval(checkTimer);
}, 500);
</script>

留言表格兩側蕾絲背景裝飾

/* 蕾絲背景裝飾 */
.lace-wrapper {
  background: 
    url("左側圖") repeat-y left top,
    url("右側圖") repeat-y right top;
  background-size: 120px auto;  /* 自訂圖縮放大小 */
  max-width: 600px;   
  margin: 0 auto;
  padding: 0 87.5px;           /* 依照板寬度調整左右間距 */
  box-sizing: border-box;
}

/* 中心內容 */
.content {
  background: white;    /* 中心底色 */
  margin: 0px auto;     /* 置中 */
  border-radius: 12px;  /* 圓角度 */
}

<div class="lace-wrapper">
<div class="content">

標記文字畫線效果

css

/* 標記漸層黃線 */
.mark.yellow {
   background: linear-gradient(
   transparent 40%,
   rgba(255,255,255,0) 40%, 
   #FFE174 90%, /* 黃色色碼 */
   transparent 95%
   padding: 2px 1px;
   color: #999999; /* 文字顏色 */
}
/* 標記綠中線 */
.mark.green {
	 background:linear-gradient(transparent 40%,rgba(255,255,255,0) 40%, #CCFF90 50%,transparent 70%);	
   padding: 2px 1px;
   color: #999999;
}
/* 標記紅底線 */  
.mark.red {
	 border-bottom: 3px solid #EC7A8E;
	 background: none;
	 margin: 0 -2px;
	 padding: 0 2px;
	 color: #999999;
  }
      

<span class="mark yellow">黃色漸層畫線效果</span>
<span class="mark green">綠色畫中線效果</span>
<span class="mark red">紅色畫底線效果</span>

YOUTUBE播放音樂按鈕

html

<!-- 播放音樂按鈕 -->
<div class="music-button" onclick="toggleMusic()" style="width:100px;height:66px;background-image:url('圖檔網址');background-size:cover;cursor:pointer;"></div> 
<!-- 隱藏的音樂播放器 -->
<iframe id="ytplayer" type="text/html" width="0" height="0" src="" frameborder="0" allow="autoplay" allowfullscreen></iframe>

JavaScript

<!-- 播放Youtube音樂JS -->
<script>
let isPlaying = false;
let videoURL = "YouTube網址";
function getYouTubeID(url) {
  const regExp = /^.*(youtu\.be\/|v=|\/embed\/|\/v\/)([^#&?]*).*/;
  const match = url.match(regExp);
  return (match && match[2].length === 11) ? match[2] : null;
}

function toggleMusic() {
  const player = document.getElementById("ytplayer");
  const videoID = getYouTubeID(videoURL);

  if (!videoID) {
    console.error("❌ 無效的 YouTube 網址");
    return;
  }

  if (!isPlaying) {
    player.src = `https://www.youtube.com/embed/${videoID}?autoplay=1&mute=0&loop=1&playlist=${videoID}&controls=0&modestbranding=1`;
    isPlaying = true;
  } else {
    player.src = "";
    isPlaying = false;
  }
}
 </script>

圖檔按鈕+可移動小彈窗

小彈窗可作為公告、收納小物件用。範例見留言板下方的 表情包按鈕

/* 按鈕圖效果 */
.popup-trigger {
  transition: transform 0.3s ease;
  cursor: pointer;
}

.popup-trigger:hover {
  animation: cute-bounce 0.6s ease;
  transform: scale(1.2) rotate(10deg);
}

 /* 彈窗外框 */
.popup {
  position: fixed;
  top: 200px;
  left: 200px;
  width: 280px;
  display: none;
  border: 3px solid #FFCAD3;
  border-radius: 20px;
  overflow: hidden;
  z-index: 9999;
  font-family: "Microsoft JhengHei", "Arial Rounded MT Bold", sans-serif;
  animation: popupBounce 0.4s ease;
}

/* 彈出動畫 */
@keyframes popupBounce {
  0% { transform: scale(0.7); opacity: 0; }
  60% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); }
}

/* 標題列 */
.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #ffe4e9;
  border-radius: 17px 17px 0 0;
  cursor: move;
}

/* 標題文字 */
.popup-title {
  letter-spacing: 3px;
  font-size: 13px;
  color: #999;
  font-weight: bold;
}

/* 關閉按鈕 */
.popup-close {
  background: #ffb6c1;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 14px;
  line-height: 22px;
  color: white;
  transition: background 0.2s;
}

.popup-close:hover {
  background: #FFCCD3;
  transform: scale(1.2) rotate(10deg);
}

/* 內容 */
.popup-inner {
  padding: 15px;
  text-align: center;
  font-size: 13px;
}
      

<img src="按鈕圖檔" class="popup-trigger" onclick="showPopup()" alt="文字說明" style="width: 圖大小px;">

<div class="popup" id="popupBox">
 <div class="popup-header" id="dragHandle">
  <span class="popup-title">標題</span>
   <button class="popup-close" onclick="hidePopup()">×</button>
  </div>
 <div class="popup-inner">內容</div>
</div>

<script>
const popup = document.getElementById("popupBox");
const dragHandle = document.getElementById("dragHandle");

let isDragging = false;
let offsetX = 0;
let offsetY = 0;

// 開啟/關閉函式 
function showPopup() { 
  popup.style.display = "block"; 
} 
function hidePopup() {
  popup.style.display = "none"; 
}

// 拖曳功能
dragHandle.addEventListener("mousedown", (e) => {
  isDragging = true;
  const rect = popup.getBoundingClientRect();
  offsetX = e.clientX - rect.left;
  offsetY = e.clientY - rect.top;
  document.body.style.userSelect = "none"; // 防止選文字
});

document.addEventListener("mousemove", (e) => {
  if (isDragging) {
    popup.style.left = `${e.clientX - offsetX}px`;
    popup.style.top = `${e.clientY - offsetY}px`;
  }
});

document.addEventListener("mouseup", () => {
  isDragging = false;
  document.body.style.userSelect = ""; // 還原選取
});
</script>