Top > November 2007 [全て開く]

Movable Type 4 でポッドキャスト/ポッドキャスティング(その2:MT-Enclosures プラグイン)

Movable Type 4 でポッドキャスト/ポッドキャスティング(その1:Podcasting プラグイン)」ではブログ上で MP3 を簡単に再生できる環境を構築しましたが、動画や音声などのコンテンツを RSS 配信し、iTunes で取り込むことが本来のポッドキャスティングです。

ここでは、Podcasting プラグインMT-Enclosures プラグインを組み合わせて、RSS 配信する仕組みを構築します。

1.ポッドキャスト/ポッドキャスティングの仕組み

MP3 等の音声ファイルを RSS 配信する(ポッドキャスト/ポッドキャスティング)仕組みですが、具体的には RSS 2.0 のフィードに enclosure 要素を付加することを指します。
enclosure 要素にはコンテンツの URL、ファイルサイズ、MIME タイプの3つの属性が記述されます。

音声ファイルのリンクをブログ記事の本文に記述し、それを RSS フィードとして配信するだけでは enclosure 要素は付与されませんのでお間違えなく。

2.プラグインのダウンロード・インストール

MT-Enclosures のページより Enclosures.zip または Enclosures.tar.gz をクリックして、アーカイブをダウンロード。

MT-Enclosures のページ

ダウンロードしたアーカイブを解凍し、中にある Enclosures.pl をアプリケーション・ディレクトリの plugins ディレクトリ配下にアップロード。

「システムメニュー」→「プラグイン」で Enclosures.pl が表示されていればインストール完了です。

MT-Enclosures のページ

なお、他のブログの過去記事では、Enclosures.pl を編集する説明がありますが、現在のバージョン(1.4.5.0)では処理が改善され、下記の MIME タイプに対応しています(厳密には「検出する処理」が追加されています)。

拡張子MIME タイプ
.mp3audio/mpeg
.wmaaudio/wma
.m4aaudio/mp4
.midiaudio/midi
.wavaudio/wav
.aaaudio/aa
.mp4/.m4vvideo/mp4
.mpegvideo/mpeg
.avivideo/msvideo
.movvideo/quicktime
.wmvvideo/x-ms-wmv
.oggapplication/ogg
.torrentapplication/x-bittorrent
.exeapplication/octet-stream
.bmpimage/bmp
.jpeg/.jpgimage/jpeg
.gifimage/gif
.tiff/.tifimage/tiff
.pngimage/png

3.RSS 2.0 用テンプレート修正

「デザイン」→「テンプレート」→「RSS」で RSS 2.0 のテンプレート編集画面を開き、下記に示す、青色の1行(MTEntryEnclosures タグ)を追加します。

<$MTHTTPContentType type="application/rss+xml"$><?xml version="1.0" encoding="<$MTPublishCharset$>"?>
<rss version="2.0">
    <channel>
        <title><$MTBlogName remove_html="1" encode_xml="1"$></title>
     :
        <item>
            <title><$MTEntryTitle remove_html="1" encode_xml="1"$></title>
         :
            <pubDate><$MTEntryDate format_name="rfc822"$></pubDate>
            <$MTEntryEnclosures mime_include="audio"$>
        </item>
        </MTEntries>
    </channel>
</rss>

MTEntryEnclosures タグの mime_include 属性には、enclosure 要素に適用したい MIME タイプを正規表現で記述します。ここでは "audio" と書いてますので、前述の表より、

拡張子MIME タイプ
.mp3audio/mpeg
.wmaaudio/wma
.m4aaudio/mp4
.midiaudio/midi
.wavaudio/wav
.aaaudio/aa

が対象になります。MP3 のみを対象にしたい場合は、

<$MTEntryEnclosures mime_include="audio/mpeg"$>

と記述します。

FeedBurner 等、外部のフィードサービスを利用している場合は、ポッドキャスト配信用の独立したフィードを作成するか、外部サービスで RSS 2.0 で配信する設定が必要になります(enclosure 要素をサポートしているかどうかはご利用のサービスを確認してください)。

3.ブログ記事への MP3 ファイルの投稿

ブログ記事に、MP3 ファイルへのリンク、例えば

<a href="http://www.koikikukan.com/music/sample.mp3">sample.mp3<a>

を記述して投稿すれば(他の文章と混ぜても問題ありません)、MT-Enclosures プラグインが記事内の MP3 ファイルを探して、RSS 2.0 フィードに enclosure 要素を付与してくれます。

Movable Type 4 でポッドキャスト/ポッドキャスティング(その1:Podcasting プラグイン)」で導入した、Podcasting プラグインを使って MP3 ファイルを投稿する場合は、「Embed a flash player for this podcast?」のチェックを外しして投稿してください。

Podcasting プラグインでの投稿

MP3 ファイルの URL がブログ記事内にある場合、下記のような RSS が生成されます。青色部分が追加された enclosure 要素で、MP3 の URL とファイルタイプ、サイズが記述されています。

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
    <channel>
        <title>小粋空間</title>
        <link>http://www.koikikukan.com/</link>
        <description></description>
        <language>ja</language>
        <copyright>Copyright 2007</copyright>
        <lastBuildDate>Thu, 30 Nov 2007 00:36:36 +0900</lastBuildDate>
        <generator>http://www.sixapart.com/movabletype/</generator>
        <docs>http://www.rssboard.org/rss-specification</docs>
        <item>
            <title>サンプル音源</title>
            <description><![CDATA[<p>サンプル音源の投稿テスト</p><p><a href="http://www.koikikukan.com/music/sample.mp3">sample.mp3</a></p>]]></description>
            <link>http://www.koikikukan.com/2007/11/post.html</link>
            <guid>http://www.koikikukan.com/2007/11/post.html</guid>
            <pubDate>Thu, 29 Nov 2007 02:36:46 +0900</pubDate>
            <enclosure url="http://www.koikikukan.com/music/sample.mp3" length="4510616" type="audio/mpeg" />
        </item>
      :
    </channel>
</rss>

4.RSS リーダーでの購読

iTunes の画面が間に合わなかったので、上の RSS フィードを RSS リーダー(ここでは livedoor リーダーを使用)で購読した場合の表示を示します。

livedoor リーダーでの表示

「DL: audio/mpeg」と表示された部分が enclosure 要素に対応しています。

5.参考サイト

iTunes でポッドキャスティングを利用する場合は、下記のサイトが参考になるでしょう。

Comments [3] | Trackbacks [1]

Movable Type 4 でポッドキャスト/ポッドキャスティング(その1:Podcasting プラグイン)

Movable Type 4 でのポッドキャスト/ポッドキャスティングのカスタマイズを2回に分けて紹介します。

「ポッドキャスト(Podcast)」とは、iPod と放送(broadcast)を組み合わせた造語で、Web 上で音声データファイルを RSS 配信する仕組みを指します。「ポッドキャスティング」は、この仕組みを利用して実際に配信を行うという行為を指すのに使われます。*1

本エントリーでは、MP3 の URL を指定することで音声ファイルを取り込み、ブログ記事として公開することができる Podcasting プラグインを紹介します。

Podcasting プラグイン

このプラグインを利用することで、ブログ記事に Flash プレイヤーを表示し、取り込んだ MP3 を簡単に聴くことができます(下)。

ブログ記事

Movable Type でのポッドキャストとしては、「EasyPodcasting Plugin」が有名ですが、このプラグインを使うことにより、ファイルを Movable Type の管理対象にすることが可能になります(ただし仮想的な管理)。
2007.12.03 追記:EasyPodcasting Pluginもアイテムとしてファイルの実体を管理することが可能です。

1.プラグインのインストール

Podcasting のページよりダウンロードをクリック。

ダウンロード

ダウンロードしたプラグインを解凍し、plugins 配下にある Podcast フォルダをアプリケーションディレクトリの plugins ディレクトリに丸ごとアップロード。

また、mt-static/plugins 配下にある Podcast フォルダをアプリケーションディレクトリの mt-static/plugins ディレクトリに丸ごとアップロード。

それぞれのアップロード先が下記の構成になっていれば OK です。

/mt-static
 /plugins
  /Podcast
   mp3player.swf
/plugins
 /Podcast
  /lib
   /MT
    /Asset
     Podcast.pm
   /Podcast
    CMS.pm
  /tmpl
   /dialog
    find_results.tmpl
    find.tmpl
    podcast_options.tmpl
  Podcast.pl

この状態でブログ管理画面にアクセス。アップグレード画面が表示されるので、「アップグレード開始」をクリック。

アップグレード開始

管理画面にサインインします。これでアップグレードが開始されます。

サインイン

アップグレードが完了したら「Movable Type に戻る」をクリック。

アップグレード完了

2.ポッドキャスト用ブログ記事作成

新規作成メニューに「Podcast Asset」が追加されるので選択。

Test Data

設定画面が表示されるので、再生したいファイルのURLを設定。自サイト以外のファイルを指定することも可能です。自サイトのファイルを読み込む場合は予めアップロードしておきましょう。

設定画面

設定後、「次へ」をクリック。

指定したURLにファイルの存在が確認できる(正常に取得できる)と、次画面に遷移します。
次の画面は、ファイルのアップロード画面とほぼ同じですが、ブログ記事作成と同時にファイル再生用の Flash プレイヤーを表示させたい場合は、「Embed a flash player for this podcast?」をチェックします。

設定完了

設定後、「完了」をクリック。

「Embed a flash player for this podcast?」をチェックすると、(リッチテキストでは)テキストエリアに下記のような Flash プレイヤーが表示されます。

ブログ記事投稿画面

Flash プレイヤーを表示させない場合は、ファイルへのリンクが設定されます。

ブログ記事投稿画面

ブログ記事を公開すると、冒頭のスクリーンショット(下)のようになります。

ブログ記事

読み込んだファイルはアイテムとして管理することができます(ただし実体はありません)。

アイテム一覧

アイテム一覧の「クイックフィルタ」にも「Podcasts」が追加されます。

アイテム一覧の「クイックフィルタ」

次の記事:Movable Type 4 でポッドキャスト/ポッドキャスティング(その2:MT-Enclosures プラグイン)

2007.12.03
EasyPodcasting Plugin の記述を修正しました。


*1:Wikipedia 「ポッドキャスト」より引用

Comments [10] | Trackbacks [2]

テストデータを大量に作成する MTBooter プラグイン

November 28,2007 2:03 AM
Category:[プラグイン]
Tag:[, , , ]
Permalink

