<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
   <title>My Color　「ダンクハーツ-谷春樹Blog-」</title>
   <link rel="alternate" type="text/html" href="http://tani.dank-hearts.com/" />
   <link rel="self" type="application/atom+xml" href="http://tani.dank-hearts.com/atom.xml" />
   <id>tag:tani.dank-hearts.com,2010://6</id>
   <updated>2009-01-24T00:44:58Z</updated>
   <subtitle>趣味のインテリア・ダーツ・ホームパーティーのことや、CSSテクニック、気になるデザインサイトを紹介。</subtitle>
   <generator uri="http://www.sixapart.com/movabletype/">Movable Type 3.33-ja</generator>

<entry>
   <title>自分の読書量をグラフで管理 「読書メーター」</title>
   <link rel="alternate" type="text/html" href="http://tani.dank-hearts.com/2009/01/post_15.html" />
   <id>tag:tani.dank-hearts.com,2009://6.286</id>
   
   <published>2009-01-24T00:29:22Z</published>
   <updated>2009-01-24T00:44:58Z</updated>
   
   <summary>自分が読み終わった本を登録すると、ページ数と冊数をグラフで視覚化してくれるサイト...</summary>
   <author>
      <name>谷 春樹</name>
      
   </author>
         <category term="注目サイト" scheme="http://www.sixapart.com/ns/types#category" />
   
   
   <content type="html" xml:lang="ja" xml:base="http://tani.dank-hearts.com/">
      自分が読み終わった本を登録すると、ページ数と冊数をグラフで視覚化してくれるサイトのご紹介です。
      また、読み終わった本だけではなく、積読本・読んでる本・読みたい本も登録でき管理できるという優れもの！

さらに登録した書籍からよく読む著者を導いてくれたり、「自分が読んでいる本を読んだ人はこんな本を読んでいます」などの関連情報までだしてくれます。

うーん、すばらしい！
   </content>
</entry>
<entry>
   <title>text-indent:-9999pxが効かない</title>
   <link rel="alternate" type="text/html" href="http://tani.dank-hearts.com/2008/12/textindent9999px.html" />
   <id>tag:tani.dank-hearts.com,2008://6.283</id>
   
   <published>2008-12-12T12:18:15Z</published>
   <updated>2008-12-12T12:21:59Z</updated>
   
   <summary>メニューや見出しなど、text-indent:-9999pxでテキストを外に飛ば...</summary>
   <author>
      <name>谷 春樹</name>
      
   </author>
         <category term="CSS" scheme="http://www.sixapart.com/ns/types#category" />
   
   
   <content type="html" xml:lang="ja" xml:base="http://tani.dank-hearts.com/">
      メニューや見出しなど、text-indent:-9999pxでテキストを外に飛ばす方法をよく利用しますが、時々効かないときがでてきます。

そんなときの解決策です。
      text-indent:-9999pxが効かないときは、その親要素などにtext-alignが設定されている可能性があります。
text-alignを削除すると正常に動作するようになります。

このバグは久々にハマりました。。。。
   </content>
</entry>
<entry>
   <title>ブログの更新時に、別ブログのインデックスを再構築</title>
   <link rel="alternate" type="text/html" href="http://tani.dank-hearts.com/2008/07/post_14.html" />
   <id>tag:tani.dank-hearts.com,2008://6.276</id>
   
   <published>2008-07-14T05:47:44Z</published>
   <updated>2008-07-16T07:57:44Z</updated>
   
   <summary>前のエントリー「他ブログの更新情報を表示する」とセットで使うとかなり便利なCGI...</summary>
   <author>
      <name>谷 春樹</name>
      
   </author>
         <category term="MovableType" scheme="http://www.sixapart.com/ns/types#category" />
   
   
   <content type="html" xml:lang="ja" xml:base="http://tani.dank-hearts.com/">
      <![CDATA[<p>前のエントリー「<a href="http://tani.dank-hearts.com/2008/07/mt3.html">他ブログの更新情報を表示する</a>」とセットで使うとかなり便利なCGIです。<br />
MTで静的に再構築を行うようにしている場合は、自分のブログを更新しないと再構築されません。<br />
でも同じアカウントでもう１つブログを作って、更新情報を表示したいと思われるかたも多いでしょう。<br />
そんなときに便利な一方を更新すると自動的に他のブログも再構築されるCGIをご紹介します。</p>]]>
      <![CDATA[<p>このCGIは「<a href="http://mayoi.net/archives/2003/11/28-0949.php" target="_blank">人生迷い箸</a>」で紹介されているCGIです。</p>

<p>まず下記のファイルをダウンロードしてください。</p>

<h3>ダウンロード</h3>
<p><a href="http://mayoi.net/archives/2003/11/28-0949_164.php" target="_blank">up-rebuild.zip (Ver0.9 size=1.02KB)（人生迷い箸さんサイト）</a></p>

<p>設置方法は、up-rebuild.cgi を編集し、適切なperlのパス、$MT_DIRにmt.cgiのあるディレクトリ、$blog_idに自動リビルド対象のBlogのidを指定します。<br />
次に変更したファイルを、CGIが実行できるディレクトリに設置後、パーミッションを755に設定します。</p>

<p><strong class="font-color-red">※MT3.2以降では mt.cfg がないため、うまく動作しません。MT3.2 以降でお使いの方は up-rebuild.cgi を編集する際に、27 行目あたりにある「mt.cfg」という文字列を「mt-config.cgi」に書き換えてください。</strong></p>

<p>最後に更新するブログ（自動リビルドのトリガになる側）で、「BLOGの設定」→「ウェブログの設定」の「広報 / リモートインターフェイス / トラックバック」に、設置したup-rebuild.cgiのURLを入力すれば完了です。</p>
]]>
   </content>
