moblog template samples
先日の moblog gateway は、トラブルもあったにもかかわらず、好評いただいたようでありがたいことです。ゴールデンウィークに手をいれてみたいと思っているのですが、どうなることやら...。
moblog の使い方ですが、自分のウェブログに直接エントリーを追加してもいいのですが、文章主体の普通のウェブログと携帯だとなんかバランスがあわない気がしていて、わたしのまわりの人の使い方は、moblog 専用にウェブログを一つ作っていることが多いです。ちょっと使い方を説明します。
まずは、Movable Type で新しいウェブログをもうひとつ作ります。作れない方は、Movable Type の管理者の方におねだりしてください。;-) 編集できるユーザは自分と、moblog 用のアカウント、両方ともできるように設定しておきましょう。site archive path を [自分のウェブログ]/moblog/ でアクセスできるような設定にしてください。理由は後でわかります。
できたらテンプレートを用意します。写真が主体なので、テンプレートもちょっと変えても面白いです。わたしが作ったのは、http://joi.ito.com/moblog/ や http://mica.uva.ne.jp/moblog/ で使われています。こんな中身になっています。
tile.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="robots" content="index,follow">
<title><$MTBlogName$></title>
<link rel="stylesheet" href="styles-site.css" type="text/css" />
<link rel="stylesheet" href="styles-photo-tile.css" type="text/css" />
<script language="javascript" type="text/javascript">
function OpenComments (c) {
window.open('<$MTCGIPath$>mt-comments.cgi?' +
'entry_id=' + c,
'comments',
'width=480,height=480,scrollbars=yes,status=yes');
}
function OpenTrackback (c) {
window.open(c,
'trackback',
'width=480,height=480,scrollbars=yes,status=yes');
}
</script>
</head>
<body>
<div class="title"><b><$MTBlogTitle$></b><br /><span class="description"><$MTBlogDescription$></span></div>
</div>
<MTEntries lastn="30">
<div class="photobody">
<div class="phototitle">
<a href="<$MTEntryLink$>"><$MTEntryTitle$>
</div>
<$MTEntryBody$></a>
<div class="photodate">
<$MTEntryDate format="%b %e, %Y"$>
<$MTEntryDate format="%H:%M"$>
</div>
<div class="photocomment">
<MTEntryIfAllowComments> [
<a href="<$MTEntryLink$>">Comments</a> (<$MTEntryCommentCount$>)
</MTComments>
<MTEntryIfAllowPings>
<a href="<$MTCGIPath$>mt-tb.cgi?__mode=view&entry_id=<$MTEntryID$>" onclick="OpenTrackback(this.href); return false">TrackBack (<$MTEntryTrackbackCount$>)</a>
</MTEntryIfAllowPings>
] </MTEntryIfAllowComments>
</div>
</div>
</MTEntries>
</body>
</html>
styles-photo-tile.css
.caption {
display: none;
color: #000;
margin: 0.1em;
text-align: left;
float: left;
background-color: #fff;
padding: 1em;
}
.thumbcaption {
color: 000;
margin: 0.1em;
text-align: center;
float: left;
background-color: #fff;
padding: 1em;
}
.photo {
margin-top: 0.1em;
margin-left: 1em;
margin-right: 1em;
margin-bottom: 0.1em;
background-color: #fff;
border-top: solid 1px #000;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
padding: 3px 3px 3px 3px;
}
.photodate {
margin-top: 0.1em;
margin-left: 1em;
margin-right: 1em;
margin-bottom: 0.1em;
color: #777;
padding: 3px 3px 1px 3px;
text-align: right;
font-size: xx-small;
}
.photocomment {
margin-top: 0.1em;
margin-left: 1em;
margin-right: 1em;
margin-bottom: 1em;
color: #77f;
padding: 3px 3px 1px 3px;
text-align: right;
font-size: xx-small;
}
.photo img {
border: 0;
}
.phototitle {
margin-top: 1em;
margin-left: 1em;
margin-right: 1em;
margin-bottom: 0.1em;
color: #77f;
padding: 3px 3px 1px 3px;
text-align: left;
font-size: xx-small;
}
.photobody {
float: left;
margin-top: 1em;
margin-left: 1em;
margin-right: 1em;
text-align: center;
}
.photobody p {
margin-top: 0em;
margin-bottom: 0em;
}
.posted {
text-align: right;
margin-right:3em;
}
body {
padding: 1em;
}
h1 {
font-family: palatino, georgia, verdana, arial, sans-serif;
}
moblog はデフォルトでスタイルシートのクラスが、キャプション部分に caption, イメージ部分に photo となります。そこで、caption に display: none として表示しないようにしているわけです。
また、こちらで利用している mail2entry は local mode で使うと、自動的に最新の画像を now.jpg に、日付を now.time というファイルに出力しています。これを使うと、自分のメインのウェブログに画像と時間を入れられますのですが、リモートのときにはそうなっていません。これは Movable Type のテンプレート機能を使えば解決できます。
now.html
<MTEntries lastn="1">
<div class="photobody">
<div class="phototitle">
<a href="<$MTEntryLink$>"><$MTEntryTitle$>
</div>
<$MTEntryBody$></a>
<div class="photodate">
<$MTEntryDate format="%b %e, %Y"$>
<$MTEntryDate format="%H:%M"$>
</div>
</div>
</MTEntries>
now.date
<MTEntries lastn="1"> <$MTEntryDate format="%b %e, %Y %H:%M"$> </MTEntries>
これをウェブログの Main Index で
Main Index
<div class="sidetitle"> moblog </div> <div class="side"> <$MTInclude file="moblog/now.html"$> <$MTInclude file="moblog/now.date"$> </div>
みたいにして読み込ませれば、大丈夫です。MTIncludeで読むときのパスは、それぞれのサイトでちょっと違うはずなので、うまく設定してみてください。また、caption だけ消したいときは styles-site.css に
.side .caption {
display: none;
}
のように設定すると side クラスの中でだけ、caption が表示されません。
moblog だけ別のウェブログに分けるとデザインといいますか、いろいろと手を入れやすいと思います。ゴールデンウィーク、どこか遊びに行く前に設定していくと楽しいかも。
Comments