ブログの試験でブログ記事データ等を大量に作成したい場合がありますが、ひとつずつ手作業で入力するのは結構面倒です。かといって少量のデータでは全てのテストケースを網羅できない場合もあります。

本エントリーでは、テストデータを大量に作成することができる MTBooter プラグインを紹介します。

MTBooter

1.プラグインのインストール

MTBooter のページよりダウンロードをクリック。

ダウンロード

ダウンロードしたプラグインを解凍し、plugins 配下にある MTBooter フォルダをアプリケーションディレクトリの plugins ディレクトリに丸ごとアップロード。

下記の構成になれば OK です(各フォルダにある "._.DS_Store" は無視)。

/plugins
 /MTBooter
  /lib
   /MTBooter
    /App
     CMS.pm
  /tmpl
   booter.tmpl
  MTBooter.pl

この状態でブログ管理画面にアクセス。アップグレード画面が表示されるので、「アップグレード開始」をクリック。

アップグレード開始

管理画面にサインインします。これでアップグレードが開始されます。

サインイン

アップグレードが完了したら「Movable Type に戻る」をクリック。

アップグレード完了

2.データ作成

新規作成メニューに「Test Data」が追加されるので選択。

Test Data

設定画面が表示されます。

設定画面

下記の説明にしたがって必要な項目を設定。

How many entries would you like to create?
生成するブログ記事数を設定。生成しない場合は0を設定。
How many Pages would you like to create?
生成するウェブページ数を設定。生成しない場合は0を設定。
How many years back should the entries go?
遡る投稿年。5を設定すれば最大5年前の日付に遡って投稿。
Max number of tags for entry?
ブログ記事の最大タグ数。タグを付与しない場合は0を設定。
Add comments
生成したブログ記事にコメントも自動投稿させる場合にチェック。 Will add a random number of comments and comment replies to some of the entries that are created.
Rate entries
ブログ記事に評価をつける場合にチェック。 Will assign random scores to some of the entries that are created.

設定後、「新規作成」をクリック。

生成すると、「… created successfully!」と表示されるので、キャンセルをクリック。続けて生成する場合は、上記を繰り返してください。

設定完了

このように「Entry #n」というタイトルのブログ記事が一括投稿されます。#の後ろの数字はブログ記事のID番号(MTEntryID)です。

ブログ記事一覧

生成されたブログ記事の本文には「Booter biddle」という文字列が設定されます。

ブログ記事

コメントも大量に生成されます。

コメント

タグはこのような感じで生成されます。

タグ

なお、本文・追記のテキストフォーマットのセレクトボックスに「Booter Text Transform」が追加されます。

テキストフォーマット

これは下記の変換をするように予めプログラミングされていますが用途は不明です。

DSW→The Deep & Savage Way
HSZ→Helen of Santa Zita
Comments [0] | Trackbacks [0]

ブログ記事に同一カテゴリーのブログ記事リストを表示(MT4版)

Movable Type 4 で、ブログ記事アーカイブ(エントリーアーカイブ)に同一カテゴリーのブログ記事リスト(エントリーリスト)を表示するためのカスタマイズです。
質問を頂きましたので本エントリーにて解説致します。

Movable Type 3 までは、MTTagInvoke を使ったカスタマイズ「個別エントリーアーカイブに同一カテゴリーのエントリーを表示」が可能でしたが、Movable Type 4 ではこのプラグインが利用できなくなっています。

MT3 と同等のカスタマイズを行うには MTEntryCategoryEntries というプラグインがお勧めですが、ここでは、MTIf タグを使った方法を、順を追ってカスタマイズする形で紹介したいと思います。

読むのが面倒な方は、2項~4項のいずれかのサンプルを、そのままサイドバーに貼り付けてお使いください。

1.基本設定

ブログ記事に同一カテゴリーのブログ記事リストを表示する場合の基本形です。

<MTSetVarBlock name="entrycategory"><$MTEntryCategory$></MTSetVarBlock>
 
<dt class="sidetitle">
Entries of this Category
</dt>
 
<dd class="side">
  <ul>
  <MTEntries category="$entrycategory">
    <li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
  </MTEntries>
  </ul>
</dd>

1行目にある、

<MTSetVarBlock name="entrycategory"><$MTEntryCategory$></MTSetVarBlock>

で、<$MTEntryCategory$> の評価内容を取得し、entrycategory という MT の変数に設定します。
そして、

<MTEntries category="$entrycategory">

で、先に設定した変数 entrycategory の値を用いてブログ記事リストを特定のカテゴリーでフィルタリングしています。MTGetVar の name 属性で変数を使用する場合は $ を付与しませんが(下)、

<MTGetVar name="entrycategory">

MTEntries タグの category 属性に用いる場合は、$ を付与して、MT の変数であることを明示します。

2.特定のアーカイブのみで表示させる

1項の状態では、サイドバーをインクルードする全てのページで表示されてしまうため、ブログ記事アーカイブのみにも適用されてしまいます。

このリストをブログ記事アーカイブだけに表示させるには、リスト全体 MTIf タグで括ります。

<MTIf name="entry_template">
<MTSetVarBlock name="entrycategory"><$MTEntryCategory$></MTSetVarBlock>
 
<dt class="sidetitle">
Entries of this Category
</dt>
 
<dd class="side">
  <ul>
  <MTEntries category="$entrycategory">
    <li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
  </MTEntries>
  </ul>
</dd>
</MTIf>

1行目の MTIf タグの name 属性には、ブログ記事のみで有効になる "entry_template" という値を設定します。

<MTIf name="entry_template">

これでブログ記事アーカイブ以外では、このリストは表示されなくなります。

アーカイブで使える変数値については、「予約変数一覧 for Movable Type 4(その1)」にまとめてありますので、参考になれば幸いです。

3.現在のブログ記事タイトルをリストから除外する

2項までの設定では、現在表示されているブログ記事のタイトルも表示されてしまうので、次にこれを非表示にする制御を行います。

非表示にするには、現在表示されているブログ記事ページのID番号と、リスティングされているブログ記事のID番号を比較・判定する処理(青色部分)を追加します。

<MTIf name="entry_template">
<MTSetVarBlock name="entryid"><$MTEntryID$></MTSetVarBlock>
<MTSetVarBlock name="entrycategory"><$MTEntryCategory$></MTSetVarBlock>
 
<dt class="sidetitle">
Entries of this Category
</dt>
 
<dd class="side">
  <ul>
  <MTEntries category="$entrycategory">
  <MTSetVarBlock name="currententryid"><$MTEntryID$></MTSetVarBlock>
  <MTIf name="currententryid" ne="$entryid">
    <li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
  </MTIf>
  </MTEntries>
  </ul>
</dd>
</MTIf>

現在表示されているブログ記事ページのID番号は、2行目の

<MTSetVarBlock name="entryid"><$MTEntryID$></MTSetVarBlock>

で取得し、リスティングされているブログ記事ページのID番号は、MTEntries タグブロック内の

<MTSetVarBlock name="currententryid"><$MTEntryID$></MTSetVarBlock>

で取得しています。これで、

entryid:現在表示されているブログ記事ページのID番号
currententryid:リスティングされているブログ記事ページのID番号

となり、あとはこれを MTIf タグで判定します。

<MTIf name="currententryid" ne="$entryid">

ne 属性で判定しているので、判定結果が「真」、つまりお互いのブログ記事IDが等しくなければ、MTIf ブロック内の行を実行します。

4.リストが1件の場合はリストを非表示にする

前項の設定を行った場合、あるカテゴリーに属するブログ記事が1件の場合、リストに何も表示されなくなってしまいます。
これを回避するため、カテゴリーに属するブログ記事が1件の場合は、リスト全体を非表示にする制御を行います。

<MTIf name="entry_template">
<MTSetVarBlock name="entryid"><$MTEntryID$></MTSetVarBlock>
<MTSetVarBlock name="entrycategory"><$MTEntryCategory$></MTSetVarBlock>
 
<MTEntries category="$entrycategory">
  <MTSetVarBlock name="entrycount"><$MTGetVar name="__counter__"$></MTSetVarBlock>
</MTEntries>
 
<MTUnless name="entrycount" eq="1">
<dt class="sidetitle">
Entries of this Category
</dt>
 
<dd class="side">
  <ul>
  <MTEntries category="$entrycategory">
  <MTSetVarBlock name="currententryid"><$MTEntryID$></MTSetVarBlock>
  <MTIf name="currententryid" ne="$entryid">
    <li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
  </MTIf>
  </MTEntries>
  </ul>
</dd>
</MTUnless>
</MTIf>

該当カテゴリーのブログ記事数のカウントには、MTEntries タグ内で __counter__ を利用することで取得しています。
ところが、__counter__ という変数は、

<$MTGetVar name="entrycount" value="__counter__"$>

では正常に値を取得できない(変数値がそのまま変数名に設定されてしまう)ので、MTSetVarBlock と MTGetVar を組み合わせて、

<MTSetVarBlock name="entrycount"><$MTGetVar name="__counter__"$></MTSetVarBlock>

としています。

そして、MTUnless タグを用いて、カウント値が "1" でない場合にブロック内を実行するように制御します。

<MTUnless name="entrycount" eq="1">
Comments [8] | Trackbacks [1]

iPod がフリーズした時のリセット方法

November 26,2007 12:20 AM
Category:[mono]
Tag:[]
Permalink

iPod + iTalk Pro を使って録音した音源を聴こうと思って操作をしていると、時々 iPod がフリーズしてしまうことがあります。一旦フリーズすると何も操作できなくなり、電源を切ることすらできません。

で、これまでは充電が切れるまで放置していたのですが、友人にリセット方法があることを教えてもらいました。他の操作でフリーズした時もこの方法で解消できるようです。

公式サイトにリセット方法が掲載されていますので、以下、タイプ別に引用します。

iPod / iPod nano / iPod mini

  1. ホールドスイッチをオンにしてからオフにします(「Hold」にスライドしてから、オフにします)。
  2. メニューボタンとセンター(選択)ボタン(iPod の場合は再生/一時停止ボタン)を同時に 6~10 秒間押したままにして、アップルロゴを表示させます。この手順を繰り返す必要がある場合もあります。
上記の手順でうまくいかなかった場合は、iPod を電源アダプタに接続し、その電源アダプタをコンセントに差し込むか、または iPod をお使いのコンピュータに接続します。コンピュータの電源が入っていることと、スリープ設定にしていないことを確かめてください。
参考:iPod のリセット方法

iPod touch

  1. 「スリープ/解除」ボタンと「ホーム」ボタンを同時に押し、Apple ロゴが表示されるまでそのまま待ちます。
