#author("2025-09-10T09:07:47+09:00","default:kanateko","kanateko")
#author("2025-09-10T09:07:56+09:00","default:kanateko","kanateko")
&tag(プラグイン,自作,追加);

#ref(spoiler.jpg,center,wrap,500x)

#contentsx

*ぼかしをかけてネタバレを防止するプラグイン [#summary]

#infobox(plugin){{
name = spoiler
ver = 1.1.1
pukiwiki = 1.5.4
update = 2025-09-10
}}

ネタバレに配慮してページを作成したいときに使うプラグイン。指定した部分にぼかしをかけ、コンテンツを隠すことができる。

#clear

*ダウンロード [#download]
最新: [[GitHub>https://github.com/kanateko/pukiwiki-plugin]]

|~日付|~バージョン|~備考|h
|CENTER:120|CENTER:60|590|c
|2025-09-10|1.1.1|#ul(ページで1回のみ呼び出した際に正常に動作しなかったb問題を修正)|
|2025-09-10|1.1.1|#ul(ページで1回のみ呼び出した際に正常に動作しなかった問題を修正)|
|~|1.1.0|#ul(JavaScriptで制御を行うよう変更,ぼかしの上に表示するテキストを変更する機能を追加,ぼかし強度を変更する機能を追加,ぼかす範囲のコントラストを変更する機能を追加,テキストの色とサイズを変更する機能を追加,任意のクラスを追加する機能を追加)|
|2024-02-14|1.0.1|#ul(hover指定時の構造を改善)|
|2024-02-07|1.0.0|#ul(初版作成)|

*セットアップ [#setup]
+GitHubからダウンロードした「plugin-spoiler」フォルダの中身 (plugin, skin) をPukiWikiのディレクトリに放り込む。

*プラグイン設定 [#setting]
#style(word-break:break-all;,class=table_compact){{{
#tableif(^(int|\d+)$=COLOR(#62bf4b),^string|'$|DIR \.=COLOR(#cb643d),^(bool|true|false)$=COLOR(#463dcb)){{
|~定数 (PLUGIN_SPOILER_～)|~型|~初期値|~説明|h
|BOLD:BGCOLOR(--table-header-td-color):180|CENTER:80|220||c
|CSS|string|SKIN_DIR . 'css/spoiler.css'|CSSのパス|
|DEFAULT_MODE|string|click|デフォルトのぼかし解除設定 (hover / click)|
|DEFAULT_TEXT|string|'ネタバレ'|デフォルトのメッセージ|
|DEFAULT_BLUR|string|'4px'|デフォルトのぼかし強度|
|DEFAULT_CONTRAST|string|'.8'|デフォルトの背景コントラスト|
}}
}}}

*使用方法 [#usage]
 &spoiler([オプション]){コンテンツ};
 
 #spoier([オプション]){{
 コンテンツ
 }}

**オプション [#option]
#box(solid){{
:hover|
マウスオーバー時のみぼかしを解除する。
:click|
クリックでぼかしを解除する。デフォルトの挙動。
:blur = <数値>|
ぼかし強度を変更する。デフォルトは4。
:contrast = <数値>|
背景のコントラストを変更する。デフォルトは0.9。
:text = <文字列>|
ぼかしの上に表示するテキストを変更する。`text = `は省略可。
:color = <色指定>|
ぼかしの上に表示するテキストの色を変更する。
:size = <数値>|
ぼかしの上に表示するテキストのサイズを変更する。
:class = <文字列>|
追加のクラスを指定する。複数指定する場合は半角スペースで区切る。
}}

*使用例 [#example]
#tab{{{
#:表示
↓ホバー
&spoiler(hover,color=tomato){カーソルを当てたときのみ、この文章が表示されます。};
↓クリック
#spoiler(blur=12,contrast=.2,size=24,クリックでネタバレ解除){{
&ref(../gallery/cat1.jpg,left,nowrap,300x);
クリックするとこの画像が表示されたままになります。
}}
#:ソース
 ↓ホバー
 &spoiler(hover,color=tomato){カーソルを当てたときのみ、この文章が表示されます。};
 ↓クリック
 #spoiler(blur=12,contrast=.2,size=24,クリックでネタバレ解除){{
 #ref(../gallery/cat1.jpg,left,nowrap,300x)
 クリックするとこの画像が表示されたままになります。
 }}
}}}

*備考 [#note]


*コメント [#comment]
#pcomment(reply)