MovableTypeの最近のブログ記事
以前にMovableTypeの設置を引き受けたサイトから、袖メニューに「リンク集」を設けたい、という問い合わせが有った。
要するに「関連サイトへのリンク」だ。
それ自体は普通にいろいろなサイトで多く見られるものであり、特別な依頼では無い。
問題は、このサイトはカスタマイズ仕様のテンプレートを採用しているため、MTタグについて若干の知識がある人でなければ袖メニュー部分をどのように書き出しているのかを理解するのは難しいだろう。
(当該サイトでは、依頼者は日々のエントリー投稿を行うのみであり、それ以上のスキルは無い)
・・・さて、しばし考えてみる。
- A案)
- 袖メニューテンプレートの当該箇所を書き換えるPHPを作り、専用の管理画面から操作する。
- B案)
- 袖メニューの当該箇所にインラインフレームを組み込み、読み込まれる「リンク集」ページを編集するPHPを作って(以下同上)。
- C案)
- リンク集データをCSVで持つようにして、Ajaxで書き出す。CSVの編集は、PHPで(以下同上)。
- D案)
- MT-moduleをPerlで作成する。
どれも一長一短だよなぁ・・・
まず D案は、一番正攻法ではあるが、このサイトのために作るにはコストパフォーマンス悪すぎ。
B案とC案は、どっちもどっちだが、個人的にはAjaxを用いるC案のほうが楽しい。
A案は、テンプレ破損の恐れが無きにしもあらず・・・。またテンプレ修正後に再構築を行わないと反映されないし。
となると、閲覧環境をJavaScript必須に限定して良ければ C案か。
・・・あとはクライアント次第だな
件のブログ修正の際、トップページのみ、個別エントリーの表示を先頭の指定文字数のみ表示させて、後は [ ...続きを読む ] と表示させたい、というリクエストがあった。
それ自体は、まあ文字数指定のトリム処理で良く、また [ ...続きを読む ] 部分の表示もJavaScriptを使って以下のようにすれば、まあ可能だ。<$MTEntryBody words="600"$>
<script type="text/javascript">
var strNum = <mt:entrybody count_characters="1" />;
if(strNum >= 10){
document.write("...<br />");
var linkStr = "<p><a href='<$MTEntryPermalink$>'>続きを読む</a><br /></p>";
document.write(linkStr);
}
...
問題は、指定文字数でトリムする trim_to の場合、開始タグと閉じタグの不整合が生じる、また文字数指定の場合は
タグが除去されたプレインテキストのみの表示になってしまう、ということ。
プラグインを作成して、強引に開始タグと閉じタグを整合させる処理でも噛ませれば、希望レイアウトのままの文字数指定が可能だとは思うが...
作るの面倒くさそうだなぁ。
- まず、指定文字数でトリム
- 記事内の、なんの文字列をタグとして認識させるか
- それは開始タグ/終了タグのセットが必要なタグか
- 開始タグであれば、配列に保存
- 閉じタグがあれば、配列の末尾のタグと照合して、同一であれば配列から除去
- ※末尾のタグと合致しない場合、元記事内にタグの不整合がある⇒エラー処理
- 記事内の最後のタグより後ろに < があれば、実体参照に置き換え
- 配列内に残るタグを、後ろから順次読み出して、対応する閉じタグを追加
といったあたりか・・・。
久しぶりにMovableTypeを用いたブログサイトの修正依頼があったので、件のサイトのテンプレートをいぢってみた。
まあ、頂いたご要望はほとんどがスタイルシートに関する修正で対応可能な範囲で、プラスアルファでテンプレートを直すくらいで済む内容だったのだが・・・。
特定のエントリー(まあ、新年のご挨拶に関する記事)を、常にインデックスページのトップ画像下に表示させたい、ということで、エントリーの番号を指定して記事を呼び出す方法を考えて見たのだが、コマンドリファレンスを見ても、MTEntriesのアトリビュートにIDが無いようだ・・・。しからば、MTSetVarで設定してMTIfで呼ぶか・・・。
しかし、試行錯誤するも・・・失敗。どうにもEntryIDをSetVarのvalueにうまく入れることができない・・・。
表示順を変えてlastnや、limitを使って試すも、どうにもウマくいかない。
う~ん、困ったなぁ・・・。
で、ふと、こんな必要っぽい機能が無いなんて妙だよなぁ?と思い直し、MTEntriesにID指定を与えて見たら、おりょ?テンプレート保存時にエラーが出ない。構築もできている。メインページを表示させて見ると、なんだ動くじゃん!
・・・あれこれ試行錯誤した時間が・・・とほほ。
まあ勉強になりました。
先のエントリーにて、ソース表示に用いている blockquote タグのCSSを修正した件について書いたが、今度はソースの一覧性・視認性に問題があるような気がして、サポート用のスクリプト(JavaScript)を追加してみた。
var btnWrite = "<input type=\"button\" onclick=\"selwin(this);\" value=\"copy用ウィンドウ\"><p> </p>";
var t;
var s;
function selwin(o){
var p = o.parentNode;
var c = p.childNodes;
for(i=0;c.length>i;i++){
if(c[i].tagName){
if(c[i].tagName == "BLOCKQUOTE"){
t = c[i].innerHTML;
s = window.open('','s','width=400,height=400,menubar=no,toolbar=no,location=no,status=no,scrollbars=yes,resizable=yes');
setTimeout("wr();",1000);
}
}
}
}
function wr(){
if(!window.s.closed){
window.s.document.body.innerHTML = t;
window.s.document.title="コピー用ウィンドウ";
}
}
function wb(){
document.write(btnWrite);
}
以前に問題となっていた blockquoteタグについて、CSSを修正してみた。
blockquote p{
background-color: #f0f0f0;
width: 300px;
height: 8em;
padding: 8px;
overflow: auto;
line-height: 160%;
font-family: monospace;
white-space: nowrap;
}
blockquote p:after{
width: 300px;
content: "";
display: block;
clear: both;
height: 1px;
overflow: hidden;
}
/*\*/
* html blockquote p{
height: 8em;
overflow: scroll;
}
/**/
MT4になってから、スタイル設定が簡単に選択できるようになっている。
設定ファイルは、/mt-static/support/themes/ 配下にあり、その中に独自作成のテーマ(スタイルセット)を入れておくだけで、簡単にスタイルが選択できるようになる、というもの。
先日、とある設定を作成し、スタイル選択画面から確認するも、名称は正しく見えているのに画像が旧タイプのまま。
・・・?!
よくよくセットの中を見ると、thumbnail-large.gif とthumbnail.gif というファイルがある。
なんのことはない、スタイルセットの中にサムネイル用画像を作って入れておくだけだった。
そうだよね~。いくらMTが優れものでも、CSS定義ファイルと背景などの画像セットだけで、ブラウザ表示状態をシミュレートして画面レンダリングしてくれる訳は無いよな。
ということで一件落着でした。
写真付きのエントリーの場合だけ、袖メニューに表示したい。
そういう用途で作ってみた。
いちおうテストしているけど、大丈夫、かな?
<MTIfNonZero tag="AssetCount">
<div class="widget">
<h3 class="widget-header">Photo Entry</h3>
<div class="widget-content">
<MTEntries lastn="10">
<MTEntryAssets type="image" lastn="1">
<MTAssetsHeader><ul class="widget-list"></MTAssetsHeader>
<li class="widget-list-item">
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
<a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>"><img src="<$MTAssetThumbnailURL width="70"$>" class="asset-img-thumb" alt="<$MTAssetLabel$>" /></a></li>
<MTAssetsFooter></ul></MTAssetsFooter>
</MTEntryAssets>
</MTEntries>
</div>
</div>
</MTIfNonZero>
とりあえず、最新10件のエントリーまでのうち、写真付じゃないエントリーは無視して、写真付きのものだけ表示するようになっている・・・はず。(^^
テストです。
おぉ?
編集画面のテキストエリアから画像がはみ出ている・・・(^^;
以下について、ですが、カテゴリの並び順は、拡張プラグインを使っています。
※SortCatFld::の部分です。
<div class="widget-categories widget">
<h3 class="widget-header">カテゴリ</h3>
<div class="widget-content">
<MTTopLevelCategories sort_method="SortCatFld::Sort">
<MTSubCatIsFirst><ul class="widget-list"></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li class="widget-list-item">
<a href="<$MTCategoryArchiveLink$>" <MTIfNonEmpty tag="MTCategoryDescription">title="<$MTCategoryDescription$>"</MTIfNonEmpty>><$MTCategoryLabel$> (<$MTCategoryCount$>)</a>
<MTEntries lastn="1">
<span class="inCagetoryDate">
<a href="<$MTEntryPermalink$>">
<$MTEntryDate language="en" format="%Y %b %d">
</a>
</span>
<span class="inCategory">
<a href="<$MTEntryPermalink$>">
<$MTEntryTitle$>
</a>
</span>
</MTEntries>
<MTElse><li class="widget-list-item"><$MTCategoryLabel$>
</MTIfNonZero>
<MTSubCatsRecurse></li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>
