2009年8月 Archive

今月（2009年8月）、ブログのテンプレートなどカスタマイズしたところをまとめたエントリです。

なんだかんだで一年以上続いてたのですね、このシリーズ。あ、いらんことしてる本元はここですよー。(参考)

それはさておき、今月のカスタマイズはJavaScript関連でほんの小技的なところです。

• カテゴリアーカイブのページ分割で、次のページ（Next Page）、前のページ（Previous Page）のリンクを作成
• 「今月のいらんことしい」のアーカイブページを作成。
• MTの記事編集画面のツールバーをドラッグできるようにした
• ActionStreamsのTwitterの投稿には、Retweetのリンクをつけるようにした
• タグ一覧のページで、表示方法をリスト・タグクラウドと切り替えできるようにした

ページ分割については、MTPaginateプラグインのMTPaginatePreviousPageLink等についてにて記載してあるとおりです。

「今月の～」のページにある規則を持ったEntryBasename(ファイル名)をつけてそれをフィルタリングするという方法で作成したものです。詳細は、「MT:EntryBasenameに基づいた記事のフィルタリング」にて記載してあります。

ツールバーのカスタマイズについてはMT：ついでにエディタのツールバーもドラッグ可能にしてみるに書いてあります。実際に使用してみると以下のような感じになっています。スクリーンショットは、MTOS 4.3-jaによるものです。

ActionStreamsについては、ワタくシめのAction StreamでTwitterの投稿のところを参照してみてください。

ReTweetのリンクは、http://twitter.com/home?status=RT%20XXXX のような形で、XXXXの部分にMTStreamActionTitleを使えばいいのです。こうすることで、streams.yamlファイルを弄ることなく出力を調整できます。なお、XXXXはURLエンコードにする必要があります。

タグ一覧では、タグクラウド表示をしていますが、これをリスト形式とクラウド表示と表示方法を切り替えるボタンを設置してみました。タグ一覧はこちら。Tags

お遊びで、Cutoff Parameterを「0」にするためのボタン（？）も追加してみました。

以下のページでカスタマイズ記録のリストを見ることができます。

• 当ブログのカスタマイズ記録

ぬり絵原画配布のエントリです。今回は紫陽花の花のぬりえ原画です。

梅雨時の元気に咲いている頃の花です。ちょっと今回は3つの花を撮影したあと、トリミングして一枚につなげてみました。出来はともかくですが。

もとの画像は以下となります。

Click to Enlarge

ぬり絵原画は以下となります。

はてなフォトライフ（Hatena Fotolife）にもぬり絵原画があります。

• maRks-nurie

Continue reading

Movable Typeの記事編集画面のツールバーをドラッグできるようにしてみました。

以下の内容は、Movable Type 4系に関するものです

Movable Type 4では記事の内容のエリアの縦サイズは可変になるようになっています。ところが、ワタくシのように記事の「続き（extend）」を使わずに、ほとんどが「本文」のみで書いており、長い記事の編集中にテキスト部分をスクロールバーが出ないように長くしていると、ツールバー（テキスト編集のためのボタン群）が上のほうに送られることで画面から隠れてしまうケースがあります。

これを解決する方法で思いつくのはこのようなところです。

• 可変バーのところを使ってテキスト部分を短くする
• 連続改行を入力していくことで下のほうにあるテキストを中央に持っていく
• 「かたつむりくんのWWW」さまにて全画面表示のプラグインが提供されているので利用してみる（Movable Type の記事投稿のエディタ部分を全画面表示（フルスクリーン）にするプラグイン ）

そこで、MTのツールバーもドラッグで任意の位置にもっていくことができるようにしてみたというわけです（というのはタテマエでdraggableのオプションを試すのが目的だと言う話もあります）。

方法ですが、先般書いた、「メモ：MTでファイルアップロード等のダイアログが画面内に収まり切らない時の対処」の記事内のダイアログをドラッグする方法にコードを追加します。追加する（している）コードは以下のようになります。

jQuery(function(){
     //  エディタツールバーにz-index設定し、テキスト部分に潜り込まないようにする
       $('#editor-content-toolbar').css("z-index","1");
     //  draggable の設定をする
       $('#editor-content-toolbar').draggable({
        snap: ".tab",
        cursor: "move",
        containment: "#content-inner",
        drag: function(event, ui){$(".field-buttons-formatting").css("visibility","hidden");},
        stop: function(event, ui){$(".field-buttons-formatting").css("visibility","visible");}
        });
});

導入までの手順の簡単なオサライです。

1. https://www.movabletype.jp/faq/modal-dialog.htmlの代替テンプレートをダウンロード
2. /alt-tmpl/ディレクトリ以下に指定された箇所にアップ。ダイアログの動作を確認。
3. jQuery本体、jQuery UI（ui.core.js、ui.draggable.js）を用意する
4. 代替テンプレートを書き換えて再びアップする

