KaRaKuRy

アクセスカウンタ

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

<<   作成日時 : 2009/04/29 16:56   >>

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

フリースペースは3個あるので、「トップページで表示するもの」「記事ページで表示するもの」とグループ分けしながら、ブログパーツや自作のリンク集などの置き場所を考えている方が多いと思います。

このJavaScriptを使うと、フリースペースの中で特定のブログパーツ一個だけを消す、ということができます。
ただし、仕組みとしては表示されてから一瞬で消す、というものなので、ページ自体の読み込みは軽くなりません。
また、ページの読み込み中に、消そうとしているものが、ちらっと見えることがあります(軽いブログパーツだと見えないくらい短時間ですが。)

ちなみに、トップページだけで表示させてテーマページでは表示させないとか、テーマページだけで表示させるとかいった使い方もできます。

ちょっとややこしいので、じっくり読んで使ってください。



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


<script type="text/javascript">
function KeSiGoMu(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>

フリースペース1と3で消したいものがある、というときには両方に貼り付けてください。



2:消そうとしている部分を<div id="■■■"></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="■■■">
<div style="width:150px;height:200px;"><script language="JavaScript" type="text/javascript"src="http:/⁄www.example.com/blogparts/yasai_tokei.js" ></script>
</div>

</div>



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

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


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

例:

<div id="tomato-clock">
<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">KeSiGoMu("profile",0,"tomato-clock");</script>

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


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

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

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

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


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

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

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

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

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


●複数の条件を書くこともできます。

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


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



5)完成。

<script type="text/javascript">
function KeSiGoMu(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">
<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">KeSiGoMu("subbanner",1,"tomato-clock");</script>

………
………

<div id="rinkuShuu">
<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">KeSiGoMu("profile",0,"rinkuShuu");</script>



※手順1のスクリプトは一回貼り付けるだけで、同じフリースペース内の部分を何個でも消すことが出来ます。

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

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

トラックバック(1件)

タイトル (本文) ブログ名/日時
表示中のフリースペース内で特定のパーツだけを非表示にする (非表示解除版)
4/29の「表示中のフリースペース内で特定のパーツだけを非表示にする 」でご紹介したスクリプトは、一定の条件下で指定したパーツを《消す》ものなのですが、よく考えたら、逆転の発想で「最初の状態では消しておいて、一定の条件下では指定したパーツが《現れる》」スクリプトでも、結果として同じ効果が得られるんじゃまいか。 ...続きを見る
KaRaKuRy
2009/05/04 11:33

トラックバック用URL help


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

タイトル
本 文

コメント(6件)

内 容 ニックネーム/日時
ゆきさん、新作でましたね♪
さっそく、
同じフリースペースに貼ってるYoutubeと楽天アフィリエイトでプログラムを試してみたんですが、
Youtubeのほうはプログラムに反応して動作してるんですが、
楽天アフィリエイトのほうが反応しないんです。
プログラムどうしの相性とかあるんでしょうか?
harumam
2009/04/29 21:05
さっそくのお試し、毎度ありがとうございまーす。

フリースペース1の中身を拝見させていただきました。
変だなぁ、消えないはずないんだけどなーと思いつつ、Firefoxで見てみたら…ちゃんと動作してます…。(遠い目)。
どうやらIE+ウェブリの相乗バグっぽいです、ぐぐぐ。
すみませんが、実験にご協力していただけないでしょうか。

実験その1:タグ<div id="raku"></div>を消して、楽天アフィリエイトの格納されている<table>に直接「id="raku"」をつけてみる。(<table id="raku">とする)

実験その2:上の記事の手順1にある↓の行を、
delobj.style.display="none";}}
↓と差し替える。
delobj.parentNode.removeChild(delobj);}}

実験その1とその2は一緒に行うということでなく、それぞれ別の実験です。
どっちかで正常に効果がでるといいのですが。
もちろんお時間あるときで結構ですので、よろしくお願い致します。
ゆき
2009/04/29 22:28
おはようございます。さっそく実験報告です。
その1は×。
その2は動作したりしなかったりで△。
フリースペース1の楽天アフィリエイトプログラムを、
フリースペース3に移動して、このプログラムの実験したところ、ちゃんと動作しました。
フリースペース2はフリースペース1と同じような結果になりそうな気がして実験してません。

組み合わせ次第で出したり消したりできて、とても楽しいですよ。
harumam
2009/04/30 10:08
実験レポートありがとうございます!
うーん、実験その2のほうはさらに強力に「消す」手段なのですが、△とか不安定だとかえって使いづらいですねぇ。

IEで表示がおかしくなるブログパーツは、フリースペース3だとちゃんとブログの一部なんですけど、1や2だとどうも「別読み」扱いみたいなのですよね。
今のスキルでは直せそうもないので、記事中に一言お断りでもいれておきます…(@_@;
ご検証に感謝です。フリースペース3あたりでお役に立てそうだったら、今後も使ってやってください〜。
ゆき
2009/04/30 14:12
ゆきさん

こんにちは

頭が痛くなりそうなくらい
いっぱいタグがあります(笑

いろんなこと勉強されてあるんで
びっくりです。

v(゚▽^*)ノノノ☆マタネsee you
pinku
2009/05/01 10:45
pinkuさん、こんにちは〜。
一気におぼえようとすると、頭が痛くなります…。
ちょこちょこっとずつがオススメです(笑)
またどうぞー。
ゆき
2009/05/01 19:01

コメントする help

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

おもちゃ箱

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

記事をさがす

powered by Google
WWW KaRaKuRy
Neko

おもちゃ箱

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

テーマ

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