Top > December 2005 [全て開く]

2005年ブログ総括

December 31,2005 11:55 PM
Category:[blog]
Tag:[, ]
Permalink

今年も締め括りということで一言。

私がブログを開始したのが2004年5月で、今年も相変わらずテンプレート・カスタマイズ中心の記事をアップし続け、あっという間に1年が過ぎました。昨年にも増して大勢の皆様にアクセスを頂き、嬉しい限りです。

昨年から今年前半にかけて、ご近所ユーザの方々がカスタマイズで加熱するという雰囲気がありましたが、最近は落ち着いた感があり、ここに訪れてカスタマイズされた方が本来のカラーでブログを楽しまれているという印象です。
その流れとは別に、雑誌や本で当サイトの記事を紹介して頂ける機会を頂き、本当に感謝しています。

皆様には大変お世話になりました。来年もネタを探してテンプレート・カスタマイズ記事とダジャレを中心に書き続ける所存ですので、ご指導・ご鞭撻の程、どうぞよろしくお願い致します。

それでは2006年もどうぞよろしくお願い致します。そして良いお年をお迎えください。なお喪中のため、新年のご挨拶は失礼させていただきます。

Comments [4] | Trackbacks [0]

AIR-EDGE AH-H407P

December 30,2005 11:58 PM
Category:[PC]
Tag:[]
Permalink

WILLCOMのデータ通信用カードです。他にも何種類かありましたが本体価格が一番安かったので迷うことなく決定。ただいま帰省先からの接続に使っています。

とりあえず帰省前に環境設定しようと思い、昨日ノートPCにデータ通信カードを差し込んでインストールしようとしたところ、いきなりデバイスが認識されないという問題に遭遇しました。が、HPのサポートページを調べたところ「PCMCIA通信カードを認識しない」という問題が掲載されており、手順通りに実行することで正常に認識されました。

一通り設定が完了し、アンテナの感度も良好。で接続しようとしたら今度は接続できません。悩むこと数分。どうやらプリインストールされている Norton Internet Security が有効になっているのがいけなかったようで、一時的に無効にすることで正常に接続できました。
この Norton Internet Security が曲者というのは以前から知っていたのですが、きちんと設定していないせいもあってか、ネットワークの共有でも無効にしないと通信できません。ネットワーク関連でうまく動作しない場合はとりあえずこれを無効にすることでしょうか。

WILLCOM が用意しているデータ通信のタイプには 1x/4x/8x 等があり、1x は32kbps、4x は128Kbps となっており、プロバイダにそれぞれの接続用番号が用意されています。
私は 4x のネット25(月25時間まで定額)というコースですが、画像を圧縮する「Venturi」や「MEGAドライブ」という、店員さんの説明によると最大2MBまでの体感が可能?な60日間無料のオプションもついていて、そこそこ使えます。
なおプログラムのダウンロードでは、体感速度を早くするオプションをOFFにしないと正常にダウンロードできませんでした。

心配だったのは実家での感度だったのですが、通信カード用ユーティリティの情報では「最良」と表示され、一安心。
ということで、こまめに接続・切断を繰り返しながら運用しています。(笑)

Comments [2] | Trackbacks [0]

ふとん屋さん

December 29,2005 11:53 PM
Category:[ダジャレ]
Tag:[]
Permalink

リニューアルして

Comments [2] | Trackbacks [0]

BlogRolling にスクロールバーをつける

December 28,2005 11:57 PM
Category:[BlogRolling]
Tag:[, , ]
Permalink

BlogRolling にスクロールバーをつけるBlogRolling の blogroll(リンクリスト)にスクロールバーをつけるカスタマイズをご紹介します。スクリーンショットのように、クレジットをスクロールバーの外に追い出すことができます。
当サイトでは、テンプレートユーザさんをリスティングしている「小粋なUserList」で BlogRolling を使用していますので、ブログに「小粋なUserList」を設定されている方にお勧めです。

以下、カスタマイズ方法です。

1.blogroll を div タグ等で括る

下記のように blogroll を表示するタグを div 要素で括り、id 属性 hogehoge を div 要素に記述してください。

<div id="hogehoge">
<script language="javascript" type="text/javascript" src="http://rpc.blogrolling.com/display.php?r=xxxxx"></script>
</div>

Serena Bach で定義型リスト(dl - dt - dd)を使っている場合は、下記のように dd 要素の中に div 要素を与えてください。

<dl class="xx">
<dt id="xxname">LIST</dt>
<dd id="xxlist">
<div id="hogehoge">
<script language="javascript" type="text/javascript" src="http://rpc.blogrolling.com/display.php?r=xxxxx"></script>
</div>
</dd>
</dl>

2.表示タグにスクリプトの追加

下記のスクリプト(青色部分)を、1項で修正したタグの下に追加してください。

<div id="hogehoge">
<script language="javascript" type="text/javascript" src="http://rpc.blogrolling.com/display.php?r=xxxxx"></script>
</div>
 
<script type="text/javascript">
<!--
id = 'hogehoge';
tag1 = '<a';
if (window.navigator.userAgent.indexOf("MSIE") != -1) {
    tag1 = tag1.toUpperCase();
}
tag2 = 'BlogRolling';
nodes = document.getElementById(id).innerHTML;
data = '';
list = nodes.split(tag1);
counter = 0;
for (i = 0; i < list.length; i++) {
    if(list[i].indexOf('<br><br>') != -1) {
        list[i] = list[i].replace(/<br>/,"");
    }
    if(list[i].indexOf(tag2) != -1) {
        data += '</div><div class="blogroll-powered-by">' + tag1 + list[i];
    } else {
        if(counter){
            data += tag1;
        }
        data += list[i];
    }
    counter++;
}
document.getElementById(id).innerHTML = data + '</div>';
//-->
</script>

赤色で示した

id = 'hogehoge';

ですが、hogehoge の部分に、1項で設定した id 属性と同じものを設定してください。

