Home > スポンサー広告 > 記事内のテキストクリックで隠し本文を展開する


スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 Comments:-

sai URL 2008-04-07 (月) 16:39

いつもブログ見させてもらっています。
質問なんですが・・TomomiXさんの記事のように、複数これを作るとインデント?が崩れたりしてしまいます。
改善方法のヒントかありましたらおしえてください。

TomomiX URL 2008-04-07 (月) 18:34

saiさん、ご質問ありがとうございます^^
また、いつも閲覧くださって嬉しいです^^

どのように崩れてしまうのかわからないので正確な改善策かわからないのですが・・
自分も最初起きた現象で、2個目以降のインデントが崩れました。

それは・・
<div class="style1">
<span class="style2" onclick="ex('1');">表示文</span><br />
<div class="style3" id="1">隠れ文<br /></div>
</div>
<div class="style1">
<span class="style2" onclick="ex('2');">表示文</span><br />
<div class="style3" id="2">隠れ文<br /></div>
</div>
上記のようにしていますでしょうか?

自分は改善した記述方として・・
<div class="style1">
<span class="style2" onclick="ex('1');">表示文</span><br />
<div class="style3" id="1">隠れ文<br /></div>
<span class="style2" onclick="ex('2');">表示文</span><br />
<div class="style3" id="2">隠れ文<br /></div>
</div>

というように、すべてのタグをまとめて「style1」でくくって改善されました。
是非お試しください。

sai URL 2008-04-07 (月) 23:52

ありがとうございます!
style1をひとつにしてくくってみましたら、綺麗に縦が並んで表示されました!
ご丁寧な説明ありがとうございます。

TomomiX URL 2008-04-08 (火) 09:36

saiさん
自分の改善経験をあげてみましたが、改善されて良かったですv-411
またどうぞよろしくお願いします^^

Comment Form

 Trackback+Pingback:-

TrackBack URL for this entry
http://blackcat13numbers.blog31.fc2.com/tb.php/158-10c3ccec
Listed below are links to weblogs that reference
スポンサーサイト from TRASH

Home > スポンサー広告 > 記事内のテキストクリックで隠し本文を展開する

Home > FC2blog Tips > 記事内のテキストクリックで隠し本文を展開する


記事内のテキストクリックで隠し本文を展開する

ちょっと面白い小技紹介です。といっても、FC2公式サイトのQ&Aを見て結構使えるなぁと思い気に入ったものをパクって使っているのですが・・・。サンプルはテストブログに掲載しまして、以下の通りです。

Click Open Contentsのサンプルはこちら

このような感じで、あるテキストをクリックすると、隠れテキストが表示/非表示される仕組みのスクリプトとタグです。導入手順は以下の通りです。

1.スクリプトを <head> ~ </head> 内に設置
tenkai.js
※ ローカル保存(EUC-JP)後、各自でアップロードの上、ご利用ください

2.css欄に以下記述を追加
tenkai.css
※ js同様、各自でアップロードの上、ご利用ください

3.記事内に以下タグを記述
<div class="style1">
<span class="style2" onclick="ex('hogehoge');">クリックできるテキスト</span>
<div class="style3" id="hogehoge">クリックしたら表示/非表示させる隠れテキスト</div>
</div>
cssの数値(margin/padding)や項目(border/background)を変更することで、表示されるテキストの囲いや位置を操作することができます。
●style1:単体・複数どちらでも最初から最後を囲みます
●style2:クリックできるテキスト
●style3:クリックしたら表示される隠れテキスト


赤文字のhogehogeは、ユニークな名称で構いませんが、1ページに複数作成する場合は名称をそれぞれ変えてください。
密かにカスタマイズして会社のサイト内FAQにも実装しちゃっています。
スポンサーサイト

 Comments:4

sai URL 2008-04-07 (月) 16:39

いつもブログ見させてもらっています。
質問なんですが・・TomomiXさんの記事のように、複数これを作るとインデント?が崩れたりしてしまいます。
改善方法のヒントかありましたらおしえてください。

TomomiX URL 2008-04-07 (月) 18:34

saiさん、ご質問ありがとうございます^^
また、いつも閲覧くださって嬉しいです^^

どのように崩れてしまうのかわからないので正確な改善策かわからないのですが・・
自分も最初起きた現象で、2個目以降のインデントが崩れました。

それは・・
<div class="style1">
<span class="style2" onclick="ex('1');">表示文</span><br />
<div class="style3" id="1">隠れ文<br /></div>
</div>
<div class="style1">
<span class="style2" onclick="ex('2');">表示文</span><br />
<div class="style3" id="2">隠れ文<br /></div>
</div>
上記のようにしていますでしょうか?

自分は改善した記述方として・・
<div class="style1">
<span class="style2" onclick="ex('1');">表示文</span><br />
<div class="style3" id="1">隠れ文<br /></div>
<span class="style2" onclick="ex('2');">表示文</span><br />
<div class="style3" id="2">隠れ文<br /></div>
</div>

というように、すべてのタグをまとめて「style1」でくくって改善されました。
是非お試しください。

sai URL 2008-04-07 (月) 23:52

ありがとうございます!
style1をひとつにしてくくってみましたら、綺麗に縦が並んで表示されました!
ご丁寧な説明ありがとうございます。

TomomiX URL 2008-04-08 (火) 09:36

saiさん
自分の改善経験をあげてみましたが、改善されて良かったですv-411
またどうぞよろしくお願いします^^

Comment Form

 Trackback+Pingback:0

TrackBack URL for this entry
http://blackcat13numbers.blog31.fc2.com/tb.php/158-10c3ccec
Listed below are links to weblogs that reference
記事内のテキストクリックで隠し本文を展開する from TRASH

Home > FC2blog Tips > 記事内のテキストクリックで隠し本文を展開する

Recent Comments
Recent Trackback
Feeds

↑Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。