参考:iPod touch トラブルシューティングアシスタント

iPod shuffle

  1. iPod shuffle とコンピュータとの接続を解除します(接続されている場合)。
  2. iPod shuffle 背面のスイッチを「オフ」の位置に動かします。
    ヒント:iPod shuffle がオフのときは、緑の帯がスイッチで見えなくなります。
  3. 5 秒ほど待ちます。
  4. 背面のスイッチを「順番に再生」または「曲をシャッフル」の位置に戻します。緑の帯はいずれの位置でも見えます。
参考:iPod shuffle をリセットする

その他

すべての iPod(touch を除く)について、「iPod トラブル5つの『R』」というタイトルでトラブルシューティングを確認することができます。

5つの「R」とは、

  • リセット(Reset)
  • リトライ(Retry)
  • 再起動(Restart)
  • 再インストール(Reinstall)
  • リストア(Restore)

を指しています。

2007.11.27
リセットがうまくできなかった時の手順を引用で追加しました。

Comments [0] | Trackbacks [0]

概要と本文を切り替える(Movable Type 4・デフォルトテンプレート版)

November 25,2007 1:07 AM
Category:[エントリー]
Tag:[, , , ]
Permalink

当サイトで利用している、トップページのエントリー概要とエントリー本文の表示を切り替えるカスタマイズで、以前紹介した「概要と本文を切り替える(デフォルトテンプレート版)」のMovable Type 4・デフォルトテンプレート版です。

概要に本文の先頭から指定文字数を表示する設定になっている(=概要フィールドに何も書いていない)場合、デフォルトで概要を表示し、タイトルまたは概要の末尾にあるリンクをクリックすることで、ページ遷移をせずに全文を表示することができます。

サンプル

このエントリーではデフォルトテンプレートのトップページおよびカテゴリーアーカイブ/日付アーカイブに適用する例を紹介します(ブログ記事リストを使用したアーカイブにも適用されます)。

1.スクリプトのダウンロード・アップロード

下記のリンクより menufolder.js をダウンロード(本カスタマイズ用に機能追加しています)

download

ダウンロードしたスクリプトを、ブログの index.html と同じディレクトリにアップロードしてください。

2.script 要素の追加

「デザイン」→「テンプレート」→「テンプレートモジュール」→「ヘッダー」を開き、head 終了タグの前に下記の script 要素を追加。

<script type="text/javascript" src="<$MTBlogURL$>menufolder.js"></script>

3.エントリータイトルに折りたたみのリンクを与える

「デザイン」→「テンプレート」→「テンプレートモジュール」→「ブログ記事の概要」を開き、エントリータイトルのタグ

<h2 class="asset-name"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h2>

を下記のように変更します。a 要素を削除して h2 に id 属性を追加しています。

<h2 class="asset-name" id="content<$MTEntryID$>name"><$MTEntryTitle$></h2>

4.概要を追加する

エントリーを表示するタグ

    <div class="asset-content">
<MTIfNonEmpty tag="EntryBody">
        <div class="asset-body">
            <$MTEntryBody$>
        </div>
</MTIfNonEmpty>
<MTIfTagSearch>
        <$MTInclude module="タグ"$>
</MTIfTagSearch>
<MTIfNonEmpty tag="EntryMore" convert_breaks="0">
        <div class="asset-more-link">
            <a href="<$MTEntryPermalink$>#more"><$MTEntryTitle$></a>の続きを読む
        </div>
</MTIfNonEmpty>
    </div>

に対し、青色のタグを追加します。

    <div class="asset-content">
    <div id="content<$MTEntryID$>list2">
       <p><$MTEntryExcerpt$> <a class="foldmark" href="./" onclick="FoldNavigation('content<$MTEntryID$>','chng',''); return(false);" onkeypress="FoldNavigation('idName', 'chng',''); return(false);" title="全部読む">[ all ]</a></p>
    </div>
    <div id="content<$MTEntryID$>list">
<MTIfNonEmpty tag="EntryBody">
        <div class="asset-body">
            <$MTEntryBody$>
        </div>
</MTIfNonEmpty>
<MTIfTagSearch>
        <$MTInclude module="タグ"$>
</MTIfTagSearch>
<MTIfNonEmpty tag="EntryMore" convert_breaks="0">
        <div class="asset-more-link">
            <a href="<$MTEntryPermalink$>#more"><$MTEntryTitle$></a>の続きを読む
        </div>
</MTIfNonEmpty>
    </div>
    </div>

また、同じ「ブログ記事の概要」テンプレートの一番最後(このテンプレートでは表示されていませんが、MTEntries の終了タグ直前)にスクリプト起動用の script 要素(下記)を追加します。

<script type="text/javascript">
//<![CDATA[ 
FoldNavigation('content<$MTEntryID$>','off',false);
//]]>
</script>

これでテンプレートを再構築すれば、概要と本文の切り替えができるようになります。

5.折りたたみ状態を保持しないようにする

このカスタマイズでは折りたたみ状態がクッキーを利用して保持されます。つまり、ブラウザをリロードした時等、直前の折りたたみ状態でページが表示されます。

折りたたみ状態を保持したくない場合は、ダウンロードした menufolder.js の中間辺りに下記の設定(赤色)

//--------------------------------------------------------
// 状態保持用設定データ
//--------------------------------------------------------
 
// 状態保持フラグ
// 有効にする:true
// 無効にする:false
var holdState = true;

を下のように変更してください。

//--------------------------------------------------------
// 状態保持用設定データ
//--------------------------------------------------------
 
// 状態保持フラグ
// 有効にする:true
// 無効にする:false
var holdState = false;

6.注意事項

概要の表示文字数より本文の文字数が少ないと効果ありません。

Comments [14] | Trackbacks [1]

部下の服が

November 24,2007 2:36 AM
Category:[ダジャレ]
Tag:[]
Permalink
Comments [0] | Trackbacks [0]

livedoor テンプレート不具合のお知らせ(前後ページへのリンク追加)

November 23,2007 12:30 AM
Category:[テンプレート]
Tag:[, ]
Permalink

配布中の「livedoor ブログテンプレート」で、下記の不具合がありましたのでお知らせ致します。
ご利用中の皆様にはご迷惑をおかけして申し訳ございません。

1.問題点

  • 1ページに表示するアーカイブの件数が、そのアーカイブ全体の件数より少ない場合、前後ページへのリンクが表示されない
  • 個別記事ページの前後記事のリンクが表示されない

2.対処方法

カテゴリーアーカイブ、月別アーカイブ、個別記事ページの各テンプレートに、下記の前後ページへのリンク(青色)、および CSS を追加してください。

カテゴリーアーカイブ

    :
<!-- 中央カラム開始 -->
<div id="content">
<div class="blog">
 
<div class="content-nav"><a href="<$BlogUrl$>">Top</a> &gt; <$CategoryName$> アーカイブ</div>
 
<div class="page-nav"><IfPrevPage><a href="<$CurrentUrl$>?p=<$PrevPage$>">&lt; 前のページへ</a></IfPrevPage>&nbsp;<IfNextPage><a href="<$CurrentUrl$>?p=<$NextPage$>">次のページへ &gt;</a></IfNextPage></div>
 
<!-- Loop Start -->
<CategorizedArticlesLoop>
<$TrackBackAutoDiscovery$>
    :

月別アーカイブ

    :
<!-- 中央カラム開始 -->
<div id="content">
<div class="blog">
 
<div class="content-nav"><a href="<$BlogUrl$>">Top</a> &gt; <$MonthLabel$> アーカイブ</div>
 
<div class="page-nav"><IfPrevPage><a href="<$CurrentUrl$>?p=<$PrevPage$>">&lt; 前のページへ</a></IfPrevPage>&nbsp;<IfNextPage><a href="<$CurrentUrl$>?p=<$NextPage$>">次のページへ &gt;</a></IfNextPage></div>
 
<!-- Loop Start -->
<MonthlyArticlesLoop>
<$TrackBackAutoDiscovery$>
    :

個別記事ページ

    :
<!-- 中央カラム開始 -->
<div id="content">
<div class="blog">
 
<div class="page-nav">
<IfPrevArticle><a href="<$PrevArticle$>">&lt; 前の記事</a></IfPrevArticle>&nbsp;<IfNextArticle><a href="<$NextArticle$>">次の記事 &gt;</a></IfNextArticle>
</div>
 
<$TrackBackAutoDiscovery$>
    :

CSS

/* ページナビゲーション */
.page-nav {
    margin: 5px 0;
    text-align: center;
    font-size: 12px;
}

以上です。

Comments [2] | Trackbacks [0]

コメント投稿フォームの「情報を保存する」のチェックを外した時の振る舞いを変更する

November 22,2007 12:15 AM
Category:[JavaScript, コメント]
Tag:[, , ]
Permalink

Movable Type 4 のコメント投稿画面にある、「ログイン情報を記憶」というチェックボックス(下のスクリーンショット一番下のチェックボックス)は、投稿者情報(名前・電子メール・URL)をクッキーを利用して保存し、次回の投稿時に投稿者情報の入力を不要にするためのものです。

チェックボックスにチェックをしておけば、コメント投稿時に投稿者情報がクッキーに保存されます。

ログイン情報を記憶

逆に、このチェックを外すと、チェックを外した瞬間にクッキーから投稿者情報を消去する動作が実行されるのですが、同時に、入力フィールドに記入された投稿者情報まで消去されてしまいます(下)。

「ログイン情報を記憶」のチェックを外した後

チェックを外す操作によるフォーム情報のクリアは、ユーザが意図しない動作のように思われます。

ということで、このエントリーでは、チェックを外しても投稿者情報を消去せず、クッキー情報のみ削除するカスタマイズを紹介します。

1.設定方法

ブログ管理画面より、「デザイン」→「テンプレート」を開き、一覧に表示された「JavaScript」のリンクをクリック。これは mt.js というコメントフォーム制御用の JavaScript です。

「JavaScript」のリンクをクリック

「テンプレートの内容」にある赤色の部分

    :
function forgetMe (f) {
    deleteCookie('mtcmtmail', '/', '');
    deleteCookie('mtcmthome', '/', '');
    deleteCookie('mtcmtauth', '/', '');
    f.email.value = '';
    f.author.value = '';
    f.url.value = '';
}
    :

を削除するか、赤色行の先頭に "//" をつけてコメントアウトします。

    :
function forgetMe (f) {
    deleteCookie('mtcmtmail', '/', '');
    deleteCookie('mtcmthome', '/', '');
    deleteCookie('mtcmtauth', '/', '');
//    f.email.value = '';
//    f.author.value = '';
//    f.url.value = '';
}
    :