</entry>
<entry>
   <title>おもしろブログパーツ</title>
   <link rel="alternate" type="text/html" href="http://tani.dank-hearts.com/2008/07/post_13.html" />
   <id>tag:tani.dank-hearts.com,2008://6.275</id>
   
   <published>2008-07-11T04:50:39Z</published>
   <updated>2008-07-14T05:51:32Z</updated>
   
   <summary>おもしろいブログパーツを発見しました！！ 「ハプニング」という映画のブログパーツ...</summary>
   <author>
      <name>谷 春樹</name>
      
   </author>
         <category term="面白サービス" scheme="http://www.sixapart.com/ns/types#category" />
   
   
   <content type="html" xml:lang="ja" xml:base="http://tani.dank-hearts.com/">
      <![CDATA[おもしろいブログパーツを発見しました！！<br>
「ハプニング」という映画のブログパーツなのですが…。。。]]>
      <![CDATA[<br>
<br>
<div align="center">
<script type="text/javascript"
src="http://www.foxj.jp/happening/blogparts/happeningBlogParts.js"></script>
</div>]]>
   </content>
</entry>
<entry>
   <title>他ブログの更新情報を表示する【MT3系統】</title>
   <link rel="alternate" type="text/html" href="http://tani.dank-hearts.com/2008/07/mt3.html" />
   <id>tag:tani.dank-hearts.com,2008://6.274</id>
   
   <published>2008-07-04T08:32:00Z</published>
   <updated>2008-07-15T08:41:51Z</updated>
   
   <summary>MTを使用してWebサイトを作成していると同じサーバーで管理している他のブログの...</summary>
   <author>
      <name>谷 春樹</name>
      
   </author>
         <category term="MovableType" scheme="http://www.sixapart.com/ns/types#category" />
   
   
   <content type="html" xml:lang="ja" xml:base="http://tani.dank-hearts.com/">
      <![CDATA[<p>MTを使用してWebサイトを作成していると同じサーバーで管理している他のブログの更新情報を表示したい場合もあると思います。<br>
MT3系統では標準のMTタグで実装できないのでプラグインを使用して実装。</p>]]>
      <![CDATA[<p>MT4系統ではMTタグの値を元にした条件分岐が可能ですが、MT3.5などでは標準で&lt;MTIfNonZero&gt;や&lt;MTIfNonEmpty&gt;という、MTタグの値が0や空でないかを判定するタグしかないので下記のプラグイン（Compare）を導入。<br />
下記のプラグインを使うとMTタグの値を文字列と比較したり、数値の大小の比較をすることができます。</p>

<h3>ダウンロード</h3>
<p><a href="http://www.staggernation.com/mtplugins/Compare" target="_blank">Compare Plugin ダウンロード</a></p>


<p>文字列の比較ができるようになると下記のように記述することで、他のブログの更新情報を表示することができるようになります。</p>

<h3>記述方法</h3>

<blockquote>
&lt;MTBlogs&gt;<br>
&nbsp;&nbsp;&lt;MTIfEqual a=&quot;[MTBlogName]&quot; b=&quot;スタッフブログ&quot;&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;MTEntries lastn=&quot;5&quot;&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;&lt;$MTEntryPermalink$&gt;&quot;&gt;&lt;$MTEntryTitle$&gt;&lt;/a&gt;&lt;/li&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/MTEntries&gt;<br>
&nbsp;&nbsp;&lt;/MTIfEqual&gt;<br>
&lt;/MTBlogs&gt;
</blockquote>

<p>上記のように記述すると「a」というアトリビュートと「b」というアトリビュートを比べて等しい場合のみ表示してくれます。<br>
「a」や「b」の部分は自由に変更することができますので色々応用ができそうですね。</p>

<br>
<p>他のブログの情報を表示させるには毎回再構築が必要となりますが、他のプラグインと組みあせることでリアルタイムで表示させることも可能です。<br>
その方法は「<a href="http://tani.dank-hearts.com/2008/07/post_14.html">ブログの更新時に、別ブログのインデックスを再構築</a>」のエントリーで紹介していますので、一緒にどうぞ。</p>]]>
   </content>
</entry>
<entry>
   <title>MT4でコメントを投稿できないときの解決策</title>
   <link rel="alternate" type="text/html" href="http://tani.dank-hearts.com/2008/06/mt4.html" />
   <id>tag:tani.dank-hearts.com,2008://6.273</id>
   
   <published>2008-06-26T04:35:59Z</published>
   <updated>2008-07-04T08:19:31Z</updated>
   
   <summary>MT４の初期設定では、サインインしないといけなかったりユーザー認証が必要だったり...</summary>
   <author>
      <name>谷 春樹</name>
      
   </author>
         <category term="MovableType" scheme="http://www.sixapart.com/ns/types#category" />
   
   
   <content type="html" xml:lang="ja" xml:base="http://tani.dank-hearts.com/">
      MT４の初期設定では、サインインしないといけなかったりユーザー認証が必要だったりかなり敷居が高い設定になっているのですが、これを管理画面の[設定]→[コメント]→[すべて自動的に公開する ]に変更しても、解消されません。

しばらくこの問題ハマってしまい管理画面の設定を見直したり、ソースが間違っていないかチェックしていたんですが、実はかなり簡単な事でした。
      <![CDATA[実はコメント設定画面以外にも設定しなくてはいけないところがあり、
「設定」→「登録/認証設定」→「認証方式」を変更しなくてはいけません。（これはわかりづらいっす。。）

<img src="http://tani.dank-hearts.com/image/up/img_com_img.jpg">]]>
   </content>
