トップ/pukiwiki1.5/spoiler.inc.php

pukiwiki1.5/spoiler.inc.php の変更点


#author("2025-04-28T13:38:03+09:00","default:nemusg.pad","nemusg.pad")
#author("2025-08-24T23:58:03+09:00;2025-04-28T13:38:03+09:00","default:nemusg.pad","nemusg.pad")
#title(spoiler(ネタバレ防止))

[[Discordにはspoilerというネタバレ防止用タグがあります:https://support.discord.com/hc/ja/articles/360022320632]] が、それと同じことをブログなどでCSSで実現する方法が下記です。

** デモ [#f3a4ac41]

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

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

HTML

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

CSS

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

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

** 使い方 [#xe2b4b92]

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

** spoiler.inc.php [#ve555b43]

#code_x{{
<?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>';
}
}}

#include(parts/feedback,notitle)