編集後、「保存と再構築」をクリックしてください。

Comments [1] | Trackbacks [0]

CSS の画像置換で画像にリンクを設定する

November 21,2007 1:01 AM
Category:[CSS]
Tag:[]
Permalink

「画像置換」とは、ヘッダ部分にあるブログ名などのテキストを画像に置き換える手法で、文書構造やSEOを損ねないための複数のテクニックが紹介されています。

このエントリーでは、画像置換をしつつ、さらに画像にリンクも与えられるサンプルを作ってみました。*1

1.サンプル1

h1 の後方に img を置く場合は、CSSハックを使います(h1 のフォントサイズを固定することで画像配置位置がブラウザに依存しなくなると思ったのですが…)。表示は Windows XP + IE6/IE7/Firefox2/Opera9/Safari3 でしか確認しています。

画像置換サンプル1

(X)HTML

<div id="header">
<h1>タイトル</h1>
<div><p><a href="[URL]"><img src="[画像のURL]" alt="[代替テキスト]" title="[ツールチップ用テキスト]" /></a></p></div>
</div>

CSS

#header h1 {
    font-size: 100%;
}
#header div {
    position: relative;
}
#header div p {
    position: absolute;
    top: -19px;
    _top: -18px; /* IE6 */
    left: 0;
}
*:first-child+html #header div p {
    top: -18px; /* IE7 */
}
/* opera9 \*/
html:\66irst-child #header div p {
    top: -18px;
}

ここでは適用していませんが、Windows XP + Safari3 の CSS ハックは下記で有効になります。

body:first-of-type #header div p {
    top: -18px;
}

2.サンプル2

img 要素を h1 要素より前に記述すれば CSS ハックが不要になります。ただし文書構造的にはサンプル1の方がいいかもしれません。

画像置換サンプル2

(X)HTML

<div id="header">
<div><p><a href="[URL]"><img src="[画像のURL]" alt="[代替テキスト]" title="[ツールチップ用テキスト]" /></a></p></div>
<h1>タイトル</h1>
</div>

CSS

#header div {
    position: relative;
}
#header div p {
    position: absolute;
    top: 0;
    left: 0;
}

3.その他

上記の設定は、画像サイズが表示領域を超えないことを前提にしています(overflow: hidden を設定して試したところ、IE7 では適用されませんでした)。
上記の他、何か良いアドバイスがあればお待ちしています。

4.参考・関連サイト


*1:このテクニックは「XREA のバナー広告を固定レイアウトのヘッダに表示する」の記事の応用です。

Comments [7] | Trackbacks [1]

予約変数一覧 for Movable Type 4(その2)

November 20,2007 1:27 AM
Category:[4.0, アーカイブ]
Tag:[, ]
Permalink

MTIf タグ等でアーカイブ種別を判定するための、Movable Type 4 で予め用意された予約変数一覧です。「予約変数一覧 for Movable Type 4(その1)」でまとめたものは変数に"1"が設定されているものですが、今回は、

archive_class

という変数に設定されている文字列をまとめました。
大体お分かりと思いますが、この変数はアーカイブ種別を判定するためのものです。

前回同様、lib/MT/WeblogPublisher.pm に記載されています(使用方法は後述)。

アーカイブ種別変数名
年別datebased-yearly-archive
月別datebased-monthly-archive
週別datebased-weekly-archive
日別datebased-daily-archive
ブログ記事entry-archive
ウェブページpage-archive
カテゴリcategory-archive
年別カテゴリcategory-yearly-archive
月別カテゴリcategory-monthly-archive
週別カテゴリcategory-weekly-archive
日別カテゴリcategory-daily-archiv
ユーザーauthor-archive
年別ユーザーauthor-yearly-archive
月別ユーザーauthor-monthly-archive
週別ユーザーauthor-weekly-archive
日別ユーザーauthor-daily-archive

例えば、アーカイブ種別が「月別カテゴリ」であることを判定したい場合は、

<MTIf name="archive_class" eq="category-monthly-archive">
  :
</MTIf>

とテンプレート(またはテンプレートモジュール)に書きます。

このタグが書かれたテンプレートやテンプレートモジュールが「月別カテゴリ」として実行される場合、MTIf タグのブロック内部が実行されます。

アーカイブ種別が「ブログ記事」であることを判定したい場合は

<MTIf name="archive_class" eq="entry-archive">
  :
</MTIf>

と書きます。このタグが書かれたテンプレートやテンプレートモジュールが「ブログ記事」として実行される場合、MTIf タグのブロック内部が実行されます。

これらを利用すれば、独自の変数を用意する必要はありません。

MTArchiveType との違い

Movable Type では MTArchiveType タグが用意されているので、これを使って判定することも可能ですが、実装がやや面倒です。
例えば、アーカイブ種別が「ブログ記事」であることを判定したい場合は、

<MTSetVarBlock name="archive_type"><$MTArchiveType$></MTSetVarBlock>
<MTIf name="archive_type" eq="Individual">
  :
</MTIf>

となります。MTSetVarBlock タグで値を任意の変数 archive_type に設定する分が余分に必要です。

変則的な判定方法

like 属性を用いて、各アーカイブ(日付・カテゴリ・ユーザー)の月別アーカイブだけを取得するには次のように記述します。

<MTIf name="archive_class" like="monthly">
  :
</MTIf>
Comments [3] | Trackbacks [0]

予約変数一覧 for Movable Type 4(その1)

November 19,2007 2:30 AM
Category:[4.0, アーカイブ]
Tag:[, ]
Permalink

MTIf タグ等でアーカイブ種別を判定するための、Movable Type 4 で予め用意された予約変数一覧です。

これらは lib/MT/WeblogPublisher.pm に記載されているもので、抜粋したものを下記の表にまとめました(使用方法は後述)。

 YMWDCCAAIP
YMWDYMWD
archive_template
main_template
datebased_archive    
datebased_only_archive            
category_archive           
author_archive           
entry_archive
feedback_template
              
module_category_archives
module_category-monthly_archives
              
module_author_archives
module_author-monthly_archives
              
datebased_yearly_archive
module_yearly_archives
               
datebased_monthly_archive
module_monthly_archives
               
datebased_weekly_archive               
datebased_daily_archive               
category_yearly_archive               
category_monthly_archive               
category_weekly_archive               
category_daily_archive               
author_yearly_archive               
author_monthly_archive               
author_weekly_archive               
author_daily_archive               
entry_template               
page_archive
page_template
               

一番上にある略号の意味は次の通りです。

  • Y:年別アーカイブ
  • M:月別アーカイブ
  • W:週別アーカイブ
  • D:日別アーカイブ
  • C:カテゴリーアーカイブ
  • A:ユーザーアーカイブ
  • I:ブログ記事アーカイブ
  • P:ウェブページアーカイブ

カテゴリーアーカイブとユーザーアーカイブは、年別・月別・週別・日別との組み合わせもあります。

○印がついているのが、そのアーカイブを表示する時に、変数に "1" が設定されていることを示しています。●はデフォルトテンプレートで、テンプレート上に MTSetVar タグで設定されているものを示しています。

例えば、アーカイブ種別が「年別・月別・週別・日別」であることを判定したい場合は、

<MTIf name="datebased_only_archive">
  :
</MTIf>

とテンプレート(またはテンプレートモジュール)に書きます。

このタグが書かれたテンプレートやテンプレートモジュールが「年別・月別・週別・日別」として実行される場合、MTIf タグのブロック内部が実行されます。

アーカイブ種別が「ブログ記事・ウェブページ」であることを判定したい場合は

<MTIf name="entry_archive">
  :
</MTIf>

または

<MTIf name="feedback_template">
  :
</MTIf>

と書きます。このタグが書かれたテンプレートやテンプレートモジュールが「ブログ記事・ウェブページ」として実行される場合、MTIf タグのブロック内部が実行されます。

これらを利用すれば、独自の変数を用意する必要はありません。

Comments [3] | Trackbacks [0]

「Movable Type WEBデザインの新しいルール」重版決定

November 18,2007 12:55 AM
Category:[書籍]
Tag:[, , ]
Permalink

10月中旬に発売された「Movable Type WEBデザインの新しいルール」の重版が決定致しました。

Movable Type WEBデザインの新しいルールMovable Type WEBデザインの新しいルール
荒木 勇次郎 松永 英明

翔泳社 2007-10-17
売り上げランキング : 205

Amazonで詳しく見る
by G-Tools

Amazon の売り上げランキングをチェックしていますが、「 販売状況と紹介リンク等」でお知らせした後もわりと上位をうろうろしているようです。
大変多くの方にお買い上げいただいているようで、本当にありがとうございます。

内容は、第1版との違いはほとんどありませんが、若干の校正、それから頂いたご質問を多少反映させています。

なおサンプルデータのダウンロードサイトのURLの掲載位置(各章扉の右下)が分かりにくいようで、当サイト(や翔泳社)に質問を頂いています。ダウンロードサイトでは、サンプルデータ以外に、書籍に掲載されているリンク一覧やカスタマイズ情報等、色々公開しているので、「サポートサイト」として格上げし、目次の下に掲載してもらうことになっています。

Comments [0] | Trackbacks [0]

今週まで

November 17,2007 2:20 AM
Category:[ダジャレ]
Tag:[]
Permalink
Comments [0] | Trackbacks [0]

CORESERVER(CORE-A)移行後の感想とコメント投稿エラーについて

November 16,2007 8:30 AM
Category:[お知らせ, サイト変更履歴]
Tag:[]
Permalink

CORESERVER(CORE-A)移行から約1ヶ月が経ちましたので、いくつか感想を。

1.ページ表示

サーバ移行後に頂いたコメントより、以前よりページの表示速度が早くなったようです。PHP を CGI 版からモジュール版に変更した恩恵なのかどうかは不明ですが、サーバ移転をして正解でした(さくらインターネットは良いレンタルサーバですので、その点は誤解なきよう)。

2.503 エラー

さくらインターネット(スタンダードプラン)で目標0件を達成できなかった、ページアクセス時の503エラーは0になりました。

クロール結果

上記は Google ウェブマスターツールのクロール結果です。503エラーとなったページ数は「URL にアクセスできません」に計上されますが、今のところ0件です。

なお、「HTTP エラー」や「見つかりませんでした」に計上されているのは、外部サイトからのリンク(で存在しないもの)がクロールされているようです。

3.コメント投稿エラー

