KaRaKuRy

アクセスカウンタ

zoom RSS 表示中のフリースペース内で特定のパーツだけを非表示にする (非表示解除版)

<<   作成日時 : 2009/05/04 11:33   >>

なるほど(納得、参考になった、ヘー) ブログ気持玉 4 / トラックバック 1 / コメント 4

4/29の「表示中のフリースペース内で特定のパーツだけを非表示にする 」でご紹介したスクリプトは、一定の条件下で指定したパーツを《消す》ものなのですが、よく考えたら、逆転の発想で「最初の状態では消しておいて、一定の条件下では指定したパーツが《現れる》」スクリプトでも、結果として同じ効果が得られるんじゃまいか。

と、いうわけで、作ってみました。
前のは「もともと見えているものを、見えなくする」スクリプト、
こっちは「もともと見えていないものを、見えるようにする」スクリプト、ということになります。

まあ、前のと仕組みはほとんど同じです。
※ただし、4/29のと違って「テーマページでだけ表示させる」ことができないみたい。
詳しくは後述。
どっちのほうが使いやすいかは、ブログに入ってるパーツとの相性によると思います。


1:出したり消したりしたい部分の入っているフリースペースの、できるだけ上のほうに↓を貼り付ける。

<script type="text/javascript">
function ARaWaReRu(moto,ari,ato){var chkId;
if(ari==0){chkId = (! document.getElementById(moto))}
else if(ari==1){chkId = document.getElementById(moto)}
if(chkId){var delobj = document.getElementById(ato);
delobj.style.display="block";}}
</script>

フリースペース1と3で使いたい、というときには両方に貼り付けてください。



2:出したり消したりしたい部分を<div id="■■■" style="display:none;"></div>で挟む。

例:ブログパーツのソースがこんなのだったら、

<div style="width:150px;height:200px;"><script language="JavaScript" type="text/javascript"src="http:/⁄www.example.com/blogparts/my_clock.js" ></script>
</div>


  

こうするということ。

<div id="■■■" style="display:none;">
<div style="width:150px;height:200px;"><script language="JavaScript" type="text/javascript"src="http:/⁄www.example.com/blogparts/yasai_tokei.js" ></script>
</div>

</div>

「style="display:none;"」というのは、この部分を非表示にする、という意味なので、スクリプトが働いていないときは当該部分は見えなくなります(画面に現れない)。

CSSが分かる方はタグ内じゃなくCSS編集画面で、class名などでdisplay:noneを設定してもかまいません。


3:■■■の部分を自分のおぼえやすい識別用の名前(id)に書き換える。

《命名ルールその1》
・半角アルファベット
・半角数字
・「_ 」記号(アンダーバー)
・「-」記号(ハイフン)
だけを使い、最初の文字は半角アルファベットでなくてはならない。


《命名ルールその2》
同じページの中で、同じidを何度も使ってはいけない。一つのidは一回だけ使える。
大文字・小文字を変えてもダメ。

例:

<div id="tomato-clock" style="display:none;">
<div style="width:150px;height:200px;"><script language="JavaScript" type="text/javascript"src="http:/⁄www.example.com/blogparts/yasai_tokei.js" ></script>
</div>

</div>

前後についてる「"」を消すと動作しなくなるので、気をつけて書き換えてください。



4:閉じた</div>のすぐ下に、どの部分を表示切替するか・どのページのときに表示切替するか、という命令のようなものを書く。
ここがこの装置の重要なところです。

書式の例 : トップページでのみ、そのパーツを表示させる。
「profileというidの部品が【ある】ときには、tomato-clockというidのついた部品を表示する」

<script type="text/javascript">ARaWaReRu("profile",1,"tomato-clock");</script>

「profileというidの部品」って何だ、と思われるかもしれませんが、これはウェブリブログのトップページの「ブログ紹介」の部分のことです。
これはトップページにしかないので、この部分があるかないかを探って、トップページかそうでないかの判別をしているのです。(CSSで消しているブログでも、見えないだけで存在します)


●このような「ページ判別」に使える部分を挙げておきます。

profile …トップページだけにある「ブログ紹介」欄。
banner …トップページおよびテーマページのブログタイトル部分。
subbanner …記事ページのブログタイトル部分。

例: 記事ページでだけ、そのパーツを表示させたい場合。
「subbannerというidの部品が【ある】ときには、tomato-clockというidのついた部品を表示する」

<script type="text/javascript">ARaWaReRu("subbanner",1,"tomato-clock");</script>


●真ん中にある0という数字は【ある】【ない】という条件を切り替えます。

例: 記事ページではそのパーツを表示させたくない場合。
「subbannerというidの部品が【ない】ときには、tomato-clockというidのついた部品を表示する」

<script type="text/javascript">ARaWaReRu("subbanner",0,"tomato-clock");</script>

1は【ある】、0は【ない】です。この数字の前後には「"」は要りません。
上の場合は、「bannerというidの部品が【ある】ときには、tomato-clockというidのついた部品を表示する」と書き換えることもできますね。
(bannerとsubbannerは、各ページにどちらか一方しかないので。ちなみに「ある」ものを捜すほうが処理は早いです。)