3.スタイルシートの設定

BlogList用のCSSとして、スタイルシートに下記を追加します。

.blogrollmain {
    overflow: auto;
    height: 200px;
}
 
.blogroll-powered-by {
    margin-top: 5px;
    margin-bottom: 0px;
}

スクロールバーの高さを変える場合は

.blogrollmain {
    overflow: auto;
    height: 200px;
}

の赤色部分を修正してください。

Comments [3] | Trackbacks [1]

エントリーで table タグを記述する場合の注意

December 27,2005 11:59 PM
Category:[テンプレートタグ]
Tag:[, , ]
Permalink

Movable Type のエントリーで table タグを記述すると、テーブルの直前にある段落と大きな余白が生じる場合があります。
例えば以下のようになります。


段落





あいうえお
かきくけこ
さしすせそ


上記サンプルの「段落」という文字と、次に表示されているテーブルの間は1回改行しているだけですが、表示させるとこれだけの間隔が空いてしまいます。

原因は、エントリーのオプションにある「改行設定」が「改行を変換する」になっている場合、table タグに含まれる改行に全て改行タグが設定されてしまい、その改行が table タグの直前で有効になってしまうためです。

上記の例では、エントリー編集画面では

段落
<table border="1" cellpadding="2" cellspacing="0">
<tr><td>あいうえお</td></tr>
<tr><td>かきくけこ</td></tr>
<tr><td>さしすせそ</td></tr>
</table>

となっていますが、保存すると、

<p>段落<br />
<table border="1" cellpadding="2" cellspacing="0"><br />
<tr><td>あいうえお</td></tr><br />
<tr><td>かきくけこ</td></tr><br />
<tr><td>さしすせそ</td></tr><br />
</table></p>

と、全ての行末に改行マーク(赤色)が挿入されてしまいます。青色はその前後が空行の場合に挿入される段落用の p タグです。

table に改行タグを挿入させない策がいくつかありますのでご紹介します。

1.テーブル中の改行をなくす

これが一番手っ取り早いですが、エントリーの編集でやや見づらくなるのが欠点です。
追記:書き忘れてましたが、table タグが p タグの中に存在すると XHTML検証エラーとなります(つまり上記のリストはNGです)ので、2項を推奨します。

2.table 開始タグの直前に空行をいれる

Movable Type がエントリーに改行を付与する制御の仕組み上、先頭行(その前が空行であること)が下記のいずれかのタグに該当すれば、そのタグが含まれる行から次に空行が現れるまで改行タグおよび段落タグを挿入しない仕組みになっています。

h1|h2|h3|h4|h5|h6|table|ol|dl|ul|menu|dir|p|pre|center|form|fieldset|select|blockquote|address|div|hr

つまり、table タグの直前行に文章を書かなければ、1項の作業を行わなくても正常に表示されるようになります。これも手っ取り早い方法ですが、直前行を空けるという制約があります。

3.プラグインを利用する

The blog of H.Fujimoto の壱さんが「改行を変換する」を改良するプラグインを提供されていますので、これを用いることで正常に出力することができます。

Comments [5] | Trackbacks [1]

Serene Bach / sb 公開テンプレートの不具合修正箇所について

December 26,2005 11:57 PM
Category:[テンプレート]
Tag:[, , , ]
Permalink

昨日のエントリーでお伝えしたとおり、当サイトで公開している Serene Bach テンプレートおよび sb テンプレートで、個別エントリーHTMLに複数のトラックバックがある場合、ページの表示が崩れるという不具合がありました。ご利用の方には大変ご迷惑をおかけして申し訳ございません。

現在公開中のテンプレートは不具合を修正済ですが、2005年12月25日以前に Serene Bach または sb テンプレートをダウンロードされて表示が崩れている場合は、テンプレートを再度ダウンロードされるか、以下に示す修正をお願い致します(正常に表示されていれば修正の必要はありません)。
ベースHTMLテンプレート+スタイルシートでお使いの場合(=個別エントリー用HTMLテンプレートをお使いでない場合)は1項、個別エントリー用HTMLテンプレートをお使いの場合は2項の作業を行ってください。

1.ベースHTMLテンプレート+スタイルシートでご利用の場合

1.1 div タグの削除

ベースHTMLテンプレートにあるトラックバック表示用タグから、下記のように div 閉じタグ(赤色)をひとつ削除してください。

      :
<!-- BEGIN trackback -->
<h3 class="trackbacks-header">Trackbacks</h3>
<div class="trackbacks-content">
<div class="trackback">
<div class="trackback-content">{trackback_excerpt}</div>
<p class="trackback-footer">
{trackback_title} | {trackback_blog_name} | {trackback_time}
</p>
</div>
</div>
</div>
<!-- END trackback -->
      :

1.2 スクリプトの追加

ベースHTMLテンプレートの最後にあるスクリプトに、青色部分を追加してください。

      :
<script type="text/javascript">
<!--
var elements = document.getElementsByTagName('h2');
var work;
var work_old = '';
for (i=0; i<elements.length; i++) {
    work = elements[i].innerHTML;
    if(work == work_old){
        elements[i].style.display = 'none';
    }
    work_old = work;
}
elements = document.getElementsByTagName('h3');
work_old = '';
for (i=0; i<elements.length; i++) {
    work = elements[i].innerHTML;
    if(work == work_old){
        elements[i].style.display = 'none';
    }
    work_old = work;
}
//-->
</script>
      :

2.ベースHTMLテンプレート+個別エントリー用HTMLテンプレート+スタイルシートでご利用の場合

2.1 div タグの削除

個別エントリー用HTMLテンプレートにあるトラックバック表示用タグから、下記のように div 閉じタグ(赤色)をひとつ削除してください。

      :