</entry>
<entry>
   <title>ブロックレベル要素の高さを揃えるjsライブラリー</title>
   <link rel="alternate" type="text/html" href="http://tani.dank-hearts.com/2008/05/js.html" />
   <id>tag:tani.dank-hearts.com,2008://6.269</id>
   
   <published>2008-05-20T02:47:11Z</published>
   <updated>2009-02-05T01:27:24Z</updated>
   
   <summary>商品一覧ページなどをコーディングするときに、 のように表示されてほしいのに のよ...</summary>
   <author>
      <name>谷 春樹</name>
      
   </author>
         <category term="CSS" scheme="http://www.sixapart.com/ns/types#category" />
         <category term="Javascript" scheme="http://www.sixapart.com/ns/types#category" />
   
   
   <content type="html" xml:lang="ja" xml:base="http://tani.dank-hearts.com/">
      <![CDATA[商品一覧ページなどをコーディングするときに、<br>
<br>
<img src="http://tani.dank-hearts.com/image/up/img1.jpg" class="clear"><br>
のように表示されてほしいのに<br>
<br><br>
<img src="http://tani.dank-hearts.com/image/up/img2.jpg" class="clear"><br>
<br>
のようになってしまったことはありませんか？<br>
この場合の解決策は、一番高い要素の高さにワクの幅をそろえることで解決できるのですが、高さが一定じゃないときってありますよね？<br>
そんなときに使えるjsライブラリーをご紹介。<br>]]>
      <![CDATA[使用するのは「<a href="http://blog.webcreativepark.net/2007/07/26-010338.html" target="_blank">to-R</a>」さんが制作した「<a href="http://blog.webcreativepark.net/2007/07/26-010338.html" target="_blank">heightLine.js</a>」。<br>

<div style="background:#f4f4f4;border:1px dotted #ddd;padding:5px;">
このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。
</div>

<p>とのこと。<br>
これがすごく便利なんです！</p>

<p>使用方法もheightLine.jsを読み込みクラスをあてるだけという簡単さ。<br>
是非使ってみてください。</p>


<h3>設置方法</h3>
<p><a href="http://blog.webcreativepark.net/2007/07/26-010338.html" target="_blank">to-R</a>さんのサイトから<a href="http://blog.webcreativepark.net/2007/07/26-010338.html" target="_blank">heightLine.js</a>をダウンロード。</p>
<br>

<h3>記述方法</h3>
「heightLine.js」を読み込みます。<br>
<blockquote>&lt;script type=&quot;text/javascript&quot; src=&quot;./heightLine.js&quot;&gt;&lt;/script&gt;</blockquote>
<br>


<h3>使い方１</h3>
<p>統一したいブロックレベル要素に「heightLine」というクラスをあてます。<br>
これで自動的にこのクラスがあてられたブロックの中で高さが一番高いものに統一されます。<br></p>

<strong>使用例</strong><br>
<blockquote>
&lt;dl class=&quot;heightLine&quot;&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;dt&gt;商品タイトル&lt;/dt&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;dd&gt;商品紹介文&lt;/dd&gt;<br>
&lt;/dl&gt;<br>
&lt;dl class=&quot;heightLine&quot;&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;dt&gt;商品タイトル&lt;/dt&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;dd&gt;商品紹介文&lt;/dd&gt;<br>
&lt;/dl&gt;
</blockquote>
<br>
<br>

<h3>使い方２</h3>
<p>グループごとに高さを変える場合は<br>
<br>
・「heightLine-group1」<br>
・「heightLine-group2」<br>
<br>
などのようにheightLineの後ろに-(ハイフン)で続けてグループ名を指定します。<br></p>

<strong>使用例</strong><br>
<blockquote>
&lt;dl class=&quot;heightLine-group1&quot;&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;dt&gt;商品タイトル&lt;/dt&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;dd&gt;商品紹介文&lt;/dd&gt;<br>
&lt;/dl&gt;<br>
&lt;dl class=&quot;heightLine-group1&quot;&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;dt&gt;商品タイトル&lt;/dt&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;dd&gt;商品紹介文&lt;/dd&gt;<br>
&lt;/dl&gt;<br>
<br>
&lt;dl class=&quot;heightLine-group2&quot;&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;dt&gt;商品タイトル&lt;/dt&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;dd&gt;商品紹介文&lt;/dd&gt;<br>
&lt;/dl&gt;<br>
&lt;dl class=&quot;heightLine-group2&quot;&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;dt&gt;商品タイトル&lt;/dt&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;dd&gt;商品紹介文&lt;/dd&gt;<br>
&lt;/dl&gt;
</blockquote>
<br>
<br>

<h3>使い方３</h3>
<p>上記の記述方法はそれぞれのブロック要素にすべて記述する方法でしたが、この３つめの記述方法は親のブロック要素に<br>
「heightLineParent」というクラスをあてます。<br></p>
<strong>使用例</strong><br>
<blockquote>
&lt;div class=&quot;heightLineParent&quot;&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;dl&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;dt&gt;商品タイトル&lt;/dt&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;dd&gt;商品紹介文&lt;/dd&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/dl&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;dl&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;dt&gt;商品タイトル&lt;/dt&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;dd&gt;商品紹介文&lt;/dd&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/dl&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;dl&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;dt&gt;商品タイトル&lt;/dt&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;dd&gt;商品紹介文&lt;/dd&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/dl&gt;<br>
&lt;/div&gt;</blockquote>
これが一番便利です。

]]>
   </content>
