レッド ■ ワン: red-one

フィードウィジェットは他ブログサービスなどでは見掛けない，特徴的な機能の一つと思います．
【”最新のコメント”を追加する方法】 などを見ても面白い使い方ができそう．

　しかしながら，テンプレ編集（Expand 表示）で Blogger 独自のタグ群を見つめているとき，ウィジェットタグ<b:widget>...</b:widget>内で特異な ID 指定がされていることに気づきます．
　つまり，ブログの動的HTML生成時にウィジェット部分の (x)HTML を吐き出したあと， JavaScript でその ID のコンテンツの書き換えを行っているということでしょうか？

だから何なの・・・？

ウィジェットを記事単独ページで非表示にするために，

<b:includable id='main'>
  <b:if cond='data:blog.pageType != "item"'>

　<!-- コンテンツ -->

  </b:if>
</b:includable>

とする手法がありますが，これだと<ul/>タグに指定されている ID をページ構成時に消してしまいます．

これは不味い

この ID が削除されたことは，Blogger の方は知りません．従って，単独ページの構成時に Blogger の JavaScript が存在しない ID を参照してしまい JavaScript エラーが発生します．

　他の大部分のウィジェットでは，あまりウィジェットタグ内で ID 指定などされていないようですが，フィードウィジェットに関しては非表示にした場合，ID 参照エラーが起こり，その時点で Script がストップしてしまいます．
従って，記事単独ページにおいて Script がストップしてしまい，同様の JavaScript で実現されるバックリンクが表示されない，というの現象があります．

じゃあ，どうすればいいの

• 特定のページで非表示にしない
  
• 非表示にしたい場合は以下のようにする
  

  
  <b:includable id='main'>
    <b:if cond='data:blog.pageType != "item"'>
      <h2><data:title/></h2>
    </b:if>
      <div class='widget-content'>
      <ul expr:id='data:widget.instanceId + "_feedItemListDisplay"'>
  
    <b:if cond='data:blog.pageType != "item"'>
        <!-- ループ -->
    </b:if>
      </ul>
      <b:include name='quickedit'/>
      </div>
    </b:includable>
  

  青字：　ID 指定の部分．　コンテンツのラッパ部分は残す．
  タイトルとアイテムのみ除去
  

なんか面倒ねー・・・

これは，Blogger のバグだと考えられます．　そもそも Blogger ブログは CSS エラーも多い！
Blogger ヘルプのレイアウト用ウィジェット要素タグ欄を見ると，<b:widget/>タグにはページタイプによる表示／非表示を指定する属性が定義されている模様（typePage）．
但し，現在実装されていません．（at 2007/01/29.）

恐らく，将来的にはページエレメントの編集画面などで，正式にページの種類による表示非表示の指定ができるようになると思います．
・・・そうなることを待ちましょう．

参照
• 神村的日常-Kamimura's spill of thought.: Shift to New Bloggerのコメント
• 神村的日常-Kamimura's spill of thought.: 新 Blogger で if 文を使ってみようのローテク Tips

ようやく旧 Blogger を抜け出すことができました．
そこで，テンプレートも新しくし，心機一転．　はじめさせていただきます．

templete by Envy inc.

• Envy Inc.: テンプレート配布開始

# 素晴らしいテンプレートをありがとうです．


-- ここからは Blogger バナシ

　果てさて，新 Blogger になって提供されるようになった Label 機能（カテゴリ，タグ）ですが，Blogger には貼り付けたラベルの一覧を表示する方法がリスティングしかありません．

今回はこれを TagCloud 表示化するようにテンプレートカスタマイズしてみました．

Label 一覧を TagCloud 化

これはテンプレートを直接書き換えるので，テンプレートのバックアップを行ってから自己責任でお願いします．

それでは．

1. Blogger のダッシュボードからテンプレートのHTML編集画面へ移る
   
2. ウィジットのテンプレートを Expand 表示にする
   
3. widget タグの type='Label' とあるものを探す．
   例：　<b:widget id='Label1' locked='false' title='Labels' type='Label'>
   ※　もしなければ，ラベル一覧のエレメントをページに追加していないので，先ずページ要素を追加する
   
