Peek-a-boo comments

まずここをクリックしてみてください。

2 Comments:

表示が変わりましたでしょうか？
もう一度同じリンクを押すと、非表示になります。

以前の記事コンディショナルタグとスタイルシートでは、メイン・アーカイブページとアイテムページとで投稿本文の表示される内容を切り替える方法を紹介しました。
今回もスタイルシートを使いますが、今回は同一ページ内でユーザーの操作によって、投稿内容の表示を切り替える方法を紹介します。

Blogger Help ＞ Peek-a-boo comments

仕組みだけ、説明しますと…。

テンプレート側に２つ準備をしておきます。
１．スタイルシートを追加します。
　<head> 内の <style> 中に次のコードを挿入します。

.commenthidden {display:none}
.commentshown {display:inline}

２．JavaScript の関数を定義しておきます。
　<head> 内に次のコードを入力します。

各投稿の方にも２つ、仕掛けが必要です。
１．表示・非表示と切り替える内容を記述します。
　class="commenthidden" とした、好きな ID をつけたインライン要素の中に、内容を記述します。

<span class="commenthidden" id="post050806">見えますでしょうか？</span>

２．切替をするためのリンクやボタンを記述します。
　この部品がさっき定義した JavaScript の関数を呼び出します。
　togglecomments() の引数には１で設定した ID を指定します。

この例の場合、リンクがクリックされると、<span> のクラスが JavaScript によって書き換えられます。適用されるスタイルが変わることで、内容物が非表示・表示と切り替わるんですね。

この方法は結構色々なところで使えそうな気がします。ちなみに今回紹介した Blogger Help ではこれを投稿につくコメントを表示するのに利用しています。興味があればどうぞ。

スポンサードリンク：

お願い：

「この記事役に立った！」と思ったら、ぜひフィード登録をお願いします。　