<script type="text/javascript">ARaWaReRu("subbanner",1,"tomato-clock");</script>

この1や0という数字、4/29の記事の「KeSiGoMu()」と併用する場合、逆になるので混乱しないように(^^;


●複数の条件を書く場合。

<script type="text/javascript">
ARaWaReRu("subbanner",1,"tomato-clock");
ARaWaReRu("profile",1,"tomato-clock");
</script>


↑こう書いた場合は、「ページ内にsubbannerがあればtomato-clockを表示」「ページ内にprofileがあればtomato-clockを表示」という二つの条件を並べているので、結果、テーマページでだけ表示されない(消える)ことになります。

※テーマページでだけ出現するidを捜したのですが、どうも存在しないみたいなので、「テーマページでだけ表示させる」という条件が作れないようです…。



5)完成。

<script type="text/javascript">
function ARaWaReRu(moto,ari,ato){var chkId;
if(ari==0){chkId = (! document.getElementById(moto))}
else if(ari==1){chkId = document.getElementById(moto)}
if(chkId){var delobj = document.getElementById(ato);
delobj.style.display="none";}}
</script>

………
………
………

<div id="tomato-clock" style="display:none;">
<div style="width:150px;height:200px;"><script language="JavaScript" type="text/javascript"src="http:/⁄www.example.com/blogparts/yasai_tokei.js" ></script>
</div>

</div>
<script type="text/javascript">ARaWaReRu("subbanner",0,"tomato-clock");</script>

………
………

<div id="rinkuShuu" style="display:none;">
<h2>リンク集</h2>
<ul>
<li><a href="http:/⁄karakury.at.webry.info/" target="_blank">KaRaKuRy</a></li>
<li><a href=""http:/⁄konohen.at.webry.info/" target="_blank">このへん。</a></li>
</ul>

</div>
<script type="text/javascript">ARaWaReRu("profile",1,"rinkuShuu");</script>



※手順1のスクリプトは一回貼り付けるだけで、同じフリースペース内の部分を何個でも消すことが出来ます。
※KeSiGoMu()と併用することもできますが、条件が重なった場合、後から命令された条件のほうが有効になります。例↓

<script type="text/javascript">
ARaWaReRu("subbanner",1,"tomato-clock");
KeSiGoMu("banner",0,"tomato-clock");
</script>


この場合は、「subbannerがあるときにtomato-clockを表示する」が適用されたあと、「bannerが無いときにはtomato-clockを消す」が適用され、結果としては記事ページには表示されないことになります。

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
気持玉数 : 4
なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
ナイス
ガッツ(がんばれ!)

トラックバック(1件)

タイトル (本文) ブログ名/日時
プラダ 財布
表示中のフリースペース内で特定のパーツだけを非表示にする (非表示解除版) KaRaKuRy/ウェブリブログ ...続きを見る
プラダ 財布
2013/07/07 05:14

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(4件)

内 容 ニックネーム/日時
始めまして、
こんなに優しく説明してくれてるのに半分も理解出来ません、まだ半位なので解らない事が多すぎます、
早く理解できるようになります、
優しく説明解りやすいです。有難う御座います。
ミク
2009/05/08 15:50
ミクさん、いらっしゃいませ〜。
この記事の技は、うちでご紹介しているものの中では、ややこしいほうですよ。
URL(→)のページで、★一個の「カレンダーの今日の日付に色をつける」あたりが簡単で面白いです…なんて宣伝してみたり^^;
ご質問などありましたら、私で分かるものはお助けしますので、またどうぞ。

ゆき
URL
2009/05/08 22:13
 突然の訪問、させていただきました
ブログを改造するにあたり、参考にさせて頂く項目が
たくさんあり、まさに目から鱗状態でした??
一言お礼をしたく、コメントさせて頂きました
ありがとうございました

ゆきさん、これからのご活躍楽しみにさせて頂きます
takeshi
2009/05/09 18:13
takeshiさん、いらっしゃいませ。
ウェブリブログは、もちろんそのままでも使えますけれど、ちょっとした工夫で便利になるところがいろいろありますね。
このブログが、takeshiさんのカスタマイズ作業のお役に立てば嬉しいです。私もがんばります(^^)
ゆき
2009/05/09 21:29

コメントする help

ニックネーム
URL(任意)
本 文

おもちゃ箱

Arcana Collection
詳細記事は→こちら
KaleidoRound
自分でつくれる万華鏡

記事をさがす

powered by Google
WWW KaRaKuRy
Neko

おもちゃ箱

【Hamster】
ちょたたたたっ。
詳細記事は→こちら
【Arcana Collection】
登録無しでもお試し戦闘ができるようになったよ。
詳細記事は→こちら
ブログ仲間s'新着記事tv 中継所
Powered By 画RSS

テーマ

表示中のフリースペース内で特定のパーツだけを非表示にする (非表示解除版) KaRaKuRy/BIGLOBEウェブリブログ
文字サイズ:       閉じる