2007/08/02

Snap shots 改良

先日追加したSnap shots。

見た目が格好いいからイイ感じだけど、すべてのリンクのプレビューが出てくるのがウザい。

"comment"、"プロフィール"、"記事の中の写真"、"Twitter update"あたりのプレビューは不要なので、そのように対処してみた。

Q 特定のリンクでSnap Shotsの表示を防ぐには?

A リンクに'snap-noshots'クラスを追加すると、Snap Shotを表示しなくなります。

例<a class="snap_noshots" href="http://www.example.com">www.example.com</a>


基本的にはこの方法でリンクに"snap_noshots"のclassを指定すればokらしい。

でも、ウィジェットの内のリンクなんかはclass指定が出来ないので(もしかしたら出来るかも、俺が無知なだけかも…)、"comment"、"プロフィール"、"Twitter update"内部に関しては、それぞれのドメイン単位でプレビューを表示出来ないように設定してみる。


Q 特定のドメインに対してSnap Shotsを有効/無効にできますか?
A できます。ただ少し技術的です。
以下のコードをコピーしてテキストエディターに貼り付けて編集できるようにしてください。編集が終わったらそれをHTMLの</body>タグの前に貼り付けてください。

<script type="text/javascript">
//<[CDATA[
var links = document.getElementsByTagName('a');
for (var l = 0; l < links.length; l++) {
    if(links[l].href.match(/^http:\/\/www\.example\.com/)){
        links[l].className += " snap_noshots";
    }
}
//]]>
</script>

上のコード内のsnap_noshotsはwww.example.comへのSnap Shotsを無効にします。しかしながらデフォールトで無効にしてあるドメインに対してのみ有効にしたいかもしれません。そのときはsnap_shotsを使います。

snap_noshotsはwww.example.comへのSnap Shotsを無効にします
snap_shotsはwww.example.comへのSnap Shotsを有効にします

しかしおそらくwww.example.comにリンクしたくないでしょう。そこでどうするかというと:
まず、"www.example.com"のコードは www\.example\.comのように書かれていることに気をつけてください
そこで、 www\.example\.com  をあなたの好きなドメインに置き換えてください。それぞれのドットの前にバックスラッシュを入れて同じような記述方法で書いてください。
もしひとつのドメインへのSnap Shots有効・無効を設定したいのなら、これでコードの編集は終りです。</body>タグの前に編集したコードを貼り付けて発行してください。
しかし、Snap Shotsをふたつかそれ以上のドメインに対して有効・無効を設定したいでしょう。そのときはこうします:
Replace the line in the code that contains  www\.example\.com  with this line:  if(links[l].href.match(/^http:\/\/(www\.example1\.com|www\.example2\.com)/)){
この行でSnap Shotsはwww.example1.comまたはwww.example2.comを探します。このコードの中で2つのドメインが縦線( | )で区切られていることに気をつけてください。

You can add more domains simply by adding a vertical bar before each new domain, as shown in this replacement line of code. And, of course, remember to put a backslash (\) before any dots.

最後に、この編集したコードをHTMLの</body>タグの前に貼り付けれて発行すれば終りです。


と、いうことなので、Blogger の管理画面「テンプレート > ページ要素」と進んで、「ページ要素を追加」をクリックして「HTML/JavaScript 」を選んで「ブログに追加」ボタンを押し、「コンテンツ」部分に上記のコードを貼り付けて「変更を保存」ボタンを押す。

上記赤字部分はプレビューを表示させたくないドメインに書き換える。

"comment"と"プロフィール"はwww.blogger.com、"Twitter update"はtwitter.comをブロックすれば良いから以下のコードを貼り付けた。


<script type="text/javascript">
//<[CDATA[
var links = document.getElementsByTagName('a');
for (var l = 0; l < links.length; l++) {
    if(links[l].href.match(/^http:\/\/www\.blogger\.com|twitter\.com/)){
        links[l].className += " snap_noshots";
    }
}
//]]>
</script>

そうすると、"comment"、"プロフィール"、"Twitter update"はトリガーのアイコンが出なくなったのでとりあえずはok。

snap shotsの日本語は直訳なのか、なんだか日本語下手だな…。

それにしても、パーツを簡単に追加できるのも勿論だけど、java scriptとかも簡単に追加出来るbloggerのウィジットって便利かも。

…って、こんな解説記事のような物を書いてみたかったけど、行き当たりバッタリでやってみたら出来た!って感じなんで、あんまり参考にはならんな…。

まぁ、自分用のメモと言う事で。

0 coment: