No.5202
お手軽一言掲示板(この辺の文章は「管理画面」の「設定」内にある「フリースペース」タブから編集できます。)
動作サンプルです。 ご自由にお試し下さい。パスワードguest
で管理画面もお試し頂けます。
■いま見ているスキンは「シンプル日記スキン」です。他に、
標準スキン、
昔のツイッターっぽいスキン(ブルー)、
昔のツイッターっぽいスキン(ピンク)、
付箋型スキン、
ジャーナル(日誌)スキン、
ブログタイプスキン(タイトル付きブログっぽくできるスキン)、
黒板スキン、
チャットタイプスキンがあります。
《てがろぐCGIの配布・解説ページに戻る》
:シンプル日記スキン:
スキンは弄り放題なので、掲載したくない要素はたいてい省けます。このスキンでは投稿者名を一切表示しません。
No.5202
■フリースペース:
ここは、CGIの設定画面から自由に文章を入力して掲載できるスペースです。スキンを編集しなくてもCGI上から手軽に内容を変更できます(HTML使用可)。
私は折り畳み記法にjavascriptとcssで開閉状況に応じてラベルが変わるカスタマイズをしてます。
折り畳まれているボタンをクリックして展開するとボタンのラベルが「閉じる」に変化し、展開された領域を折り畳むとラベルが「続きを読む」などの展開前のものに戻ります。同じことをしたい人がいましたら参考までに。
外側スキンの遅延読み込みスクリプト群に追加
document.addEventListener("DOMContentLoaded", function() {
// decorationO クラスを持つ details 要素を取得
document.querySelectorAll("details.decorationO > summary").forEach(summary => {
// 既に foldlabelClose がない場合のみ追加
if (!summary.querySelector(".foldlabelClose")) {
let closeSpan = document.createElement("span");
closeSpan.className = "foldlabelClose";
closeSpan.textContent = "閉じる";
summary.appendChild(closeSpan);
}
});
});
スキン用cssに追加
details[open] .foldlabel {
display: none;
}
/* 閉じている状態の時に「閉じる」を消す */
details:not([open]) .foldlabelClose {
display: none;
}