Movable Type 備忘録

 

 Movable Type 4.1 用テンプレート（FLORAL）

こんにちわ^^

先日 JavaScript を使わずにツールチップを実装する方法がphpspot開発日誌さんとこでご紹介されてました。

内容見るととってもシンプル (●´∀｀●)♪

使い方は以下の通りです。

サンプル： <a href="#" class="tooltip">ツールチップ<span>カンタンに&lt;a&gt;タグにツールチップが実装できた。</span></a>

赤字の部分がツールチップとして表示されるテキストになります。CSS は以下の通りです。

a:hover {
    background:#fff;       /*  なくてもいい*/
    text-decoration:none;  /*  不要なら削除*/
}
a.tooltip span {
    display:none;          /*  通常時はツールチップを非表示にしてますね*/
    padding:2px 3px;       /*  ツールチップの余白*/
    margin-left:8px;       /*  ツールチップの表示位置*/
    width:130px;           /*  ツールチップの幅（高さは可変）*/
}
a.tooltip:hover span {     /*これがツールチップ（<span>～</span>）のスタイルになります*/
    z-index:10;            /*  重なり順序のプライオリティを上げてみました*/
    display:inline;        /*  これがポイントでしょうか*/
    position:absolute;     /*  ツールチップの表示位置を任意設定するために必須*/
    border:1px solid #ccc;
    background:#fff;
    color:#6c6c6c;
}

アンカー以外ではどうか･･･。

  • サンプル：

    ツールチップ<p>タグでも問題なし!! ただしモダンプラウザのみ。

こちらも問題なさそうですね。使い方は <a> タグを <p> タグに変更してそれに伴って CSS を以下のように変更しただけです。

p {
    display:inline;
    background:#59b9c6;
    border:1px solid #089;
    text-decoration:none;
    cursor:pointer;
}
p:hover {
    background:#698aab;
    text-decoration:none;
    cursor:pointer;
}
p.tooltip span {
    display:none;
    padding:2px 3px;
    margin-left:8px;
    width:130px;
}
p.tooltip:hover span{
    z-index:10;
    display:inline;
    position:absolute;
    border:1px solid #ccc;
    background:#fff;
    color:#6c6c6c;
}

ただし、上記 <p> タグのような使い方は IE6.x では使えませんのであしからず（；￣－￣）

さて、予告通り白系のテンプレートを作ってみましたのでご紹介します。
作ったといっても、つい最近までわたしのサイトで使ってたものを配布用にアレンジしたのと、チョビッとだけデザインを変更した程度ですの。

このテンプレートの表示確認してて始めて気づいたのですが、コメント投稿時の投稿者情報を Cookie に保存する機能が使えてませんでした。
てか、他サイトさんとこでもあまり使ってない機能だったのですっかり忘れてたわけですが、どうもデフォルトの mt.js 内のコードに問題ありな気がするのココロ。

とりあえず、改善したものを添付しております。

テンプレートについて

  • テンプレートセットについて
    こちらで配布しますテンプレートセットには、先日ご紹介しましたMovable Type 4.1 用テンプレート（CINE）のテンプレートも同梱されています。
    てか、どちらのテンプレートセットをダウンロードしても同じファイルです。1 つのテンプレートセットでいずれかのテーマを選択できるようにしてます。

  • メールフォーム用のテンプレートについて
    MailForm プラグイン用のテンプレートを同梱してます。 ここでは詳しくは説明しませんが、以下のページを参考にして頂けたらと思います。

  • サイトタイトルのイメージについて
    サイトタイトルにイメージファイルを使用しています。
    デフォルトでは通常のテキスト表示になってますが、mt_memo/css/floral/bloglogo.png を加工して mt_memo/css/flora/theme.php 内の 46 行目のコメントを参考にして頂ければイメージタイトルを適用することができます。
    わたし的にはイメージファイルを使ったほうが見た目よろしいかと (●´∀｀●)

    また、からサイト名称をご連絡いただければ作成しいたします。

テンプレート設置について

