Wiki3 文字やテキストを隠す方法 （〇HTML）（×CSS）

•  Top
• 小技・テクニック集
• かんたん
• ▶ネタバレ隠し

---

実行例

ネタバレ（ここをクリック！）
 

ステージ2-5のゴール前の土管に入ることで、ステージ2-6を飛ばしてステージ3-1へショートカットできる。
 

　ネタバレをクリックした状態でもう一回クリックすると…？
 

ソース

<p data-uk-toggle="{target:'.netabare'}">ネタバレ（ここをクリック！）</p>

<p class="netabare uk-hidden">ステージ2-5のゴール前の...(省略)ショートカットできる。</p>

 

解説

　任意のタグ（<div>, <span>, <a>, <p>, <h1~3>, etc.）に

class="uk-hidden"

を与えることで、そのタグ内の要素を非表示にできます。
 

　また、上記のネタバレボタンのように

data-uk-toggle="{target:'.クラス名'}"

が与えられた要素をクリックすることで、指定したクラス名の uk-hidden を取り外したり、逆に付与したりすることができます。

 

注意

　これ単体ではWiki3に標準搭載されている開閉モードとやっていることはほとんど変わりません。
 

+ネタバレを開く

ステージ2-5のゴール前の土管に入ることで、ステージ2-6を飛ばしてステージ3-1へショートカットできる。

　uk-hiddenで隠された要素はソースコード上でしか確認できないので、編集難易度も上がります。本当に uk-hidden が必要かどうか、しかーり考えましょう。
 

　また、見た目上は非表示になっていたとしても uk-hidden で隠された要素はページを開いたとき問答無用で読み込まれるので容量の大きい画像を隠してもページは軽くなりません。

　明言はされていませんが、体感的に開閉エリア内の画像や文章はそれを開かない限り読み込まれない（要検証）のでうまく使い分けましょう。
 

 

　反面 uk-hidden を用いた開閉は自由度が高く、他のテクニックと併用することでメチャクチャ実用性がアップします。色々試してみてマスターしましょう。

 

応用例

　文章中に自然に紛れ込ませてみましょう。

 

　ネタバレ注意オワタキャピタルのビル二階にいる金髪の女性に話しかけることで隠し武器「白銀の槍」が入手できる。人狼特攻EX属性を持っているので、ボス戦を有利に進めることができるだろう。
 

<p>　<a data-uk-toggle="{target:'.netabare2'}"><span class="bc_yellow netabare2">ネタバレ注意</span></a><span class="netabare2 uk-hidden">オワタキャピタルのビル二階にいる金髪の女性</span>に話しかけることで隠し武器「白銀の槍」が入手できる。人狼特攻EX属性を持っているので、ボス戦を有利に進めることができるだろう。<br />
&nbsp;</p>

　ポイントはネタバレボタンを押したときボタンが隠れるように、自身も class="netabare2" を持っていること。

　class="netabare2" と class="netabare2 uk-hidden" が二つ同時に画面上に現れることはないのがミソです。
 

　また、アンカー要素 <a> にすることでリンクっぽく見せたり、

<span class="bc_yellow">

でハイライトしていかにもな雰囲気を出してクリックを誘導してやることも大事です。せっかく頑張って用意してもクリックされなければ意味がありませんからね。