上記の2点は改善されたのですが、その代わり、コメント投稿で 500 エラー、あるいは下のようなエラーが発生するケースが新たに浮上しました。

エラー画面

原因はアカウントの負荷が高いことによるものと推測されます。
サーバ負荷を考慮して、CORE-A ではなく、CORE-B に移行するつもりでしたが、なかなかサービスが開始されないので、見切り発車で CORE-A を選択したのが根本的な原因です。
CORE-B がサービス開始された暁には(可能であれば)速やかに移転したいと思います。

なお、この問題に遭遇すると、コメント自体はデータベースに書き込まれるのですが、ページに反映されない(=再構築されない)ため、投稿失敗にみえてしまい、重複して投稿されるようです。

上記のエラーが表示された場合は、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。
私もエラーに何回か遭遇していますが、リロードすることでほぼ全て投稿が反映されています。

4.その他

移転後、旧サーバからファイルの転送もれがいくつかあり、ファイルが参照できませんというご指摘を頂きました。最近は落ち着いてきたのですが、内部リンクでデッドリンクに遭遇した場合、ご一報頂ければ幸いです。

Comments [7] | Trackbacks [0]

Parallax Backgrounds で背景画像のスクロール速度を変える

November 15,2007 12:33 AM
Category:[JavaScript]
Tag:[]
Permalink

背景画像のスクロール速度を変えることで、コンテンツと背景画像で遠近感を演出することができるスクリプト「Parallax Backgrounds」を紹介します。

Parallax Backgrounds

公式サイトのサンプルでは、スピードが異なる2つの背景画像を組み合わせているので、やや奇抜な印象を受けますが、背景を遠方として捉えたイメージで作り直したサンプル(単に雲を除いただけ)をご覧頂ければ、シンプルな遠近感の動きを楽しめます。

サンプル

サンプル途中にある引用(blockquote)部分は、横スクロールで背景画像のスクロール速度が変わります。

以下、サンプルを例に、

  • ひとつの背景画像を縦スクロール
  • 複数の背景画像を縦スクロール
  • ひとつの背景画像を横スクロール(blockquote内)

の3通りについて設定方法を説明します。

1.ひとつの背景画像を縦スクロール

ひとつの背景画像をスクロールする場合は次のように設定します。

1.1 (X)HTML

背景を表示する要素に ground という id 属性値を付与。属性値の名称は何でも構いませんが、後で設定する CSS と JavaScript で同じ名称にする必要があります。

<body id="ground">
  :
</body>

1.2 CSS

1.1で設定した id 属性に下記のスタイルを与えます。

#ground {
    background-image: url(bg-green.gif);
    background-repeat: repeat;
    background-attachment: fixed;
}

1.3 JavaScript

下記のスクリプトを script 要素で括り、head 終了タグの直前に配置します(外部ファイルにしても構いません)。

function calcParallax(tileheight, speedratio, scrollposition) {
  //    by Brett Taylor http://inner.geek.nz/
  //    originally published at http://inner.geek.nz/javascript/parallax/
  //    usable under terms of CC-BY 3.0 licence
  //    http://creativecommons.org/licenses/by/3.0/
  return ((tileheight) - (Math.floor(scrollposition / speedratio) % (tileheight+1)));
}
window.onload = function() {
    window.onscroll = function() {
        var posY = (document.documentElement.scrollTop) ? document.documentElement.scrollTop : window.pageYOffset;
  
        var ground = document.getElementById('ground');
        var groundparallax = calcParallax(53, 8, posY);
        ground.style.backgroundPosition = "0 " + groundparallax + "px"; 
    }
}

calcParallax(tileheight, speedratio, scrollposition) に設定するパラメータの内容は下の通りです。

tileheight:背景画像の高さ
speedratio:スクロール速度、1が通常スクロールで、1より大きいと遅くなり、小さくすると早くなる
scrollposition:スクロール方向

サンプルでは背景画像の高さ53px、スクロール速度8、スクロール方向はY(縦)です。
背景画像の高さは利用する画像に依存し、スクロール方向はスクリプト内で取得した変数をそのまま設定するだけですので、実際に値を変更できるのはスクロール速度のみです。

2.複数の背景画像を縦スクロール

2.1 (X)HTML

背景を表示する要素に ground という id 属性値に加え、clouds という id 属性値を付与します。

<body id="ground">
  <div id="clouds">
  :
  </div>
</body>

2.2 CSS

2.1で設定した id 属性にそれぞれ下記のスタイルを与えます。

#ground {
    background-image: url(bg-green.gif);
    background-repeat: repeat;
    background-attachment: fixed;
}
#clouds {
    background-image: url(clouds.png);
    background-repeat: repeat;
    background-attachment: fixed;
}
* html #clouds {
  /* because IE6 can't do transparent PNGs for backgrounds */
  background-image: url(clouds.gif);  
}

2.3 JavaScript

下記のスクリプトを script 要素で括り、head 終了タグの直前に配置します(外部ファイルにしても構いません)。

function calcParallax(tileheight, speedratio, scrollposition) {
  //    by Brett Taylor http://inner.geek.nz/
  //    originally published at http://inner.geek.nz/javascript/parallax/
  //    usable under terms of CC-BY 3.0 licence
  //    http://creativecommons.org/licenses/by/3.0/
  return ((tileheight) - (Math.floor(scrollposition / speedratio) % (tileheight+1)));
}
window.onload = function() {
  window.onscroll = function() {
    var posX = (document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : window.pageXOffset;
    var posY = (document.documentElement.scrollTop) ? document.documentElement.scrollTop : window.pageYOffset;
 
    var ground = document.getElementById('ground');
    var groundparallax = calcParallax(53, 8, posY);
    ground.style.backgroundPosition = "0 " + groundparallax + "px"; 
 
    var clouds = document.getElementById('clouds');
    var cloudsparallax = calcParallax(400, .5, posY);
    clouds.style.backgroundPosition = "0 " + cloudsparallax + "px"; 
  }
}

お分かりのように、複数の背景を制御する場合は、1.3項の後半に現われるソースコードを、変数名を変更して必要分作成しています。

3.ひとつの背景画像を横スクロール(blockquote内)

3.1 (X)HTML

以下のように blockquote 属性に id 属性値を設定します。またスクロール設定のための class 属性も与えています。

<blockquote id="javascriptcode" class="scrollcode">~</blockquote>

3.2 CSS

.scrollcode {
    overflow:auto;
    white-space:nowrap;
}
#javascriptcode {
    background-image: url(bg-greenwhite.gif);
    background-repeat: repeat;
}

3.3 JavaScript

下記のスクリプトを script 要素で括り、head 終了タグの直前に配置します(外部ファイルにしても構いません)。

function calcParallax(tileheight, speedratio, scrollposition) {
  //    by Brett Taylor http://inner.geek.nz/
  //    originally published at http://inner.geek.nz/javascript/parallax/
  //    usable under terms of CC-BY 3.0 licence
  //    http://creativecommons.org/licenses/by/3.0/
  return ((tileheight) - (Math.floor(scrollposition / speedratio) % (tileheight+1)));
}
window.onload = function() {
  document.getElementById('javascriptcode').onscroll = function() {
    var posX = (this.scrollLeft) ? this.scrollLeft : this.pageXOffset;
    var j = calcParallax(53, 16, posX);
    console.log('scroll js: '+ j);
    document.getElementById('javascriptcode').style.backgroundPosition = j + "px 0";
  } 
}

1.3や2.3と異なるのは、window.onscroll プロパティではなく、取得 id 属性のonscroll プロパティで動作している点です。

Comments [0] | Trackbacks [0]

「WordPress で『続きを読む』の折りたたみ」を特定のページだけに適用する

November 14,2007 3:10 AM
Category:[折りたたみ]
Tag:[, ]
Permalink

WordPress で「続きを読む」の折りたたみ Web2.0」では、スライドダウンで本文下に続きを表示するカスタマイズをご紹介しましたが、カテゴリーアーカイブや月別アーカイブでも折りたたみが適用されてしまうため、追記部分のテキスト量が多い場合、ページの読み込みに時間がかかる可能性があります。

ということで、本エントリーではインデックスページのみ折りたたみを適用し、アーカイブページでは記事ページへのリンクを表示するカスタマイズを紹介します。

注:このカスタマイズを行う前に「WordPress で「続きを読む」の折りたたみ Web2.0」を設定してください。

設定方法

getContentforShowHide.php を任意のエディタで開き、以下の青色部分を追加してください。追加部分は大きく分けて4ヶ所あります。特に閉じカッコ "}" 忘れがないよう、ご注意ください。

    :
function output_showHide_js() {
    if(is_home()) {
?>
<script type="text/javascript">
Effect.DefaultOptions = {
  transition: Effect.Transitions.sinoidal,
  duration:   0.5,   // seconds
  fps:        60.0,  // max. 60fps due to Effect.Queue implementation
  sync:       false, // true for combining
  from:       0.0,
  to:         1.0,
  delay:      0.0,
  queue:      'parallel'
}
function ajaxShowHide(entryID) {
  element = $('Text' + entryID);
  if(element.style.display == 'none') {
    options = {
        afterFinish: function(effect) {
            $('Link' + entryID).firstChild.innerHTML = '&#171; Hide more';
            Element.show(effect.element);
        }
    };
    Effect.BlindDown(element, options);
  } else {
    options = {
        afterFinish: function(effect) {
            $('Link' + entryID).firstChild.innerHTML = 'Read more &#187;';
            Element.hide(effect.element);
        }
    };
    Effect.BlindUp(element, options);
  }
}
</script>
<?php
    }
}
    :
function get_the_contentshowhide($more_link_text = '(more...)', $stripteaser = 0, $more_file = '') {
    :
  (中略)
    :
    if (count($content)>1) {
        $allcontent = "";
        for ($counter = 1; $counter < count($content); $counter++) {
            $allcontent .= $content[$counter];
        }
        if ($more) {
            $output .= '<a id="more-'.$id.'"></a>'.$allcontent;
        } else {
            if(is_home()) {
    $output .= "
    <div id='Link$id' class='ajax-entry-more-link'><a href='".get_permalink()."' name='ext$id' onclick=\"ajaxShowHide($id);return false;\">Read more »</a></div>
    <div id='Text$id' style='display: none'>
        " . $allcontent . "
        <div class='ajax-entry-more-link'><a href='#ext$id' onclick=\"ajaxShowHide($id);return false;\">« Hide more</a></div>
    </div>";
            } else {
    $output .= "<div class='ajax-entry-more-link'><a href='".get_permalink()."' name='ext$id'>Read more &#187;</a></div>";
            }
        }
    }
    if ($preview) { // preview fix for javascript bug with foreign languages
        $output =  preg_replace('/\%u([0-9A-F]{4,4})/e',  "'&#'.base_convert('\\1',16,10).';'", $output);
    }
    return $output;
}

