まずここをクリックしてみてください。
以前の記事コンディショナルタグとスタイルシートでは、メイン・アーカイブページとアイテムページとで投稿本文の表示される内容を切り替える方法を紹介しました。
今回もスタイルシートを使いますが、今回は同一ページ内でユーザーの操作によって、投稿内容の表示を切り替える方法を紹介します。
仕組みだけ、説明しますと…。
テンプレート側に2つ準備をしておきます。
1.スタイルシートを追加します。
<head>
内の
<style>
中に次のコードを挿入します。
.commenthidden {display:none}
.commentshown {display:inline}
2.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>
各投稿の方にも2つ、仕掛けが必要です。
1.表示・非表示と切り替える内容を記述します。
class="commenthidden"
とした、好きな ID をつけたインライン要素の中に、内容を記述します。
<span class="commenthidden" id="post050806">見えますでしょうか?</span>
2.切替をするためのリンクやボタンを記述します。
この部品がさっき定義した JavaScript の関数を呼び出します。
togglecomments() の引数には1で設定した ID を指定します。
<a href="javascript:togglecomments('post050806');">切替</a>
この例の場合、リンクがクリックされると、<span> のクラスが JavaScript によって書き換えられます。適用されるスタイルが変わることで、内容物が非表示・表示と切り替わるんですね。
この方法は結構色々なところで使えそうな気がします。ちなみに今回紹介した Blogger Help ではこれを投稿につくコメントを表示するのに利用しています。興味があればどうぞ。
スポンサードリンク:
お願い:
「この記事役に立った!」と思ったら、ぜひ
フィード登録をお願いします。