テンプレートの設置は、基本的にはMovable Type 4.1 用テンプレート（CINE）と同じです。
以下の手順で設置できます。

  1. テンプレートセットのインストール
    以下の圧縮ファイルをダウンロードして適当なフォルダに展開します。

    圧縮ファイル中の mt/plugins/ フォルダの中を見ると、いくつかのプラグインを同梱しています。
    それらはテンプレートで使用しているプラグインたちです。

    既に同一のプラグインをインストール済みの場合にはご注意ください。
    現象としては、重複してプラグインを mt/plugins/ フォルダの中にアップロードすると、Movable Type の管理画面でスクリプトエラーのような類のメッセージ表示がされます。
    アップロードしただけでは、何もされませんので落ち着いてアップロードしたプラグインを削除して、改めて重複するプラグインがないか確認してください。

    また、PageBute プラグインに関してはこちらのPageBute プラグインをカスタマイズとPageBute プラグインをカスタマイズ２でご紹介したカスタマイズを施してます。
    カスタマイズ２の方が問題で、MT のデフォルトタグ名称とブッキングしているので PageBute プラグインのタグ名称を変更したものが同梱されてます。 ですので、他のテンプレートで既に PageBute プラグインを使用している場合、どちらかに合わせる必要があります。

    ウェブページ内でページの前・次リンクを使用しないのであれば、タグ名称がブッキングしてても特に影響はないかと思われます。
    オリジナルの PageBute を使用する場合には、同梱してます PageBute プラグインの変更、およびそれに伴ったテンプレートの修正を以下の手順で行ってください。

    1. 同梱してる PageBute プラグイン変更
      こちらのPageBute プラグインをカスタマイズ２でご紹介したカスタマイズ（タグ名称）を元に戻します。

    2. テンプレートの修正
      PageBute プラグイン変更に伴って以下のテンプレートを変更します。

      • mt/plugins/mt_memo/templates/modules/container.mtml
      • mt/plugins/mt_memo/templates/modules/container_floral.mtml

      上記ファイル内を PageBute というキーワードで検索すると、それぞれ 12 件ずつ修正箇所が見つかります。
      PageBute を Page に変更することでオリジナルのタグ名称となります。

    一通り問題なければ、圧縮ファイル中の mt/ フォルダの中を丸ごと（重複プラグインは除く）各自の Movable Type のインストール先にアップロードしてください。

  2. テンプレートセットの適用
    テンプレートセットのインストールが済んだら以下のページを参考にして、テンプレートセットを適用します。

    その際、テンプレートセットの選択には『Movable Type MEMO / floral 1.06』を選択します。
    手順に沿ってテンプレートを適用したら、ブログ全体を再構築します。

  3. イメージファイル／JavaScript のアップロード
    最後にイメージファイル、JavaScript をアップロードします。
    圧縮ファイル中の mt_memo/ フォルダを丸ごとトップページ( index.php )と同じ場所にアップロードします。たとえば、わたしのサイトで例えると、以下のようなディレクトリ構成になります。

    http://bizcaz.com/
  |
  +-- mt_memo/
  |    +-- css/
  |    |    +-- floral/
  |    |    |    +-- ajax-loader.gif
  |    |    |        ：
  |    |    |        ：
  |    |    |
  |    |    +-- base.php
  |    |    +-- styles.php
  |    |
  |    +-- js/
  |         +-- dtree/
  |         |    +-- dtree.js
  |         |        ：
  |         |        ：
  |         |
  |         +-- prototype/
  |         |    +-- prototype.js
  |         |        ：
  |         |        ：
  |         |
  |         +-- mt.js
  |
  +-- index.php

  4. 表示確認
    正しくテンプレートが適用されたか、ブラウザから表示確認します。 主なポイントを以下に記します。

    • イメージファイルなどのリンク切れがないこと。
    • ブログ内検索が正しく行えること。
    • タグ検索が正しく行えること。

    上記何れかに問題があった場合、イメージファイル／JavaScript のアップロード先が間違ってることが考えられます。
    上記ディレクトリ構成を参考にして再度確認してください。

以上で設置は完了です。
お疲れ様でしたぁ (●＞∀＜●)／

各テンプレートの出力ファイル名

テンプレートセットを適用して再構築すると、各テンプレートは以下のようなファイル名として作成されます。

インデックステンプレート

  • インデックス(メイン):index.php
    わたしのサイトを例にすると http://bizcaz.com/index.php となります。

  • インデックス(アーカイブ): archives/index.php
    わたしのサイトを例にすると http://bizcaz.com/archives/index.php となります。

  • インデックス(タグクラウド): archives/tagcloud/index.php
    わたしのサイトを例にすると http://bizcaz.com/archives/tagcloud/index.php となります。