</entry>
<entry>
   <title>MovableType4の特徴をまとめてみました</title>
   <link rel="alternate" type="text/html" href="http://tani.dank-hearts.com/2008/04/movabletype4.html" />
   <id>tag:tani.dank-hearts.com,2008://6.266</id>
   
   <published>2008-04-14T12:51:03Z</published>
   <updated>2008-04-14T13:37:27Z</updated>
   
   <summary> 今までMT4以降はMT3.5と全く勝手が違うため、敬遠していましたが先日Six...</summary>
   <author>
      <name>谷 春樹</name>
      
   </author>
         <category term="MovableType" scheme="http://www.sixapart.com/ns/types#category" />
   
   
   <content type="html" xml:lang="ja" xml:base="http://tani.dank-hearts.com/">
      <![CDATA[今までMT4以降はMT3.5と全く勝手が違うため、敬遠していましたが先日<a href="http://www.sixapart.jp/" target="_blank">SixApart</a>さんから「Movable Type プロフェッショナル・スタイル」という書籍をいただきました。
これはCMSツールとして進化したMovableType4を使いこなすためのノウハウが詰め込まれた本で、MovableType4の概要やテンプレートのカスタマイズからプラグインの作成まで中上級者向けの書籍です。

この本を見てどっぷりMovableType4に魅了されたので、MovableType4の特徴をいくつか。]]>
      <![CDATA[<h3>使いやすくなった管理画面</h3>
<img src="<MTBlogURL>image/entry/mt4_1.jpg" class="img-left img-border">MT3でもWYSIWYGのプラグインを入れたり、確認画面をパワーアップするプラグインを入れたりすることである程度初心者にやさしくなりますが、まだまだ製作者よりの管理画面でした。<br>
しかし、MT4では全体の画面遷移がすくなくなったり、ファイルのアップロードもファイルマネージャー機能がつき飛躍的にユーザビリティーが向上しています。
<br>
<br>

<h3>カスタムフィールドの基準搭載でますますCMS特化に</h3>
<img src="<MTBlogURL>image/entry/mt4_2.jpg" class="img-left">MT4ではいつも使用しているエントリーフィールドのカスタマイズプラグイン「RightFields」が対応しておらず、弊社の制作には適していませんでした。<br>
しかし、MT4.1からカスタムフィールドが基準搭載し、複雑なWebサイトの構築にも対応できるようになりました。<br>
私自身、一番ネックだった部分です。
<br>
<br>
<br>
<h3>ユーザー管理機能の向上</h3>
<br>
<img src="<MTBlogURL>image/entry/mt4_3.jpg" class="img-left img-border">MT4ではあたらしく「ロール」と呼ばれる機能が追加されました。
これはユーザーの権限を管理できる機能で、公開までのフローにより権限わけできるようになりました。

たとえば企業サイトを運用する場合、投稿者が作成したコンテンツを公開前に管理者がチェックし、公開するようなケースも多くなると思います。
ここでロール機能を使えば下記のようになります。

<strong>①公開権限のない「ライター」が記事を下書き保存します。
②修正権限のある「編集者」が記事の内容をチェックして修正します。
MTの機能を利用して任意のメールアドレスに通知します。
③公開権限のある「責任者」が記事を公開します。
④コンテンツ更新時に関係者全員にMTからメールで通知が来ます。</strong>

このように役割ごとに権限をもたせてアカウントを管理できるようになりました。
しかもMTから確認のメールを送ることができるというオマケつき。
すごい。。。
<br>
<br>

<h3>エントリー自動保存機能搭載</h3>
<img src="<MTBlogURL>image/entry/mt4_4.jpg" class="img-left img-border">いままでブログの作成中に間違って消しちゃったりしたことはありませんか？
私はタブブラウザを使用しているので頻繁に消してしまいます。。。
しかし、MT4では自動的に更新内容を保存してくれる機能があるので、うっかり消しちゃっても大丈夫。
<br>

<h3>グローバルテンプレートの登場</h3>

弊社の制作スタイルとして、複数のブログシステムでひとつのWebサイトをつくることが多くありました。
たとえば、新着情報用のブログ、用語集用のブログ、スタッフ紹介用のブログなどそれぞれのブログで「RightFields」を使用してエントリーフィールドのカスタマイズを行い、制作をしていました。
これはブログを分け、それぞれの更新専用に管理画面をカスタマイズすることでお客様の更新しやすさを向上するという目的があります。
このとき、ヘッダーやフッターは全ブログで共通だったので、モジュールではなくわざわざテンプレートファイルとして書き出し、それを読み込んでいました。
しかしMT4では複数のブログでも同じモジュールを使用できるようになり、管理が簡単になりました。
<br>
<br>

<h3>テンプレートセット機能の登場</h3>
<img src="<MTBlogURL>image/entry/mt4_5.jpg" class="img-left img-border">MT4.1からテンプレートセットという機能が登場しました。
この機能は、同じテンプレートを使用して別のブログを作成するときに今までは一つ一つコピーしていたものが、テンプレートをプラグイン化することで、プラグインフォルダにあげて、テンプレートの適用ボタンをクリックするだけで同じブログを複製することができるようになりました。
この機能は使い方によっては非常に強力で、フランチャイズ店舗など同じデザインで複数の地域にあるホームページを制作するときに役立ちます。
ベースのテンプレートをつくれば後はプラグイン化して、ボタンを押していくだけです。
<br>
<br>
最後にMovableType4.1のライセンス形態について曖昧だったので簡単な表にしてみました。
<br>

<table border="0" cellspacing="0" class="tbl-nomal">
    <tr>
        <th>&nbsp;</th>
        <th>MT４個人ライセンス</th>
        <th>MT４基本ライセンス</th>
        <th>MTOS</th>
    </tr>
    <tr>
        <th>料金</th>
        <td>無料</td>
        <td>\52500(税込)</td>
        <td>-</td>
    </tr>
    <tr>
        <th>商用利用</th>
        <td>不可</td>
        <td>可能</td>
        <td>可能</td>
    </tr>
    <tr>
        <th>ブログ数の制限</th>
        <td>無制限</td>
        <td>無制限</td>
        <td>無制限</td>
    </tr>
    <tr>
        <th>投稿者数の制限</th>
        <td>無制限</td>
        <td>数に応じて料金が必要</td>
        <td>無制限</td>
    </tr>
    <tr>
        <th>再配布</th>
        <td>不可</td>
        <td>不可</td>
        <td>可能</td>
    </tr>
    <tr>
        <th>サポート</th>
        <td>サポートライセンスが必要</td>
        <td>シックスアパート</td>
        <td>ユーザーコミュニティー</td>
    </tr>
    <tr>
        <th>機能</th>
        <td>基本機能＋α</td>
        <td>基本機能＋α</td>
        <td>基本機能</td>
    </tr>
</table>
※ＭＴＯＳは(Movable Type Open Source)の略で、エムトスと読むらしいです。

MT4は高いというイメージがありますがMTOSを使用すれば導入コストを抑えることが可能になりました。
通常のサイト構築ならMTOSで問題ないでしょう。

ここで表をよく見ていただくと、MTOSだけ機能に＋αがありません。
この＋αは今私がわかっている部分で、カスタムフィールドの機能になります。
カスタムフィールドが使用できなのは痛いですが、カスタムフィールドを利用しなくても問題ない場合で、サポートを必要としない十分な技術力があれば使用しても問題ないと思います。

みなさん一度つかってみてください。]]>
   </content>