動作確認はMTOS4.3-jaとおよびこのブログでのMovable Type Pro 4.261、ブラウザはFirefox3.0.13とIE7です。動作的にはFirefoxのほうを推奨します。

あと、特定の要素を指定していますから、テンプレートの構造とか要素が変更になると動作しなくなります。なお、draggableのオプション設定については以下を参考にしました。

• Draggable [ jQuery ] - StackTrace（stacktrace.jp）
• UI/API/1.7.2/Draggable - jQuery JavaScript Library（jquery.com）

はてなブックマークのカスタムデザイン機能より。自分がカスタマイズしたカレンダーの部分のみ抜粋して控えとしておいておきます。

因みに以前カスタマイズしたCSS等の控えはこちら。

• はてブ：カスタムデザイン控（２００９年２月２日）

だいたいんこんなもんです。地味ですけど。

/* Calendar */
#user-sidebar-calendar table{ color:#000; }
#user-sidebar-calendar table td{
           border-top : 1px #FFFFFF solid;
           border-right:1px #E0E0E0 solid;
           border-bottom:1px #E9E9E9 solid;
           border-left  : 1px #FFFFFF solid;}
#user-sidebar-calendar table a {
           padding:0!important;
           margin:0!important;
           display:block; }
#user-sidebar-calendar table a:link {
           text-decoration: underline!important;
           color:#000!important; }
#user-sidebar-calendar table a:hover {
           color:#FFF!important;
           background:#000 !important; }
#user-sidebar-calendar table{background: #f1f1f1; }

はてな側が要素など構成を変えられるとあわなくなるとは思います。暫定的なものです。

よくある広告紙などで折る、「ごみ箱」ではじめのほうの折り方を変えて折るというやりかたです。

この記事では紙で「ごみ箱」を折ったことのあるかたを対象としたつもりです。折り紙のごみ箱の作り方がわからないというかたは、通常の（あるいは一般的なというか）折り方が以下のページで紹介されています。お手数ではありますが参照してみてください。

• 『広告チラシで折るゴミ箱』で便利＆エコ - ［エコ家事］All About

最初のほうの折り方を簡略化？した折り方

紙の辺が短いほうが縦で、長いほうを横に向けた位置で折りはじめます。

まずは、以下の図1で示した点線部分で折ります。図2のような形になります。図に示したaとbの長さが同じくらいに折るのがコツですが、正確に等しくなくても構いません。

図1：Click to Enlarge

図2：Click to Enlarge

反対の側も同様に折ります。このとき、先に折ったほうの折り目に合わせるようにすればだいたい同じ位置に折ることができます。（図3、図4）

図3：Click to Enlarge

図4：Click to Enlarge

折った紙を広げなおして、今度は裏側のほうへむけて縦に半分に折ります。（図5）

図5：Click to Enlarge

再び広げなおして、図6のように中央に向けて折りたたみをおこないます。するとホームベースのような五角形になるはずですので、あとはいつもどおりにごみ箱を完成させればOKです。以上です。

図6：Click to Enlarge

MTEntryBasenameタグを利用し、エントリの出力ファイル名が任意の規則によりつけられている記事のフィルタリングを試みます。

MTEntriesブロックタグでは、いくつかのモディファイアが用意されて、フィルタリングできるようになっています（リンク先のモディファイアの項目参照）。

カテゴリによるフィルタ（category=）やタグ（tag=）、カスタムフィールド（field:customfieldbasename=）など目的にあわせてフィルタすることができるようになっています。

で、今回のテーマですが、ブログ記事作成の際に「出力ファイル名」で、ある一定の規則がある記事に対してのフィルタをおこなうというものです。

説明より先にリストアップするコードを書いてみましたので提示してみます。

<MTApplyModifier  regex_replace="/\n+/g","\n">
<mt:Entries lastn="0">
<mt:if name="__first__"><ul></mt:if>
<mt:setvarblock name="basename"><$mt:EntryBasename$></mt:setvarblock>
<mt:if name="basename" like="mt_tips"><li><a href="<$MTEntryLink$>"><$mt:EntryTitle$></a></li>
</mt:if>
<mt:if name="__last__"></ul></mt:if>
</mt:Entries>
</MTApplyModifier>

ブロックタグのMTApplyModifierはApplyModifierプラグインによるもので、改行表示の調整をおこなっているだけですので、本題とはほとんど関係ありません。

細かい説明はいいでしょうかね。。mt:EntryBasenameを使うというくらいで特に珍しいことをしているわけでもないですし。

このような形でつくった、このブログで月に一回はある、「いらんことしい」の記事一覧ページが以下になります。mtevalグローバルモディファイアの適用でウェブページのテンプレートで作成しています。

現在は、DATA API を利用しておこなっております。

• 当ブログのカスタマイズ記録

ちょっとしたお遊び程度の試みでしたが、短期の特集記事の目次テンプレートを作ろうとするとき、細かいカテゴリを増やしたくないとか、カスタムフィールド作るまでもないとか、タグも増やしたくないな、といったときの悪あがきにどうかなー、なんて。。