4. <b:widget ...> ~ </b:widget> まで，タグで囲まれた所を以下のコードに置き換える（コピー＆ペースト）
   

   
   <b:widget id='Label1' locked='false' title='Labels' type='Label'>
   <b:includable id='main'>
     <b:if cond='data:title'>
       <h2><data:title/></h2>
     </b:if>
     <div class='widget-content'>
   
       <ul style='font-size:100%; padding:0; text-align:justify;'>
       <b:loop values='data:labels' var='label'>
   
         <li style='list-style:none; display:inline; margin:0 4px 0 0;'>
   
           <b:if cond='data:label.count >= 200'>
             &lt;span class='posts-200' style="font-size: 250%;"&gt;
   
           <b:else/><b:if cond='data:label.count >= 150'>
             &lt;span class='posts-100' style="font-size: 230%;"&gt;
   
           <b:else/><b:if cond='data:label.count >= 100'>
             &lt;span class='posts-100' style="font-size: 200%;"&gt;
   
           <b:else/><b:if cond='data:label.count >= 70'>
             &lt;span class='posts-50' style="font-size: 170%;"&gt;
   
           <b:else/><b:if cond='data:label.count >= 50'>
             &lt;span class='posts-50' style="font-size: 150%;"&gt;
   
           <b:else/><b:if cond='data:label.count >= 30'>
             &lt;span class='posts-30' style="font-size: 140%;"&gt;
   
           <b:else/><b:if cond='data:label.count >= 20'>
             &lt;span class='posts-20' style="font-size: 130%;"&gt;
   
           <b:else/><b:if cond='data:label.count >= 15'>
             &lt;span class='posts-10' 1style="font-size: 120%;"&gt;
   
           <b:else/><b:if cond='data:label.count >= 10'>
             &lt;span class='posts-10' style="font-size: 110%;"&gt;
   
           <b:else/><b:if cond='data:label.count >= 8'>
             &lt;span class='posts-1' style="font-size: 100%;"&gt;
   
           <b:else/><b:if cond='data:label.count >= 5'>
             &lt;span class='posts-1' style="font-size: 85%;"&gt;
   
           <b:else/><b:if cond='data:label.count >= 3'>
             &lt;span class='posts-1' style="font-size: 75%;"&gt;
   
           <b:else/><b:if cond='data:label.count > 0'>
             &lt;span class='posts-1' style="font-size: 65%;"&gt;
   
           <b:else/>
             &lt;span class='posts-0' style="font-size: 50%;"&gt;
   
           </b:if></b:if>
           </b:if></b:if>
           </b:if></b:if>
           </b:if></b:if>
           </b:if></b:if>
           </b:if></b:if>
           </b:if>
   
   
           <b:if cond='data:blog.url == data:label.url'>
             <data:label.name/>
   
           <b:else/>
             <a expr:href='data:label.url' expr:title='data:label.count + " posts: " + data:label.name'><data:label.name/></a>
   
           </b:if>
   
         &lt;/span&gt;
   
         </li>
       </b:loop>
       </ul>
   
       <b:include name='quickedit'/>
     </div>
   </b:includable>
   </b:widget>
   

   少し長くて冗長かもしれませんが，内容自体は非常に単純なので読んで理解するのも難しくはありません．
   if-then ルールが長いですが，自分の好みに合わせて更にカスタマイズしてください．
   
5. 保存

で終了となります．　再構築の必要がないので，ブログを更新して表示して見てください．

今回のミソは <span >

　因みに <span となっているのはタイプミスではありません．

　新 Blogger の if-else タグ文は，その中でもコンテンツがきちんと閉じてなければなりません．
つまり，<タグ> と </閉じタグ> の組が必ず同じ if 文内になくてはなりません．

今回のように，条件文が多かったり細かく表示を変えたかったりしたい場合などでは，とても冗長になり記述量が増えてしまいます．
しかしながら，（現在の Blogger では）上記のように記述することで if 文コンテンツ内の HTML タグを閉じずにまた正式なタグとして適応させることが出来ます．

注意点

　今回の実装方法は，もしかしたら Blogger のバグを利用したものかもしれません．　将来は仕様が変更されるかもしれませんし，実現できなくなるかもしれません．
　また，&lt; でエスケープしたとしても，構築したブログではタグとして認識されるので，閉じタグなどをきちんと自分で文法チェックしてください．
以上のことを留意してテンプレートに組み込んでください．

スタイルを少し変えたい・・・？

　投稿数自体が少なくてタグ全体の文字が小さくて見えない・・・，というときは以下のようにスタイルを指定して文字の大きさを変えてください．
&kt;head> の中の <style> タグで，

<style>
...

.Label .widget-content ul {
  font-size: 130%! important;
}
...
<style>

他にも，投稿数毎にクラスを割り当てているので，それを利用してより見やすいように調整できます．
例えば，50件以上のものをより強調したい

.Label .posts-50,
.Label .posts-100,
.Label .posts-200 {
  font-size: 150%! important;
  font-weight: bold;
}

投稿数の少ないものをより小さくしたい

.Label .posts-1 {
  font-size: 80%! important;
}

など指定できます．　投稿数が増えると共にかえていきましょう．

その他

その他にも，Label の表示形式を工夫する方法としては以下のエントリもあります．　こちらも参考に．

• Blogger Beta Tips: ラベルをメニューのように使う

追記 at 2007年02月28日

ul タグのスタイルに text-align: justify; を指定して表示を均等割り付けにしました．

うゎあーーーん



XUL Apps > Split Browser - outsider reflex

一年以上前からちまちま作っていた Firefox 拡張機能と同じものを作られたー．
しかも，自分のより全然，出来がいい．　しかもしかも，こんな大手さんに．

作り出す前に一応ちょこっと調べたのに，そのときは欲しい機能の拡張機能が見当たらなくて，いっちょ作ろうと思ったのになー．
調べてみたら，前ヴァージョンのはもう2003年に公開しているじゃないの．　やんなるわ，マッタク


いっそ，開発をストップして要望だけ丸投げしようかな～（ｳｿ）

使ってみての感想

■ 機能
この拡張機能は Firefox ブラウザの HTML 表示領域を無限に分割していくというものです．
複数の Web ページを見比べたり，別ページをブラウジングしながら別ページで調べものをしたり，・・・ということに使える．

■ 特徴
現在表示しているページ，タブ，リンク先を分割表示可．　分割した先でも普通にブラウジングが行える．　但し，タブ機能はなし．
分割数の制限なし．　（メモリの許す限り）思う存分分割できる．　もちろん，ディスプレイサイズも広くなくてはあまり意味はないけれども．

■ 不満点
無限に分割できるのが特徴ですけど，どうも・やっぱり無駄げ．
二つか三つ表示までで十分です．
分割した先でもタブブラウジングができて，分割ウィンドウの表示非表示を切り替えられればよし，なのにな．


・・・と，いうかそんなの機能のものを自分が作ってましたです．　まだまだ不十分だけど，もうちょっといい感じになったら公開しようかな．
いろいろソースなど見て参考にさせていただきます．


--

※ 2007年初の書き込みが愚痴になってしまってすいません．　今年もこれからもより精進したいと思います．
本年もどうぞよろしくお願いします．

Firefox / Extension / Dwin