<!-- BEGIN trackback -->
<h3 class="trackbacks-header">Trackbacks</h3>
<div class="trackbacks-content">
<div class="trackback">
<div class="trackback-content">{trackback_excerpt}</div>
<p class="trackback-footer">
{trackback_title} | {trackback_blog_name} | {trackback_time}
</p>
</div>
</div>
</div>
<!-- END trackback -->
      :

2.2 スクリプトの追加

個別エントリー用HTMLテンプレートの最後の方に、スクリプト(青色部分)を追加してください。

      :
</div><!-- /box -->
 
<script type="text/javascript">
<!--
var elements = document.getElementsByTagName('h3');
var work;
var work_old = '';
for (i=0; i<elements.length; i++) {
    work = elements[i].innerHTML;
    if(work == work_old){
        elements[i].style.display = 'none';
    }
    work_old = work;
}
//-->
</script>
 
</body>
Comments [3] | Trackbacks [0]

Serene Bach / sb 公開テンプレートご利用の方へ

December 25,2005 11:58 PM
Category:[テンプレート]
Tag:[]
Permalink

現在公開中の Serene Bach テンプレートおよび sb テンプレートですが、個別エントリーHTMLのトラックバックで2件以上ある場合、表示が崩れる不具合がありました。
Serene Bach 版については、以前同様の指摘を頂き、修正したアーカイブを公開していたつもりでしたが、アーカイブを配置する際に新旧のアーカイブを間違えて配置していたようで、不具合が解消されたアーカイブをダウンロードできない状態になっておりました。大変申し訳ございません(←勘違いでしたらすいません)。

先ほど、Serene Bach / sb 両方のテンプレートアーカイブを作成して、リンクを設定し、公開リンクから再度ダウンロードしてそれぞれ正常に動作することを確認しました(正常に動作しない場合はご連絡ください)。ダウンロードのリンクに「20051225」が含まれているものが最新バージョンです。それ以前にダウンロードされた方については再度ダウンロードくださいますよう、よろしくお願い致します。

なお、既にテンプレートをカスタマイズされている方につきましては、修正点のみを別途お知らせする予定ですのでお時間ください。

Comments [0] | Trackbacks [0]

入門Ajax

December 24,2005 11:50 PM
Category:[書籍]
Tag:[, , ]
Permalink

Ajaxの書籍が、少ないながらも書店に並ぶようになってきました。

Ajax の大きなメリットは、クライアント-サーバ間でのデータのやりとりが非同期通信(サーバにリクエストを送ると、「リクエストを送ったよ」という素早いレスポンスがクライアントに返却されて、実際のレスポンスは後から返却される)で行われる、ということですが、やりとりされるデータ自身よりも、サーバとの通信によってブラウザが待ち状態にならないことが Ajax による大きな恩恵です。

たとえば通常の同期通信であれば、フォームにデータを入力して送信すると、リスエストをサーバに送り、レスポンスがページに反映されるまでユーザはブラウザを操作することができません。Ajax を使えば、フォームデータ送信直後に次のブラウジングを行うことができます。ここで重要なのは、Ajax のレスポンスはページの一部に反映されるということです。フォームデータの例では、入力したフォームデータの結果は(JavaScriptを利用して)ページの一部分だけを入れ替えるということです。

・・・という仕組みが今ひとつよく理解できていなかったので、下記の1冊を購入しました。

入門 Ajax
入門 Ajax
posted with amazlet on 05.12.25
高橋 登史朗
ソフトバンククリエイティブ (2005/11/15)
売り上げランキング: 65,811

内容は Ajax の基本的な説明や利用方法の他、文字コード・クロスブラウザやセキュリティ対策(クロスサイトスクリプティング・イジェクション)の注意事項がきめ細かく掲載されており、XMLHttpRequest部分についてはそれらを考慮した実用的なサンプルが掲載されています。

テキストを扱った基本サンプルでは、Perl/PHP/bsh/MySQL/SQLiteを利用した通信方法や、onclick・onmouseover等のイベント別のサンプルが詳細に記されており、ドラッガブルフロートやスライダー、ドラッグ&ドロップといったビジュアルなサンプルも載っています。その他 XMLHttpRequest リファレンスや Google Maps のカスタマイズ方法とAPIクラスリファレンスもありますので、これ1冊あれば Ajax の動作を色々楽しめるのではないでしょうか。

Comments [0] | Trackbacks [0]

テンプレートご利用500サイト達成

当サイトで公開しているテンプレートのご利用者(コメント・トラックバック・BlogPeople等の登録で私が知ることができたもの)が500サイトを超えました。月並みではございますがご利用くださっている皆様には本当に感謝しております。この場をお借りして改めまして御礼申し上げます。ありがとうございます。m(__)m

上記で知り得たサイトについては「小粋なUserList(BlogRolling 使用)」に私が手動で日々登録しているのですが、途中で他のテンプレートに乗り換えられたり、URLが変更になったりすることも当然ある訳で、時々メンテナンスしながら登録ユーザ数をチェックしています。
小粋なUserListの詳細についてはテンプレートについてのページの中ほどの説明を参照ください。

これまでは mixi の「小粋なユーザコミュニティ」のメンバーの方々にチェックを分担してお願いしてましたが、今回はチェックツールを作りました。具体的には、まず BlogRolling のリストをツールに読み込ませ、サイトのトップページを取得します。そこからさらにCSS(styles-site.css等)を取得し、そこに記された著作権表示を認識してテンプレート利用状況を判断するようにしています(目視による最終チェックは必要ですが)。これによってチェック稼動がかなり削減されました。