アーカイブテンプレート

  • アーカイブページ（月別）: %y/%m/%i
    わたしのサイトを例にすると http://bizcaz.com/archives/2008/03/index.php となります。

  • アーカイブページ（年別）: %y/%i
    わたしのサイトを例にすると http://bizcaz.com/archives/2008/index.php となります。

  • ウェブページ: %-c/%-f（MT4.1 デフォルトフォーマット）
    ウェブページの場合はあらかじめフォルダを作成して、その指定フォルダに任意のページ名称で作成されるます。

    たとえば、わたしのサイトを例にするとMovable Type 4 で使用できるプラグインはウェブページで作成してします。
    MT の管理画面から『一覧』＞『フォルダ』を選択して、あらかじめウェブページ用のフォルダを作成しておくと、ウェブページ作成時にそのフォルダを指定してあげることでお好きな場所（ディレクトリ）にウェブページを作成されます。以下の図はわたしのサイトで作成したフォルダ一覧になります。

  • カテゴリページ: %-c/%i
    カテゴリページに関しては MT のデフォルトフォーマットをそのままテンプレートセットプラグイン内にも記述してます。
    わたしのサイトを例にすると http://bizcaz.com/archives/movabletype/template/ となります。

  • ブログページ: %y/%m/%d-%h%n%s%x
    年/月/日-時分秒 というファイル名称＋『ブログの設定』＞『公開』で設定された『アーカイブの拡張子』でファイルが作成されます。
    このエントリを例にすると http://bizcaz.com/archives/2008/03/23-165033.php となります。

上記はあくまでもわたしのサイトで使ってるものをそのままテンプレートセットにしているものです。
再構築で出力されるファイル名は、必要であれば各自で任意に変更してください。

また、これは『Pandora Template Set』適用前から既にブログを公開していた人にとっては重要なことです。
出力ファイル名が以前と異なっていた場合、そのページの URL が変更されてしまいますのでご注意ください。

不具合のご連絡

- 2008.04.27 - ver1.06

コメントフォーム内のイメージ位置がズレていた不具合を修正しました。これによりキレイに表示されるようになりました (●´∀｀●)

- 2008.04.27 - ver1.05

コメント用フィードを追加しました。

- 2008.04.21 - ver1.04

IE6.x において月別（年別）アーカイブのレイアウトが崩れる不具合を対応しました。

- 2008.04.07 - ver1.02

IE6.x の後方互換モードに対応したことでブロック要素のサイズにズレが生じたため、コメントフォーム、メールフォームのイメージのイメージがズレて表示されてしまう不具合を対応しました。
その他、スタイルシートの細かなところの微調整を行ってます。

- 2008.04.05 - ver1.01

Another HTML-lint gateway で 100 点取れるよう修正しました。 それに伴って IE6.x において後方互換モードで表示されるようになり、ブログの PHP 化を行わない人は一箇所修正する必要があります。
詳しくはこちらの正しいマークアップ（Another HTML-lint gateway）を参照してください。

- 2008.03.30 - ver1.00

配布開始しました。

  • Edit
  • Permalink
  • Comments(15)
  • Trackbacks(1)

 Trackback Pings(1)

from TomomiX日記･Windows&Mac関連フリーソフト･オススメソフト紹介ブログ「TRASH」

今回は、実装も簡単で面白い小技を紹介したいと思います。...

Tracked on April 9, 2008

 Comments(15)

#1: Posted by TomomiX [RES]

こんばんわ。
ツールチップの簡単な実装方法、勉強になりました。
恐縮ですが、自分も記事としてあげ、TBさせていただきました。

本当に感謝ですうぅ～ん

Posted on April 9, 2008
#2: Posted by bzbell Author Profile Page [RES]

>>1 TomomiX さん

こんばんわ^^

ちょっとした補足説明などに使えそうですよね キャハハ
トラックバックありがとうございます。
でもね、何だか文字化けしてたので、手動でタイトル名など書き直しちゃいましたあせあせ

Posted on April 9, 2008
#3: Posted by yuruka.openid.ne.jp Author Profile Page [RES]

こんにちは～またまたお久しぶりです。
今FLORALをお借りして、EvalTemplateプラグインを入れたところ、適応したら表示が崩れてしまったんですが・・・（ブログ記事部分を外すと普通に表示されるので、このプラグインのせいですよね？）ウェブページにだけ適応してるんですけど、見事にぐちゃぐちゃになっちゃってますあせあせ

