ボタンごとに異なった文章を追加する方法

概要:

解決しました。

構文についての質問

chuukunn 28 Jun 2018 10:54

http://scp-jp-sandbox3.wikidot.com/draft:chuukunn-2-182e
こちらの記事で
Safeを押すとSafeになったという文章が、
Thaumielを押すとThaumielになったという文章が追加され、
それ以上スイッチを押せなくする仕組みにしたいのですが、
2つのボタンごとにそれぞれ異なった文章を追加する方法が分かりません。
どなたかご存知でしたら教えていただけると幸いです。

追記:無事導入できました！
7happy7様、ご教授感謝いたします。

最後の編集 28 Jun 2018 13:44 by chuukunn さらに表示

Re: 構文についての質問

7happy7 28 Jun 2018 11:59

http://ja.scp-wiki.net/forum/t-6094837#post-3830244
こちらのC-takeさんの構文を参考に、以下の構文を作成しました。

+ コード展開

以下のコードを、ページの好きな位置にいれてください。

[[module CSS]]
.likebutton a{
padding: 0.1em 0.5em;
text-decoration: none;
background-color: #F4F4F4;
border: 1px solid #AAA;
color: #000;
}
.likebutton a:hover{
background-color: #DDD;
color: #000;
border: 1px solid #0098b3;
}

#u-safe{
display:none;
}
#u-safe ~ .changearea .a,
#u-safe:target ~ .changearea .safe{
display:inline;
}
#u-safe:target ~ .changearea .a,
#u-safe ~  .changearea .safe{
display:none;
}

#u-thaumiel{
display:none;
}
#u-thaumiel ~ .changearea .a,
#u-thaumiel:target ~ .changearea .thaumiel{
display:inline;
}
#u-thaumiel:target ~ .changearea .a,
#u-thaumiel ~  .changearea .thaumiel{
display:none;
}
[[/module]]

次に、以下のコードを文章を追加したい部位に挿入してください。

必要に応じて、折りたたみ構文([[collapsible show=~)を取り除くなどしてください。

[[div id="u-safe"]]
[[/div]]
[[div id="u-thaumiel"]]
[[/div]]
[[div class="changearea"]]

[[collapsible show="+ open" hide="- close"]]
**オブジェクトクラスおよび特別収容プロトコル:** [[span class="a"]][現在協議中][[/span]][[span class="safe"]]Safe[[/span]][[span class="thaumiel"]]Thaumiel[[/span]]
[[/collapsible]]

[[div class="likebutton a"]]
[[a href="#u-safe"]]Safe[[/a]] [[a href="#u-thaumiel"]]Thaumiel[[/a]]
[[/div]]

[[/div]]

導入例(外部サイト)

Re: 解決しました

Yamatt 28 Jun 2018 14:33

導入例見ました。
目がとてもくらくらと目眩がしそうでとても面白いです！こちらのコードを使わせてもいます。

Re: 解決しました

7happy7 28 Jun 2018 16:02

質問スレッドは将来同様の疑問を抱いた方が再利用できるよう、解決した旨の告知はサマリーに留め、スレッドタイトルを参照性の高いものにしていただく必要があります。
http://ja.scp-wiki.net/forum/t-1017518/
今回の場合は

「ボタンごとにそれぞれ異なった文章を追加する方法」

等に変えると良いかもしれません。

ご協力、よろしくお願いします。

最後の編集 30 Jun 2018 22:33 by 7happy7 さらに表示

Re: ボタンごとに異なった文章を追加する方法

chuukunn 01 Jul 2018 06:46

対応が遅れましたが変更しました。