はてなブログorダイアリーでスポイラーを利用できる記述を教えて下さい。

長文を格納したいので教えてほしいです。
はてな記法で無いということは直接HTMLで書けばいいんですか?

ログインして回答する

ベストアンサー

a-kuma32016/03/19 14:37:45

javascript を使います。
なので、はてなブログだけの対応になります。

「デザイン」→「カスタマイズ（スパナのマーク）」→「ヘッダ」で、「タイトル下」に以下のコードを貼り付けます。

<style>
.spoiler {
    visibility: hidden;
    height: 1em;
}
.spoiler_holder {
    border: 1px solid black;
    padding: 0.5ex;
}
.spoiler_button {
    display: block;
    width: 8em;
}
</style>
<script>
(function() {
    document.addEventListener("DOMContentLoaded", function(ev) {
        function toggleSpoiler() {
            var target = this.nextSibling.firstChild;
            if (target.style.visibility != "visible") {
                target.style.visibility = "visible";
                target.style.height = "auto";
                this.innerHTML = "隠す";
            } else {
                target.style.visibility = "hidden";
                target.style.height = "1em";
                this.innerHTML = "表示する";
            }
        }

        Array.from(document.querySelectorAll(".spoiler")).forEach(function(target) {
            var holder = document.createElement("div");
            holder.className = "spoiler_holder";

            var button = document.createElement("button");
            button.className = "spoiler_button";
            button.innerHTML = "表示する";
            button.addEventListener("click", toggleSpoiler, false);

            target.parentNode.insertBefore(holder, target);
            holder.appendChild(target);
            holder.parentNode.insertBefore(button, holder);

        });
    }, false);
})();
</script>

で、「変更を保存する」をクリック。

スポイラーを使いたいところは、class="spoiler" を指定した要素（タグは何でも良いです）で囲みます。

<!-- ここから下がスポイラーに隠される部分 -->
<div class="spoiler"> <!-- class="spoiler" を指定する -->
はてなブログorダイアリーでスポイラーを利用できる記述を教えて下さい。

長文を格納したいので教えてほしいです。
はてな記法で無いということは直接HTMLで書けばいいんですか?
</div>
<!-- ここまでが、スポイラーに隠される部分 -->

こんな見た目になります。
最初に表示したとき。

「表示する」ボタンを押したとき。

ひとつの記事に複数指定できますし、記事一覧で複数の記事が表示されても大丈夫です。
はてなブログで試してから、と思ったんですが、また投稿時のエラーが出てるようなので、手元で確認しただけですが、きっと動きます。

スター

1件のコメントを見る
a-kuma3 2016/03/19 23:56:09

どうやら、サブの方が調子悪いみたい　＞はてなブログ
メインの方で試してみました。
http://a-kuma3.hatenablog.com/entry/2016/03/19/235304

スター

その他の回答

meefla2016/03/19 13:22:23
小生のブログで恐縮ですが、ここはどこでしょう　Windows 10 バージョン（その2） - Instrumentality の「回答を見る」がスポイラー使ってます。
はてなブログの「はてな記法モード」で、HTML を直接書いています。

ソースを見ればおわかりかとは思いますが、一応設定方法を。

1. ボタンの設置
開閉ボタンを設置します。
onclick でテキストの表示・非表示を切り替えられます。
ボタンのテキスト・タイトルは用途に応じて変更してください。
```
<button title="回答を見るにはこのボタンをクリック" type="button" 
onclick="if(document.getElementById('spoiler').style.display=='none') 
{document.getElementById('spoiler').style.display=''} 
else{document.getElementById('spoiler').style.display='none'}" 
style="font-size: large;">回答を見る</button>
```
2. 隠したいテキストを div 要素で囲む
```
<div id="spoiler" style="display:none">hidden text</div>
```
複数のスポイラーを設置する場合は、id="spoiler2" とかにしてボタンのスクリプトもそれに合わせればなんとかなるはずですが、エレガントではないので、他の方法の方が良いでしょう。
スター

はてなブログorダイアリーでスポイラーを利用できる記述を教えて下さい。

ベストアンサー

a-kuma32016/03/19 14:37:45

a-kuma3 2016/03/19 23:56:09

その他の回答

meefla2016/03/19 13:22:23

この質問へのコメント

この質問への反応（ブックマークコメント）

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版