bzbellさんのところではそんなこと無かったですか？

Posted on May 3, 2008
#4: Posted by bzbell [RES]

>>3 yuruka.openid.ne.jp さん

こんにちわ^^

> bzbellさんのところではそんなこと無かったですか？
レイアウトが崩れるってのはないですが、コメントフォームのイメージがずれてるみたいですねあせあせショック

いつからだろガーン

> ウェブページにだけ適応してるんですけど、見事にぐちゃぐちゃになっちゃってます

たとえば、yuruka.openid.ne.jp さんとこのページでいうとどれになりますかやあ！
今確認したところページ崩れはないようですよ。

ちなみにわたしのサイトのウェブページは以下のページで使用してます。

Posted on May 3, 2008
#5: Posted by bzbell Author Profile Page [RES]

>>3 yuruka.openid.ne.jp さん

コメントフォーム内のイメージ位置を修正しました。

お手数ですが、最新の圧縮ファイルをダウンロードしてください。
そして、スタイルシート(テーマ)だけを更新してください。
そうすれば改善されますのでウインク

Posted on May 3, 2008
#6: Posted by yuruka.openid.ne.jp Author Profile Page [RES]

こんばんは＾＾
ページ崩れ、ないですか？？
スクリーンショットアップしてみました↓
http://www.caramele.net/sshot-1.png
サイドバーが重なっちゃってるんですよねぇ・・・あたしの環境でしょうかねあせあせ
今IEで確認したら、ちゃんと表示されてるみたいです・・・不思議～
普段はFirefoxです。

あ、スタイルシート更新しておきますね＾＾
ありがとうございますべ～

Posted on May 3, 2008
#7: Posted by bzbell Author Profile Page [RES]

>>6 yuruka.openid.ne.jp さん

> スクリーンショットアップしてみました

見事に崩れてますねあせあせ
気になるとこが一つあります。

サイドバーのツリー表示のトップツリーにはサイト名を表示するようにしてるのですが、yuruka.openid.ne.jp さんのとこはサイト名が長いので改善した方がいいかもですね。
モダンブラウザは問題ないのですが、IE6.x だとサイドバーが段落ちしてしまいます。

具体的には「JavaScript(dtree.posts.js)」インデックステンプレート内の以下の行を以下のように変更します。 

59 行目 に追加
dtree_blogname = 'カテゴリ';

95 行目に追加
dtree_blogname = 'フォルダ';

59 行目はカテゴリツリー表示用で、95 行目はフォルダツリー用になります。
7 行目に記述してます dtree_blogname を以下のように変更してもいいかもですぺこり 

7 行目 を変更
var dtree_blogname = 'Caramele*';

で、本題ですが、スクリーンショットの崩れ方を見る限り、タグが正しく閉じられてない場合にそのような崩れ方したります。
Firefox、Safari、Opera、IE（IE6.x 除く）で確認したところ、今はスクリーンショットのような崩れ方はしてないようですガーン

同様の現象がまた発生したらご連絡頂けますか。
そしたらわたしの方で確認しますのでうぅ～ん

ps
リンクページに貼り付けてるバナーですが、以下のようにすると外部リンクのアイコンが表示されなくなります。 

<p class="mt-enclosure-image"><a href="http://artist.advance21.net/hobby/rank.cgi?mode=r_link&amp;id=2070" target="_blank"><img width="88" height="31" src="http://www.caramele.net/archives/image/artist.gif" alt="" /></a></p>

<p> タグに mt-enclosure-image クラスを付けてます。
外部リンクのアイコンは、#alpha ブロック内の外部リンクに限りアイコン表示していますので、バナーなどのように外部リンクアイコンを表示したくない場合には上記のようにするといいですよワクワク

ご参考までにもじもじ

Posted on May 4, 2008
#8: Posted by yuruka.openid.ne.jp Author Profile Page [RES]

いろいろありがとうございますブイブイ
ツリー表示とバナーは変更しました。

なんだか、見るときによって崩れるんですよね～あせあせ
更新しただけで直ったりするし。
追加したのはeval="1"だけなんですけどね・・・のほほん

ちょっとテンプレートとか確認してみますんっ！？

Posted on May 4, 2008
#9: Posted by bzbell [RES]

