2008年2月アーカイブ


前のエントリーHatena starを付けてみるで、はてなスターをつけてみたところ、更に良い方法があるということをはてなスターのお返事で教えてもらいました。

TREND SPOTTINGさんのMovable Type4にはてなスターを設置2なのですが、このとおりに設置してみると、あらま上手く行っています(こちらのサイトでテストしてみた)。

似たようなことをやったけれども、上手く行かなかった、、と思いましたが、"ブログ記事の詳細"と"ブログ記事の概要"両方にspanを付けなかったからかな。。前回方法では、二つのヘッダーのテンプレートを作るため、ヘッダーの内容を変える時に両方ともやらなければいけないので、こちらの方法に変えていこうと思います。

方法のメモ

1.はてなスターにアクセス。ログインして右上のBlogsをクリック。

2."外部のブログサイトを登録する"にblogのURLを入れ、追加する。

3.トークンが発行される。出てきたHTMLコードをコピーする。
MovableTypeの管理画面より、
 デザイン>テンプレート>クイックフィルタ テンプレートモジュール>ヘッダー
のheadタグの中に、コピーしたコードをペーストする。

4.トップページのタイトルの横に設置させるために、Hatena.Star.EntryLoader.header...以下の一行を加え、保存。以下のものがheadタグ内に加えられた。

<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>   <script type="text/javascript"> Hatena.Star.EntryLoader.headerTagAndClassName = ['span','star']; Hatena.Star.Token = 'your トークン';   </script>

5. デザイン>テンプレート>テンプレートモジュール>ブログ記事の詳細
の、"ブログ記事のメタデータ"のモジュールインクルードの上にある、

<h1 id="page-title" class="asset-name entry-title"><$MTEntryTitle$></h1>
を、
<h1 id="page-title" class="asset-name entry-title"><$MTEntryTitle$><span class="star"><a href="<$MTEntryPermalink$>" class="hidden">スター</a></span></h1>
に書き換え。保存。


6. デザイン>テンプレート>テンプレートモジュール>ブログ記事の概要
の、"ブログ記事のメタデータ"のモジュールインクルードの上にある、

<h2 class="asset-name entry-title"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h2>
を、
<h2 class="asset-name entry-title"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><span class="star"><a href="<$MTEntryPermalink$>" class="hidden">スター</a></span></h2>
に書き換え。保存。


7.再構築して、出てくるか確認。

TREND SPOTTINGさん、ありがとうございました。

Hatenaのサービスで、はてなスターというものがあります。はてなスターとは、