</entry>
<entry>
   <title>縦方向のセンタリング</title>
   <link rel="alternate" type="text/html" href="http://tani.dank-hearts.com/2008/04/post_12.html" />
   <id>tag:tani.dank-hearts.com,2008://6.265</id>
   
   <published>2008-04-07T10:36:43Z</published>
   <updated>2008-04-07T11:19:31Z</updated>
   
   <summary>縦方向のセンタリングで思いつくのがテーブルを利用してセルにvalign=&quot;mid...</summary>
   <author>
      <name>谷 春樹</name>
      
   </author>
         <category term="CSS" scheme="http://www.sixapart.com/ns/types#category" />
   
   
   <content type="html" xml:lang="ja" xml:base="http://tani.dank-hearts.com/">
      <![CDATA[縦方向のセンタリングで思いつくのがテーブルを利用してセルにvalign="middle"を当てること。<br>
でも、縦にセンタリングするためだけにテーブルつかうのもスマートじゃないし。。。ってときに使えるテクニック。<br>
<br>
有名なテクニックで１行の場合のみできるCSSテクニックがあります。<br>
記述方法は下記のようになります。
]]>
      <![CDATA[<br><br><br><br>
<h3>使用例</h3>
<br>
<strong>CSS</strong>
<blockquote> .box {<br>
&nbsp;&nbsp;&nbsp;&nbsp;height:100px;<br>
&nbsp;&nbsp;&nbsp;&nbsp;line-height:100px;<br>
&nbsp;&nbsp;&nbsp;&nbsp;background:#fff4f4;<br>
}</blockquote>

<strong>HTML</strong>
<blockquote>&lt;div class=&quot;box&quot;&gt;<br>
    &nbsp;&nbsp;&nbsp;&nbsp;この文章がセンタリングされます。<br>
    &lt;/div&gt;
</blockquote>
<br>

<strong>表示</strong>
<div style="background:#fff4f4;height:100px;line-height:100px;">この文章がセンタリングされます。</div>
<br>
このようにheightとline-heightを同じ値にすると縦のセンタリングが適用されます。<br>
ただし、一行のみの場合しかうまくセンタリングされません。


<br>
<br>
<br>
複数行の場合は下記のように記述します。<br>
<br>

<h3>使用例</h3>
<br>
<strong>CSS</strong>
<blockquote>
    <p>div.box{<br>
&nbsp;&nbsp;&nbsp;&nbsp;height:100px;<br>
&nbsp;&nbsp;&nbsp;&nbsp;background:#fff4f4;<br>
}</p>
    <p>div.box div{<br>
        &nbsp;&nbsp;&nbsp;&nbsp;display:table-cell;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;margin-bottom:1px;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;vertical-align:middle;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;width:150px;<br>
        }</p>
    <p>* html div.box div{/* IE 6 */<br>
        &nbsp;&nbsp;&nbsp;&nbsp;display:inline;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;zoom:1;<br>
        }</p>
    <p>*:first-child+html div.box div{/* IE 7 */<br>
        &nbsp;&nbsp;&nbsp;&nbsp;display:inline;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;zoom:1;<br>
        }</p>
</blockquote>
<br>
<strong>HTML</strong>
<blockquote>&lt;div class=&quot;box&quot;&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ここの文章がセンタリングされます。<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ここの文章がセンタリングされます。&lt;br /&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ここの文章がセンタリングされます。<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ここの文章がセンタリングされます。&lt;br /&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ここの文章がセンタリングされます。&lt;br /&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ここの文章がセンタリングされます。<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br>
&lt;/div&gt;<br>
</blockquote>
<br>

<strong>表示</strong>
<style>	
div.box{
	height:100px;
	background:#fff4f4;
}

div.box div{
display:table-cell;
margin-bottom:1px;
vertical-align:middle;
width:150px;
}

* html div.box div{/* IE 6 */
display:inline;
zoom:1;
}

*:first-child+html div.box div{/* IE 7 */
display:inline;
zoom:1;
}


</style>

<div class="box">
    <div>
        ここの文章がセンタリングされます。
    </div>
    <div>
        ここの文章がセンタリングされます。<br />
        ここの文章がセンタリングされます。
    </div>
    <div>
        ここの文章がセンタリングされます。<br />
        ここの文章がセンタリングされます。<br />
        ここの文章がセンタリングされます。
    </div>
</div>
]]>
   </content>