>>8 yuruka.openid.ne.jp さん

コードを見る限り問題なさそうですけどねぇふつう
崩れたときのコードを確認した方がいいかもですね。

EvalTemplate はわたしも使ってますが、そのような現象は今のところ確認したことないです。
何か分かりましたらご連絡しますねワクワク

Posted on May 4, 2008
#10: Posted by yuruka.openid.ne.jp Author Profile Page [RES]

こんばんは～＾＾

デザイン崩れの件ですが、相変わらずたま～にありますが、プラグインを適用してないページもなるみたいです（笑）
原因はわかりませんが、更新すると直るので・・・今度別のパソコンから見てみることにしますねあせあせ

ところで、このテンプレートですが、サイドバーを無くしたり（トップページだけ）とかは出来ないんですかね？
Pandoraがいつの間にかダウンロードできなくなっていたのでこっちを使わせていただいてるんですが、CMSとして使いたいので・・・難しいですかねぇのほほん

Posted on May 6, 2008
#11: Posted by bzbell Author Profile Page [RES]

>>10 yuruka.openid.ne.jp さん

こんにちわ^^

yuruka.openid.ne.jp さんとこのソースを確認させてもらいました。
<div class="topics"> ブロック内で dl タグなしで dt、dd タグ使用されてます。それが原因かどうか分かりませんが、正しくマークアップされないとレイアウトが崩れる要因になりますパチパチ

ご確認くださいもじもじ

Posted on May 7, 2008
#12: Posted by yuruka.openid.ne.jp Author Profile Page [RES]

ご指摘ありがとうございます＾＾
タグ、なかなか難しいですね・・・
には@Recent Entries Listをそのまま読み込んでいたので、それっぽい位置にを追加してみましたやあ！

Posted on May 7, 2008
#13: Posted by bzbell Author Profile Page [RES]

>>12 yuruka.openid.ne.jp さん

> ご指摘ありがとうございます＾＾

どぉいたしましてパチパチ
徐々に慣れていけばいいと思いますテレテレ

あと、フリースタイルの件ですが、お時間頂けるのでしたら、yuruka.openid.ne.jp さん用としてお作りします。
ですが、必要な分だけお作りしますのでご連絡頂ければと思います。

今は Pandra は配布をやめてますのグウグウ
自由度を広げることで、サイドバーが段落ちするなど各自で変更した内容までサポートしきれなかったのであせあせ
どんな使われ方されてもレイアウトが崩れないように作るスキルがわたしにあればよかったと思うのですが、わたしにはとてもとてもガーン
なので、デザインを固定したテンプレートのみ配布することにしたんです。

ステキなサイトができるよう、できる限りご協力しますうるうる

Posted on May 8, 2008
#14: Posted by yuruka.openid.ne.jp Author Profile Page [RES]

こんにちは。
どうしてもMTタグが難しくて（組み合わせとか）思ったとおりの表示にならないんですよねあせあせ

＞あと、フリースタイルの件ですが、お時間頂けるのでしたら、yuruka.openid.ne.jp さん用としてお作りします。
ですが、必要な分だけお作りしますのでご連絡頂ければと思います。

なんだか、そこまでしていただくのも申し訳ないですのほほん
トップページだけを別表示？（というんでしょうか？）にしたいんですよね。
こんな感じ、というのはあるんですが、URLをここで書いてしまっていいか分からないので、メールでご連絡させてくださいんっ！？
というか、1カラムに対応していただければ充分です:～kuroron/t2_kyaha.gif:

お時間があるときにでも・・・お願いしてもいいですか？

Posted on May 8, 2008
#15: Posted by bzbell Author Profile Page [RES]

>>14 yuruka.openid.ne.jp さん

こんにちわ^^

> どうしてもMTタグが難しくて（組み合わせとか）思ったとおりの表示にならないんですよね
そうですね、慣れないとムズかしいですよね。

ついでといってはなんですが、わたし MT ユーザの為の初心者フォーラムってのを立ち上げたんです。
http://bzbell.com/forum/
そちらで yuruka.openid.ne.jp さんのやりたいことなど質問していただければと思います。

> 1カラムに対応していただければ充分です

はい。1 カラムはわたしも必要かなって思ってたとこなので丁度いいですうぅ～ん

Posted on May 8, 2008

 Post a Comment

コメント用フィード