2 Comments:
- 表示が変わりましたでしょうか？
- もう一度同じリンクを押すと、非表示になります。
以前の記事コンディショナルタグとスタイルシートでは、メイン・アーカイブページとアイテムページとで投稿本文の表示される内容を切り替える方法を紹介しました。
今回もスタイルシートを使いますが、今回は同一ページ内でユーザーの操作によって、投稿内容の表示を切り替える方法を紹介します。
仕組みだけ、説明しますと…。
テンプレート側に２つ準備をしておきます。
１．スタイルシートを追加します。
<head> 内の <style> 中に次のコードを挿入します。
.commenthidden {display:none}
.commentshown {display:inline}
.commentshown {display:inline}
２．JavaScript の関数を定義しておきます。
<head> 内に次のコードを入力します。<script type="text/javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") {
whichpost.className="commenthidden";
} else {
whichpost.className="commentshown";
}
}
</script>
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") {
whichpost.className="commenthidden";
} else {
whichpost.className="commentshown";
}
}
</script>
各投稿の方にも２つ、仕掛けが必要です。
１．表示・非表示と切り替える内容を記述します。
class="commenthidden" とした、好きな ID をつけたインライン要素の中に、内容を記述します。<span class="commenthidden" id="post050806">見えますでしょうか？</span>
２．切替をするためのリンクやボタンを記述します。
この部品がさっき定義した JavaScript の関数を呼び出します。
togglecomments() の引数には１で設定した ID を指定します。
<a href="javascript:togglecomments('post050806');">切替</a>
この例の場合、リンクがクリックされると、<span> のクラスが JavaScript によって書き換えられます。適用されるスタイルが変わることで、内容物が非表示・表示と切り替わるんですね。
この方法は結構色々なところで使えそうな気がします。ちなみに今回紹介した Blogger Help ではこれを投稿につくコメントを表示するのに利用しています。興味があればどうぞ。
2 comments:
はじめまして。ゆうと申します。
いつもこのブログを参考にしながらbloggerを楽しんでいます。
以前この記事を参考にbloggerのコメント表示方法をカスタマイズしていました。
が、先日新しいbloggerにアップデートしたところ新しいテンプレートではこの方法は使えなくなっていました。
新しいbloggerで"Peek-a-boo comments" を実現する良い方法ってないのでしょうか。もし良いアイデアがあったら紹介して頂けるとすごく嬉しいです。
いろいろと探していたらこんな記事を発見しました。
http://singpolyma-tech.blogspot.com/2007/01/asynchronous-peek-boo-comments.html
ここを見ながら作業したところ新bloggerでもpeek-a-booコメントを実現することが出来ました～。
Post a Comment