修正後、元のディレクトリにアップロードすれば完了です。

2007.11.14
ソースコードの関数名が誤っていたので修正しました。また折りたたみを適用しない場合のマークアップ(div)に class 属性を追加しました。

Comments [2] | Trackbacks [0]

配布テンプレートのサイドバーにリストを追加する

November 13,2007 1:50 AM
Category:[テンプレート]
Tag:[, ]
Permalink

配布テンプレートのサイドバーにリストを追加する方法です。ご質問を頂きましたので本エントリーにて紹介致します。

1.サイドバーの構成

Movable Type 3.x および Movable Type 4 用のテンプレートの左サイドバーの構成イメージは下記のようになっています。

     :
<dl id="links-left">
 
<dt class="sidetitle">リストタイトル1</dt>
<dd class="side">
[リスト1の内容]
</dd>
 
<dt class="sidetitle">リストタイトル2</dt>
<dd class="side">
[リスト2の内容]
</dd>
 
<dt class="sidetitle">リストタイトル3</dt>
<dd class="side">
[リスト3の内容]
</dd>
     :
</dl>
     :

全体が dl 要素で括られ、リストタイトルが dt、リストの内容は dd 要素で括られています。dt 要素と dd 要素で一組のリストを表示します。
また、dt 要素の class 属性には sidetitle、dd 要素の class 属性には side を与えており、それぞれのスタイルを決めています。

他のテンプレートや他のブログツールのテンプレートでは dl/dt/dd ではなく、div 要素を使っています。

     :
<div id="links-left">
 
<div class="sidetitle">リストタイトル1</div>
<div class="side">
[リスト1の内容]
</div>
 
<div class="sidetitle">リストタイトル2</div>
<div class="side">
[リスト2の内容]
</div>
 
<div class="sidetitle">リストタイトル3</div>
<div class="side">
[リスト3の内容]
</div>
     :
</div>
     :

全体が div 要素で括られ、リストタイトル、リストの内容も div 要素で括られています。

参考までに、WordPress テンプレートでは div/ul/li/h2 によるマークアップになっています。

     :
<div id="links-left">
    <ul>
        <li><h2>リストタイトル1</h2>
            <ul>[リストの内容1]</ul>
        </li>
 
        <li><h2>リストタイトル2</h2>
            <ul>[リストの内容2]</ul>
        </li>
 
        <li><h2>リストタイトル3</h2>
            <ul>[リストの内容3]</ul>
        </li>
    </ul>
</div>
     :

2.リストの追加方法1

テンプレート編集画面を開き、2.1または2.2項の作業を行ってください。Movable Type 4 であればブログ管理画面の「デザイン」→「テンプレート」→「テンプレートモジュール」→「サイドバー(またはサイドバー2)」よりテンプレート編集画面が開きます。

2.1 テンプレートのサイドバーが dl/dt/dd で構成されている場合

以下のように dt 要素と dd 要素の(X)HTMLマークアップを追加します。

<dt class="sidetitle">リストタイトルn</dt>
<dd class="side">
[リストnの内容]
</dd>

dt 要素の内容にタイトル名、dd 要素の内容にはお好きなテキスト文字や(X)HTMLマークアップ、あるいはご利用のブログでサポートしているテンプレート用タグ等を記述してください。

dt 要素と dd 要素に与えられている class 属性は削除しないでください。class 属性を削除すると、追加したリストの表示が他のリストと異なってしまいます。

dl 要素の中であればどこにでも追加可能です。他の dt/dd のリストの dt と dd の間には挿入しないでください。

例えばリンク集を追加する場合は、

<dt class="sidetitle">リンク集</dt>
<dd class="side">
<ul>
<li><a href="http://aaa/">リンク1</a></li>
<li><a href="http://bbb/">リンク2</a></li>
<li><a href="http://ccc/">リンク3</a></li>
</ul>
</dd>

とします。この例ではリンク集の内容全体を ul 要素で括っていますが、

<dt class="sidetitle">リンク集</dt>
<dd class="side">
・<a href="http://aaa/">リンク1</a><br />
・<a href="http://bbb/">リンク2</a><br />
・<a href="http://ccc/">リンク3</a><br />
</dd>

のようにしても構いません(推奨するマークアップではありません)。

リストの内容がスクリプトを利用して表示する場合は

<dt class="sidetitle">リンク集</dt>
<dd class="side">
<script type="text/javascript">
// リストを表示するスクリプト等
</script>
</dd>

とします。

2.2 テンプレートのサイドバーが div で構成されている場合

以下のように、div 要素の(X)HTMLマークアップを追加します。

<div class="sidetitle">リストタイトルn</div>
<div class="side">
[リストnの内容]
</div>

3.リストの追加方法2

dt 要素、つまりリストタイトルは(X)HTMLマークアップ上、必須ではありませんので、上記のリンク集の例であれば、

<dd class="side">
<ul>
<li><a href="http://aaa/">リンク1</a></li>
<li><a href="http://bbb/">リンク2</a></li>
<li><a href="http://ccc/">リンク3</a></li>
</ul>
</dd>

と、リストの内容だけを追加しても構いません。

3.注意事項

dl 要素の子要素に記述できるのは、dt および dd のみです。したがって下記のようなマークアップ(赤色部分)は誤りです。

<dt class="sidetitle">リンク集</dt>
<dd class="side">
<ul>
<li><a href="http://aaa/">リンク1</a></li>
<li><a href="http://bbb/">リンク2</a></li>
<li><a href="http://ccc/">リンク3</a></li>
</ul>
</dd>
 
<script type="text/javascript">
// 追加したリストを操作するスクリプト等
</script>

上記の場合は、script 要素全体も dd 要素で括り、

<dt class="sidetitle">リンク集</dt>
<dd class="side">
<ul>
<li><a href="http://aaa/">リンク1</a></li>
<li><a href="http://bbb/">リンク2</a></li>
<li><a href="http://ccc/">リンク3</a></li>
</ul>
</dd>
 
<dd>
<script type="text/javascript">
// 追加したリストを操作するスクリプト等
</script>
</dd>

とするか、リストの内容に含め、

<dt class="sidetitle">リンク集</dt>
<dd class="side">
<ul>
<li><a href="http://aaa/">リンク1</a></li>
<li><a href="http://bbb/">リンク2</a></li>
<li><a href="http://ccc/">リンク3</a></li>
</ul>
<script type="text/javascript">
// 追加したリストを操作するスクリプト等
</script>
</dd>

としてください。

div 要素で構成されたサイドバーは

<div class="sidetitle">リンク集</div>
<div class="side">
・<a href="http://aaa/">リンク1</a><br />
・<a href="http://bbb/">リンク2</a><br />
・<a href="http://ccc/">リンク3</a><br />
</div>
 
<script type="text/javascript">
// 追加したリストを操作するスクリプト等
</script>

で構いません。

4.(X)HTMLマークアップについて

(X)HTMLマークアップの基本や、マークアップでの親子関係(ある要素の親要素または子要素に記述可能な要素が何か)等が分からない場合は「XHTMLタグ一覧ツール」をご利用ください。

Comments [16] | Trackbacks [0]

アーカイブのブログ記事一覧をサイドバーに表示する

November 12,2007 3:02 AM
Category:[アーカイブ, サイドバー]
Tag:[, ]
Permalink

アーカイブのブログ記事一覧「ブログ記事リスト」テンプレートを利用した各アーカイブページで MTEntries タグを利用すると、アーカイブの種類に該当するブログ記事(エントリー)のみが表示されます。例えば2007年9月のアーカイブでは、その月に投稿したブログ記事のみが表示されます。

これを利用して、アーカイブのブログ記事一覧をサイドバーに表示するカスタマイズを紹介します。このカスタマイズのポイントは、リストのタイトル表示をアーカイブの種類に合わせて切り替えるところです。
ここでは MT4 の配布テンプレートを例に説明しますが、MTタグ部分の構造は他のテンプレートでも共通に使えます。

1.月別アーカイブリストのブログ記事一覧を表示する

「デザイン」→「テンプレート」→「テンプレートモジュール」→「サイドバー(または「サイドバー2」)」に下記のタグを追加します。

<MTIf name="datebased_only_archive">
<MTIfArchiveTypeEnabled archive_type="Monthly">
<dt class="sidetitle">
List of "<$MTArchiveDate format="%B %Y"$>"
</dt>
<dd class="side">
<ul>
<MTEntries>
<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
</dd>
</MTIfArchiveTypeEnabled>
</MTIf>

リストタイトル部分の MTArchiveDate に format 属性を加えて、MTArchiveDate から必要な情報(年月)のみを抽出しています。

また、MTIf タグと MTIfArchiveTypeEnabled タグで全体を括り、月別アーカイブかつ、月別アーカイブが利用可能な場合のみ表示するように制御しています。

2.カテゴリーアーカイブリストのブログ記事一覧を表示する

「デザイン」→「テンプレート」→「テンプレートモジュール」→「サイドバー(または「サイドバー2」)」に下記のタグを追加します。

<MTIf name="category_archive">
<MTIfArchiveTypeEnabled archive_type="Category">
<dt class="sidetitle">
List of "<$MTArchiveTitle$>"
</dt>
<dd class="side">
<ul>
<MTEntries>
<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
</dd>
</MTIfArchiveTypeEnabled>
</MTIf>

カテゴリーアーカイブのリストタイトルは MTArchiveDate をそのまま表示させています。
こちらも、MTIf タグと MTIfArchiveTypeEnabled タグで全体を括り、カテゴリーアーカイブかつ、カテゴリーアーカイブが利用可能な場合のみ表示するように制御しています。

なお、カテゴリー配下のサブカテゴリーを含めたい場合は、下のように MTEntries を MTEntriesWithSubCategories にします。

<MTIf name="category_archive">
<MTIfArchiveTypeEnabled archive_type="Category">
<dt class="sidetitle">
List of "<$MTArchiveTitle$>"
</dt>
<dd class="side">
<ul>
<MTEntriesWithSubCategories>
<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntriesWithSubCategories>
</ul>
</dd>
</MTIfArchiveTypeEnabled>
</MTIf>

ここでは月別アーカイブとカテゴリーアーカイブをサンプルにしましたが、他のアーカイブでも色々試してみてください。

