2005年ブログ総括
今年も締め括りということで一言。
私がブログを開始したのが2004年5月で、今年も相変わらずテンプレート・カスタマイズ中心の記事をアップし続け、あっという間に1年が過ぎました。昨年にも増して大勢の皆様にアクセスを頂き、嬉しい限りです。
昨年から今年前半にかけて、ご近所ユーザの方々がカスタマイズで加熱するという雰囲気がありましたが、最近は落ち着いた感があり、ここに訪れてカスタマイズされた方が本来のカラーでブログを楽しまれているという印象です。
その流れとは別に、雑誌や本で当サイトの記事を紹介して頂ける機会を頂き、本当に感謝しています。
皆様には大変お世話になりました。来年もネタを探してテンプレート・カスタマイズ記事とダジャレを中心に書き続ける所存ですので、ご指導・ご鞭撻の程、どうぞよろしくお願い致します。
それでは2006年もどうぞよろしくお願い致します。そして良いお年をお迎えください。なお喪中のため、新年のご挨拶は失礼させていただきます。
AIR-EDGE AH-H407P
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にしないと正常にダウンロードできませんでした。
心配だったのは実家での感度だったのですが、通信カード用ユーティリティの情報では「最良」と表示され、一安心。
ということで、こまめに接続・切断を繰り返しながら運用しています。(笑)
BlogRolling にスクロールバーをつける
以下、カスタマイズ方法です。 |
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;
}
の赤色部分を修正してください。
エントリーで table タグを記述する場合の注意
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 の壱さんが「改行を変換する」を改良するプラグインを提供されていますので、これを用いることで正常に出力することができます。
Serene Bach / sb 公開テンプレートの不具合修正箇所について
昨日のエントリーでお伝えしたとおり、当サイトで公開している 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>
Serene Bach / sb 公開テンプレートご利用の方へ
現在公開中の Serene Bach テンプレートおよび sb テンプレートですが、個別エントリーHTMLのトラックバックで2件以上ある場合、表示が崩れる不具合がありました。
Serene Bach 版については、以前同様の指摘を頂き、修正したアーカイブを公開していたつもりでしたが、アーカイブを配置する際に新旧のアーカイブを間違えて配置していたようで、不具合が解消されたアーカイブをダウンロードできない状態になっておりました。大変申し訳ございません(←勘違いでしたらすいません)。
先ほど、Serene Bach / sb 両方のテンプレートアーカイブを作成して、リンクを設定し、公開リンクから再度ダウンロードしてそれぞれ正常に動作することを確認しました(正常に動作しない場合はご連絡ください)。ダウンロードのリンクに「20051225」が含まれているものが最新バージョンです。それ以前にダウンロードされた方については再度ダウンロードくださいますよう、よろしくお願い致します。
なお、既にテンプレートをカスタマイズされている方につきましては、修正点のみを別途お知らせする予定ですのでお時間ください。
入門Ajax
Ajaxの書籍が、少ないながらも書店に並ぶようになってきました。
Ajax の大きなメリットは、クライアント-サーバ間でのデータのやりとりが非同期通信(サーバにリクエストを送ると、「リクエストを送ったよ」という素早いレスポンスがクライアントに返却されて、実際のレスポンスは後から返却される)で行われる、ということですが、やりとりされるデータ自身よりも、サーバとの通信によってブラウザが待ち状態にならないことが Ajax による大きな恩恵です。
たとえば通常の同期通信であれば、フォームにデータを入力して送信すると、リスエストをサーバに送り、レスポンスがページに反映されるまでユーザはブラウザを操作することができません。Ajax を使えば、フォームデータ送信直後に次のブラウジングを行うことができます。ここで重要なのは、Ajax のレスポンスはページの一部に反映されるということです。フォームデータの例では、入力したフォームデータの結果は(JavaScriptを利用して)ページの一部分だけを入れ替えるということです。
・・・という仕組みが今ひとつよく理解できていなかったので、下記の1冊を購入しました。
高橋 登史朗 ソフトバンククリエイティブ (2005/11/15) 売り上げランキング: 65,811 |
内容は Ajax の基本的な説明や利用方法の他、文字コード・クロスブラウザやセキュリティ対策(クロスサイトスクリプティング・イジェクション)の注意事項がきめ細かく掲載されており、XMLHttpRequest部分についてはそれらを考慮した実用的なサンプルが掲載されています。
テキストを扱った基本サンプルでは、Perl/PHP/bsh/MySQL/SQLiteを利用した通信方法や、onclick・onmouseover等のイベント別のサンプルが詳細に記されており、ドラッガブルフロートやスライダー、ドラッグ&ドロップといったビジュアルなサンプルも載っています。その他 XMLHttpRequest リファレンスや Google Maps のカスタマイズ方法とAPIクラスリファレンスもありますので、これ1冊あれば Ajax の動作を色々楽しめるのではないでしょうか。
テンプレートご利用500サイト達成
Category:[ご利用サイト]
Tag:[Anniversary, MovableType, SereneBach, Template, Website]
Permalink
当サイトで公開しているテンプレートのご利用者(コメント・トラックバック・BlogPeople等の登録で私が知ることができたもの)が500サイトを超えました。月並みではございますがご利用くださっている皆様には本当に感謝しております。この場をお借りして改めまして御礼申し上げます。ありがとうございます。m(__)m
上記で知り得たサイトについては「小粋なUserList(BlogRolling 使用)」に私が手動で日々登録しているのですが、途中で他のテンプレートに乗り換えられたり、URLが変更になったりすることも当然ある訳で、時々メンテナンスしながら登録ユーザ数をチェックしています。
小粋なUserListの詳細についてはテンプレートについてのページの中ほどの説明を参照ください。
これまでは mixi の「小粋なユーザコミュニティ」のメンバーの方々にチェックを分担してお願いしてましたが、今回はチェックツールを作りました。具体的には、まず BlogRolling のリストをツールに読み込ませ、サイトのトップページを取得します。そこからさらにCSS(styles-site.css等)を取得し、そこに記された著作権表示を認識してテンプレート利用状況を判断するようにしています(目視による最終チェックは必要ですが)。これによってチェック稼動がかなり削減されました。
ということで、500サイトをややオーバしておりますが、現時点でのご利用サイト様を紹介させて頂きます(BlogRollong 表示順です)。タイトルは登録時のタイトルを基本にしておりますが誤り等ございましたらご連絡ください。
登録漏れ等ありましたらご連絡頂ければ幸いです。またここに紹介されていない公開テンプレートご利用の方についても、ご連絡頂ければ適宜登録させて頂きます。
- * cerise cafe *
- **つれづれなるままに**
- **読書日記**
- **Silver Heart**
- *kirara
- + 馬グナカルタ +
- + spirit ether blog
- + spirit ether blog
- ++ Bay Leaf ++
- ++お花ダイスキ!++
- ++Blog-MELL++
- ++猫な日々++
- ++Open My Heart++
- +みゅみゅうさ+
- +occhiali di libellula+
- -h@tezone-
- ...: laugh so rough :...
- /PEN/
- /var/tmp/blog
- 137g
- 246log
- 4REAL
- 5587.chan.com
- 77racing.com
- : : useful days* ? : :
- ::::fuumblog::::
- ::miim::
- =ハマルノカ=
- =TA*KA blog=
- a n i
- AF系製薬 Web出張版
- AMBITION&DESIRE
- AmitoMidnight
- angeli-x ++ monologue
- 『ブタネコのトラウマ』 Blog版
- あそび
- あっぷるじゅ?す
- あどべがの館
- あふなびブログ
- あらぐさ
- いるうるいなさび
- いろんなことが起こる
- うたたね ひつじ
- うだうだうだ
- えすろぐ
- えてぽんの部屋
- おうち日記とアフィリエイト
- おさんぽ ことり だより
- おっさんのブログ(仮)
- おでこちゃんの金魚飼育日記
- お取り寄せ日記@petit*asterisk
- お気楽ブログ☆
- お気楽草紙
- きらきら*ひかる It shines glitteringly.
- くろねこ屋
- たおふあZ
- ちっちっち
- ちとGo!Go!
- つのとカブいっしょに
- てぃあら
- とも。日記
- とりあえずいっとけ!?
- とりあえずいっとけ!? Tigers
- とりとめなき日記
- どうでもいいこと
- にゃ?ごろ
- にやりっ日誌-niyari official blog-
- のんべサラリーマン
- はいねぶ
- ひばり座ブログ
- ひびのつぶやき
- ふたつとない日常 ?Azumy's Standard Daytime
- ぶーくろぐ
- ぷちぷちつづり
- ほげほげ情報ブログ
- ほたるすたいる
- ぼくたび BLOG
- ぼけぼけ☆こむ
- ぽこたのきもち
- まさやん日記
- まんがboo(漫画部)
- まんぼう亭
- みた夢メモっちゃいけないか?
- やしめしや
- やっつけWeb
- やむやむ
- ゆきのきもち
- ゆたんところ
- よろずブログ
- りとるこっと。blog
- りゅうWalker Log
- るしゃなーず・ごーすとうぃすぱー
- わいるどで行こう
- わたあめすもも
- わたしのヒトリゴト あさきぬ工房
- アイドルの草鞋
- アルの足跡
- アルファ道場2005
- アレルギー・アトピーでも楽しく暮らそう!
- エンタマ
- オナカン
- オラっちの気ままな毎日
- オラっちの気ままな毎日
- カメラと一緒にパリでお散歩*
- ギャンブル三昧!
- ケセラセラBrand-new!
- コスメ&ビューティー::銀座ショッピングストリート
- コハルビヨリ。
- ジンク・ホワイト
- スイフトスポーツドットコム
- スパムメール・バトルロワイヤル
- ダイエットアラモード *TIME*
- ダンス図書館
- チエコエトセトラ。
- チカチカの羅針盤
- チョコチッブログ
- チョーオンパホーソーキョク
- ツキヘノトビラ
- デジタルカメラ.com
- ドール・ヒステリア
- ナイショの話
- ナリモノイリ
- ニート・ひきこもりのための経済的自立
- ネタを探して2万マイル!?
- ネットショップ・オペレーション・マニュアル
- ハンサムウーマン道
- ヒビノキロク
- フラワーガーデン::銀座ショッピングストリート::
- ボクはちゃんとビジネス本読んでます!
- ポポタム!
- ヤタさんの気まぐれ日記
- ユートピアンのディストピア
- ヨーキーな日々♪
- ラパンdeドライブ宙-ケータイ大好き-
- リラックマ・ショッピングモール
- リリウムの寝言
- レジェンダロッサの独り言
- ■□ WAY OF LIFE □■
- ▼■▼■● Vivid-style.com
- ××ってやつは・・・
- ○△□ たど船
- ★ひとりごと日記★
- ☆Starlit Sky☆
- ☆昴流の旅日記☆
- ♪poohな毎日♪
- baddreamfancydresser
- beads gallery h*h
- BEAT ZONE
- beautiful hobby life
- Biei.Info|blog
- BLAN*CAFE
- Blog
- blog _ notation of the wave
- blog(吉田敏彦建築設計室)
- blog::made in SAGA
- Blog@Peaceman
- Blogのような日記のような
- Blue Mint
- BLUE PALETTE
- bo-peep.net/web
- BorialisのBoroBoro日記
- bublog
- c+
- cache*cache
- Cafe*Blog
- camera verde blog
- candy-2 BLOG
- Car Life Sentence
- Caramelly*note
- Carefree Field
- CAROUSELAMBRA
- ch@yalog
- Channel * chris
- Cherry-Radio
- chieplus.net
- cider@home
- ClumsyKen
- Cococcino Days*
- Cocont*
- CocoNuts Days
- COLOR NO.A
- comi☆Log.
- cookietale
- Cool Gaming weBlog
- Coolog
- cube*
- cyber muimui
- 無線LANテック
- 無印スタイル
- 特別支援教育とAT(支援技術)とICT
- 独り言・・・
- 猫派の読書空間
- 痔.com
- 砂風呂
- 社会分析的ブログ
- 秀丞写文庫
- 私立大学職員の情報オフィス
- 空の追憶
- 空飛ぶカメ
- 立夏黄経45度
- 童貞Game...
- 紅玉日誌
- 縁側生活
- 縁側talk
- 繰り返す女
- Daily note
- daisuke's room
- DayByDay
- DAYS ...So Flowers
- DB blog
- DIGITALL!!
- Document_Not_Bound...
- DORA Blog
- dotabata.net
- dreaming purple blog
- DxD
- D'sDinner@Blog
- Страх Кино
- EgoEco Days...
- eizo slash blog
- ELECTRICSHEEPdogs!
- emo.com
- en ce momont...
- Ensemble Hearts'
- eSoteric・・・
- Eternal Forest ?悠久の森?
- everyday gokigen !?
- ExcessiveWords
- Exist a Reason
- existence Uhheri Edition
- EXPECT THE UNEXPECTED
- E's World "Neo"
- 適宜更新
- 職人カタギ
- 脳内物質大流室inBLOG
- 重箱のスミ
- 銀座ショッピングストリート
- 銀座フワラーガーデン
- 芽衣のひとりごと
- 萌えABLEタイプ
- 長靴をはいたシステムエンジニア
- 藤丸
- 院長室
- 雑貨*Zakka*サーチねっとMEMO
- 零式改
- 青い自転車とどこまでも。
- 螺子式少年
- 馬に蹴られて
- 読書マインドマップ公開所
- 身近な Lifelong Learning
- 黒スムチの親バカ日記
- 黒鱒 - weblog
- fang-lang.net
- Feels good
- Final One's Essence
- flatcrew.net : column
- FootPrint
- Fourseasons
- FreeStyle
- Frumenty
- Gachapin WALL
- Gangalee Web Log
- GF*days
- ginzi.com/blog
- GRACE! Diary
- groovecube ver.3
- grumble
- happy hunting ground
- Happy*Days
- Harry's Blog
- HATABOW.JP
- HENO HENO
- hidakaya Weblog
- hilari blog
- HiMAT
- hiratsuka.memo
- HiStyle
- HONGKONG+fish Hyper×2
- Hot cocoa
- hotmilk
- I LOVE NAVY
- IdeOnline
- IIS ECサイトレビュー
- In Some Way
- infocraft
- INSIDE ADORE
- is life delisious?
- ITOH STYLE
- It's my Life
- *だらだら雑記*
- :: monamona* ::
- ::: Sweet days :::
- MTおぼえがき
- MakkyののほほんDiary♪
- SecretBase Of ワンs
- SEと呼ばれている奴の気ままなブログ
- ?風を追いかけて?
- Just myself
- K-Jirow BLOG
- kanemotipapa’s日々相場雑感
- karleksounds
- kazunoblog
- KeiBlog
- kenronw(ケンロン)のブログ
- KG
- kg2
- KH Weblog
- KillerPierce
- KINGO WEBlog
- kitchen
- KoreanLanguage*
- Kuro:Neko Diary
- K'S GARDEN
- K'z Blog
- land2go!!
- langsam
- L・E・L・S
- Little Satellite
- love
- LOVE SWIMMING Blog
- LUC-XX
- LUVandSOUL-FAN.com
- M E T A B O L I S M
- M*C?B Version?
- M*s Cafe-Blog-
- Magic White
- Magic#32のMT日記
- Maio's Weblog
- maki's space
- Makologg???
- Mami's note
- Marginalsky
- Marrontic
- mattari-blog
- Mauloa Mele
- memorandum
- MepageType
- MetLog
- MIKI Housing
- Minologue
- Mistgrass Weblog
- Misty Night
- mobilepcclub
- monochrome green
- Monochrome Recollections
- Monolith-Log モノリスログ
- MONOLOGUE
- MT専科
- my style*
- My Sweet Moana
- My wonderful living
- Myth Online
- N-blog
- Nachtigall
- Natural High
- nau-magazine
- NAVY WATER
- neko no 肉球@BLOG
- Nero-8 Archives
- Nessun Dorma
- NGのひとりごと
- niigata-boro.net daily-r
- NO DOUBT
- Nobuの日々お蔵出し
- nobubu Eyes
- nobubulog
- nonvlog from nonvey
- NOP DAYS
- Not yet!
- N's blog
- Omusubi Kororin
- Orbium
- Ordinary Person Monologues::
- org_blog.
- Otakara CAT Photo Blog
- O.Z.K
- parallax
- parallax・はぐれ日記
- patapata:blog
- PCと戯れる日々
- Peco Net
- PHAT∴LOVESICK
- Plating!
- Postposition.Net Blog
- Press-code.net
- Pretty*Days
- primary_secondary
- Project MultiBurst
- Pubsonal パブソナルを考えるブログ
- P's Blog
- Rabbit's Room
- RAINBOW
- Rainy days, Sunny days DB
- Release Candidate 2
- RELISH Cafe
- rey&rio's sleepyblog
- Routinework Blog
- SAKALOG
- SAKSAK RECORDS WEB SITE
- saku*saku
- Sampei's Private Room
- Sans-Souci
- Sanssouci
- Schrödingers Katze
- se a vida e
- SEYA.ORG
- Shady Grove
- Shout!!
- Shout!!
- showry's Blog
- SHO's**My...Day...**
- Sketch Line
- Sky High!
- skyimage / Blog
- sleepyblog
- Small town talk
- smile.shioiri.jp
- SnowDrop
- solgel.info::そるじぇるどっといんふぉ
- Sono's Every day
- SR ** P i c k U p **
- STARLIT SKY
- SUNDAY MORNING BLUE
- Suzie World
- SWEET WATER Web Server
- Sweet*Season
- swimmer's blog ver. 2.0
- TAKE IT EASY. つれづれブログ
- TAKUHAI ATHLETE
- teaspoon
- ten-don ?天丼?
- TENERE
- teraRhythm
- The Simple Outdoor Life
- TOKYO Runabout
- Touring Report
- ToyBox
- Treasure
- TsBlog
- TUMIを買う TUMIを使う
- type le bleu :: provisoire*
- Ui-ed
- Un deux trois*days
- Unknown
- vanilla_cafe*
- WAY TO GO
- Weblog -Selfish-
- weblog@nigiyakana jikan
- WEBLOGROOVE
- We're Murderer
- wobb.jp
- WORK NOTE BLOG
- World without Words.
- yamacot
- Yggdrasill.
- YUIHARU DIARY
- zerothree.blog
- zone-log
- zora*
- [ Slow ”UO” Life ]
- [美]Musabi Diary - a-bit-
- [EF] Electric Flower
- [ms-net] blog
- 再起業に向けて
- 出張生活
- 出来るだけ、更新です。
- 匠悟録
- 南茶亭
- 和道楽日記 - Kazulog -
- 和尚の南無ログ
- 喜怒哀楽
- 夏のクラクション
- 夏海の恋愛事情。
- 大泉洋とどうでしょうな日々
- 天上月苑
- 嫌ならやめてもいいんじゃよ?
- 子供達は夜の住人
- 学生団体 IdeAct
- 宵待小桜餅
- 寝言、戯言、独り言。
- 山の茶店の珍道中
- 山吹の風
- 己でサイトジャック
- 帰宅部大学生のblog
- 幻想バイオレンス
- 広く、浅く、そして楽しく。
- 弁慶の舞台裏
- 彫刻道-ドイツ・彫刻・日記-
- 後藤真希 ワオワオ記念日
- 徒然なるままに・・・(?はるかなる日々)
- 'ohana
- 恵司日記
- 我楽
- 携帯アフィリエイト奮闘記
- 改訂★裏赤玉号[改]日誌
- 日々気まま(^^♪
- 日々一歩-裏-
- 日々之吉日
- 明るい鬱病人間のふらふら雑記帖
- 時は流れても・・・
- 暮らし*カフェな節約生活
- 暮らし快適!ナチュラル家事のススメ
- 月夜の浜辺
- 本日のおすすめ !!
- 東京ディズニーリゾート裏技完全攻略検定 情報局 Blog
- 東京西郊日誌
- 林檎と一緒に
- 残像
- 気が向いた時だけ
- 気になる記
- 気まぐれ日記
- 水耕栽培を楽しもう
- 水色飴
- 永遠の風
- 海苔部落
- 深い雪
- 三十路パパの子育てライフ*
- 世界の終わりは君と一緒に
- 世知辛い世の中ですから(´・ω・`)
- 温泉天国
- 人間万事塞翁が馬 で行こう
- 今日の覚え書き
- 伊豆潜人の独り言
- 住宅選び情報ナビ
- 激安!サーフショップ
- 信海忠如どっとこむ
- || UTAGAME ||
著作権表示の西暦をリアルタイム化する
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クラスセレクタとして利用している場合は、表示に影響する可能性があるのでご注意ください。
公開テンプレートにフッタを追加する
公開テンプレートのカラムレイアウトの下に著作権表示等のフッタを追加するためのカスタマイズです。スクリーンショットは固定レイアウトにフッタを追加したものです(フッタ部分のみ切り取って表示させています)。
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 © 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 © 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 も一部変更しました。
HP Compaq nx4820/CT Notebook PC
そろそろ年末ということで、実家への帰省を予定しています。
が、実家には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台ほどが積み上げられているという嬉しい状態。改めて現物を確認して気に入りました。
店員さ