日々ブログを読んでいていいなと思っても、コメントを書いたりトラックバックを送るのは敷居が高く、気持ちが十分に書き手に伝わらずに終わってしまうことも多いでしょう。はてなスターは既存のブログにワンクリックで☆がつけられます。あなたのいいなと思った気持ちを☆に変えて、世界のブログに☆をつけよう! (はてなスターはじめてガイド - Hatena Star

というもので、ちょっと良かったなというエントリーに☆を付けてあげるというものです。このサービスを自分のblog内でも設置できるということなので、設置してみることにしました。


(追記)
改良版を、次のエントリー"Hatena starを付けてみる その2"にて行ってみています。そちらの方が変更点が少なく良いと思います。


方法は、MovableType4.1で設置しているTREND SPOTTINGさんのMovable Type4にはてなスターを設置を参考にしてみました。

1.はてなスターにアクセス。ログインして右上のBlogsをクリック。

2."外部のブログサイトを登録する"にblogのURLを入れ、追加する。

3.トークンが発行される。出てきたHTMLコードをコピーする。
MovableTypeの管理画面より、
 デザイン>テンプレート>メインページ>ヘッダー
のheadタグの中に、コピーしたコードをペーストする。

4.トップページのタイトルの横に設置させるために、Hatena.Star.EntryLoader.header...以下の一行を加え、保存。以下のものがheadタグ内に加えられた。

<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>   <script type="text/javascript"> Hatena.Star.EntryLoader.headerTagAndClassName = ['h2','asset-name']; Hatena.Star.Token = 'your トークン';   </script>

5.記事個別ページ用のヘッダーを作成する。まず、モジュールテンプレートにあるヘッダーの中身全てをコピーする。

6."モジュールテンプレート一覧"より"モジュールテンプレートの作成"して、上記をコピーする。

7.記事個別ページに合わせるように、下の行の'h2'を'h1'に書き換える。

Hatena.Star.EntryLoader.headerTagAndClassName = ['h1','asset-name'];

8."ヘッダー個別リンク用"などと任意の名前を付けて保存。

9.個別ページでの"ヘッダー"を作成した"ヘッダー個別リンク用"に変える。
 デザイン>テンプレート>アーカイブテンプレート>ブログ記事

<$MTInclude module="ヘッダー"$
を、
<$MTInclude module="ヘッダー個別リンク用"$>
に書き換え。保存。


10. デザイン>テンプレート>アーカイブテンプレート>ブログ記事>ブログ記事の詳細
の、"ブログ記事のメタデータ"のモジュールインクルードの上にある、

<h1 id="page-title" class="asset-name entry-title"><$MTEntryTitle$></h1>

を、
<h1 class="asset-name"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h1>

に書き換え。保存。


11.再構築して、出てくるか確認。

個別記事のタイトルを認識させるところが少しややこしい。はてなスターが必要とする情報は、タイトルとpermalinkのURLということですが、メインページと個別ページでタグとpermalinkが違っていて、それぞれに作る必要があった。メインページではタグがh2、個別ページではh1と異なり、また個別ページではタイトルにpermalinkされていないので、10.で追加させている。

Not quick a Nineさんのはてなスター付けましたでは、divタグでArticleTitleクラスを認識させているが、上手く行かなかった。。残念。そのため、ヘッダーのテンプレートを二つ作り、それぞれでタイトルを認識させようとしています。

ほとんど、TREND SPOTTINGさんのMovable Type4にはてなスターを設置のエントリーをなぞっただけですが、上手く行ったようです。良い記事がありましたら、☆を付けてもらえたらうれしいです。

引用するときに使用するblockquoteタグについて、少しcssをカスタマイズしてみようと思います。段が出来るだけで、あまり目立たないのでもう少し目立つようにしてみました。

blockquote {
margin: 10px 15px 10px 15px;
padding: 15px 25px 15px 25px;
line-height: 1.6;
font-size: 12px;
font-family: Verdana, Arial, sans-serif;
background-color: #E2BCFF;
border: #E2BCFF 1px solid;
}

これで、このように少し(結構?)目立つようになりました。
(blockquote内、少し整形しました)

サイドバーにトラックバックに関するものが表示されていなく、ウェジットを見てみてみてもどこにもありませんでしたので、"最近のトラックバック"のウェジットを作ってみようと思います。

最近のコメント一覧のツリー化もしているので、この"最近のトラックバック"でもツリー化してみようと思います。"最近のコメント"のウィジットを参考にしてみましたが、ポイントとして、

1.mt:IfNonZero tag="mt:BlogPingCount"
最近のコメントでは"mt:BlogCommentCount "だったところを、トラックバックの"mt:BlogPingCount"として、mt:IfNonZeroのトラックバックありの時だけ表示するようにしている。

2.トラックバックに使われているMTタグは、pingsという名前で使われている。

3.MTPings lastn="10"
MTPingsのモディファイアlastn="10"で10個の記事を表示することにした。

4.最近のコメント一覧のツリー化の時のようにjavascriptを入れる。引数を"trackbacklist"にした。

<mt:IfNonZero tag="mt:BlogPingCount"> <mt:PingsHeader> <div class="widget-recent-pings widget"> <h3 class="widget-header">最近のトラックバック</h3> <div class="widget-content" id="trackbacklist"> </mt:PingsHeader>


<ul>
<MTPings lastn="10">
<li><a href="<$MTPingURL$>" target="_blank"><$MTPingTitle$></a><br/>
from <$MTPingBlogName$> (<$MTPingDate format="%y/%m/%d"$>)</li>
</MTPings>
</ul>


</div>
</div>
<script type="text/javascript">
<!--
generateNormalTree("trackbacklist");
//-->
</script>

<mt:PingsFooter>
</mt:PingsFooter>
</mt:IfNonZero>

こんな感じで、ウィジットを作成してみました。そしてウィジットセットでサイドバーに入れてみると表示できました。(正確には、ホームページウィジェットの中に、mt:includeで最近のトラックバックのウィジットを入れました。)

iddyという、プロフィール作成ページに登録してみました。

tetblue's profile | iddy

どうぞよろしく。で、このサイトの特徴は、

iddy は自分だけのプロフィールページを簡単に作って公開できる、ブロガー向け無料サービスです。自分のブログエントリー、ソーシャルブックマーク、写真(Flickr)、ミュージック(Last.fm)、ビデオ(YouTube)などのウェブ上での活動を簡単にひとまとめにし、公開できます。

幾つか登録して活動しているサービスについて、まとめて表示できるところがいいなと思いました。あと、好きなことタグで自動的に同じものの人にリンクしていて、つながるのもおもしろいですね。

いろいろなblogなどでサイトの更新情報をRSSで配信されていますが、そのフィードをこのblogのサイドバーに表示してみることにしました。

参考にしたサイトは、小粋空間さんのRSS Feed(フィード)を表示するです。説明にあるように、javascript->PHP->rssフィードの取得->HTMLという流れで、テキストとして出力され、使用感が良さそうです。

1.もととなるスクリプトの集まり"Feed2JS"を、こちらSo What is "Feed to JavaScript"?のDownloadにあるeduforgeのリンク先、Eduforge: Feed to JavaScript (Feed2JS): ファイルリストよりダウンロード。

2.適当な位置にフォルダごとアップロード。今回も、$MTBlogURL$の位置、つまりindex.htmlのある位置にアップロードした。

3.ファイル、フォルダのパーミッションを755にする。

4.動作テスト : ダイレクトリンクでfeed2js/magpie_debug.phpをブラウザから実行。

http://www.xxxxx.net/feed2js/magpie_debug.php

そして、表示設定をする。

http://www.xxxxx.net/feed2js/build.php

今回は、
Show channel? : no
Number of items to display. : 5
Show/Hide item descriptions? How much? : 0
Use HTML in item display? : no
Show item posting date? : yes
Time Zone Offset : +9
Target links in the new window? : n
UTF-8 Character Encoding : use UTF-8 character encoding
Podcast enclosures : yes

にしてみた。"Preview Feed"で確認。

5.コードの生成 : "Generate Javascript"でコード生成。

6.movabletypeのウェジットを新しく作成し、このコードを埋める。

7.文字コードの変更。このサイトはEUC-JPなので、そのままでは文字化けする。そのため、
feed2js/feed2js.phpの136-139行目付近の、

$rss = @fetch_rss( $src );
mb_convert_variables("EUC-JP","UTF-8",$rss);

この上の行の後に、下の行を追加。

再構築後、上手く表示されました。いろいろなところで使うことができそうですね。

blogのサイドバーの一番上にmy statusという一言をつけています。今の状態で、短期的な思ったこと、やっていることちょこっとしたメモなのですが、簡単でアプリもいろいろあるTwitterで書き込み、それをblogに出しています。

方法は、Going My Way: Twitter の Status を自分のブログに貼り付け可能な Javascript Badgeを参考に、Twitter / Get a Badge for Your Siteより作成しました。

自分の場合は、"other"を選択、"HTML/javascript"のタイトル無し一件表示で、コードをコピーして、movabletypeでウィジットをつくり表示させることが出来ました。liタグで出力していて、頭に点がついているので、jsのファイルを見直せたらいいな。表示の仕方はFlashも格好良かったのですが、ちょっと目立ちすぎということでテキストにしました。

Twitter自体も使ってみると結構面白く(いまさらですが、、)、160バイトで区切れているので簡潔なんですよね、メッセージが。

TwitterではAPIもあったりしていろいろ出来そうですし、初心者からの説明サイトもありました。

また、windowsで使えるTwitter用クライアントが幾つかあり、

など、便利に使わせて頂いています。

つぶやきというのも、大切な気がしますね。今からtwitterというのも良いのではないでしょうか。

ブラウザで選択された文字について、右クリックで辞書調べが出来るfirefoxアドオンを、Going My Wayさんの右クリックから goo 辞書で単語を検索できるようにする Firefox 用 Add-onsで紹介されていて、インストールしてみました。

このアドオンはgooで作成されたもので、こちらFirefox対応プラグイン - goo 辞書がダウンロードリンクとなります。はじめfirefox2.0.0.12でうまくインストールされなかったのですが、バージョンアップされたのか入れなおしてみると無事にインストールできました。

使用感は、調べたい言葉>検索結果までとても速いですし、辞書の検索履歴、そのON/OFFも手軽に出来操作は申し分ないのです。検索結果については、英和はよく使う単語については音も出るようでまずまず。和英はEXCEEDだからこんなものかもしれない。国語辞典はちょっと貧弱な感じがする。ちょっとしたわからない単語などを簡単に調べる時に使用するのに便利そうです。

もう少し意味や使い方を知りたいときには、スペースアルクの英辞郎がやっぱりいいですね。使い分けできそうです。

最近GmailやGoogle Readerなどgoogleのサービスを使用することが多いのですが、そんなGoogleのアプリを使いやすくするfirefoxのアドオンをネタフルさんの[N] Google Appsのメニューを強化するFirefox機能拡張「iGoogleBar」で紹介されていたので、入れてみました。

ダウンロードは、iGoogleBar: Google Apps Bar with iGoogle Gadgetsより行いました。firefoxを再起動して、igoogleを立ち上げるのですが、Gmailでは日本語では上手くいかないようで、settingsよりEnglishにすることで、拡張されたアイコンが出たりドロップダウンが出来るようになりました。

アイコンが出るだけでも見た目が楽しくなりますし、開かなくても未読のメールやフィードがどれくらいあるのか表示されたり、ドロップダウンでサムネイル見ることが出来たり、より使いやすくなったと感じます。

blogを巡回する時に良く使うのは、BlogPeopleのリンクリストで辿ったり、RSSリーダーで更新記事を見ることが多いです。RSSリーダーはいろいろありますが、ネットワークで見れるようなものの方が好みで、Bloglinesを好んで使っていました。

しかし、最近igoogleを使うことが多くて、そこにあるGoogle Readerでも試してみるかと幾つかのサイトを入れてみているのですが、これが結構使い心地が良さそう。

blogの一覧も見れたり整理できますし、気に入った記事を取っておくこともできますし、新着の出方も見やすい。Bloglinesはやや重めだったけれど、重さもそれほど感じない。と、いうことで第一印象がよく、こちらに移行してみようかなと思っています。

Livedoor leaderも試したことはあったのだけれど、感覚がいまいちあわずにBloglineにしたこともあり、もう結構長くBloglinesを使用していて(最初に使用したRSSリーダーでもあります)離れるのはなんだか寂しい感じもしますが、新しいものではまた何か違うものを感じるかもしれない、やっぱりいまいちならば元に戻ればいいし、ということでリフレッシュ!してみようと思います。

より大きな写真にリンクしているサムネイルがある時に、マウスオーバーすると拡大マークが出てくるようにしてみました。

IDEA*IDEAさんで紹介されていた、画像にマウスオーバーするとメガネアイコンなんかを表示してくれる『imagelink.js』 を試したものです。

方法としては、

1.imagelink.jsを作成したサイト、Css Globeさんの説明ページStyle Your Image Linksより、ダウンロード。

2.とりあえずsinglestyleでやってみる。singlestyleのなかにあるimagelink.jsを、$MTBlogURL$の位置、つまりindex.htmlのある位置にアップロード。

3.zoom.gifをmt-staticの中のimagesフォルダにアップロード。

4.headタグに、

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

を加える。


5.以下のスクリプトの"***/mt-static/images/zoom.gif"のところを、"zoom.gif"をアップロードしたアドレスに替えて、スタイルシートに、


.imageOver{
background:url(***/mt-static/images/zoom.gif) no-repeat 50% 50%;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5; }

を加える。


6.これで、再構築してみる。


例えば、写真blogにある写真で試してみると、(マウスオーバーしてみてください)

IMG_9690_tokyoforum.JPG

このようにマウスオーバーしたときに表示される。さりげない感じが、なかなかいいですね。

植物blogの方で、場所がどこか地図上に示したいと思い、Googleマップのマイマップ機能で作成してみましたが、結構簡単に出来なかなか使えそうでした。


大きな地図で見る

作成したマップをblogに埋め込むこともこのように出来、今まで地図を示そうと思っても大変に感じたものが、大分楽に表示できそうです。goolgeのアカウントを取ることで、マイマップを作ることができます。

googleマップでは、今ちょうどGoogle マイマップ EXPOが開かれていて、せっかくなのでエントリーしてみました。

色々な方が作られたマイマップをみてみると、おもしろいものがいろいろあります。

などおもしろく(食べ物か!)、他にも巡ってみるとこんなものもあるのか、というものも結構あります。

ちょっと表示が時間がかかってしまうのと、自分のマイマップへの取り込みが上手く行かないようなところが不満点ですが、簡単に作れてしまうのでメモ代わりにもなかなかいいサービスのようです。

MovableType4.1にシステムを入れ替えてから、あるサイトへの更新の送信が止まっていることに気がついて、どうもフィードがおかしいなと思っていました。

それで、どこがおかしいのかしばらくわからなかったのですが、よく見てみると前のシステムまであったindex.xmlがなくなって、デフォルトではrss.xmlになっているではないですか。(はじめはrss.xmlの存在にも気づかなく)それではだめなので、とりあえず以前も使用したこともあるatom.xmlに変更。うまくフィードしてくれるようになりました。

どうもMovableType4.1のテンプレートのコメントの表示方法が気に入らず、カスタマイズしてみます。小粋空間さんでツリー化させる方法が載っているので、それに沿ってやってみようと思います。

1.maketree.jsをスクリプト(小粋空間さん)よりダウンロード。

2.$MTBlogURL$の位置、つまりindex.htmlのある位置にアップロード

3.コメント欄のテンプレートを変える
 デザイン>テンプレート>ウィジェット>最近のコメント
を以下のようにする。

<mt:IfNonZero tag="mt:BlogCommentCount"> <mt:CommentsHeader> <div class="widget-recent-comments widget"> <h3 class="widget-header">最近のコメント</h3> <div class="widget-content" id="commentlist"> </mt:CommentsHeader>


<MTEntries recently_commented_on="5">
<a href="<$MTEntryLink$>"><MTEntryTitle></a>
<ul>
<MTComments lastn="5" sort_order="descend">
<li><a href="<$MTEntryLink$>#<$MTCommentID$>">
<MTCommentAuthor></a> (<$MTCommentDate format="%y/%m/%d"$>)</li>
</MTComments>
</ul>
</MTEntries>


</div>
</div>

<script type="text/javascript">
<!--
generateNormalTree("commentlist");
//-->
</script>
<mt:CommentsFooter>
</mt:CommentsFooter>
</mt:IfNonZero>

4.インクルード文の挿入
 デザイン>テンプレート>メインページ>ヘッダー
のHeadタグの中に入れる。

<script type="text/javascript" src="<$MTBlogURL$>maketree.js" charset="<$MTPublishCharset$>"></script>

5.線の画像をサイドメニューのツリー化スクリプト(改)(小粋空間さん)よりダウンロード。そして、MTの入っているマシンの適当な位置にアップロード。今回はmt-static/images/にいれた。

6.スタイルシートの追加
 デザイン>テンプレート>スタイルシート
で現在のテンプレートで使用しているcssファイルの位置を調べ、以下のものを、5.で入れた線の画像のリンク位置を修正してから書き込む。

ul.tree { margin: 0!important; padding: 0!important; font-size: 9px; list-style: none!important; }

ul.tree ul {
margin: 0!important;
padding: 0!important;
}

ul.tree li {
margin: 0!important;
padding: 0 0 0 16px!important;
background-image: url(http://www.tetra-blue.net/weblog/mt-static/images/tree_end_dotted.gif);
background-repeat: no-repeat!important;
list-style: none!important;
}

ul.tree li.end {
background-image: url(http://www.tetra-blue.net/weblog/mt-static/images/tree_end_dotted.gif);
list-style: none;
}

これで再起動して上手く行きました。小粋空間さん、毎度ですがありがとうございました。

Mozilla Firefox ブラウザ無料ダウンロード

ブラウザはFirefoxを使用していますが、アップデートのお知らせがあり、立ち上げ直してみるとFirefox 2.0.0.12 にアップデートしました。リリースノートを見てみると、安全性と安定性の向上がメインのようですが、頻繁にアップデートしていていいですね。

mt4news-4.pngのサムネール画像

URLの前に付く小さなアイコンfaviconは、headタグの中にそのファイルのある位置を指定するのですが、Movable Type4では簡単にfaviconを設置する"FaviconManager"というプラグインがあり、インストールしてみました。

blog.aklaswad.comさんのサイトで公開しているもので、こちら(blog.aklaswad.com: Favicon Manager)に説明があります。例によって、とりあえず自分で行ったインストール手順をメモメモ。

1.上記のサイトからFaviconManagerのzipファイルをダウンロード、解凍。

2.このフォルダをアップロード。アップロード先は、
~/cgi-bin/mt/plugins/

3.初期設定を管理画面で行う。
 設定>プラグイン
で表示されている"FaviconManager"を選択、設定を開く。

4.faviconの画像のあるアドレスを記す。

5.保存し、再構築。

で上手くいきました。いちいちheadに書くのも面倒ですし、入れ替えも容易にできそうで便利ですね。

mt4news-4.pngのサムネール画像

Movable Typeのプラグインで、サイト内の関連しているエントリーを表示する"RelatedEntries"というプラグインがあり、導入してみました。自分と相手をお互いに関連付けられるので、相互に容易にリンクさせることが出来、エントリーの内容の補足がしっかり出来そうです。

このプラグインはThe blog of H.Fujimotoさんのサイトで開発されたもので、使用に関しても説明されています(エントリーの関連付けを行うプラグイン(MT4専用版・その1) - The blog of H.Fujimotoその2その3)。

ということで、ここでは今回上手くいったインストールの流れをメモしておきます。

1.作者のサイトよりダウンロードし、解凍する。

2.このフォルダをアップロード。アップロード先は、
~/cgi-bin/mt/plugins/

3..cgiや.plのファイル属性などを755に変更。

4.初期設定を管理画面で行う。
 設定>プラグイン
で表示されている"Related Entries"を選択、設定を表示。
関連付けるブログの初期値・1ページ当たり表示件数を確認、保存(デフォルトでも大丈夫そう)。

5.関連付ける保存したブログ記事を一覧から辿り(一覧>ブログ記事)、の下の方にある、アクションをドロップした中にある、プラグインアクションのものを選択(今回は文字化けしていた)、Goをクリック。

6.関連付けるエントリーを選択。片方、相互、また同じMovableType内のほかのblogとも関連付けが可能。

7.表示させる場所にタグなどを埋め込む。今回は個別記事の本文の終わりに置こうと思う。
 デザイン>テンプレート>アーカイブテンプレート>ブログ記事>ブログ記事の詳細
の終わりのほうに、

<MTEntryIfRelatedEntries force="1">
<p>関連する記事:<$MTEntryRelatedEntriesCount force="1"$>件</p>
<ul>
<MTEntryRelatedEntries force="1">
<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a> (<MTBlogName>, <$MTEntryDate format="%Y/%m/%d"$>)</li>
</MTEntryRelatedEntries>
</ul>
</MTEntryIfRelatedEntries>

を追加。


8.他Blogの関連するエントリーも出力するために、force="1"の属性を入れている。

9.保存して表示されるか実際に確認してみる。

ということでうまく設置できました。

mt4news-4.pngのサムネール画像

エントリー中にソースコードを書きたいときに、そのままにしてしまうとwebページではコードの文字が変換されてしまいます。そこで、preであったりcodeであったりというタグを使用するのですが、どうもうまく行かなく、なぜか表示されない。

そのために大文字の"<"を使用するなど方法はありますが、エントリーにソースコードを表示する方法 (MovableTypeカスタマイズまとめサイト)にあるように、

< = &lt;
> = &gt;
" = &quot

を使用するのがいいのかもしれない。サイトには、MovableType用のplaginのリンクもあるようなのですが、入れてみたところうまくいかない。入れ方が悪いのか、MT4に対応していないのか。

いちいち&lt;などを書くのは面倒そうですが、TeraPadなどエディターの検索置換を使えば楽に変換できそうなので、この方法がとりあえずのところMT4でソースコードを記述するのにいい方法なのかもしれません。

mt4news-4.pngのサムネール画像

Movable Type4.1に新しく追加された機能として"カスタムフィールド"があり、追加してみました。

この機能は記事作成時のダッシュボードの画面に、予め書き込む枠を作成しておくものです。テキストからドロップダウン、ラジオボタンなどエントリー上で結構な頻度で使用されるものについて、初めから書き込む欄があれば便利、、というものですね。

作成は、カスタムフィールドを使用する | Movable Type 4 ドキュメント小粋空間: Movable Type 4.1 カスタムフィールドの使用方法がとても参考になりました。

今回は、ブログの記事の後に本文の後に"参考サイト"を付け加える、ということを行ってみようと思います。

1.管理画面(ダッシュボードの画面)上の
設定>カスタムフィールド
にある"フィールドを作成"を選ぶ。

2.システムオブジェクト : ブログ記事
名前 : 参考サイト
説明 : 参考サイトを表示
種類 : テキスト(複数行)
ベースネーム : refsites
テンプレートタグ : refsites
などとして保存。

3.管理画面(ダッシュボードの画面)上の
設定>カスタムフィールド
に"参考サイト"が表示されている。

4.管理画面(ダッシュボードの画面)上の
新規作成(または一覧)>ブログ記事
にある"表示オプション"の"参考サイト"をチェックしてOKをクリック。
参考サイトの枠が出現する。

5.この内容を表示するために、ブログ記事のテンプレートにタグを追加する。
 デザイン>テンプレート>アーカイブテンプレート>ブログ記事>ブログ記事の詳細
にて、

<MTIfNonEmpty tag="refsites">
<div class="asset-body">
<dl><dt>参考サイト : </dt>
<dd><$MTrefsites$></dd></dl>
</div>
</MTIfNonEmpty>

を追加。

6.作成時に

<ul>
<li></li>
</ul>

でリスト表示することで、作成されました。

作成時にul, liを作らなければいけないのが少し面倒というくらいで、結構使えそうです。必要に応じてその他のものも作れば、便利になりそうです。

mt4news-4.png

以前から、サイトに記されている言葉に反応していろいろな広告が出てくるのが面白くてgoogle adsenseを貼り付けているのですが、Movable type4.1に新しくしたので貼りなおしています。

Movable type4.1で個別ページなどどこにあるのか少しわかりずらかったので、adsenseを貼っているページがダッシュボードのどこにあったのか簡単にメモしておきます。

・個別ページ
 デザイン>テンプレート>アーカイブテンプレート>ブログ記事
ここが個別ページのデザインになり、その中の"プログ記事の詳細"のインクルードモジュールの最後のほうに加えた。(バナー468×60)
上下にbrタグ、またcenterタグを付けて整形。

・カテゴリー別、月別などのアーカイブ
 デザイン>テンプレート>アーカイブテンプレート>ブログ記事リスト
"ヘッダー"のインクルードモジュールの後に、~の最近のブログ記事などあり、これがアーカイブの種類によって変化する。その下に追加して、"ブログ記事概要"のインクルードモジュールに続く。
div class="entry-tags" 、centerタグで囲み、下にbrタグを付けて整形。(バナー468×60)

・検索・タグ
 デザイン>テンプレート>システムテンプレート>検索結果
"ヘッダー"のインクルードモジュールの後に、h1タグで囲まれた~と一致するものの後に、"ブログ記事概要"のインクルードモジュールの前に、追加。(バナー468×60)
上下にbrタグ、またcenterタグを付けて整形。

・サイドバー
 デザイン>ウィジェット
にて新しいウィジェットを作成。div class="widget-powered widget"、div class="widget-content"に囲ませて、そのまま追加。(スカイスクレイパー120×600)作成後、
 デザイン>ウィジェットセット>3カラムのサイドバー(メインorサブ)
にて作成したウィジェットをドラッグ&ドロップで、利用可能からインストール済みに移動。

そして再構成することにより、しばらくして表示されるようになりました。

このアーカイブについて

このページには、2008年2月に書かれたブログ記事が新しい順に公開されています。

前のアーカイブは2008年1月です。

次のアーカイブは2008年3月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

Recent Activity