</entry>
<entry>
   <title>特定のカテゴリだけ非表示にする/表示する</title>
   <link rel="alternate" type="text/html" href="http://tani.dank-hearts.com/2008/03/post_11.html" />
   <id>tag:tani.dank-hearts.com,2008://6.264</id>
   
   <published>2008-03-26T12:39:03Z</published>
   <updated>2008-03-26T12:41:48Z</updated>
   
   <summary>サイドバーにカテゴリ一覧を出したときに特定のカテゴリだけ表示したくないときに使う...</summary>
   <author>
      <name>谷 春樹</name>
      
   </author>
         <category term="MovableTypeプラグイン編" scheme="http://www.sixapart.com/ns/types#category" />
   
   
   <content type="html" xml:lang="ja" xml:base="http://tani.dank-hearts.com/">
      サイドバーにカテゴリ一覧を出したときに特定のカテゴリだけ表示したくないときに使うプラグインです。
また、逆に特定のカテゴリだけ表示することもできます。
まずは下記サイトからプラグインをダウンロードしてください。
      <![CDATA[<h3>ダウンロードはこちらから</h3>
<br>
<a href="http://www.staggernation.com/mtplugins/FilterCategories/">FilterCategories | staggernation.com</a>」


<h3>使用方法</h3>
ダウンロードしたFilterCategoriesをMT内のpluginsフォルダにアップロードします。
特定のカテゴリーを表示させない場合は<strong>&lt;MTFilterCategories exclude=&quot;カテゴリー名&quot;&gt;</strong>と記述します。
複数のカテゴリーを表示させたくない場合は<strong>&lt;MTFilterCategories exclude=&quot;カテゴリー名 | カテゴリー名&quot;&gt;</strong>のように記述します。

<blockquote>&lt;ul&gt;<br>
	&nbsp;&nbsp;&nbsp;&nbsp;&lt;MTCategories&gt;<BR>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;MTFilterCategories   exclude="category1 | category2"&gt;<BR>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a   href="&lt;$MTCategoryArchiveLink$&gt;"&gt;<br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;MTCategoryLabel&gt;&lt;/a&gt;&lt;/li&gt;<BR>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/MTFilterCategories&gt;<BR>
    &nbsp;&nbsp;&nbsp;&nbsp;&lt;/MTCategories&gt;<br>
&lt;ul&gt;</blockquote>


特定のカテゴリーを表示させる場合は<strong>&lt;MTFilterCategories include=&quot;カテゴリー名&quot;&gt;</strong>のように記述します。

<blockquote>&lt;ul&gt;<br>
	&nbsp;&nbsp;&nbsp;&nbsp;&lt;MTCategories&gt;<BR>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;MTFilterCategories   exclude="category1 | category2"&gt;<BR>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a   href="&lt;$MTCategoryArchiveLink$&gt;"&gt;<br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;MTCategoryLabel&gt;&lt;/a&gt;&lt;/li&gt;<BR>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/MTFilterCategories&gt;<BR>
    &nbsp;&nbsp;&nbsp;&nbsp;&lt;/MTCategories&gt;<br>
&lt;ul&gt;</blockquote>
]]>
   </content>
</entry>
<entry>
   <title>エントリー内でＭＴタグを使う</title>
   <link rel="alternate" type="text/html" href="http://tani.dank-hearts.com/2008/03/post_10.html" />
   <id>tag:tani.dank-hearts.com,2008://6.263</id>
   
   <published>2008-03-26T11:46:50Z</published>
   <updated>2008-03-26T12:03:53Z</updated>
   
   <summary>ＭＴタグはテンプレートでしか使用できませんが、この「MTEvalTemplate...</summary>
   <author>
      <name>谷 春樹</name>
      
   </author>
         <category term="MovableTypeプラグイン編" scheme="http://www.sixapart.com/ns/types#category" />
   
   
   <content type="html" xml:lang="ja" xml:base="http://tani.dank-hearts.com/">
      ＭＴタグはテンプレートでしか使用できませんが、この「MTEvalTemplate」というプラグインを使えばエントリーの中でもＭＴタグが使えます。

      <![CDATA[使い方は簡単！
プラグインをアップロードして、テンプレートの記述を一部変更するだけです。


<h3>ダウンロードはこちらから</h3>
<a href="http://xeres.s55.xrea.com/2005/08/14/010500">Life on the Kernel(EvalTemplateページ)</a>
↑上記のサイトの「MT::Plugin::EvalTemplate」から表示されるテキストをeval-template.pl等の名前で保存します。
面倒くさいと思われる方のためにダウンロード用のファイルを用意したのでご利用ください～。
「<a href="http://tani.dank-hearts.com/download/MTEvalTemplate.pl">MTEvalTemplate.pl</a>」


<h3>使用方法</h3>
ダウンロードしたMTEvalTemplate.plをMT内のpluginsフォルダにアップロードします。
次にカテゴリー・アーカイブやエントリー・アーカイブなどの&lt;$MTEntryBody$&gt;、&lt;$MTEntryMore$&gt;の記述を変更します。
<blockquote>&lt;$MTEntryBody$&gt;
↓
&lt;$MTEntryBody eval="1"$&gt;
</blockquote>

<blockquote>
&lt;$MTEntryMore$&gt;<br>
↓<br>
&lt;$MTEntryMore eval="1"$&gt;
</blockquote>

これだけでＯＫです。
]]>
   </content>