はじめまして。ゆうと申します。
ReplyDeleteいつもこのブログを参考にしながらbloggerを楽しんでいます。
以前この記事を参考にbloggerのコメント表示方法をカスタマイズしていました。
が、先日新しいbloggerにアップデートしたところ新しいテンプレートではこの方法は使えなくなっていました。
新しいbloggerで"Peek-a-boo comments" を実現する良い方法ってないのでしょうか。もし良いアイデアがあったら紹介して頂けるとすごく嬉しいです。
いろいろと探していたらこんな記事を発見しました。
ReplyDeletehttp://singpolyma-tech.blogspot.com/2007/01/asynchronous-peek-boo-comments.html
ここを見ながら作業したところ新bloggerでもpeek-a-booコメントを実現することが出来ました~。
شركة تنظيف مسابح بجدة
ReplyDeleteشركة صيانة مسابح بجدة
شركة عزل خزانات بجدة
شركة تسليك مجارى بجدة
شركة تنظيف موكيت بجدة
شركة تنظيف سجاد بجدة
شركة تنظيف واجهات زجاج بجدة
شركة تنظيف مجالس بجدة
شركة شفط بيارات بجدة
شركة تنظيف بيارات بجدة
شركة عزل اسطح بجدة
شركة تنظيف قصور بجدة
شركة مكافحة النمل الابيض بجدة
شركة مكافحة حشرات بجدة
شركة مكافحة حشرات بجدة
1guoguo1019
ReplyDeleteburberry outlet
ralph lauren outlet
celine handbags
Hollister uk
coach outlet
michale kors outlet online
louis vuitton handbags
ralph lauren
coach outlet
louis vuitton
kobe shoes
michael kors handbags
Mont Blanc
michael kors outlet online
Canada Goose Outlet Online
coach factory outlet
jordan 13
hollister clothing
ugg boots
hermes birkin
oakley sunglasses wholesale
michael kors handbags
jordan shoes
louis vuitton handbags
ugg boots wholesale
michael kors outlet
ugg boots
canada goose jackets
michael kors outlet online
nike trainers
canada goose jackets
michael kors
ugg boots
nike air max
nike outlet,nike shoes,nike store,nike air max,nike free run,air max,nike free,nike blazers
jianbin0409
ReplyDeletemichael kors wallet sale
longchamp outlet
mulberry uk
rolex watches
michael kors online outlet
true religion canada
nba jerseys
marc jacobs
air jordan 13
camisetas futbol baratas
beats by dr dre
christian louboutin shoes
cheap jordans
mlb jerseys
cheap nfl jerseys
air jordan shoes for sale
michael kors outlet
louis vuitton outlet store
michael kors outlet
cheap jordans
mulberry outlet
thomas sabo outlet
beats headphones
louis vuitton outlet online
louis vuitton outlet
mbt shoes outlet
louis vuitton handbags
mizuno running shoes
michael kors outlet store
swarovski crystal
air max 90
juicy couture outlet
lacoste pas cher
michael kors outlet online
louis vuitton outlet
cheap jordan shoes
michael kors outlet
As we get closer to the holiday season, there are a lot of shoes being confirmed and leaked for 2017. But is this a preview at an upcoming Air Jordan 12 Jordan Retro lineup for the new year?Shown here is a look at the “Alternate” Air Jordan 6, the “Cherry” and “Rising Sun” Air Jordan 12s. While the images have started to Jordan 11 surface, everyone is wondering whether this is a preview of what’s to come in 2017.While we already know that the “Alternate” Air Jordan 6 is set to drop in March, but Cheap Jordans for sale what about these other two Air Jordan 12 colorways?The Air Jordan 12 “Cherry” was rumored to release this year, but now it looks like that won’t be happening. These “Rising Sun” Cheap Jordans for sale Air Jordan 12s also have no release information attached to them.So as of right now, out of these three Air Jordans, the only one that looks to be “official” and “releasing” Stephen Curry Shoes is the “Alternate” Air Jordan 6.We’ll keep you updated with all the latest upcoming Air Jordan Release Dates as they develop. But for now, both these Air Jordan 12s look to Jordan 7 Tinker be just hopes and dreams.Let us know in the comments section if you’d like to see either of these Air Jordan 12 colorways make a retro return in 2017.
ReplyDeleteConsidering the Jordan shoes fact that the Air Jordan 13 was inspired by the Black Panther, it makes sense for Jordan Brand to officially release an Air Jordan 13 Black Cat colorway, which is set Jordan 13 Shoes for Spring 2017.If the Air Jordan 13 couldn’t be sleeker than it already is, the iconic silhouette actually managed to use inspirations from the Black Panther and pulled it off throughout Jordan shoes the shoe. Both the paw prints on the outsole and the hologram – which when you turn off the lights shine up to mimic a panther’s eye, all resembles the Black Cheap Jordans Cat.This release features a full Black upper with 3M reflective detailing that also includes matching 3M laces.No release date for the Air Jordan 13 Black Cat has been confirmed, but you Jordans for sale can expect to see the “Black Cat” colorway make its debut later this Spring 2017.Let us know what you guys think in the comments section and stay tuned to Sneaker Bar Cheap Jordans For Sale for further updates as they develop.UPDATE: Here’s what the “Black Cat” Air Jordan 13 is looking to look like that’s set to release early Spring 2017. Details include, 3M on the Jordan 7 Shoes
jianbin1206
ReplyDeletemulberry bags
juicy couture tracksuit
toms outlet
louis vuitton outlet stores
ugg outlet
montblanc pens
coach outlet online
adidas wings
longchamp
ugg outlet online
cheap nfl jerseys
ReplyDeletechristian louboutin shoes
louis vuitton uk
louis vuitton handbags
true religion jeans
links of london
versace sunglasses
mulberry handbags
reebok trainers
coach outlet clearance
chanyuan2017.03.21
michael kors handbags
ReplyDeletelebron 12 shoes
coach outlet
ray ban outlet
kd 8 shoes
calvin klein jeans
adidas nmd xr1
caterpillar boots
levis jeans outlet
reebok outlet
hzx20170503
20170523 junda
ReplyDeletelongchamp handbags
michael kors outlet
camisetas futbol baratas
oakley sunglasses sale
longchamp outlet
coach outlet
nike shoes
louis vuitton outlet
cleveland cavaliers jerseys
louis vuitton
true religion outlet
ReplyDeletenike shoes on sale
lunette ray ban
ray ban sunglasses outlet
coach outlet
fitflops sale clearance
polo outlet
fred perry
ralph lauren uk
fred perry outlet
20170620wanglili
Promo Freebet via Agen Piala Dunia 2018 Pyatigorsk Region Capital Rusia Situs www.pokerusia.net Melalui Bank Panin Indonesia Kode Bank 019.
ReplyDelete