ということで、500サイトをややオーバしておりますが、現時点でのご利用サイト様を紹介させて頂きます(BlogRollong 表示順です)。タイトルは登録時のタイトルを基本にしておりますが誤り等ございましたらご連絡ください。
登録漏れ等ありましたらご連絡頂ければ幸いです。またここに紹介されていない公開テンプレートご利用の方についても、ご連絡頂ければ適宜登録させて頂きます。

  1. * cerise cafe *
  2. **つれづれなるままに**
  3. **読書日記**
  4. **Silver Heart**
  5. *kirara
  6. + 馬グナカルタ +
  7. + spirit ether blog
  8. + spirit ether blog
  9. ++ Bay Leaf ++
  10. ++お花ダイスキ!++
  11. ++Blog-MELL++
  12. ++猫な日々++
  13. ++Open My Heart++
  14. +みゅみゅうさ+
  15. +occhiali di libellula+
  16. -h@tezone-
  17. ...: laugh so rough :...
  18. /PEN/
  19. /var/tmp/blog
  20. 137g
  21. 246log
  22. 4REAL
  23. 5587.chan.com
  24. 77racing.com
  25. : : useful days* ? : :
  26. ::::fuumblog::::
  27. ::miim::
  28. =ハマルノカ=
  29. =TA*KA blog=
  30. a n i
  31. AF系製薬 Web出張版
  32. AMBITION&DESIRE
  33. AmitoMidnight
  34. angeli-x ++ monologue
  35. 『ブタネコのトラウマ』 Blog版
  36. あそび
  37. あっぷるじゅ?す
  38. あどべがの館
  39. あふなびブログ
  40. あらぐさ
  41. いるうるいなさび
  42. いろんなことが起こる
  43. うたたね ひつじ
  44. うだうだうだ
  45. えすろぐ
  46. えてぽんの部屋
  47. おうち日記とアフィリエイト
  48. おさんぽ ことり だより
  49. おっさんのブログ(仮)
  50. おでこちゃんの金魚飼育日記
  51. お取り寄せ日記@petit*asterisk
  52. お気楽ブログ☆
  53. お気楽草紙
  54. きらきら*ひかる It shines glitteringly.
  55. くろねこ屋
  56. たおふあZ
  57. ちっちっち
  58. ちとGo!Go!
  59. つのとカブいっしょに
  60. てぃあら
  61. とも。日記
  62. とりあえずいっとけ!?
  63. とりあえずいっとけ!? Tigers
  64. とりとめなき日記
  65. どうでもいいこと
  66. にゃ?ごろ
  67. にやりっ日誌-niyari official blog-
  68. のんべサラリーマン
  69. はいねぶ
  70. ひばり座ブログ
  71. ひびのつぶやき
  72. ふたつとない日常 ?Azumy's Standard Daytime
  73. ぶーくろぐ
  74. ぷちぷちつづり
  75. ほげほげ情報ブログ
  76. ほたるすたいる
  77. ぼくたび BLOG
  78. ぼけぼけ☆こむ
  79. ぽこたのきもち
  80. まさやん日記
  81. まんがboo(漫画部)
  82. まんぼう亭
  83. みた夢メモっちゃいけないか?
  84. やしめしや
  85. やっつけWeb
  86. やむやむ
  87. ゆきのきもち
  88. ゆたんところ
  89. よろずブログ
  90. りとるこっと。blog
  91. りゅうWalker Log
  92. るしゃなーず・ごーすとうぃすぱー
  93. わいるどで行こう
  94. わたあめすもも
  95. わたしのヒトリゴト あさきぬ工房
  96. アイドルの草鞋
  97. アルの足跡
  98. アルファ道場2005
  99. アレルギー・アトピーでも楽しく暮らそう!
  100. エンタマ
  101. オナカン
  102. オラっちの気ままな毎日
  103. オラっちの気ままな毎日
  104. カメラと一緒にパリでお散歩*
  105. ギャンブル三昧!
  106. ケセラセラBrand-new!
  107. コスメ&ビューティー::銀座ショッピングストリート
  108. コハルビヨリ。
  109. ジンク・ホワイト
  110. スイフトスポーツドットコム
  111. スパムメール・バトルロワイヤル
  112. ダイエットアラモード *TIME*
  113. ダンス図書館
  114. チエコエトセトラ。
  115. チカチカの羅針盤
  116. チョコチッブログ
  117. チョーオンパホーソーキョク
  118. ツキヘノトビラ
  119. デジタルカメラ.com
  120. ドール・ヒステリア
  121. ナイショの話
  122. ナリモノイリ
  123. ニート・ひきこもりのための経済的自立
  124. ネタを探して2万マイル!?
  125. ネットショップ・オペレーション・マニュアル
  126. ハンサムウーマン道
  127. ヒビノキロク
  128. フラワーガーデン::銀座ショッピングストリート::
  129. ボクはちゃんとビジネス本読んでます!
  130. ポポタム!
  131. ヤタさんの気まぐれ日記
  132. ユートピアンのディストピア
  133. ヨーキーな日々♪
  134. ラパンdeドライブ宙-ケータイ大好き-
  135. リラックマ・ショッピングモール
  136. リリウムの寝言
  137. レジェンダロッサの独り言
  138. ■□ WAY OF LIFE □■
  139. ▼■▼■● Vivid-style.com
  140. ××ってやつは・・・
  141. ○△□ たど船
  142. ★ひとりごと日記★
  143. ☆Starlit Sky☆
  144. ☆昴流の旅日記☆
  145. ♪poohな毎日♪
  146. baddreamfancydresser
  147. beads gallery h*h
  148. BEAT ZONE
  149. beautiful hobby life
  150. Biei.Info|blog
  151. BLAN*CAFE
  152. Blog
  153. blog _ notation of the wave
  154. blog(吉田敏彦建築設計室)
  155. blog::made in SAGA
  156. Blog@Peaceman
  157. Blogのような日記のような
  158. Blue Mint
  159. BLUE PALETTE
  160. bo-peep.net/web
  161. BorialisのBoroBoro日記
  162. bublog
  163. c+
  164. cache*cache
  165. Cafe*Blog
  166. camera verde blog
  167. candy-2 BLOG
  168. Car Life Sentence
  169. Caramelly*note
  170. Carefree Field
  171. CAROUSELAMBRA
  172. ch@yalog
  173. Channel * chris
  174. Cherry-Radio
  175. chieplus.net
  176. cider@home
  177. ClumsyKen
  178. Cococcino Days*
  179. Cocont*
  180. CocoNuts Days
  181. COLOR NO.A
  182. comi☆Log.
  183. cookietale
  184. Cool Gaming weBlog
  185. Coolog
  186. cube*
  187. cyber muimui
  188. 無線LANテック
  189. 無印スタイル
  190. 特別支援教育とAT(支援技術)とICT
  191. 独り言・・・
  192. 猫派の読書空間
  193. 痔.com
  194. 砂風呂
  195. 社会分析的ブログ
  196. 秀丞写文庫
  197. 私立大学職員の情報オフィス
  198. 空の追憶
  199. 空飛ぶカメ
  200. 立夏黄経45度
  201. 童貞Game...
  202. 紅玉日誌
  203. 縁側生活
  204. 縁側talk
  205. 繰り返す女
  206. Daily note
  207. daisuke's room
  208. DayByDay
  209. DAYS ...So Flowers
  210. DB blog
  211. DIGITALL!!
  212. Document_Not_Bound...
  213. DORA Blog
  214. dotabata.net
  215. dreaming purple blog
  216. DxD
  217. D'sDinner@Blog
  218. Страх Кино
  219. EgoEco Days...
  220. eizo slash blog
  221. ELECTRICSHEEPdogs!
  222. emo.com
  223. en ce momont...
  224. Ensemble Hearts'
  225. eSoteric・・・
  226. Eternal Forest ?悠久の森?
  227. everyday gokigen !?
  228. ExcessiveWords
  229. Exist a Reason
  230. existence Uhheri Edition
  231. EXPECT THE UNEXPECTED
  232. E's World "Neo"
  233. 適宜更新
  234. 職人カタギ
  235. 脳内物質大流室inBLOG
  236. 重箱のスミ
  237. 銀座ショッピングストリート
  238. 銀座フワラーガーデン
  239. 芽衣のひとりごと
  240. 萌えABLEタイプ
  241. 長靴をはいたシステムエンジニア
  242. 藤丸
  243. 院長室
  244. 雑貨*Zakka*サーチねっとMEMO
  245. 零式改
  246. 青い自転車とどこまでも。
  247. 螺子式少年
  248. 馬に蹴られて
  249. 読書マインドマップ公開所
  250. 身近な Lifelong Learning
  251. 黒スムチの親バカ日記
  252. 黒鱒 - weblog
  253. fang-lang.net
  254. Feels good
  255. Final One's Essence
  256. flatcrew.net : column
  257. FootPrint
  258. Fourseasons
  259. FreeStyle
  260. Frumenty
  261. Gachapin WALL
  262. Gangalee Web Log
  263. GF*days
  264. ginzi.com/blog
  265. GRACE! Diary
  266. groovecube ver.3
  267. grumble
  268. happy hunting ground
  269. Happy*Days
  270. Harry's Blog
  271. HATABOW.JP
  272. HENO HENO
  273. hidakaya Weblog
  274. hilari blog
  275. HiMAT
  276. hiratsuka.memo
  277. HiStyle
  278. HONGKONG+fish Hyper×2
  279. Hot cocoa
  280. hotmilk
  281. I LOVE NAVY
  282. IdeOnline
  283. IIS ECサイトレビュー
  284. In Some Way
  285. infocraft
  286. INSIDE ADORE
  287. is life delisious?
  288. ITOH STYLE
  289. It's my Life
  290. *だらだら雑記*
  291. :: monamona* ::
  292. ::: Sweet days :::
  293. MTおぼえがき
  294. MakkyののほほんDiary♪
  295. SecretBase Of ワンs
  296. SEと呼ばれている奴の気ままなブログ
  297. ?風を追いかけて?
  298. Just myself
  299. K-Jirow BLOG
  300. kanemotipapa’s日々相場雑感
  301. karleksounds
  302. kazunoblog
  303. KeiBlog
  304. kenronw(ケンロン)のブログ
  305. KG
  306. kg2
  307. KH Weblog
  308. KillerPierce
  309. KINGO WEBlog
  310. kitchen
  311. KoreanLanguage*
  312. Kuro:Neko Diary
  313. K'S GARDEN
  314. K'z Blog
  315. land2go!!
  316. langsam
  317. L・E・L・S
  318. Little Satellite
  319. love
  320. LOVE SWIMMING Blog
  321. LUC-XX
  322. LUVandSOUL-FAN.com
  323. M E T A B O L I S M
  324. M*C?B Version?
  325. M*s Cafe-Blog-
  326. Magic White
  327. Magic#32のMT日記
  328. Maio's Weblog
  329. maki's space
  330. Makologg???
  331. Mami's note
  332. Marginalsky
  333. Marrontic
  334. mattari-blog
  335. Mauloa Mele
  336. memorandum
  337. MepageType
  338. MetLog
  339. MIKI Housing
  340. Minologue
  341. Mistgrass Weblog
  342. Misty Night
  343. mobilepcclub
  344. monochrome green
  345. Monochrome Recollections
  346. Monolith-Log モノリスログ
  347. MONOLOGUE
  348. MT専科
  349. my style*
  350. My Sweet Moana
  351. My wonderful living
  352. Myth Online
  353. N-blog
  354. Nachtigall
  355. Natural High
  356. nau-magazine
  357. NAVY WATER
  358. neko no 肉球@BLOG
  359. Nero-8 Archives
  360. Nessun Dorma
  361. NGのひとりごと
  362. niigata-boro.net daily-r
  363. NO DOUBT
  364. Nobuの日々お蔵出し
  365. nobubu Eyes
  366. nobubulog
  367. nonvlog from nonvey
  368. NOP DAYS
  369. Not yet!
  370. N's blog
  371. Omusubi Kororin
  372. Orbium
  373. Ordinary Person Monologues::
  374. org_blog.
  375. Otakara CAT Photo Blog
  376. O.Z.K
  377. parallax
  378. parallax・はぐれ日記
  379. patapata:blog
  380. PCと戯れる日々
  381. Peco Net
  382. PHAT∴LOVESICK
  383. Plating!
  384. Postposition.Net Blog
  385. Press-code.net
  386. Pretty*Days
  387. primary_secondary
  388. Project MultiBurst
  389. Pubsonal パブソナルを考えるブログ
  390. P's Blog
  391. Rabbit's Room
  392. RAINBOW
  393. Rainy days, Sunny days DB
  394. Release Candidate 2
  395. RELISH Cafe
  396. rey&rio's sleepyblog
  397. Routinework Blog
  398. SAKALOG
  399. SAKSAK RECORDS WEB SITE
  400. saku*saku
  401. Sampei's Private Room
  402. Sans-Souci
  403. Sanssouci
  404. Schrödingers Katze
  405. se a vida e
  406. SEYA.ORG
  407. Shady Grove
  408. Shout!!
  409. Shout!!
  410. showry's Blog
  411. SHO's**My...Day...**
  412. Sketch Line
  413. Sky High!
  414. skyimage / Blog
  415. sleepyblog
  416. Small town talk
  417. smile.shioiri.jp
  418. SnowDrop
  419. solgel.info::そるじぇるどっといんふぉ
  420. Sono's Every day
  421. SR ** P i c k U p **
  422. STARLIT SKY
  423. SUNDAY MORNING BLUE
  424. Suzie World
  425. SWEET WATER Web Server
  426. Sweet*Season
  427. swimmer's blog ver. 2.0
  428. TAKE IT EASY. つれづれブログ
  429. TAKUHAI ATHLETE
  430. teaspoon
  431. ten-don ?天丼?
  432. TENERE
  433. teraRhythm
  434. The Simple Outdoor Life
  435. TOKYO Runabout
  436. Touring Report
  437. ToyBox
  438. Treasure
  439. TsBlog
  440. TUMIを買う TUMIを使う
  441. type le bleu :: provisoire*
  442. Ui-ed
  443. Un deux trois*days
  444. Unknown
  445. vanilla_cafe*
  446. WAY TO GO
  447. Weblog -Selfish-
  448. weblog@nigiyakana jikan
  449. WEBLOGROOVE
  450. We're Murderer
  451. wobb.jp
  452. WORK NOTE BLOG
  453. World without Words.
  454. yamacot
  455. Yggdrasill.
  456. YUIHARU DIARY
  457. zerothree.blog
  458. zone-log
  459. zora*
  460. [ Slow ”UO” Life ]
  461. [美]Musabi Diary - a-bit-
  462. [EF] Electric Flower
  463. [ms-net] blog
  464. 再起業に向けて
  465. 出張生活
  466. 出来るだけ、更新です。
  467. 匠悟録
  468. 南茶亭
  469. 和道楽日記 - Kazulog -
  470. 和尚の南無ログ
  471. 喜怒哀楽
  472. 夏のクラクション
  473. 夏海の恋愛事情。
  474. 大泉洋とどうでしょうな日々
  475. 天上月苑
  476. 嫌ならやめてもいいんじゃよ?
  477. 子供達は夜の住人
  478. 学生団体 IdeAct
  479. 宵待小桜餅
  480. 寝言、戯言、独り言。
  481. 山の茶店の珍道中
  482. 山吹の風
  483. 己でサイトジャック
  484. 帰宅部大学生のblog
  485. 幻想バイオレンス
  486. 広く、浅く、そして楽しく。
  487. 弁慶の舞台裏
  488. 彫刻道-ドイツ・彫刻・日記-
  489. 後藤真希 ワオワオ記念日
  490. 徒然なるままに・・・(?はるかなる日々)
  491. 'ohana
  492. 恵司日記
  493. 我楽
  494. 携帯アフィリエイト奮闘記
  495. 改訂★裏赤玉号[改]日誌
  496. 日々気まま(^^♪
  497. 日々一歩-裏-
  498. 日々之吉日
  499. 明るい鬱病人間のふらふら雑記帖
  500. 時は流れても・・・
  501. 暮らし*カフェな節約生活
  502. 暮らし快適!ナチュラル家事のススメ
  503. 月夜の浜辺
  504. 本日のおすすめ !!
  505. 東京ディズニーリゾート裏技完全攻略検定 情報局 Blog
  506. 東京西郊日誌
  507. 林檎と一緒に
  508. 残像
  509. 気が向いた時だけ
  510. 気になる記
  511. 気まぐれ日記
  512. 水耕栽培を楽しもう
  513. 水色飴
  514. 永遠の風
  515. 海苔部落
  516. 深い雪
  517. 三十路パパの子育てライフ*
  518. 世界の終わりは君と一緒に
  519. 世知辛い世の中ですから(´・ω・`)
  520. 温泉天国
  521. 人間万事塞翁が馬 で行こう
  522. 今日の覚え書き
  523. 伊豆潜人の独り言
  524. 住宅選び情報ナビ
  525. 激安!サーフショップ
  526. 信海忠如どっとこむ
  527. || UTAGAME ||
Comments [34] | Trackbacks [0]

著作権表示の西暦をリアルタイム化する

December 22,2005 11:58 PM
Category:[その他]
Tag:[, , , ]
Permalink

Movable Type の著作権表示は、BlogCopyright Plugin を使ったカスタマイズが有名です。このプラグインは登録されている最初のエントリーと最後のエントリーから著作権の西暦を自動生成しますが、再構築した時点の年しか取得できません。つまり年をまたがった場合、再構築が行われるまでは更新されないことになります。

ということで、プラグインを少し修正して、リアルタイムカレンダーのように、リロードを契機に年表示を切り替える方法をご紹介します。日々更新されている方にとっては1年に数分?数時間しか有効にならないという甚だコストパフォーマンスの低い技ですが、年始末にブログを更新できない場合はお勧めです。ある意味、更新頻度が低い方ほど効果大です。

1.著作権表示の意味

カスタマイズの前に、一般的によくみかける

Copyright © 2004 hogehoge All rights reserved. 

を例に、著作権表記の意味を記しておきます。

「Copyright」は著作権があることを意味します。© は「マルシーマーク(英語読みは「サークルシー」)」と読み、同じく著作権があることを意味します。この2つは意味が重複していますが、著作権の扱いが国によって異なるため、より多くの国において保護を受けられるようにという習慣からきているようです。西暦は著作物を公開した最初の年です(ハイフンで現在の年を表示しているのもよくみかけます)。hogehoge は著作権者で、最後の「All rights reserved.」は著作権以外の権利についても保持していることを示すものです。

次に、プラグインの設定方法です。

2.アーカイブのダウンロード

BlogCopyright Pluginより Download BlogCopyright のリンクをクリックしてアーカイブをダウンロードします。

3.プラグインのアップロード

アーカイブを解凍して、中にある BlogCopyright.pl を plugins ディレクトリにアップロードします。アップロード後、メインメニューの「プラグイン」をクリックして、「BlogCopyright.pl」が表示されていればOKです。

4.著作権表示用タグの設定

著作権表示を行いたいテンプレートの編集画面を開き、任意の場所に

<$MTBlogCopyright$>

を記述します。このタグが

Copyright c2004-2005

のような表示に置き換わります。

著作権者を表示する場合、つまり

Copyright c2004-2005 hogehoge

の青色部分を表示するには

<$MTBlogCopyright$> hogehoge

と直接記述する方法もありますが、メインメニューの「プロフィール」→「表示名」に設定していれば、その文字が表示されます。

または

<$MTBlogCopyright owner="hogehoge"$>

と owner 属性を与えます。owner_name に設定した文字が著作権者として表示されます。

「All rights reserved.」はタグまたは著作権者の後ろに直接記述してください。

5.リアルタイム化

4項まででプラグインの通常の動作が行えます。以下はリアルタイムのカスタマイズです。

5.1 プラグインの修正

BlogCopyright.pl を任意のエディタで開き、下記の赤色部分を削除して青色のものに置き換えます。

         :
# Add the years the blog has been up
if($first_year eq $last_year) {
$copyright .=  $first_year . ' ';
$copyright .=  ' <span id="fixyear">' . $first_year . '</span> ';
} else {
$copyright .= $first_year . '-' . $last_year . ' ';
$copyright .= ' <span id="fixyear1">' . $first_year . '</span>-<span id="fixyear2">' .$last_year . '</span> ';
}
         :

5.2 スクリプトの追加

著作権表示用タグを設定しているテンプレートの最後の方(<$MTBlogCopyright$> の後方であればOK)に下記のスクリプトを追加します。

<script type="text/javascript">
<!--
var data = new Date();
var year = data.getYear();
year = (year < 2000) ? year + 1900 : year;
var oldYear;
if(document.getElementById('fixyear')){
    oldYear = document.getElementById('fixyear').innerHTML;
    if(parseInt(oldYear) < parseInt(year)){
        document.getElementById('fixyear').innerHTML = oldYear + "-" + year;
    }
} else if(document.getElementById('fixyear2')) {
    oldYear = document.getElementById('fixyear2').innerHTML;
    if(parseInt(oldYear) < parseInt(year)){
        document.getElementById('fixyear2').innerHTML = year;
    }
}
//-->
</script>

リアルタイム化の仕組みは、5.1項で修正したプラグインで西暦部分に span 要素(id 属性が "fixyear")を付与しています。そして5.2項のスクリプトでその西暦を取得し、サーバから取得した西暦と比較して、サーバの西暦の方が新しければ置き換えるようにしています。またブログに登録されているエントリーが同一年のものしかなく、サーバの西暦が新しい場合は初年と現在年を両方表示します。
JavaScript がOFFの場合は何も処理されません。

6.注意事項

span 要素を他の部分のCSSクラスセレクタとして利用している場合は、表示に影響する可能性があるのでご注意ください。

Comments [14] | Trackbacks [6]

公開テンプレートにフッタを追加する

December 21,2005 11:57 PM
Category:[テンプレート]
Tag:[, ]
Permalink

公開テンプレートにフッタを追加する公開テンプレートのカラムレイアウトの下に著作権表示等のフッタを追加するためのカスタマイズです。スクリーンショットは固定レイアウトにフッタを追加したものです(フッタ部分のみ切り取って表示させています)。
Serene Bach 版はデフォルトでフッタを設定していますが、Movable Type 版は設定していなかったのでここでご紹介します。Serene Bach 版もカスタマイズすることで本記事のようなデザインに変更することが可能です。

なお、リキッドレイアウトと固定レイアウトでカスタマイズ内容が異なりますのでご注意ください。

1.固定レイアウトの場合

1.1 テンプレートにフッタを追加

フッタを表示したい各テンプレートの編集画面を開き、テンプレートの最後の方にある br 要素と div 要素(終了タグ)の間に青色で示したフッタを挿入します。

注:FC2ブログテンプレートの固定レイアウトにはフッタを用意してますので、1.1項の設定は不要です(CSSは若干異なりますので適宜変更してください)。

      :
</div><!-- /links-right -->
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->
 
<br class="clear" />
 
<p id="footer">
Copyright &copy; 2007 xxxxx All Rights Reserved.
</p>
 
</div><!-- /box -->
 
</body>
</html>
      :

1.2 スタイルシートにフッタ用CSSの追加

テンプレート編集画面でスタイルシート(styles-site.css)を開き、下記の設定を挿入します(とりあえず最後の方に追加してください)。

.layout-three-column #footer {
    margin : 30px 0 0;
    padding: 10px;
    border-top: 1px solid #666699;
    color: #ffffff;
    background: #8fabbe;
    font-size: 12px;
    text-align: center;
}

また本文とフッタの表示バランスを修正するために、下記の box セレクタおよび content セレクタについても、赤色から青色に修正すると良いでしょう。スタイルシートには似たようなセレクタが並んでいるので、「.layout-three-column #box」と「.layout-three-column #content」で検索しましょう。

.layout-three-column #box {
    width: 850px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 0;
    padding: 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
}
       :
     (中略)
       :
.layout-three-column #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    margin: 0 0 20px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
}

2.リキッドレイアウトの場合

当サイトで公開しているリキッドレイアウトは左右カラムを absolute(絶対値)指定しており、中央カラムの縦幅と左右サイドバーの縦幅が連動しないため、固定レイアウトのように左右サイドバーにまたがったタイプのフッタ表示はできません。例えばフッタを中央カラムの下に割り当てると、サイドバーの縦幅が中央カラムの縦幅より長くなるとフッタとサイドバーの表示が重なってしまいます。
ということで、ここではサイドバーにはみ出さないように、中央カラムの下に著作権表示をする例をご紹介します。

注:FC2ブログテンプレートのリキッドレイアウトではフッタが表示されるようになっていますので、2項の設定は不要です。

2.1 テンプレートにフッタを追加

フッタを表示したい各テンプレートの編集画面を開き、テンプレートの途中にある中央カラム終了を示す div 要素(終了タグ)と、右カラム開始の div 要素の間に青色で示したフッタを挿入します。

      :
</div><!-- /content -->
<!-- 中央カラム終了 -->
 
<p id="footer">
Copyright &copy; 2007 xxxxx All Rights Reserved.
</p>
 
<!-- 右カラム開始 -->
<div id="links-right-box">
<div id="links-right">
      :

2.2 スタイルシートにフッタ用CSSの追加

テンプレート編集画面でスタイルシート(styles-site.css)を開き、下記の設定を挿入します(とりあえず最後の方に追加してください)。

.layout-three-column-liquid #footer {
    margin : 15px 0 0;
    padding-top: 5px;
    color: #444444;
    font-size: 12px;
    text-align: center;
}

3.3.1xをご利用の場合

上記のカスタマイズは3.2x用です。3.1xまではCSSの設定が異なるため、1.2項にある

.layout-three-column #footer {
      :
.layout-three-column #box {
      :
.layout-three-column #content {
      :

または2.2項の

.layout-three-column-liquid #footer {
      :

の赤色部分を削除してください。

2005.12.23 追記
3.1x 用のカスタマイズ方法を追加しました。

2007.2.25 追記
HTMLマークアップを変更しました。それに伴い CSS も一部変更しました。

Comments [28] | Trackbacks [4]

HP Compaq nx4820/CT Notebook PC

December 20,2005 11:55 PM
Category:[mono]
Tag:[]
Permalink

そろそろ年末ということで、実家への帰省を予定しています。
が、実家にはPCもネットワーク環境もなく、いつもVAIO C1R(MMX(R) テクノロジーPentium(R) プロセッサー(266MHz)/メモリ64MB/HDD4.3GB)という、年代もののノートPCを持ち帰り、それに携帯通信カードを接続してパケット通信するという、かなり軟弱な環境を強いられていました。

といっても、これまでは実家でPCを使う用もたいしてなかった(メールチェック程度)ため、十分用は足りていました。しかし今回、ブログを開設してから初めての長期の帰省で、エントリー投稿やコメントへのご返事、それにカスタマイズの考案のための作業等も引き続き行う予定でいます。
この状況で、今のノートPCで作業的に苦しいのは陽の目を見るより明らかで、

「新調しなければ」

という考えに至った訳です。

まずは秋葉原のヨドバシで現物を物色。基本的にBTOパソコン派なので、HP Compaq nx4820/CT ・Gateway MX6628j(これは非BTO)、あとSONY製品の「OWNER MADE」というカスタマイズ可能な機種がいくつかあり、その中から typeF を候補にしました。スペックは Pentium M プロセッサ 740/メモリ512MB を希望しています。なおHPは目当ての機種が売り切れで直接触れることはできませんでした。

家に戻って、HPモデルを公式サイトで確認したところ、カスタマイズモデルは海外製造で入荷に時間がかかるため年内入手は無理であることが判明。SONY製品も一部の部品が調達できないということが書かれており、これも年内入手困難なため断念。
完全に出遅れてしまっていることに気がつきました。

とりあえず再考のため再び秋葉原へ。なおデザイン的にHPまたはSONYが気にいっていたので、Gatewayは一旦候補から除外。またSONYよりもHPがやや気に入っていたので、HP nx4820/CTを探してみることにしました。
ヨドバシに行くとやはり品切れだったため、その足で在庫がありそうな「ツクモDOS/Vパソコン館」へ。

あまり期待していませんでしたが、意外にもHPが普通に置かれてました。しかもカスタマイズモデルの在庫も約10台ほどが積み上げられているという嬉しい状態。改めて現物を確認して気に入りました。
店員さんに在庫が多い理由を聞いてみると、

「他のお客さんがオンラインでカスタマイズ注文してキャンセルした品物がまとめて入荷した」

とのことで、たしかにスペックが微妙に異なるものばかり。
個人的には最初の条件を満たしていれば、HDDやドライブ等、残りのスペックはどうでもよかったのですが、表示金額はどれも明らかにオンラインショッピングで注文する値段より1万円以上安くなっていました。

デザインが気に入った上に「安い」というかなりの好状況。これは自然に欲も湧いてくるというもので、その場でどのスペックを選択すべきか、悩むこと約10分。

結局、しばらく買い直さない前提で、Pentium M プロセッサ 750/メモリ1GB/DVD±R/RWドライブという、当初よりかなりゴージャスなカスタマイズモデルを選択。
購入した機種(の外観)は以下です。そのあと別の人が同じカスタマイズモデルを購入されていたので、いいタイミングでゆっくり考えて選ぶことができました。