</entry>
<entry>
   <title>auでJPG画像が表示されないときの対処法</title>
   <link rel="alternate" type="text/html" href="http://tani.dank-hearts.com/2008/03/aujpg.html" />
   <id>tag:tani.dank-hearts.com,2008://6.261</id>
   
   <published>2008-03-11T06:07:24Z</published>
   <updated>2008-03-11T06:30:23Z</updated>
   
   <summary>最近になって、モバイルサイトを作って公開すると、ＡＵだけJPG画像がうまく表示さ...</summary>
   <author>
      <name>谷 春樹</name>
      
   </author>
         <category term="mobile" scheme="http://www.sixapart.com/ns/types#category" />
   
   
   <content type="html" xml:lang="ja" xml:base="http://tani.dank-hearts.com/">
      最近になって、モバイルサイトを作って公開すると、ＡＵだけJPG画像がうまく表示されないときがありました。
基本的にＪＰＧは全キャリア対応ですし、サイズもさほど大きくない画像なので「おかしいおかしい」とずっと考えててやっと解決。
      <![CDATA[どうやらＡＵは<strong>「プログレッシブJPEG」を表示できない</strong>らしく、そこでひっかかってたようです。。。

<blockquote>
<strong>■プログレッシブJPEGとは</strong><br/>
「プログレッシブJPEG」とはインターネットなどでよく利用される画像ファイル形式であるJPEG形式の拡張仕様の一つ。通常のJPEG画像はユーザのコンピュータにダウンロードされるに従って、上からだんだん画像が表示されるが、プログレッシブJPEG方式の画像では、最初はぼんやりした画像が現れ、ダウンロードが進むと次第に画像が鮮明になってくる。このため、ダウンロードの途中でも画像のおおよそのイメージがわかる。GIF形式にも似たような拡張仕様があり、こちらはインターレースGIFと呼ばれる。
</blockquote>

<a href="http://e-words.jp/w/E38397E383ADE382B0E383ACE38383E382B7E38396JPEG.html" target="_blank">引用元：IT用語辞典</a>

とのこと。
今使っているソフトはPhotoshopCS3ですが、こちらのソフトはもともとチェックがはいっているようで、ＡＵで表示されないという事態になっていました。

<img alt="entry.jpg" src="http://tani.dank-hearts.com/image/mobile/entry.jpg" width="234" height="176" class="img-left" />書き出す際に
←このチェックをはずして書き出せばＯＫ

昔こんな現象がなかったのは、書き出すソフトが違ったりPhotoshopのバージョンが古かったりしたせいのようです。]]>
   </content>
</entry>
<entry>
   <title>オススメツール</title>
   <link rel="alternate" type="text/html" href="http://tani.dank-hearts.com/2008/03/post_9.html" />
   <id>tag:tani.dank-hearts.com,2008://6.260</id>
   
   <published>2008-03-08T12:48:57Z</published>
   <updated>2008-03-08T12:49:37Z</updated>
   
   <summary>私がいつも使っているお勧めツールをご紹介！...</summary>
   <author>
      <name>谷 春樹</name>
      
   </author>
         <category term="便利サイト" scheme="http://www.sixapart.com/ns/types#category" />
   
   
   <content type="html" xml:lang="ja" xml:base="http://tani.dank-hearts.com/">
      私がいつも使っているお勧めツールをご紹介！
      <![CDATA[<h3>Winshot</h3>
<a href="http://www.woodybells.com/winshot.html" target="_blank">Downloadサイトへ</a>

パソコン画面の保存・印刷等を行うことができる、スクリーンキャプチャソフト。
通常のスクリーンキャプチャと異なりドラッグでキャプチャ範囲を指定できる機能が非常に便利！
一発で欲しい範囲をキャプチャできるので、わざわざ画像加工ソフトを立ち上げる必要がなくなりました。

<h3>Capwrite</h3>
<a href="http://www.vector.co.jp/vpack/browse/pickup/pw4/pw004720.html" target="_blank">Downloadサイトへ</a>

キーボードについているプリントスクリーンボタンでは今見ている範囲しかキャプチャできませんが、このツールを使えば
縦長のページも一発でキャプチャできます。

<h3>縮小専用。</h3>
<a href="http://i-section.net/software/shukusen/" target="_blank">Downloadサイトへ</a>

その名のとおり縮小専用ソフトです。
ドラッグ＆ドロップで簡単に縮小できる上、自動的に補正をかけてくれます。

<h3>DrePos</h3>
<a href="http://hp.vector.co.jp/authors/VA014993/" target="_blank">Downloadサイトへ</a>

あらかじめ入力しておいた定型文をクリックひとつでポンポンと入力できるツール。
名前や住所などを何回も入力するような内容をあらかじめ登録しておくとかなり便利。

<h3>CLCL</h3>
<a href="http://www.nakka.com/soft/clcl/" target="_blank">Downloadサイトへ</a>

クリップボード拡張ツール。
何十件もコピーして履歴に残しておけます。
もちろんコピーしたものは履歴から簡単に貼り付けできます。

<h3>WebSiteExplorer</h3>
<a href="http://www.nakka.com/soft/clcl/" target="_blank">Downloadサイトへ</a>

Webサイトのファイルを丸ごと保存できるぶっこぬきツール。
簡単にサイトマップを作れたり、まるごと保存してネットがない環境でもサイトを見れるようになるのがメリット。

<h3>Sleipnir</h3>
<a href="http://www.nakka.com/soft/clcl/" target="_blank">Downloadサイトへ</a>

超有名タブ型ブラウザ。
プラグインが豊富で、上記ツールのいくつかもプラグインでまかなえます。
]]>
   </content>