2007.11.22
各サンプルの MTIf タグに誤りがありました(メインページにも適用される変数を使用していました)ので修正致しました。

Comments [4] | Trackbacks [0]

サメを取り逃がして

November 11,2007 12:17 AM
Category:[ダジャレ]
Tag:[]
Permalink
Comments [2] | Trackbacks [0]

ミニチュアブログ

November 10,2007 3:00 AM
Category:[ホームページ]
Tag:[, ]
Permalink

ミニチュアの制作をされている、ぱりぱりさんのサイト「ミニチュアブログ」を紹介します。

ミニチュアブログ

食品系を中心として、他にも精巧なミニチュアが勢ぞろいです。ブログで時系列に眺めるのも楽しいですが、ウェブサイトからまとめて見ることもできます。

下のエントリーに掲載されているセットは、最近、ヤフーオークションで約131万円で落札されたもので、圧巻です。

ミニチュア制作の書籍もありましたのでご紹介まで。

ミニチュアフード―ねんどで作る1/6サイズの小さなごちそう (レディブティックシリーズ―クラフト (2263))ミニチュアフード―ねんどで作る1/6サイズの小さなごちそう (レディブティックシリーズ―クラフト (2263))

ブティック社 2005-03
売り上げランキング : 68270

Amazonで詳しく見る
by G-Tools
ドールハウスのミニチュア小物―ごちそうの本ドールハウスのミニチュア小物―ごちそうの本
大野 幸子

日本ヴォーグ社 2000-10
売り上げランキング : 5165

Amazonで詳しく見る
by G-Tools
Comments [0] | Trackbacks [0]

AMN バナー広告表示開始しました

November 9,2007 1:25 AM
Category:[AMN]
Tag:[]
Permalink

先月よりアジャイルメディアネットワーク(AMN)に参加させて頂いてますが、本日よりその関係でラージバナーの表示を開始致しました。

一応、主要5ブラウザ(IE6/IE7/Firefox2/Opera9/Safari3)で表示を確認しています。その関係でタイトル横にあった「a cheap joke and a play on words site」というサブタイトルは、スペースの都合上、非表示にしました。
ヘッダ部分の表示がおかしい場合は、お手数ですがブラウザのリロードをお願い致します。

なお、このようなバナー広告の位置決めをするCSSは、下記の記事が参考になるかもしれません。

XREA のバナー広告を固定レイアウトのヘッダに表示する
Comments [0] | Trackbacks [0]

Lightbox JS/Litebox で BlogPet を背景画像の下に隠す

November 8,2007 12:17 AM
Category:[BlogPet, JavaScript]
Tag:[, ]
Permalink

Lightbox JS でブログパーツ BlogPet の Flash を隠すカスタマイズLightbox JS / Litebox でブログパーツ BlogPet の Flash を PNG 背景画像の下に隠す方法です。

以前、「Lightbox JS でブログパーツ等の Flash を PNG 背景画像の下に隠す」という記事を書いたのですが、BlogPetのソースコードが変更されており、ご質問を頂きましたので再掲します。

1.BlogPet のスクリプトを取得する

BlogPet 表示用の script 要素の src 属性に記述されたURLをブラウザ(Firefox 推奨)に入力すると、下のようなスクリプトが表示されます。

(function() {
 
    try {
        request = encodeURIComponent(document.URL);
        referrer = encodeURIComponent(document.referrer);
    } catch (e) {
        request = escape(document.URL);
        referrer = escape(document.referrer);
    }
 
 
    document.write(
    "<object id='usa.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' " +
        "classid='clsid:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' " +
        "codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0' " +
        "width='130' " +
        "height='220'>" +
    "<param name='allowScriptAccess' value='sameDomain' />" +
    "<param name='movie' value='http://media.blogpet.net/5/8/243658.swf' />" +
    "<param name='play' value='true' />" +
    "<param name='loop' value='false' />" +
    "<param name='menu' value='false' />" +
    "<param name='quality' value='high' />" +
    "<param name='bgcolor' value='#ffffff' />" +
    "<param name='FlashVars' value='public_key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&domain=api.blogpet.net&current_url=" + request + "' />" +
    "<embed name='usa.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' " +
        "type='application/x-shockwave-flash' " +
        "pluginspage='http://www.macromedia.com/go/getflashplayer' " +
        "width='130' " +
        "height='220' " +
        "allowScriptAccess='sameDomain' " +
        "src='http://media.blogpet.net/5/8/243658.swf' " +
        "play='true' " +
        "loop='false' " +
        "menu='false' " +
        "quality='high' " +
        "bgcolor='#ffffff' " +
        "current_url='" + request + "'" +
        "FlashVars='public_key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&domain=api.blogpet.net&current_url=" + request + "' />" +
    "</object><br />"
    );
 
 
})();
 
 
 
 
document.write('<object id="site" classid="clsid:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="130" height="100" align="middle"><param name="allowScriptAccess" value="always" /><param name="movie" value="http://kk.blogtoy.net/swf/48.swf" /><param name="play" value="true" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="high" /><param name="FlashVars" value="domain=kk.blogtoy.net&amp;source=/swf/13.swf&amp;onclick=/click/2/classic/8" /><embed src="http://kk.blogtoy.net/swf/48.swf" loop="false" menu="false" quality="high" bgcolor="#ffffff" width="130" height="100" name="site" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" FlashVars="domain=kk.blogtoy.net&amp;source=/swf/13.swf&amp;onclick=/click/2/classic/8" /></object>');

これを「ファイル」→「名前をつけてページを保存」を選択し、任意のファイル名(blogpet.txt 等)で保存します。

2.スクリプトの修正

保存したスクリプトを任意のエディタで開き、下記の青色部分を追加してください。注:計4ヶ所あります。

(function() {
 
    try {
        request = encodeURIComponent(document.URL);
        referrer = encodeURIComponent(document.referrer);
    } catch (e) {
        request = escape(document.URL);
        referrer = escape(document.referrer);
    }
 
 
    document.write(
    "<object id='usa.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' " +
        "classid='clsid:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' " +
        "codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0' " +
        "width='130' " +
        "height='220'>" +
    "<param name='allowScriptAccess' value='sameDomain' />" +
    "<param name='movie' value='http://media.blogpet.net/5/8/243658.swf' />" +
    "<param name='play' value='true' />" +
    "<param name='loop' value='false' />" +
    "<param name='menu' value='false' />" +
    "<param name='quality' value='high' />" +
    "<param name='bgcolor' value='#ffffff' />" +
    "<param name='wmode' value='transparent' />" +
    "<param name='FlashVars' value='public_key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&domain=api.blogpet.net&current_url=" + request + "' />" +
    "<embed name='usa.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' " +
        "type='application/x-shockwave-flash' " +
        "pluginspage='http://www.macromedia.com/go/getflashplayer' " +
        "width='130' " +
        "height='220' " +
        "allowScriptAccess='sameDomain' " +
        "src='http://media.blogpet.net/5/8/243658.swf' " +
        "play='true' " +
        "loop='false' " +
        "menu='false' " +
        "quality='high' " +
        "bgcolor='#ffffff' " +
        "current_url='" + request + "'" +
                "wmode='transparent' " +
        "FlashVars='public_key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&domain=api.blogpet.net&current_url=" + request + "' />" +
    "</object><br />"
    );
 
 
})();
 
 
 
 
document.write('<object id="site" classid="clsid:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="130" height="100" align="middle"><param name="allowScriptAccess" value="always" /><param name="movie" value="http://kk.blogtoy.net/swf/48.swf" /><param name="play" value="true" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="FlashVars" value="domain=kk.blogtoy.net&amp;source=/swf/13.swf&amp;onclick=/click/2/classic/8" /><embed src="http://kk.blogtoy.net/swf/48.swf" loop="false" menu="false" quality="high" bgcolor="#ffffff" width="130" height="100" name="site" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" wmode="transparent" FlashVars="domain=kk.blogtoy.net&amp;source=/swf/13.swf&amp;onclick=/click/2/classic/8" /></object>');

3.スクリプトをブログに設定

BlogPet 表示用の script 要素の src 属性 charset 属性を削除し、代わりに2項の内容を追加します。なお、language 属性も非推奨なので削除しても良いでしょう。

変更前

<script language="JavaScript" type="text/javascript" src="http://www.blogpet.net/js/xxxxxxxxxxxxxxxxx.js" charset="UTF-8"></script>

変更後

<script type="text/javascript">
[2項の内容をここに入れる]
</script>

以上です。
これで、ページ上の LightBox JS/LItebox 画像を表示した時、BlogPet が背景画像の下に隠れればOKです。

Comments [8] | Trackbacks [1]

BlogPeople 4周年

November 7,2007 2:33 AM
Category:[BlogPeople]
Tag:[]
Permalink

BlogPeople 4周年本ブログ開設当初から利用させて頂いている BlogPeople が4周年を迎えられました。おめでとうございます。
今後も、益々のご活躍・ご発展を期待しております。

ということで、以下、BlogPeople に関する情報をいくつか。

当サイトでは BlogPeople の被リンクを随時受け付けております。下記のリンクをクリックすれば、当サイトのリンクを貴サイトの BlogPeople のリンクリストに簡単に追加することができます。

List Me!

また、これまでに投稿した BlogPeople に関するエントリーの中から、役に立ちそうなものをピックアップしてご紹介しておきます。参考になれば幸いです。

BlogPeople登録と設定
BlogPeople の基本サービスである「リンクリスト」の解説と設定方法です。このサイトで BlogPeople に関する最も過去の記事で、現在の内容と食い違っている部分もありますが、BlogPeople とは何か?を知るには良い記事かと思います。
BlogPeople のススメ
リンクリストを手書きで作成されている方向けに BlogPeople をお勧めする記事です。
BlogPeople のリンクリストにスクロールバーをつける
タイトルの通り、BlogPeople のリンクリストにスクロールバーをつけるカスタマイズです。
トラックバックピープルにスクロールバーをつける
こちらは、BlogPeople のトラックバックピープルにスクロールバーをつけるカスタマイズです。
BlogPeopleの被リンク数を減らさずにURLを変更する
BlogPeople に登録したURLを変更する場合、メニューにある「サイト情報の設定/変更」で簡単に変更できますが、これを行うと、これまでの被リンク情報が消滅してしまうため、被リンク数を維持したままURLを変更する方法を紹介しています。
BlogPeople の「List Me!」を valid にする
BlogPeople の「List Me!」を XHTML valid にするカスタマイズです。
BlogPeople 等のリンクリストによる表示の遅延を解消する(その1:JavaScript編)
BlogPeople のリンクリスト表示によるページ全体の表示のタイムラグを解消するカスタマイズです。
BlogPeople 等のリンクリストによる表示の遅延を解消する(その2:Ajax編)
BlogPeople のリンクリスト表示によるページ全体の表示のタイムラグを Ajax により解消するカスタマイズです。
BlogPeopleで複数ブログ登録時のログインID切り替え
複数ブログを運用していて、それぞれをBlogPeopleに登録したい場合、BlogPeopleのログインIDを別々に取得する必要があり、管理画面もログインID分存在することになりますが、ログインIDを簡単に切り替える方法です。
Comments [0] | Trackbacks [0]

