pukiwiki1.5/spoiler.inc.php の履歴(No.2)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• pukiwiki1.5/spoiler.inc.php へ行く。
  • 1 (2025-04-28 (月) 13:35:27)
  • 2 (2025-04-28 (月) 13:38:03)

---

Discordにはspoilerというネタバレ防止用タグがあります が、それと同じことをブログなどでCSSで実現する方法が下記です。

デモ#

マウスホバーや、スマホのタップで塗りつぶしが解除されます。

ネタバレになることをここに書きます

HTML

<span class="spoiler" ontouchstart>ネタバレになることをここに書きます</span>

CSS

.spoiler { padding: 0 4px; color: #333; background: #333; border-radius: 4px; }
.spoiler:hover,
.spoiler:active { color: #d3ddde; background: #4a4d53; }

これをPukiwikiでも利用できるようにしました。

使い方#

&spoiler(ネタバレになることをここに書きます);

spoiler.inc.php#

<?php
/**
 * spoiler.inc.php - インラインでネタバレ表現するプラグイン
 * &spoiler(ここに内容);
 */

// PukiWiki定数がない場合は直接アクセスを拒否
if (!defined('PKWK_READONLY')) {
    die('このファイルには直接アクセスできません。');
}

// インラインプラグイン本体
function plugin_spoiler_inline()
{
    // 引数を取得
    $args = func_get_args();
    if (count($args) === 0) return '';

    // 第一引数をテキストとして使用
    $text = array_shift($args);

    // 出力
    return '<span class="spoiler" ontouchstart>' . htmlspecialchars($text) . '</span>';
}