</entry>
<entry>
   <title>JavascriptでHTMLをインクルードする方法</title>
   <link rel="alternate" type="text/html" href="http://tani.dank-hearts.com/2008/03/javascripthtml.html" />
   <id>tag:tani.dank-hearts.com,2008://6.259</id>
   
   <published>2008-03-08T11:43:57Z</published>
   <updated>2009-02-04T12:24:04Z</updated>
   
   <summary>一度制作したWebサイトの更新のしやすさを向上するために、プログラムのインクルー...</summary>
   <author>
      <name>谷 春樹</name>
      
   </author>
         <category term="Javascript" scheme="http://www.sixapart.com/ns/types#category" />
   
   
   <content type="html" xml:lang="ja" xml:base="http://tani.dank-hearts.com/">
      <![CDATA[一度制作したWebサイトの更新のしやすさを向上するために、プログラムのインクルードを利用して「サイドメニュー」や「ヘッダー」をテンプレート分けしている人も多いと思います。

簡単にHTMLをインクルードする方法として、phpが利用できるサーバーであれば<strong>&lt;?php include(&quot;ファイル名&quot;); ?&gt;</strong>と記述したり、SSIが利用できるのであれば<strong>&lt;!--#include file="header.html" --&gt;  </strong>と記述する方法があります。

今回、phpもSSIも利用できないサーバーでサイトのパーツをテンプレート化できたらなぁ・・といろいろ探していたらついに発見！
Javascriptを利用してHTMLのインクルードを実現している方法があったのでご紹介。]]>
      <![CDATA[参考サイトは「<a href="http://icant.co.uk/sandbox/ajax-code-display/" target="_blank">Displaying source code with Ajax</a>」
上記のサイトで配布している、Ajaxフレームワークの「jquery-1.2.2.pack.js」と「ajaxcodedisplay.js」を利用すれば簡単な記述でHTMLをインクルードできます。

ただ、上記で配布されているjsだとHTMLをインクルードした際にHTMLタグがエンコードされてしまい、「&lt;br /&gt;」が「&amp;lt;br /&amp;gt;」のようにエンコードされて表示されてしまうので、使いやすいように修正しました。

<h3>ダウンロードはこちらから</h3>
<ul style="margin:10px 0 0 10px;">
	<li><a href="http://tani.dank-hearts.com/download/jquery-1.2.2.pack.js">jquery-1.2.2.pack.js</a></li>
    <li><a href="http://tani.dank-hearts.com/download/ajaxcodedisplay-or.js">ajaxcodedisplay-or.js</a></li>
</ul>


<h3>記述方法</h3>
使用するために、まず「jquery-1.2.2.pack.js」と「ajaxcodedisplay-or.js」を読み込みます。
<blockquote>&lt;script  type=&quot;text/javascript&quot;　src=&quot;jquery-1.2.2.pack.js&quot;&gt;&lt;/script&gt;<br>
&lt;script type=&quot;text/javascript&quot;　 src=&quot;ajaxcodedisplay-or.js&quot;&gt;&lt;/script&gt;</blockquote>

あとは簡単！a要素のclass指定で"codeexample"を指定すれば、リンク対象のファイルがインクルードされます。
<blockquote>&lt;a href=&quot;sample.html&quot; class=&quot;codeexample&quot;&gt;&lt;/a&gt;</blockquote>

これだけで簡単にHTMLをインクルードできます。
仕組みは、javascriptでiframeを記述して、その中に対象ファイルを読み込んで・・・みたいになってますが、正直よくわかりません（汗
    
また、「ajaxcodedisplay.js」ファイルを利用すると「class=&quot;codeexample lines[1,5,9-14,18-19]&quot;」のように記述すれば特定の行を指定してインクルードもできるようです。 ]]>
   </content>
</entry>
<entry>
   <title>hrで1pxの線を引く</title>
   <link rel="alternate" type="text/html" href="http://tani.dank-hearts.com/2008/02/hr1px.html" />
   <id>tag:tani.dank-hearts.com,2008://6.252</id>
   
   <published>2008-02-09T07:04:35Z</published>
   <updated>2008-03-07T08:41:35Z</updated>
   
   <summary> 1pxの線を引く方法はいろいろありますが、今回はCSSでスタイル指定したhrを...</summary>
   <author>
      <name>谷 春樹</name>
      
   </author>
         <category term="CSS" scheme="http://www.sixapart.com/ns/types#category" />
   
   
   <content type="html" xml:lang="ja" xml:base="http://tani.dank-hearts.com/">
      1pxの線を引く方法はいろいろありますが、今回はCSSでスタイル指定したhrを利用してみます。
毎回テンプレートとしてCSSにいれておくと便利かも？
      <![CDATA[<strong>「border-top:1px dotted #ff3333;」</strong>などといった感じに線を引くこともできますが、Firefoxなどではうまく表示されないので<strong>「border-width:1px 0px 0px 0px;」</strong>を使用します。

<h3>CSS</h3>
<blockquote>
hr {
    border:dotted #ff3333;
    border-width:1px 0px 0px 0px;
    height:1px;
    overflow:hidden;
    margin:7px 0;
    clear:both;
    }
</blockquote>



<h3>表示</h3>
↓こんな感じになります。
<hr style="border:dotted #ff3333;border-width:1px 0px 0px 0px;height:1px;overflow:hidden;margin:7px 0;clear:both;" />]]>
   </content>
</entry>

</feed>

