リンク付きの偽装タグ
概要
簡単な実験です。今までの偽装タグはリンクが付けていなくてすぐに分かってしまいますが、リンクを付けて完全に既存のタグの部分を代替するのはできないのかという疑問から始まりました。例えば、SCP-488-JPは偽造タグと既存のタグが両方で存在していますのでいます。それを偽装タグは見せることにして、実際のタグは見えないことにしましょう。
偽装タグのCSSコード
div.pseudo-tags ul { font-size: 85%; border-top: 1px solid #BBB; display: inline-block; margin: 10px 0 0; padding: 0 2px; list-style: none; } div.pseudo-tags li { color: #b01; text-decoration: none; display: inline-block; margin: 0 1px; cursor: pointer; } div.pseudo-tags li:hover { text-decoration: underline; }
コード適用の構文
[[div class="pseudo-tags"]]
* ##black|keter##
* scp-jp
* ##black|人間型##
* 狼
* ##black|現実改変##
* ##black|破壊命令##
* ##black|未収容##
* ##black|K-クラスシナリオ##
[[/div]]
分析
「pseudo-tags」というクラスをもっつブロックの中のリストのスタイルを定義しています。CSSだけで制御していますのでリストの中で他の構文を適用しても問題がないと。
一次実験
リンクを適用したコード
[[div class="pseudo-tags"]]
* ##black|[[[system:page-tags/tag/keter|keter]]]##
* [[[system:page-tags/tag/scp-jp|scp-jp]]]
* ##black|[[[system:page-tags/tag/人間型|人間型]]]##
* [[[system:page-tags/tag/狼|狼]]]
* ##black|[[[system:page-tags/tag/現実改変|現実改変]]]##
* ##black|[[[system:page-tags/tag/破壊命令|破壊命令]]]##
* ##black|[[[system:page-tags/tag/未収容|未収容]]]##
* ##black|[[[system:page-tags/tag/K-クラスシナリオ|K-クラスシナリオ]]]##
[[/div]]
結果
問題
- 内部リンクではWikidotエンジンがうまく適用しなくてタグページではなく「/」を「-」で置換してしまう
- リンクの色が色設定の構文を上書きしてしまって適用されないことを確認
解決方法
- 外部リンクへの適用
- まず1.の適用を確認して考える
二次実験
修正されたコード
[[div class="pseudo-tags"]]
* ##black|[/system:page-tags/tag/keter keter]##
* [/system:page-tags/tag/scp-jp scp-jp]
* ##black|[/system:page-tags/tag/人間型 人間型]##
* [/system:page-tags/tag/狼 狼]
* ##black|[/system:page-tags/tag/現実改変 現実改変]##
* ##black|[/system:page-tags/tag/破壊命令 破壊命令]##
* ##black|[/system:page-tags/tag/未収容 未収容]##
* ##black|[/system:page-tags/tag/K-クラスシナリオ K-クラスシナリオ]##
[[/div]]
結果
問題
- 一次実験の問題1.は解決されたが、2.の問題は相変わらず残っている
- spanタグよりaタグに適用されるcolorが優先されるのが原因
解決方法
- 他の構文を使う
三次実験
修正されたコード
[[div class="pseudo-tags"]]
* [[a href="/system:page-tags/tag/keter" style="color: black;"]]keter[[/a]]
* [[a href="/system:page-tags/tag/scp-jp"]] scp-jp[[/a]]
* [[a href="/system:page-tags/tag/人間型" style="color: black;"]]人間型[[/a]]
* [[a href="/system:page-tags/tag/狼"]] 狼[[/a]]
* [[a href="/system:page-tags/tag/現実改変" style="color: black;"]]現実改変[[/a]]
* [[a href="/system:page-tags/tag/破壊命令" style="color: black;"]]破壊命令[[/a]]
* [[a href="/system:page-tags/tag/未収容" style="color: black;"]]未収容[[/a]]
* [[a href="/system:page-tags/tag/K-クラスシナリオ" style="color: black;"]]K-クラスシナリオ[[/a]]
[[/div]]
結果
定理
- リンクを適用するのならば外部リンクの形で適用するのが良い
- 既存のタグはdiv.page-tags {display: none;}で十分だと思われる
page revision: 8, last edited: 22 Dec 2017 15:10