Operaが10周年記念パーティーでライセンスキー無料配布中
すでに話題になっているようですがこちらでも。
下記のURLにアクセスして本文右上のリンク「Go Free Now!」をクリックして、次ページで自分のメールアドレスを設定して「Submit」をクリックすればライセンスキーが表示されます。
表示されたキーをOpera の「へルプ」 → 「Operaのライセンス登録」の項目で設定すれば完了です。8.01日本語版および8.02英語版でOKでした。
なお配布期限はパーティー終了までということらしいので急いでアクセスしましょう。
Tag Cloud のページを作る
Category:[その他]
Tag:[Customize, MovableType, MT-XSearch, Plugin, Tags, Tagwire]
Permalink
Tag Cloud(左画像)のページを作るカスタマイズです。
注:3.3 以降はエントリー・タグが標準機能として用意されていますので、本カスタマイズを行わなくても Tag Cloud のページを作ることができます。
当サイトを訪れてくださるカスタマイズ志向の方であれば下記のページ、一度はご覧になったことがあると思います。
そのページにある説明を引用します。
このページは、そのキーワードをアルファベット順に列挙し、文字の大小でその出現頻度を示したものです。興味があるキーワードがあれば、そのキーワードをクリックしてみてください。そのキーワードが設定されているエントリーの一覧が見られますよ。
「キーワード」とは、エントリーのキーワード欄に設定された文字列(以下タグ)を指しています。ひとつのエントリーに対して複数のタグを設定することもでき、同一のタグが複数のエントリーに設定されているほど「(タグの)出現頻度が高い」とみなされます。
引用文に書かれている通り、Ogawa さんのこのページではタグのリンクをクリックするとタグに関連づけられたエントリーの一覧を表示する仕組みになっており、サイト内の情報分類および閲覧機能として非常に優れたものであると感じています。
仮にそれを差し引いてもこのアートな印象のページに強く惹かれてまして、このサイトでもようやくTagsを設置しました(キーワードがほとんど設定できていませんので正式にリンクさせていません)。
このカスタマイズを行うためには Ogawa::memoranda さんのサイト、都合3つのエントリーを横断する必要がありますが、このエントリーで設定手順をまとめてみました。なお SixApart より「Tags Plugin」というものが少し前にリリースされていますが、こちらはキーワード欄に記述されたタグをカテゴリーとしてひとまとめにしてしまうようです。カテゴリーと独立した分類を行うのであれば Ogawa さんのプラグインをお勧めします。
1.Tagwire Plugin プラグインのダウンロード
下記のページより tagwire.zip をダウンロードします。
アーカイブを解凍して tagwire.pl を plugin ディレクトリにアップロードしてください。
2.MT-XSearch プラグインのダウンロード
下記のページより mt-plus version 1.01 をダウンロードします(「Download mt-plus」のフォームボタンをクリックします)。ダウンロード前にセレクトボックスで該当のアーカイブ形式(Windows または UNIX/Mac)を選択してください。次のページで「I accept the mt-plus licensing terms.」をチェックして「Continue>>>」をクリックします。
Appnel Internet Solutions:Download mt-plus
アーカイブを解凍して、下記のファイルをそれぞれ同じ名称のディレクトリにアップロードしてください。mt-xsearch.cgi はCGIPath(mt.cgi があるディレクトリ)にアップロードします。
- mt-xsearch.cgi
- plugins/mt-xsearch.pl
- extlib/MT/XSearch.pm
なおアップロード前に3項を実施してください。
3.パッチの設定
下記のエントリーの2項を参考に、mt-xsearch.cgi と mt-xsearch.pl にパッチ(ソースコードの修正)をあててください。
TagwireとMT-XSearchによる動的タグアーカイブ
「パッチをあてる」の具体的な作業は、上記リスト内の行の一番左に「-」がある行を消して、「+」の行を追加すればOKです(「---」や「+++」の行は関係ありません)。
4.テンプレートモジュールの作成
先ほどのエントリー
TagwireとMT-XSearchによる動的タグアーカイブ
の3項の設定を行います。具体的には管理メニューの「テンプレート」をクリックし、次のページの一番下にある「テンプレート・モジュール」欄の右にある「新しいテンプレート・モジュールを作る」をクリックします。次のページで下記を設定します。
- テンプレートの名前:XSearch Tagwire
- このテンプレートにリンクするファイル:空白
- テンプレートの中身:3項にあるリストを丸ごとコピー&ペースト
設定が終わったら「保存」をクリックします。このテンプレートはタグのリンクをクリックした後に動的に生成され、エントリーの一覧として表示されるページになります。
5.Tags テンプレートの作成
Tags の一覧を表示するページのテンプレートを作ります。
管理メニューの「テンプレート」をクリックし、次のページで「インデックステンプレート」欄の右にある「新しいインデックス・テンプレートを作る」をクリックします。次のページで下記を設定します。
- テンプレートの名前:Tags(何でもいいです)
- 出力ファイル名:tags.html
- このテンプレートにリンクするファイル:空白
- 再構築オプション:チェックする
- テンプレートの中身:下記のページにあるリストを丸ごとコピー&ペースト
設定が終わったらとりあえず「保存」をクリックしてください(次項で修正を行うので再構築は後で結構です)。
6.テンプレートの修正
前項で設定したテンプレートから4項のテンプレートモジュールを呼び出せるようにするために、テンプレートの一部(アンカー)を下記のように修正します。修正箇所を青色と赤色で示しています。
修正前
<ul id="tags">
<MTTags>
<li title="<$MTTag$>:<$MTTagCount$>:<$MTTagDate format="%Y-%m-%d"$>"><a
title="Tag: <$MTTag$>"
href="<$MTBlogURL$>tag/<$MTTag encode_url="1"$>"><$MTTag$></a></li>
</MTTags>
</ul>
修正後
<ul id="tags">
<MTTags>
<li title="<$MTTag$>:<$MTTagCount$>:<$MTTagDate format="%Y-%m-%d"$>"><a href="<$MTCGIPath$>mt-xsearch.cgi?blog_id=<$MTBlogID$>&search_key=Tagwire&search=<$MTTag encode_url="1"$>"><$MTTag$></a></li>
</MTTags>
</ul>
修正が終わったら「保存」「再構築」を行います。修正部分のソースは下記のページの「使い方」の中にある「タグアーカイブリンク:」のソースの一部を利用しています。
なお本修正を行わずに .htaccess を利用してジャンプする方法もありますので、詳細につきましては
Ogawa::Memoranda:TagwireとMT-XSearchによる動的タグアーカイブ
を参照ください。
表示用ページに関する設定は以上です。ここまでの状態で tags.html を表示してみます。画像のようになっていればOKです。 |
7.エントリー編集画面の変更
エントリーにキーワードを設定できるようにします。デフォルトのエントリー編集画面ではキーワードを入力できないため、編集画面(新規エントリー・任意のエントリーのどちらでもOK)の下にある「この画面の表示をカスタマイズする」をクリックします。表示されたウィンドウで「カスタム」を選択し、表示したい項目をそれぞれチェックします。この時「キーワード」を必ずチェックしてください。設定が終わったら「保存」をクリックします。
余談ですが「ボタンの表示場所」を「ページの上と下」を選択するとフォームボタンが上下に表示されるので結構便利です。
8.「キーワード」の設定
エントリーのキーワード欄にタグを設定して保存します。ここでは「MovableType」と入力してみます(半角空白は含めないでください)。
複数のタグを設定する場合、基本的に空白文字が区切り文字となります。したがって「Movable Type」と入力すると「Movable」と「Type」という2つのタグとして認識されます。ひとつのタグとして認識させたい場合はブラケット([])やシングルクォート、ダブルクォートで括ればOKです(例えば[Movable Type]等)。日本語の設定も可能です。
設定の詳細につきましては、
Ogawa::Memoranda:Tagwire Plugin
の「タグ形式」の項をご覧ください。
9.動作確認
エントリー保存後、tags.html を表示してみます。画像のように「MovableType」が表示されていればOKです。表示されない場合、5項の設定で「再構築オプション」がチェックされていない可能性がありますのでご確認ください。 |
また、tags.html に表示された「MovableType」のリンクをクリックし、次のページで画像のように表示されれば全て完了です(エントリータイトルは「てすと」で試しています)。 |
以上です。
CSSにつきましては各自でお好みのスタイルを設定してください。
ウーマンcasTY・ダジャレ大作戦2005
「ウーマンcasTY」は、東京電力の光ファイバーインターネットサービス「TEPCOひかり」を利用して発信しているブロードバンドコンテンツ「casTY」の中にある、美容・料理・育児・占い・クチコミ等を中心とした、女性のお役立ち掲示板コミュニティです(説明は一部公式サイトより引用)。
コラムはいくつかのサイトのダジャレが紹介されており、どれも傑作?揃いです。個人的には英語のダジャレが新鮮でした。ダジャレは世界共通の文化なのでしょうか。
システム手帳「包み込む手帳(バイブルサイズ)」
池袋・東急ハンズに用事があって行ってきました。目的のものは購入できたのですが
- 「そういえばシステム手帳でも探してみよう」
と、以前のエントリーで書いたことをふと思い出して物色してみることに。
とはいったものの、バイブルサイズのシステム手帳、革製で外観がどれもカッチリした形のものはあまり食指がそそられないのです。表面が綺麗すぎると過度に大事に扱ってしまい、逆に使いずらいというのがその理由です。かといってナイロン製のものはごつごつしてややかさばる印象が否めません。
つまり個人的にはもっとルーズな感じで気兼ねなく使えるものがいい訳ですが、これまでにそのようなものにお目にかかったことがありません。
「何十種類と置いてあるハンズもないか…」と思いつつ探していると、一番下の列に飾られていた一冊のシステム手帳が目にとびこんできました。
|
|
ということで、これぞまさに私が探し求めていた(といっても今日だけですが)ものです。商品は「売り切れ」と書かれていたのですが店員さんに聞いてみると「入荷されています」とのこと。色はダークブラウン(画像)と、サンプルで置かれていたブラックの2種類があり、一発で気に入ったブラックを選びました。またバイブルサイズの他にミニサイズもあります。
後で楽天の公式サイトで知ったのですが、雑誌でも紹介されているようで、バイブルサイズは現在売り切れ(予約注文)状態のようです。
全然関係ないですが、KNOXは輸入ステーショナリー等も扱っており、ミスター・ペンホルダーがなかなかの好印象です。
ということで久しぶりの衝動買い。個人的にはジロンカ・スメルキラー以来のヒットです。リフィルも一緒に購入しまして、昔使っていた頃は来年のリフィルって12月に買いに行っていた記憶があるのですが、すでに各社より販売されていました。
もちろん2005年のリフィルも買いました(おいおい…)。
Movable Type 3.2 リリース間近
公式サイトで3.2の正式版リリースについて明朝発表されるようです。
we will be announcing the general release of Movable Type 3.2 tomorrow morning.
3.2の情報については greenplastic.net さんの訳文を参考にさせて頂いておりまして、ここに紹介させて頂きます。
- New in Movable Type 3.2: A home for administrators
- The Feedback Rating System in Movable Type 3.2
- Movable Type 3.2's Junk Folder
- Trackback moderation and editing
- Blog Feedback Settings in Movable Type 3.2
「ジャンク・フォルダ」の訳文に「旧友への新しい反応」という言葉が出てきて最初分からなかったのですが、これは「SPAM」を『旧友』と皮肉っているのではないか」と気がつきました。
ちなみに当サイトでは3.2用の公開テンプレートを現在製作中です。進捗的には個別エントリーアーカイブ/コメント・プレビューは8割方できているといったところです。スタイルシートも若干見直しておりますので他の全てのテンプレートを含めると公開できるまでもう少し時間がかかりそうです。
ギターでスーパーマリオブラザーズ
下記のエントリーで面白いものが紹介されていました(とりあえず「ギタリスト」という単語に鋭く反応)。
この中でスーパーマリオブラザーズの曲をエレキギターで演奏している画像とスーパーマリオ世界最速クリアする画像がそれぞれ紹介されています。随分前から話題になっているようですが、知りませんでした。引用元および元記事はそれぞれ下記のようです。
ということで堪能させて頂きました。世界最速クリアは不可能ですが、ギターの方は弾けそうかも(すいません、嘘です)。
以下、引用元・参考記事です。
サイドメニューの折りたたみ(v5.0:ゆっくり折りたたむ)
Category:[サイドメニュー, 折りたたみ]
Tag:[Ajax, Customize, Folding, JavaScript, MovableType, SideMenu]
Permalink
Google Mapsや Googleサジェスト で一躍有名になった Ajax(Asynchronous JavaScript+XML:エイジャックス) ですが、Ajax用JavaScriptライブラリを利用してサイドメニューをゆっくり折りたためるようにしてみました。
公開テンプレートを用いたサンプルを作りましたので、実際の折りたたみ動作をご確認ください。固定3カラム・可変3カラムを右上のリンクで切り替えられるようにしています。
本カスタマイズで参考にさせていただいたのは下記のサイトです。ありがとうございました。
- Ogawa::Memoranda:"Subscribe with Feedbringer" Bookmarklet
(FEEDBRINGERを知るきっかけ) - FEEDBRINGER
- nekobara カルゴルニア・ジョン:Ajaxサンプル with Google Maps
なお、本カスタマイズはサイドメニューの折りたたみ(v4.0)を前提にカスタマイズしていますので、新たにサイドメニューの折りたたみを導入される場合はサイドメニューの折りたたみ(v4.0)のカスタマイズを行ってください。
また折りたたみマークで折りたたむようにしている場合の動作は未確認ですので予めご容赦ください。
1.Ajax用JavaScriptライブラリのダウンロード
Scriptaculous のページへジャンプし(接続できない場合は2項へ進んでください)、上の方にある downloads というタブをクリックします。次ページの右側にある Archived Versions の1.1b1 の zip または tar.gz のリンクをクリックしてください。なお他のバージョンでは動作しませんのでご注意ください。
ダウンロードしたアーカイブを解凍し、src というディレクトリに
- controls.js
- effects.js
- dragdrop.js
の3つのファイルがあることを確認してください。この中から controls.js と effects.js を使います。
次に、downloads タブをクリックした次のページの本文にある Prototype JavaScript library のリンクをクリックし、次のページの Just the .js, please というリンクをクリックして prototype-1.3.1.js をダウンロードします(バージョンは2005年8月24日現在)。保存する時、または保存後、ファイル名を
prototype.js
に修正してください。
2.Ajax用JavaScriptライブラリのダウンロード
(1項が×の場合)1項で Scriptaculous に接続できない場合は、下記のページより取得してください。
Ruby on Rails:/spinoffs/scriptaculous/
取得するのは下記の3ファイルです。
- prototype.js
- controls.js
- effects.js
prototype.js は lib/ のリンクをクリックして、次のページの prototype.js をクリックします。次ページでソースが表示されますのでマウスコピーし、任意のエディタで新規ファイルを作り、そこにペーストして prototype.js というファイル名で保存します(コピーする範囲に注意してください)。文字コードはブログと同じ文字コードが無難です。
他の3ファイルは、最初のページに戻って src/ のリンクをクリックします。後は prototype.js と同様の方法で保存してください。
3.menufolder.js のダウンロード(Ver4.00以下の方のみ)
下記の download をクリックして、次のページで menufolder.js をクリックして menufolder.js(Ver5.00) をダウンロードしてください。
4.スクリプトの修正
デフォルトの状態では正常に動作しない(折りたたみタイトルが変に表示される)ため、以下のいずれか片方のみを実施してください。修正方法は妥当でないかも知れませんので予めご容赦ください。
4.1 protptype.js を修正する
任意のエディタで prototype.js を開き、「show: function」で検索し、そのちょっと下の部分に青色の「block」を追加します。
show: function() {
for (var i = 0; i < arguments.length; i++) {
var element = $(arguments[i]);
element.style.display = 'block';
}
},
4.2 menufolder.js を修正する
任意のエディタで menufolder.js を開き、一番下から 50 行ほど戻ったところにある
Element.show(effect.element); // prototype.js 修正要
// element.style.display = 'block';
の赤色部分を削除して、その上の行の先頭に、青色のように
// Element.show(effect.element); // prototype.js 修正要
element.style.display = 'block';
とコメントマークを追加します。
5.スクリプトのアップロード
上記の4ファイルをローカル・サイト・パス(index.html が置かれているディレクトリ)にアップロードします。
なお、menufolder.js については6項の設定を行った後でアップロードしてください。
6.テンプレートの修正
折りたたみを行いたい各テンプレートの <head> ? </head> の部分に青色部分を追加します。
<script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>effects.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>controls.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>menufolder.js"></script>
7.折りたたみ速度の設定
menufolder.js では全てのメニューに対して一括してゆっくりにする方法と個別に設定する2通りの方法を用意しています。
7.1 全てのメニューに対して一括してゆっくりにする
menufolder.js の下記の赤色部分を slow に修正してください。デフォルトは normal になっています。 テンプレートで FoldNavigation を起動している部分の変更は不要です。//-----------------------
// 折りたたみスピード
//-----------------------
// 通常:'normal'
// 遅い:'slow'
var speed = 'slow';
7.2 個別に設定する
ゆっくり折りたたみたいメニューリストの下に下記の記述を追加します。
<script type="text/javascript">
<!--
FoldNavigationSlowly('idName','initState',viewListNumber);
//-->
</script>
すでにご利用中の方は
FoldNavigation('idName','initState',viewListNumber);
の FoldNavigation を FoldNavigationSlowly に変更してください。
赤色部分については menufolder.js マニュアルの3項を参照してください。
設定が終わったらテンプレートを保存・再構築してください。設定が正常にできていれば折りたたみ動作が変わっているはずです。
8.折りたたみスピードを変更する
サンプルの折りたたみ速度はデフォルトよりやや速くしています。速度を変更する場合は、effect.js の下記の赤色部分を変更します。
Effect.Base.prototype = {
setOptions: function(options) {
this.options = Object.extend({
transition: Effect.Transitions.sinoidal,
duration: 1.0, // seconds
fps: 25.0, // max. 100fps
sync: false, // true for combining
from: 0.0,
to: 1.0
}, options || {});
},
単位は「秒」で、デフォルトは「1.0」(つまり1秒)なので、これを「0.5」等に修正すれば動作が早くなります。
9.その他
公開テンプレートはサンプルでご覧の通り正常に動作します。BlogPeople 等のリンクリストを overflow 指定でスクロールさせている場合も問題ありません。
折りたたみ動作で開く瞬間と閉じる瞬間に点滅するような場合は1行目の
<?xml version="1.0" encoding="utf-8"?>
を削除してみてください(取り除くことで正常に動作することを確認しています)。
またサブカテゴリーリストの折りたたみは不具合があるようです(原因不明)。また他のCSSを用いられている場合、設定?によってスムーズに動作しない可能性があります(原因は究明できておりません)ので予めご容赦ください。
また折りたたむ動作はメニューリストの上下 margin が少ない方がスムーズに動くようです。
以上です。
2005.08.25
折りたたみ時に発生する不具合を解消するための4項を追加しました(既知の事象でしたが本文に盛り込むのを忘れておりました、すいません)。
2005.11.01
折りたたみ時にメニューリストが点滅する場合の対処を9項に追記しました。
2007.10.25
6項のソースコードについて、JavaScript エラー回避のため、controls.js と effects.js の順序を入れ替えました。
豆乳
1年ほど前の「あるある大事典」で紹介されて以来、健康増進の意味で豆乳を時々飲んでいます(一時期飲んでない時期があったのですが、最近また飲み始めました)。
豆乳は「無調整豆乳」「調整豆乳」「豆乳飲料」の3種類に分類され、無調整のものが有効成分を最も多く含んでいます。調整豆乳や豆乳飲料に比べると決して美味しいとは言えませんが、ヨーグルトとパイナップルジュースを混ぜて飲むと結構デザートっぽい味になります。
値段は牛乳よりやや高めなので、他に比べて値段が手ごろな「めいらく無調整有機豆乳」というのを好んで買ってます。
この「めいらく」の豆乳、形は1?牛乳パックと同じですが、牛乳パックのように上側の片方だけを開くのではなく、両方、つまり全開にしないと口がうまく開かない構造になっています。これが結構面倒だな、と思っていたのですが、ちょっと前から画像のように注ぎ口がついたものが出回り始めました。
ちょっとしたことなのですが大変便利になりました。
余談ですが、「めいらく」はあの「スジャータ」と同じ会社だったということを公式サイトで知りました。「スジャータ」という名称は、
長期間の修行に疲れて休息していたお釈迦さまに牛乳をさしあげたというインドの娘の名前「スジャータ」からつけました。スジャータという商品名には、皆様にコーヒーをよりおいしく召し上がって頂くためのフレッシュでありたいという願いが込められています。
ということらしいです(公式サイトからの引用)。
さらに余談ですが、この「スジャータ」の類、どうして関西は「フレッシュ」で、関東は「ミルク」と呼ばれるのか、いまだに謎です。ちなみに関東のファミレスでも商品に「フレッシュ」と印刷されてました。
MTLink によるページ作成
Category:[テンプレートタグ]
Tag:[Customize, MovableType, MTLink, VariableTag]
Permalink
Movable Type の変数タグで MTLink というものがあります。Movable Typeユーザー・マニュアル:テンプレート・タグでは下記のような説明になっています。
Index Templateもしくは特定のエントリーへのURLを自動的に生成するためのタグ。
つまり、インデックス・テンプレートまたはある特定のエントリーに対するリンクを設定したい場合に使うためのタグです。
以下、インデックス・テンプレートおよびエントリーのリンク設定方法について説明します。
インデックス・テンプレートへのリンク
インデックス・テンプレートを新しく作成する時に「テンプレートの名前」欄を設定されると思いますが、その名前を MTLink の template 属性に指定することでリンクを生成します。
MTLink を使用しなければ、リンクのURLは
<a href="<$MTBlogURL$>profile.html">プロフィール</a>
と赤色部分のように書かれると思いますが、例えば「テンプレートの名前」を「Profile」と設定している場合、
<a href="<$MTLink template="Profile"$>">プロフィール</a>
と青色部分のように書くことで同様の効果を得ることができます。このタグを用いることによるメリットは、出力ファイル名に依存せずに記述できる、ということです。例えば途中でファイル名を変更するようなケースがあってもテンプレートに書かれたリンクを修正する必要はありません。
特定のエントリーへのリンク
エントリーに付与されるエントリーIDを MTLink の entry_id 属性に指定することで特定のエントリーに対するリンクを生成します。例えば書籍を紹介するエントリーを書き、このエントリーのリンクを作る場合(仮にエントリーIDは"562"とします)、下記の青色部分のように設定します。
<a href="<$MTLink entry_id="562"$>">書籍の紹介</a>
こちらはインデックス・テンプレートと異なり、個別エントリーアーカイブとしても生成されますが、あるエントリーに対して他のエントリーとは別に「おすすめコーナー」のようなリンクを作りたい場合等に役に立つと思います。
また template 属性と同様、個別エントリーアーカイブページのURLを直接記述しないので、URLやファイル名を変更しても、このリンクを修正する必要はありません。
エントリーIDの確認方法ですが、該当のエントリーを公開状態にした後、管理画面の該当のエントリー編集画面に遷移します。そこで表示される URL の query に
http://~/mt.cgi?__mode=view&_type=entry&blog_id=1&id=562&saved_changes=1
と表示されますので、赤色部分がエントリーIDになります。
エントリーを XHTML 1.0 Transitional に修正
W3C:Markup Validation Service で XHTML 1.0 Transitional に従っていなかったエントリーのHTMLを修正しました。ブログを始めてから valid なエントリーを書き始めるまで、約1年分という膨大な量のエントリーを見直すという作業で、先月のリニューアルから Another HTML-lint gateway を使って少しずつ進めておりましたが、ようやく完了しました(多分)。
修正した主な内容は以下の通りです。
- & を & に修正
- 終了タグの追加(主に<li> に対する </li>)
- img 要素を "/" で閉じる
- img 要素の "/" の前に空白を挿入
- 属性の省略書式(readonly → readonly="readonly")
- 不明な実体参照の修正(テンプレートで使われている &id 等)
- img 要素に alt 属性を追加
- table 要素に summary 属性を追加
- ブロック要素の入れ子や重なりを修正
なお、nobr 要素、wbr 要素をサンプルとして用いているエントリーについては valid になっておりませんので、別途ページを分ける等の対策を行いたいと思います。
併せて、記述に不備があるエントリーについて一部修正しました。
HTMLの修正は、斜め読みながら過去の記事を読み返す行為でもあり、「そういえばこういうエントリーもあったな」と感慨に耽る場面も多々ありました。
Movable Typeでつくるウェブログ(仮)
タイトルの通り、XOOPS本でお馴染みの南大沢BB研究所より、Movable Type の本「Movable Typeでつくるウェブログ(仮)」が出版される予定です。
実はその中で当サイトのカスタマイズ記事が紹介される予定です。こちらも3.2のリリースに併せて出版されるようですので、少し先になると思いますが出版されたらまた改めてご報告したいと思います。
ちなみにXOOPSはPHP言語を用いたコミュニティサイト構築用ソフトです。
本屋でご覧になった方もいらっしゃると思いますが、下記が南大沢ブロードバンド研究会共著の書籍です。
XOOPSでつくる!最強のコミュニティサイト posted with amazlet at 05.08.21 小川 晃夫 南大沢ブロードバンド研究会 ソーテック社 (2005/01) 売り上げランキング: 6,971 |
エントリーのプレビューを行うプラグイン
The blog of H.Fujimoto でお馴染みの壱さんが作られた「エントリーのプレビューを行うプラグイン」のカスタマイズをご紹介します。
Movable Type のエントリーのプレビューは「確認」をクリックすることで出来栄えを見ることができますが、管理用のCSSを用いているため、またHTMLの構造も公開ページと異なるため、実際に公開した時に予想しない表示になっていて慌てて修正することがしばしばありました。
このプラグインは、メインページや各アーカイブと同じテンプレートを使って、いわゆる「隠しページ」を生成し、それを参照することで公開前に表示を確認できるというものです。
ちょっと前から使わせて頂いているのですが、段落・リスト・表・画像等の確認がじっくり行えます。今まではある意味勘で作成・修正していたので、かなり重宝しています。
ということで以下、カスタマイズ方法です。内容は壱さんのページと同じですが、とりあえずメインページのプレビューに着目して書いてみました。
1.プラグインのダウンロード
The blog of H.Fujimoto:エントリーのプレビューを行うプラグイン(その1)
より mt-rebuild-preview.zip のリンクをクリックしてプラグインアーカイブをダウンロードします。
2.ファイルのアップロード
アーカイブを解凍すると下記のファイルがあります。
- mt-rebuild-preview.cgi
- /extlib/FJ/RebuildPreview.pm
- /plugins/TagsForPreview.pl
- /tmpl/cms/rebuild_preview.tmpl
これらのファイルを、MTCGIPath をルートパスとして、同じ名称のディレクトリ配下にそれぞれアップロードします。例えば mt-rebuild-preview.cgi は mt.cgi と同じディレクトリに、TagsForPreview.pl は plugins ディレクトリ配下にアップロードします。存在しないディレクトリ(FJ)は新たに作成してください。mt-rebuild-preview.cgi のパーミッションは 755 等に変更してください。
3.メインページプレビュー用テンプレート作成
管理画面の「テンプレート」の右上にある「インデックステンプレートの作成」をクリックし、
次のページでそれぞれ以下のように設定します。
- テンプレートの名前:メインページプレビュー(何でもいいです)
- 出力ファイル名:preview.html
- 再構築オプション:チェックを外す
- テンプレートの中身:メインページの中身を丸ごとコピー
出力ファイル名はここでは preview.html としましたが、他の方に参照されない名称にしてください。またメインページが index.php の場合は preview.php としてください。
4.テンプレートの修正
プレビュー用テンプレートの下記の赤色部分 MTEntries を青色のように MTEntries WithDraft に変更します。
修正前
:
<MTEntries lastn="5">
<$MTEntryTrackbackData$>
:
</MTEntries>
:
修正後
:
<MTEntriesWithDraft lastn="5">
<$MTEntryTrackbackData$>
:
</MTEntriesWithDraft>
:
修正が終わったら、保存・再構築します。出力ファイル名を指定して表示されていればここまでの設定はOKです。
5.プレビュー用テンプレートの関連付け
3?4項で作成したテンプレートをプレビュー用テンプレートとして関連づける作業を行います。
6.管理画面にプレビュー用の設定を追加
/tmpl/cms/edit_entry.tmpl を任意のエディタで開き、青色部分を追加します。各行数は追加した後の行数になっていますので、目安にしてください。2番目と3番目の追加は緑色の行で検索すると便利です。
5行目あたり
<script type="text/javascript">
<!--
function doRebuildPreview () {
window.open('mt-rebuild-preview.cgi?__mode=start_rebuild&blog_id=<TMPL_VAR NAME=BLOG_ID>&entry_id=<TMPL_VAR NAME=ID>', 'doRebuildPreview', 'width=400,height=250,resizable=yes,scrollbars=yes');
}
function listPreviousPings () {
window.open('<TMPL_VAR NAME=SCRIPT_URL>?__mode=pinged_urls&entry_id=<TMPL_VAR NAME=ID>&blog_id=<TMPL_VAR NAME=BLOG_ID>', 'urls', 'width=370,height=250,resizable=yes,scrollbars=yes');
}
130行目辺り
<TMPL_IF NAME=POSITION_BUTTONS_TOP>
<div id="button-bar">
<TMPL_UNLESS NAME=NEW_OBJECT>
<input class="button" onClick="doRebuildPreview()" type="button" value="<MT_TRANS phrase="Preview on Blog">">
</TMPL_UNLESS>
<input type="submit" name="preview_entry" value="<MT_TRANS phrase="Preview">" />
<input type="submit" value="<MT_TRANS phrase="Save">" />
<TMPL_UNLESS NAME=NEW_OBJECT>
<input onclick="doRemoveItem('<TMPL_VAR NAME=ID>', 'entry&blog_id=<TMPL_VAR NAME=BLOG_ID>')" type="button" value="<MT_TRANS phrase="Delete Entry">" />
</TMPL_UNLESS>
</div>
</TMPL_IF>
330行目辺り
<TMPL_IF NAME=POSITION_BUTTONS_BOTTOM>
<div id="button-bar">
<TMPL_UNLESS NAME=NEW_OBJECT>
<input class="button" onClick="doRebuildPreview()" type="button" value="<MT_TRANS phrase="Preview on Blog">">
</TMPL_UNLESS>
<input type="submit" name="preview_entry" value="<MT_TRANS phrase="Preview">" />
<input type="submit" tabindex="13" value="<MT_TRANS phrase="Save">" />
<TMPL_UNLESS NAME=NEW_OBJECT>
<input onclick="doRemoveItem('<TMPL_VAR NAME=ID>', 'entry&blog_id=<TMPL_VAR NAME=BLOG_ID>')" type="button" value="<MT_TRANS phrase="Delete Entry">" />
</TMPL_UNLESS>
</div>
</TMPL_IF>
ここまでの作業が終わればメインページのプレビューができる状態になります。
7.プレビューする
8.ボタンを日本語化する
「Preview on Blog」を「プレビュー」等の日本語に変更したい場合は、lib/MT/L10N/ja.pm の任意の行に下記を追加します。
'Preview on Blog' => 'プレビュー',
9.他のアーカイブページをプレビューする場合
アーカイブページ(カテゴリーアーカイブ/日付アーカイブ/個別エントリーアーカイブ)のプレビューも行いたい場合は各アーカイブテンプレートを3項と同じ手順で作ります。アーカイブテンプレートではなくインデックステンプレートとして作りますのでご注意ください。
出力ファイル名はそれぞれ異なる名称にしてください。そしてそれぞれの「ファイルの中身」を下記のタグでテンプレート全体を括ってください。
カテゴリーアーカイブ
<MTPretendCategoryTemplate> ? </MTPretendCategoryTemplate>
月別アーカイブ(日付アーカイブをコピー)
<MTPretendDateTemplate archive_type="Monthly"> ? </MTPretendDateTemplate>
週別アーカイブ(日付アーカイブをコピー)
<MTPretendDateTemplate archive_type="Weekly"> ? </MTPretendDateTemplate>
日別アーカイブ(日付アーカイブをコピー)
<MTPretendDateTemplate archive_type="Daily"> ? </MTPretendDateTemplate>
個別エントリーアーカイブ
<MTPretendIndividualTemplate> ? </MTPretendIndividualTemplate>
上記はデフォルトのアーカイブ設定状態を想定しています。例えば週別アーカイブテンプレートや・日別アーカイブテンプレートを月別アーカイブテンプレートと別に新しく作っている場合はそちらからコピーしてください。
設定後、5項の作業を行い、新しく作ったインデックステンプレートをプレビュー用としての関連付けを行います。
以上です。
2005.08.19 追記
8項にボタンの日本語化の項目を追加しました。
スローブログ宣言!
鈴木 芳樹 技術評論社 (2005/06/22) 売り上げランキング: 54,130 遅ればせながら購入しました。 一番印象に残ったのは、アフィリエイトに対する捉え方です。「ブログで稼いで何が悪い?」という章があり、ここに本人の体験にもとづいたアフィリエイトとブログの良い関係を保つ秘訣が書かれています。 またよく話題になる「ブログの続け方」や「ブログとのつきあい方」は、いくつかの章に跨って助言がされています。ブログはマイペースで続けられることが理想ですが、それなりのアクセス数がモチベーションを維持する糧となるのも否めません。個人差はあるとしても、この相反する両者を踏まえ、ブログに対してどのようなアプローチが望ましいか、この本を読むことでヒントがつかめるかも知れません。 さらに他のサイトからの好ましくないリンクやコメント等を受けた経験のある方は少なくないと思いますが、これについては著名人のブログサイトでの事件やアクセスコントロールによる対処方法等が記されています。そういう意味では現在ブログを運営されている方だけでなく、これからブログを始めてみたいという方にもお勧めです。つまりこの本を読むことで、現在のブログ界の裏事情や運営のお作法を知ることができるので、ブログを始めることに対する不安はある程度解消するのではないかと思います。 話は変わって、私はブログを始める前、ジオシティーズに Webサイトを持っていました(今も存在しています)。ファイルの作成履歴をみると1997年?1998年頃から始めています。全盛期はカテゴリー別に色々と書き綴り(というか他の音楽サイトに投稿していた記事をこのサイトにまとめていた)、同時にジオシティーズの掲示板サービスも利用していました。 2001年頃から掲示板を利用して日記を書くことが多くなりました。掲示板は他の方も書き込めるようにしていたのですが、途中から書き込み用ページの公開をやめて自分用の日記ページと化しました。この方法はブラウザから文章を入力するだけでよく、HTMLも編集せずに済むので更新が非常に楽でした。 他のサイトを真似してそのようにした訳ではないのですが、この本には私が行った「掲示板を利用して更新する」行為が巷で普及していたことが記されているのに驚きました。筆者の方はレンタル日記サービス等も含め、このような更新作業が楽に行えるテキストサイトがブログが流行するための下地として捉えており、見事に私はこの流れにのっていたようです。 またブログサイトを最初に見た時に「なじまない」「違和感がある」と感じた点も同じでした。今は慣れてしまったので何がどのような意味をもっているとか、どこに何があるというのは感覚的にわかるのですが、もう一度初心に戻って「ブログの本当の良さとは何か?」を考え直してみようと思った次第です。 |
Active Perl でワイルドカードを利用する
UNIX やLinux ではコマンドラインから Perl を実行する時、入力するファイル名に「*(ワイルドカード)」を使用することができます。
例えばあるディレクトリに10のHTMLファイルがあり、それを全て順番に読み込みたい場合、「*.html」と指定するだけで、ファイル名をひとつずつ記述しなくても全てのHTMLファイルを対象とすることができます。
ところが ActivePerl でワイルドカード指定をしたところ、ワイルドカード「*」がそのままファイル名になるだけで全く読み込まれませんでした。googleで検索してみたところ、ActivePerl の仕様でMS-DOSのワイルドカードに対応していない、つまりファイル名として展開されないようです。
ですが利用できる方法も同時にみつかりましたので、ActivePerl でワイルドカードが利用する方法をご紹介します(備忘録)。
1.Wildcard.pm をダウンロード
下記のサイトより Wildcard.pm をダウンロードします。
2.Wildcard.pm の配置
ダウンロードしたファイルをPerlライブラリディレクトリに配置します。Perl のパスが /usr/bin/perl であれば、配置ディレクトリは、
- C:\usr\lib
になります(Cドライブにインストールされている場合)。
3.スクリプトに use 関数を追加
実行するPerlスクリプトの先頭に
use Wildcard;
を追加します。
以上です。これでワイルドカードを指定するとファイル名として展開されるようになります。
参考サイトは下記です。ありがとうございました。
ちなみにこのページの最後に書いてある文章には軽く斬られました(笑)。
?(略)?もっと上手な「Perl使い」の人たちは、ワイルドカード自体あまり使いません。Perl内に用意された別の方法を使ってもっと柔軟に複数ファイルを扱うことが多いので、この仕様はそれほど問題にはならないのです。?(略)?
トップページの名称について
個別エントリーアーカイブページや月別(または日別)アーカイブページにジャンプすると、ページの先頭付近にトップページへのリンクが3つ表示されるのですが、ナビゲーションバーが「Home」、前後記事のリンクが「Main」、パンくずリストが「Top」と、同じページへのリンクに3つの概念が存在しています。「Home」と「Top」は自分でなんとなく付与したもので、「Main」は Movable Type のデフォルトテンプレートの表示を使っています。
節操のない状態は棚にあげておくとして、これを見て、ふと「トップページを指す名称あるいはリンク名で一番よく使われている用語や単語は何だろう?」という、素朴な疑問がわきました。
ということで以下、調査結果です。なお、ここではサイトの表紙として表示されるページ(index.html 等)を便宜上「トップページ」と呼び、リンクの名称と区別することとします。
用語
まず日本語サイトの「メインページ」および「トップページ」を、単純に google の検索ヒット数で比較してみました。それぞれ「メイン」や「トップ」等でヒットしないように、「"メインページ"」「"トップページ"」と「"」で括ってフレーズとして検索しています。
結果は、「メインページ」は136万件だったのに対し、「トップページ」は1440万件と、約10倍のヒットでした。このことから日本では「トップページ」がトップページを指す一般的な用語として使われていることが分かります。
「ホームページ」は2190万件ヒットしました。ただし日本で「ホームページ」をトップページとして指す機会は少ないと思われるので、主観的な判断で恐縮ですがここでは対象外とします(「ホーム」というリンクについては次項でとりあげます)。なお「ホームページ」のヒット件数と「トップページ」のヒット件数の差から、「メインページ」という用語がかなり浸透していると予想されます。
次に英語サイトで「Top Page」「Main Page」を同じ方法で検索したところ、「Top Page」は192万件、 「Main Page」は8710万件がヒットし、日本語サイトと全く逆の結果であることが大変興味深いです。また Movable Type のデフォルトテンプレートでトップページへのリンク名に「Main」が使用されている理由の裏づけにもなるでしょう。
「Home Page」については、日本では前述した通りWebサイト全体を指すための用語として定着していますが、英語圏でサイト全体を指す用語は「Website(またはWeb Site)」で、「Home Page」は「基点」という意味でトップページに対してのみ使われるので、こちらは検索対象とします。
で「Home Page」で検索すると6億8400万件がヒットしました(「Website」は10億3000万件)。
リンク名
各サイトのナビゲーションバーにあるトップページへのリンク名の比較です。これは良い検索方法が思いつかなかったので、普段よく訪れるサイトやニュースサイト等をランダムに見てみました。といってもせいぜい20サイトくらいです。
結果は、日本語サイトでは「Home(または「ホーム」)」と「Top(または「トップ」)」が拮抗しており、英語サイトでは W3C や The Web Standards Project、Wired Digital のように、「Home」が使われていました。
有名サイトを見ただけで傾向を俯瞰できる訳ではないでしょうし、そもそもサンプルが少ないので断定はできないにしても、日本語サイト、特に英語サイトでは「Home」がナビゲーションバーの名称として一般的に使われている可能性はかなり高いと考えられます。
また英語サイトでは「Main Page」が用語として定着している割に、ナビゲーションバーの名称として「Main」があまり使われていない(つまり「Home」がより一般的)という推測もできます。
まとめ
トップページに関する用語およびリンク名についての調査結果をまとめると以下のようになります。
| サイト | よく使われる用語 | よく使われるリンク名 |
| 日本語 | トップページ | Home Top |
| 英語 | Home Page Main Page | Home |
以上です。認識誤りがあるかもしれませんので予めご了承ください。
ブログ自由自在 Movable Type 上級カスタマイズ術・第2集
ブログ自由自在 Movable Type 上級カスタマイズ術の著書、The blog of H.Fujimotoの管理人・壱さんが第2集を執筆中です。
第2集はカスタマイズを中心とした内容で、その中で当サイトのカスタマイズについてご紹介くださるということです。先日の雑誌掲載に引き続き、楽しみにしています。
3.2に合わせた内容にされるということですので、少し先になると思いますが出版されたらまた改めてご報告したいと思います。
Favicon をコメント・トラックバックに表示する
Favicon 設置に続いて、コメント・トラックバック欄に Favicon を表示するカスタマイズです。多くのテンプレートユーザの方がカスタマイズ記事をエントリーされていますが、具体的な動作についても調べてみました。
現在動作確認のため、コメント・トラックバック欄に Favicon を表示させています。
参考・ご利用サイトはすでにたくさんあるようですが代表で、
- やむやむ:コメント・トラックバック欄にファビコンを表示
- (きっかけはcaramel*vanilla:Organic HTMLのコメント欄)
を紹介させて頂きます。ありがとうございました。
以下、カスタマイズ方法です。
1.プラグインのダウンロード
Favicon プラグインをリリース元である下記のサイトよりダウンロードします。
上記のページの本文中の「Installation」 と書かれたすぐ下にある favicon.zip のリンクをクリックして保存します。
ダウンロードした favicon.zip を解凍し、下記のような構成になっていることを確認してください。
- plugins/favicon.pl
- tmpl/cms/favicon.tmpl
- mt-favicon.cgi
2.パスの修正
mt-favicon.cgi を任意のエディタで開き、1行目の
#!/usr/local/perl/bin/perl -w
を下記のように修正します(これを行わないと6項の作業で500エラーになります)。
#!/usr/bin/perl -w
3.プラグインのアップロード
これは CGIPath(mt.cgi が置かれたディレクトリ)を基準としたディレクトリ構成になっていますので
それぞれのディレクトリ配下に favicon.pl / favicon.tmpl / mt-favicon.cgi をアップロードしてください。
mt-favicon.cgi はパーミッションを 755 / 700等に変更してください。
4.テンプレート修正
公式サイトに掲載されているタグを、個別アーカイブ/コメント・プレビュー/コメント・エラー
に表示されるようにします。
4.1 個別エントリーアーカイブに表示
コメント欄に Favicon を表示する場合、コメント投稿者欄(下記)に青色部分を追加します。下はデフォルトテンプレートへの追加例です。
<MTComments>
<div id="c<$MTCommentID$>">
<$MTCommentBody$>
</div>
<p class="posted">投稿者
<MTFaviconCommentIfAvailable>
<img src="<MTFaviconComment>" alt="Site icon" title="Site icon" class="favicon" />
</MTFaviconCommentIfAvailable>
<$MTCommentAuthorLink default_name="Anonymous" spam_protect="1"$> <MTCommentAuthorIdentity>
: <$MTCommentDate$></p>
</MTComments>
下は公開テンプレートへの追加例です。
<MTComments>
<a id="c<$MTCommentID$>" name="c<$MTCommentID$>"></a>
<div class="comments-body">
<$MTCommentBody$>
<div class="comments-post">
Posted by
<MTFaviconCommentIfAvailable>
<img src="<MTFaviconComment>" alt="Site icon" title="Site icon" class="favicon" />
</MTFaviconCommentIfAvailable>
<$MTCommentAuthorLink default_name="Anonymous" spam_protect="1"$> <MTCommentAuthorIdentity> at <$MTCommentDate$></div>
</div>
</MTComments>
コメント・プレビューに表示する場合もほぼ同じです。青色のタグを使えるのは MTComments タグで括られている部分のみです。
次に、トラックバック欄に Favicon を表示する場合、トラックバック表示欄(下記)に青色部分を追加します。下はデフォルトテンプレートへの追加例です。
<MTPings>
<p id="p<$MTPingID$>">
» <a href="<$MTPingURL$>"><$MTPingTitle$></a> from
<MTFaviconTrackbackIfAvailable>
<img src="<MTFaviconTrackback>" alt="Site icon" title="Site icon" class="favicon" />
</MTFaviconTrackbackIfAvailable>
<$MTPingBlogName$><br />
<$MTPingExcerpt$> <a href="<$MTPingURL$>">[続きを読む]</a>
</p>
<p class="posted">トラックバック時刻: <$MTPingDate$></p>
</MTPings>
下は公開テンプレートへの追加例です。
<MTPings>
<div class="comments-body">
<p id="p<$MTPingID$>">
» <a href="<$MTPingURL$>"><$MTPingTitle$></a> from
<MTFaviconTrackbackIfAvailable>
<img src="<MTFaviconTrackback>" alt="Site icon" title="Site icon" class="favicon" />
</MTFaviconTrackbackIfAvailable>
<$MTPingBlogName$><br />
<$MTPingExcerpt$> <a href="<$MTPingURL$>">[続きを読む]</a>
</p>
<div class="comments-post">Tracked on <$MTPingDate$>
</div>
</div><!-- comments-body -->
</MTPings>
青色のタグを使えるのは MTPings タグで括られている部分のみです。
5.スタイルシートの追加
スタイルシート(styles-site.css)に下記を追加します。これは Favicon の位置調整のためのものです。
.favicon {
vertical-align:middle;
}
6.プラグインの確認
7.Favicon を早く取得するには
Favicon プラグインはコメント・トラックバック元のサイトを検索して favicon.ico を取得し、キャッシュに保存しています。取得する契機はプラグイン管理画面の更新ではなく、埋め込んだタグが動作した時、つまり再構築された時です。また再構築毎に取得するのではなく、一定の周期で取得するように制御されています。このため、相手サイトの Favicon 公開タイミングによってはすぐに自サイトに Favicon が反映されない場合があります。
Favicon を早く取得するには、プログラムに書かれた取得周期を一時的に変更します。以下変更方法です。
取得周期は favicon.pl の中に
my $page_cache = 60*60*24*7;
と書かれている行があり、60(秒)×60(分)×24(時間)×7(日)、つまり一週間周期で取得しています。繰り返しになりますが、この周期では Favicon プラグインを設定しても相手サイトの Favicon 設置タイミングによっては、最大7日間近く表示されないことになります。
ということで、favicon.pl の該当行を
my $page_cache = 10;
ぐらい(=10秒)に修正してアップロードし、個別エントリーアーカイブを再構築します。なお favicon.ico を取得する動作はかなり負荷がかかりますので、目当ての Favicon が表示されたら値を元に戻しましょう。
以上です。
テンプレート修正(個別エントリーアーカイブ追加・IE6後方互換モード対処)
3.2がまもなくリリースという時になんですが、現在公開中の Movable Type 3.17x-ja 用テンプレートをそれぞれ下記のように修正しました。
個別エントリーアーカイブテンプレート(2カラム/3カラム)を追加
- Movable Type 3.0x/3.1x 3カラム テンプレート(サイズ可変)
- Movable Type 3.0x/3.1x 3カラム テンプレート(サイズ固定)
- Movable Type 3.1x 2カラム テンプレート(サイズ固定・左メニュー)
- Movable Type 3.1x 2カラム テンプレート(サイズ固定・右メニュー)
3.17-ja リリース後、Movable Type 3.17用テンプレート(個別エントリーアーカイブ)をエントリーしましたが、それ以降マルチカラム版を作ってなかったので作りました(放置状態で申し訳ありません)。3.151-ja までの個別アーカイブテンプレートも残しています。
なお2カラムテンプレートで1カラムの個別エントリーアーカイブをご利用になる場合は、3カラム版のエントリーにある個別エントリーアーカイブ(1カラム)」をご利用ください(固定・可変のどちらでもOKです)。
IE6の後方互換モードによる解釈誤りを対処
3カラム版で修正した、IE6の後方互換モードによる解釈誤り(text-align および width と padding の分離)の対処を2カラム版にも適用しました。対処内容の詳細は固定3カラムのIE6・後方互換モード対処方法をご覧ください。
その他、上記の各エントリーで「テンプレートは3.151-jaまで確認」と書かれてあった部分について、最新バージョンを追加変更しました。
以上です。
それではどうぞよろしくお願い致します。
京葉線
雑誌「SOHOドメイン」8月号に掲載されました
巷では衆議院解散や Sleipnir 2.00β2.1 リリース等でいろいろ賑わっていますが、当サイトもこの度雑誌に掲載されました。ということで、この場をお借りしてご報告したいと思います。
雑誌はタイトルの通り「月刊CYBiZ SOHOドメイン(サイビズソーホードメイン)」(株式会社サイビズ発行)。掲載されている8月号は7月中旬からすでに発売中です。
確認が遅れたのは、実は6月末に担当のライターの方からメールで記事掲載のご連絡を頂いていたのですが、そのメールが他のメールマガジンやSPAMメールに紛れ込んでしまっていたようで、内容を読まずに既読状態にしてしまっていました。まさかそのような連絡を頂けるとは夢にも思っていなかったので、全く気がついていなかったと思います。
数日前、メールを整理していたところ偶然そのメールを見つけました。すぐにお詫びのメールを出したのですが、ご返事が長期にわたって滞ることになってしまい、本当に申し訳ないことをしたと反省しております。
返事が遅れてしまったので掲載もボツだな…と思ったのですが、メールをよく読むと「条件や不都合がある場合のみ連絡ください」という内容にも解釈できたので、「もしかしたら?」と思い、急いで雑誌を注文して拝見させて頂いたところ、掲載くださっていました。
記事は「Movable Type で始める超簡単ブログカスタマイズ」という特集で、デフォルトテンプレートの状態からヘッダ・サイドバー・エントリー部分をカスタマイズするというものです。そして、特集の最後の方にサブカテゴリーの設定方法があり、「カテゴリーが増えてきたらサブカテゴリーの折りたたみ機能があります」という流れで、当サイトのカスタマイズ記事(画像と記事のURL)が紹介されています。
PC店の書籍コーナー(書店では見当たりませんでした)に置かれていると思いますので、機会があればご覧頂ければ幸いです。といっても来月号が8月12日発売なのであまり猶予ありませんが。
なおSOHO-WEBでもバックナンバーが注文できます(630円+送料300円=930円)。
Tips的な掲載ですが感激ひとしおです。ライターの方、テンプレートやカスタマイズご利用の皆様、そしてこのサイトを訪れて盛り上げてくださる方々に改めてお礼申し上げます。本当にありがとうございます!
月送り版リアルタイムカレンダーご利用の方へ修正依頼
PHPを利用したリアルタイムカレンダーにスクリプトミスがありました。修正内容と併せてこの場をお借りしてお詫び申し上げます。
事象としては、ブラウザからアクセスする時のカレンダー表示は正常なのですが、アクセスすると同時にWebサーバ(例えば Apache)の error.log に下記のようなメッセージを出力しています。
PHP Notice: Use of undefined constant j - assumed 'j' in …
PHP Notice: Use of undefined constant Y - assumed 'Y' in …
PHP Notice: Use of undefined constant m - assumed 'm' in …
メッセージが出力される原因は、カレンダーの本日の年月日を取得する処理で
<?php $day = date(j); $year = date(Y); $month = date(m); ?>
と書いている部分で、date 関数の format パラメータ文字列(ここでは j / Y / m)を「"」で括っていなかったためです。PHPではフォーマット文字列として認識される文字については「"」で括らなくてもきちんと動作する仕様みたいですが、その代わりに「『"』で括らないのは非推奨」というメッセージを表示するようです。
このメッセージはカレンダーへのアクセス、つまりページビューが発生する毎に出力されます。
ということで、大変申し訳ございませんが月送り版リアルタイムカレンダー(通常型・横型とも)をご利用の方は、カレンダー部分のタグを次のように
<?php $day = date("j"); $year = date("Y"); $month = date("m"); ?>
と、赤色部分の「"」を追加くださいますよう、よろしくお願い申し上げます。該当の記事につきましては修正済です。
なお、レンタルサーバではPHPの環境設定によってメッセージの出力が抑止されているかもしれません。
Favicon 設置
遅ればせながら Favicon を設置しました。
Favicon は「favorite icon(お気に入りアイコン)」の略で、サイト表示あるいはブラウザのお気に入りやブックマークに登録すると、そのサイトにオリジナルのアイコン(Favicon)が予め用意されていればそれがお気に入りリストやアドレスバーのURLの左側に表示されるというものです。当サイトではバナーの猫の顔をそのまま使ってみました。
以下作成&設置方法です。
1.Favicon 用画像作成
画像作成ソフトで正方形の画像を作成します。画像サイズは 16px×16px らしいので、私は最初からそのサイズで画像を作りました。画像を作成したら bmp / gif / jpg / png 等の形式で保存します。
なお次の変換作業で対応するファイル形式が異なるようです。また画像サイズを縮小してくれるサイトもあるようです。
2..ico ファイルに変換
Favicon は .ico 形式である必要があり、作成した画像を下記のサイトで変換します。変換サイトは他にも多く存在します。
例えば Favicon Japan を利用する場合、トップページにある「Favicon自動生成」フォームに作成した画像ファイルを指定し「Faviconを作成する」をクリックします。次のページに生成された Favicon が表示されますので、OKであれば「Download」をクリックして favicon.ico をダウンロードします。
3.ファイルのアップロード
favicon.ico をローカル・サイト・パス(index.html が置かれているディレクトリ)にアップロードします。
4.テンプレートの修正
各テンプレートに次の1行を <head>~</head> の間に追加します。
<link rel="shortcut icon" href="<$MTBlogURL$>favicon.ico" />
追加したら保存・再構築してください。
以上です。OSとブラウザによって対応が異なるようです。Browser Favicon 対応表によればWindows2000/XP のFirefoxは完全に対応しているようで、ページをリロードするだけで表示されるようになります。IEはお気に入りに追加することで表示されます。ブラウザのキャッシュや一時ファイルを削除するタイミングで表示される場合もあるようです。
参考サイトおよび、テンプレートご利用サイトを検索したところ、多数のエントリーがありました(純粋な Favicon 設置の記事のみ。とりこぼしありましたらお許しください)。ありがとうございました。
遠くても
Designed by Tickler's bunkum days & Assisted by Orbium -Sora No Tama-
![]() 内輪ネタで恐縮ですが、公開テンプレートご利用ユーザの「今日の覚え書き」さんと「Orbium -そらのたま-」さんのコラボレーションでオリジナルデザインのテンプレートがリリースされました。以前より同じデザインのサイトをちらほらと見かけていましたが、これでますますご利用者が増えることと思われます。 |
テンプレートはどちらのサイトからもダウンロードできます。興味のある方は(ない方も)是非ご訪問ください。
2005.08.06 追記
本文を修正しました。
Firefox・Netscapeで連続した半角文字を折り返す
Category:[その他]
Tag:[Customize, FirefoxExtension, MovableType, Mozilla]
Permalink
FirefoxではURLの折り返しについては url_breaker という拡張が公開されており、これがスタンダードな対処方法になっているようです。
またURL以外のテキストにも適用したい場合、url_breker_plus が公開されています。
- outsider reflex:Firefoxで長いURIを折り返す
- (本文中にダウンロードのリンクがあります)
まず、上記を Firefox拡張として利用する場合は、下記の手順で設定します。GreaseMonkey という拡張を利用する GreaseMonkey 版と、url_breaker を直接拡張として利用するXPI版があります。作業はいずれも Firefox で行います。
GreaseMonkey版
- GreaseMonkeyのページにある「Install Greasemonkey 0.3.5.」をクリック
- 「今すぐインストール」をクリック
- 再起動(これで追加した拡張が有効になります)
- url_breakerまたはFirefoxで長いURIを折り返すのページにある url_breaker.user.js または url_breaker_plus.user.js(リンク自体は文章です) のリンクを右クリックして「Install User Script...」を選択
- 開いた画面で「OK」をクリック
XPI版(url_breker のみ)
- url_breakerのページにある「インストール/ダウンロード」のリンクをクリック
- 「今すぐインストール」をクリック
- 再起動(これで追加した拡張が有効になります)
となっています。
次に、url_breaker は本来 Firefox拡張ですが、ブラウザやユーザ設定に依存しない(例えばNetscapeに適用させたい等)方法という意味で、通常のJavaScritpと同様に設定するカスタマイズについても併せてご紹介致します。
#Firefox拡張との競合や機能の認識不足等で問題があるようでしたら本エントリーのカスタマイズは行わない旨を改めて掲載したいと思います。
1.スクリプトのダウンロード
上記の url_breaker または url_breker_plus をダウンロードします。
2.スクリプトのアップロード
どちらもアーカイブ形式ではありませんので、ダウンロードしたスクリプト(url_breaker.user.js または url_breaker_plus.user.js)をそのままローカル・サイト・パス(index.htmlが置かれているところ)にアップロードします。
3.テンプレートの修正
スクリプトを適用したいテンプレートの最後の方に
:
<script src="<$MTBlogURL$>url_breaker_plus.user.js" type="text/javascript"></script>
</html>
という風に青色部分を追加します(例は url_breaker_plus.user.js の場合です)。
ページの最後に設定する理由は、このスクリプトがページが表示された後に実行される必要があるためです。逆に <head>~</head> の部分に挿入しても効果はありませんのでご注意ください。
4.スクリプトの修正
IE系ブラウザで本スクリプトを動作させるとJavaScriptエラーが発生しますので、スクリプトに、
(function () {
if(navigator.appName == 'Netscape'){
:
(中略)
:
}
})();
と青色の2行を加え、Mozilla系ブラウザのみで動作するようにしてください。
以上です。
2005.08.05 追記
機能の認識不足で誤解を招く説明になっていたため、本文を一部修正致しました。併せてタイトルも修正しました。
2005.09.27 追記
IEでJavaScriptエラーになるのを避けるため、スクリプトの修正を必須項目に変更しました。
高3の
高校生は
サイドバーの背景を最後まで表示する
Category:[テンプレート]
Tag:[Background, Customize, MovableType, Template]
Permalink
float 指定のマルチカラムテンプレートのデザインで困るのは、サイドバーに背景色を与えた場合、サイドバーの内容が本文(中央カラム)の表示より短くなった場合、背景色がそこで途切れてしまうことです。 例えば、本サイトの公開テンプレート(2カラム・右にサイドバー表示)のCSSの右サイドバーに背景色(ピンク)を追加してみます。 |
/* 右カラム */
#links-right{
float: left;
background-color: pink;
width : 155px ;
padding-top : 15px;
padding-left : 15px;
padding-right : 15px;
}
この設定例で、サイドバーの表示が本文より短い場合、最初の画像のように指定した背景が途中までしか表示されません。
ということで、ページの最後までサイドバーの背景色を表示するカスタマイズ方法です。
1.画像を用意する
次のような画像を用意します。これは中央カラム(白)およびサイドバーの背景(ピンク)となるものです。サンプルのテンプレートは横幅が700pxですので、長さ700pxにしています(サンプルは縮小表示していますのでクリックして実物を確認してください)。
この画像の作り方はかなりいい加減で、まず先の表示されたブラウザをキャプチャソフト(フリーで色々あると思います)でキャプチャして、その一部分を切り抜いたものです。
2.画像のアップロード
作成した画像を images ディレクトリ等にアップロードします。ここでは back.jpg としています。
3.スタイルシート修正
styles-site.css を下記のように修正します。公開テンプレートでは中央カラムにボーダーを表示していますが今回の例では削除して、画像の線を使っています(無理に罫線を入れる必要はありませんが)。また冒頭に書いた links-right の background-color は不要です。
/* 3カラム全体 */
#box {
margin-right: auto;
margin-left: auto;
text-align: left;
padding: 0px;
padding-bottom: 20px;
width: 700px;
border-bottom: 1px solid #666699;
border-left: 1px solid #666699;
border-right: 1px solid #666699;
background-color: #FFFFFF;
background: url(images/back.jpg) repeat-y;
}
:
/* エントリーのある大段落(3カラム) */
#content {
float: left;
width: 514px;
border-bottom: 1px solid #666699;
/* border-left: 1px solid #666699;*/
border-right: 1px solid #666699;
margin-top : 0px ;
margin-bottom : 10px ;
}
画像は横幅いっぱいのものでなくても大丈夫だと思います。例えばサイドバーの幅の
画像を作って #box に
background: #ffffff url(images/back.jpg) repeat-y top right;
とすれば右寄りに画像が配置されます(間違ってたらすいません)。
表示用ページに関する設定は以上です。ここまでの状態で tags.html を表示してみます。画像のようになっていればOKです。
エントリー保存後、tags.html を表示してみます。画像のように「MovableType」が表示されていればOKです。表示されない場合、5項の設定で「再構築オプション」がチェックされていない可能性がありますのでご確認ください。
また、tags.html に表示された「MovableType」のリンクをクリックし、次のページで画像のように表示されれば全て完了です(エントリータイトルは「てすと」で試しています)。





