本文中の一部の文章を、表示したり隠したりする方法

私のブログの目次は、ゆきひーさんの素晴らしい記事のおかげで隠すことができるようになっています。

本文中でも表示/隠すができるようにしたかったので、本日はその紹介です。

本文中で表示/隠すとは?

私のブログの中には、ブログのカストマイズ記事があります。この記事は、設定したコードをそのまま載せていますが、初めから全部のコードを表示しているためとても見づらいです。コードの中身を見たい方は、例えば[表示]という文字をクリックしたときにだけ見れる方が良いのではと思っていました。

例えば、下記のような感じです。

■そのまま載せたとき

コード

<script>
var a = 'あはは';
if (a == 'いひひ') {
alert 'えへへ';
}
</script>

■表示/隠すができるとき

コード

<script>
var a = 'あはは';
if (a == 'いひひ') {
alert 'えへへ';
}
</script>

やり方は

やり方はとっても簡単です。

初めに、はてなブログの”ダッシュボード → デザイン → カストマイズ → フッタ”の中に次のコードをコピペしてください。
※もし、すでに”<script src="..../jquery-...min.js"></script>”というコードが張り付けてある場合には、2行目以降だけでよいです。

<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script>
$(function(){
var strOpen = '[表示]';
var strClose = '[隠す]';
$('.otantoggleopn').append(' <span style="color: #00F; font-size: 80%">' + strClose + '</span>');
$('.otantogglecls').append(' <span style="color: #00F; font-size: 80%">' + strOpen + '</span>').next().css('display', 'none');
$('.otantoggleopn, .otantogglecls').click(function(){
var $this = $(this);
$this.next().slideToggle(400);
if($this.children('span').text() == strClose) {
$this.children('span').text(strOpen);
} else {
$this.children('span').text(strClose);
};
});
});
</script>

次に、記事本文の中で表示/非表示にする部分のタイトルにclass="otantoggleopn"というおまじないを入れます。

入れ方は、書いている記事をいったんHTML編集にします。

f:id:tk450:20160314230254p:plain

HTML編集にした直後
<p>コード</p>
<pre>
<script>
var a = 'あはは';
if (a == 'いひひ') {
alert 'えへへ';
}
</script>
</pre>
おまじないを入れた状態
<p class="otantogglecls">コード</p>
<pre>
<script>
var a = 'あはは';
if (a == 'いひひ') {
alert 'えへへ';
}
</script>
</pre>

これだけです。また、1つの記事で複数の場所に、おまじないを入れることができます。

応用編

はじめは表示しておいて、クリックしたときに隠す方がよい場合には、おまじないをclass="otantoggleopn"に変えるだけです。

コード

<script>
var a = 'あはは';
if (a == 'いひひ') {
alert 'えへへ';
}
</script>
おまじないを入れた状態
<p class="otantoggleopn">コード</p>
<pre>
<script>
var a = 'あはは';
if (a == 'いひひ') {
alert 'えへへ';
}
</script>
</pre>

また、このおまじないはコード以外にも使えます

例えば、こんな感じです。

(1)今日、妻とケンカしました。普段から強いことが言えない私は、次のように心の中でつぶやきました。つぶやいた内容は・・・

おまえのかーちゃん、でぇ~べそぉ!!

(2)我家の水槽の水質状況

【記録表】
日付NO3NO2GHKHpHCl2
16/03/12 10 1 8 3 6.4 0
(1)でおまじないを入れた状態
<p class="otantogglecls">(1)今日、妻とケンカしました。普段から強いことが言えない私は、次のように心の中でつぶやきました。つぶやいた内容は・・・</p>
<blockquote> <p>おまえのかーちゃん、でぇ~べそぉ!!</p> </blockquote>

まとめ

もともと熱帯魚飼育の記事を書く目的でブログをはじめましたが、この手のノウハウを読んでくださる方がいることが分かりました。少しでもお役に立てたらと想いつつ・・・です。

また、リクエストがあれば言って下さい。時間がかかるときもありますが、なんとか紹介して行きたいと思います。

 

目次のデザイン変更(表示/非表示つき)
www.yukihy.com