人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

はてなブログorダイアリーでスポイラーを利用できる記述を教えて下さい。
長文を格納したいので教えてほしいです。
はてな記法で無いということは直接HTMLで書けばいいんですか?

●質問者: /
●カテゴリ:はてなの使い方
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● meefla

小生のブログで恐縮ですが、ここはどこでしょう 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" とかにしてボタンのスクリプトもそれに合わせればなんとかなるはずですが、エレガントではないので、他の方法の方が良いでしょう。


2 ● a-kuma3
ベストアンサー

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>
<!-- ここまでが、スポイラーに隠される部分 -->

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

f:id:a-kuma3:20160319143137p:image

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

f:id:a-kuma3:20160319143201p:image


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


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

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