「休日表示付きリアルタイムカレンダー for WordPress」不具合のお知らせ

November 6,2007 12:30 AM
Category:[カレンダー]
Tag:[, , ]
Permalink

配布中の「WordPress 版 休日表示付きリアルタイムカレンダー」に不具合がありました。

IEで上記の記事にアクセスできない不具合がありました。現在回復しています。

1.事象

2007年11月の土日休日が正常に表示されない。

2.原因

JavaScript(dayChecker.js) のカレンダー年月情報取得処理誤り(月が2桁になった場合の処理の考慮もれ)。

3.対処

dayChecker.js のカレンダー年月情報取得処理を改修し、1年分のカレンダーを表示させて、いずれも土日休日が正常に表示されることを確認しました。

2007年11月5日以前にプラグイン(1.1版)をご利用になっている方は、「休日表示付きリアルタイムカレンダー for WordPress」より、最新版(1.2~)をダウンロードし、プラグインを差し替えてください。

ご迷惑をおかけして申し訳ございませんがよろしくお願い致します。

Comments [6] | Trackbacks [0]

タグクラウドの折りたたみ for Movable Type 4

最近流行の「タグクラウド」ですが、タグの増加にしたがって表示される数が増えていきます。サイドバーにタグクラウドを表示していると膨大になる可能性があります。

そうならないよう、Movable Type のデフォルトテンプレートのサイドバーに表示するタグクラウドは、MTTags タグに limit 属性をつけることで表示数を制限していますが、全てのタグが確認できないのが難点です。

ということで、タグクラウドを途中で折りたたむことによって、表示領域を占有せず、かつ折りたたみのリンクをクリックすれば全てのタグを確認できるカスタマイズを紹介します。

このカスタマイズを行うことで、下のように、タグクラウドに折りたたみリンクが表示され、

タグクラウド

リンクをクリックすると残りのタグが表示されます。

タグクラウド

1.折りたたみスクリプトの追加

ブログ管理画面の「デザイン」→「テンプレート」→「テンプレートモジュール」→「ヘッダー」を開き、追記文章の折りたたみで使用しているスクリプト(下記)を head 終了タグの直前に追加します。

<script type="text/javascript">
function showHide(entryID, entryLink, htmlObj) {
  extTextDivID = ('Text' + (entryID));
  extLinkDivID = ('Link' + (entryID));
    if( document.getElementById ) {
    if( document.getElementById(extTextDivID).style.display ) {
      if( entryLink != 0 ) {
        document.getElementById(extTextDivID).style.display = "block";
        document.getElementById(extLinkDivID).style.display = "none";
        htmlObj.blur();
      } else { 
        document.getElementById(extTextDivID).style.display = "none";
        document.getElementById(extLinkDivID).style.display = "block";
      }
    } else {
      location.href = entryLink;
      return true;
    }
  } else {
    location.href = entryLink;
    return true;
  }
}
</script>

上記は外部ファイルにしても構いません。

2.タグクラウドの変更

サイドバーのタグクラウドを下記の内容に変更します。

2.1 公開テンプレートの場合

<MTIf name="main_index">
<dt class="sidetitle">
Tag Clouds
</dt>
 
<$MTSetVar name="foldflag" value="0"$>
<dd class="side">
<ul id="tags">
<MTTags>
<MTIf name="__counter__" eq="8">
</ul>
<div class="list_more" id="LinkEntry">
<a href="javascript:void(0)" name="<$MTTagID$>" onclick="showHide('Entry','<$MTBlogURL$>',this);return false;">続きを読む &#8811;</a>
</div>
<div id="TextEntry" style="display: none">
<div class="list_more"><a href="javascript:void(0)" name="" onclick="showHide('Entry',0,this);return false;">&#8810; 続きを隠す</a></div>
<ul id="tags">
<$MTSetVar name="foldflag" value="1"$>
</MTIf>
 
<li class="module-list-item taglevel<$MTTagRank$>"><a href="<$MTTagSearchLink$>"><$MTTagName$></a></li>
</MTTags>
</ul>
<MTIf name="foldflag"></div></MTIf>
</dd>
</MTIf>

2.2 デフォルトテンプレートの場合

<$MTSetVar name="foldflag" value="0"$>
<MTIf name="main_index">
  <div class="widget-cloud widget">
    <h3 class="widget-header">タグクラウド</h3>
      <div class="widget-content">
      <ul class="widget-list">
      <MTTags sort_by="rank">
      <MTIf name="__counter__" eq="8">
      </ul>
      <div class="list_more" id="LinkEntry">
        <a href="javascript:void(0)" name="<$MTTagID$>" onclick="showHide('Entry','<$MTBlogURL$>',this);return false;">続きを読む &#8811;</a>
      </div>
      <div id="TextEntry" style="display: none">
      <div class="list_more"><a href="javascript:void(0)" name="" onclick="showHide('Entry',0,this);return false;">&#8810; 続きを隠す</a></div>
      <ul class="widget-list">
      <$MTSetVar name="foldflag" value="1"$>
      </MTIf>
        <li class="rank-<$MTTagRank max="10"$> widget-list-item"><a href="<$MTTagSearchLink$>"><$MTTagName$></a></li>
      </MTTags>
      </ul>
      <MTIf name="foldflag"></div></MTIf>
    </div>
  </div>
</MTIf>

3.デフォルト表示数を変更する

いずれのテンプレートも、2項にある下記の数字(赤色)を変更してください。

<MTIf name="__counter__" eq="8">

デフォルトで表示されるタグ数は「設定した値-1」になります。

CSSは別途掲載します。すいません。

Comments [10] | Trackbacks [0]

モチクリーム(MOCHICREAM)

November 4,2007 12:13 AM
Category:[mono]
Tag:[]
Permalink

東武東上線・朝霞駅構内にある「コムサストア(ファッション店舗)」の一角にひっそりと佇む、「モチクリーム」の売り場が気になっていたのですが、今日、駅近くの公民館でアンサンブルの練習があったので、帰りがけに試しに買ってみました。

公式サイトは工事中ですが、下のサイトに詳しい情報が掲載されています。

モチクリーム(mochi-cream)情報局

上記サイトからの引用で、モチクリームとは、

大福餅の中に様々なフレーバーの餡(あん)と生クリームが 入っていて、冷凍された状態で販売されています。

というものです。
TVでも何回か紹介されているようで、巷ではかなり有名なスイーツのようです。

事前知識がなかったので、買ってすぐに食べようと思ったら、夏は15分、冬は30分間そのまま置いて、外側のおもちが柔らかくなってから食べられます、というような店員さんからの説明があり、帰ってから頂きました。
保冷剤も入れてくれるので、帰り道が遠い場合でも大丈夫です。

一個157円。2~3個はぺロッっと食べれそうな大きさ。さっぱりしたほどよい甘さで美味しかったです。

Comments [2] | Trackbacks [1]

売れなくても

November 3,2007 10:35 AM
Category:[ダジャレ]
Tag:[]
Permalink
Comments [2] | Trackbacks [0]

Movable Type 4 の管理画面で詳細メッセージのないエラーが発生する不具合について

Movable Type 4 のブログ管理画面操作中、下のような、詳細メッセージのないエラー画面に時々遭遇することがあります。

感覚的には、管理画面にグインした後、長時間(といっても数十分程度)何も操作しない状態の直後の操作で発生するようです。

根本的な解消策はみつかってませんが、この画面が表示された場合は、ブラウザの「戻る」をクリックしてリロードすれば元の操作に戻ることができます。

ちなみに、セッションタイムアウト(UserSessionTimeout)は、デフォルトで4 時間 (14400秒)に設定されていますが、それより短い時間で遭遇するので、セッションのタイムアウトではないようです。
また、この設定にひっかかった場合は、エラー画面ではなくログイン画面に遷移します。

Comments [0] | Trackbacks [0]

Web2.0 EXPO Tokyo 2007

November 1,2007 2:34 AM
Category:[お知らせ]
Tag:[]
Permalink

Web2.0 EXPO Tokyo今月の15日(木)、16日(金)に、渋谷のセルリアンタワー東急ホテルにて「Web2.0 EXPO Tokyo」が開催されます。

このイベントは、CMPテクノロジージャパン株式会社、株式会社オライリー・ジャパン主催による、世界主要都市で行われる「Web2.0 EXPO」のひとつです。

Web2.0 EXPO Tokyo 開催概要

Webをプラットホームとして利用する新しいビジネスモデルは、Web技術の革新にあわせて急速な発展をしています。 Web 2.0 EXPO Tokyoは、Webの最新の技術開発と、ビジネスの事例にフォーカスしたコンファレンスを通して、Webが近い将来のビジネスをどのように推し進めていくのか、確認する場を提供します。

旧来からのビジネスモデルは、この強固なプラットホームとしてのWebの進歩により混沌の時代に入ろうとしています。しかし、この混沌の中に、チャンスの種子があります。

Web 2.0 EXPO Tokyoでは、最新の技術革新と、それらがもたらした、新しいビジネスモデルを通して、チャンスの種子の胎動を感じることができるでしょう。

このイベントの目玉となる「コンファレンス」では、「Web2.0」という言葉の生みの親であるティム・オライリーはじめ、Web2.0関連企業のキーマンが勢ぞろいです。

基調講演/セッション(2日間通し券、展示会とカクテルパーティへも参加可能)は、事前登録価格 ¥98,000(税込み) ※当日価格¥120,000(税込み)。展示会のみであれば¥5,000(ただし事前登録により無料)、展示会+カクテルパーティ ¥10,000(ただし事前登録により¥5,000)となっています。

Comments [0] | Trackbacks [0]
Now loading...
List of "November 2007"
QRcode

現在停止中です
携帯電話からこのQRcodeを撮影することで携帯用URLを取得することができます

URI for cellular phones
ギターに入った猫
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

loading ...
BlogPeople
Now loading...
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
Powered by
Movable Type 4.25
 
List Me!