Movable Type 備忘録
Movable Type 4.1 用テンプレート(FLORAL)
- Next Page: 正しいマークアップ(Another HTML-lint gateway)
- Prev Page: Movable Type 4.1 用テンプレート(CINE)
こんにちわ^^
先日 JavaScript を使わずにツールチップを実装する方法がphpspot開発日誌さんとこでご紹介されてました。
内容見るととってもシンプル (●´∀`●)♪
使い方は以下の通りです。
サンプル: <a href="#" class="tooltip">ツールチップ<span>カンタンに<a>タグにツールチップが実装できた。</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)と同じです。
以下の手順で設置できます。
テンプレートセットのインストール
以下の圧縮ファイルをダウンロードして適当なフォルダに展開します。圧縮ファイル中の mt/plugins/ フォルダの中を見ると、いくつかのプラグインを同梱しています。
それらはテンプレートで使用しているプラグインたちです。既に同一のプラグインをインストール済みの場合にはご注意ください。
現象としては、重複してプラグインを mt/plugins/ フォルダの中にアップロードすると、Movable Type の管理画面でスクリプトエラーのような類のメッセージ表示がされます。
アップロードしただけでは、何もされませんので落ち着いてアップロードしたプラグインを削除して、改めて重複するプラグインがないか確認してください。また、PageBute プラグインに関してはこちらのPageBute プラグインをカスタマイズとPageBute プラグインをカスタマイズ2でご紹介したカスタマイズを施してます。
カスタマイズ2の方が問題で、MT のデフォルトタグ名称とブッキングしているので PageBute プラグインのタグ名称を変更したものが同梱されてます。 ですので、他のテンプレートで既に PageBute プラグインを使用している場合、どちらかに合わせる必要があります。ウェブページ内でページの前・次リンクを使用しないのであれば、タグ名称がブッキングしてても特に影響はないかと思われます。
オリジナルの PageBute を使用する場合には、同梱してます PageBute プラグインの変更、およびそれに伴ったテンプレートの修正を以下の手順で行ってください。同梱してる 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 のインストール先にアップロードしてください。
テンプレートセットの適用
テンプレートセットのインストールが済んだら以下のページを参考にして、テンプレートセットを適用します。その際、テンプレートセットの選択には『Movable Type MEMO / floral 1.06』を選択します。
手順に沿ってテンプレートを適用したら、ブログ全体を再構築します。イメージファイル/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表示確認
正しくテンプレートが適用されたか、ブラウザから表示確認します。 主なポイントを以下に記します。- イメージファイルなどのリンク切れがないこと。
- ブログ内検索が正しく行えること。
- タグ検索が正しく行えること。
上記何れかに問題があった場合、イメージファイル/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
配布開始しました。
Trackback Pings(1)
- from
TomomiX日記・Windows&Mac関連フリーソフト・オススメソフト紹介ブログ「TRASH」
今回は、実装も簡単で面白い小技を紹介したいと思います。...
Comments(15)
-
#2: Posted by bzbell
[RES]
>>1 TomomiX さん
こんばんわ^^
ちょっとした補足説明などに使えそうですよね

トラックバックありがとうございます。
でもね、何だか文字化けしてたので、手動でタイトル名など書き直しちゃいました
-
#3: Posted by
yuruka.openid.ne.jp
[RES]
こんにちは~またまたお久しぶりです。
今FLORALをお借りして、EvalTemplateプラグインを入れたところ、適応したら表示が崩れてしまったんですが・・・(ブログ記事部分を外すと普通に表示されるので、このプラグインのせいですよね?)ウェブページにだけ適応してるんですけど、見事にぐちゃぐちゃになっちゃってます
bzbellさんのところではそんなこと無かったですか?
- #4: Posted by bzbell [RES]
>>3 yuruka.openid.ne.jp さん
こんにちわ^^
> bzbellさんのところではそんなこと無かったですか?
レイアウトが崩れるってのはないですが、コメントフォームのイメージがずれてるみたいですね
ショック
いつからだろ
> ウェブページにだけ適応してるんですけど、見事にぐちゃぐちゃになっちゃってます
たとえば、yuruka.openid.ne.jp さんとこのページでいうとどれになりますか

今確認したところページ崩れはないようですよ。ちなみにわたしのサイトのウェブページは以下のページで使用してます。
-
#5: Posted by bzbell
[RES]
>>3 yuruka.openid.ne.jp さん
コメントフォーム内のイメージ位置を修正しました。
お手数ですが、最新の圧縮ファイルをダウンロードしてください。
そして、スタイルシート(テーマ)だけを更新してください。
そうすれば改善されますので
-
#6: Posted by
yuruka.openid.ne.jp
[RES]
こんばんは^^
ページ崩れ、ないですか??
スクリーンショットアップしてみました↓
http://www.caramele.net/sshot-1.png
サイドバーが重なっちゃってるんですよねぇ・・・あたしの環境でしょうかね
今IEで確認したら、ちゃんと表示されてるみたいです・・・不思議~
普段はFirefoxです。あ、スタイルシート更新しておきますね^^
ありがとうございます
-
#7: Posted by bzbell
[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&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 ブロック内の外部リンクに限りアイコン表示していますので、バナーなどのように外部リンクアイコンを表示したくない場合には上記のようにするといいですよ
ご参考までに
-
#8: Posted by
yuruka.openid.ne.jp
[RES]
いろいろありがとうございます

ツリー表示とバナーは変更しました。なんだか、見るときによって崩れるんですよね~

更新しただけで直ったりするし。
追加したのはeval="1"だけなんですけどね・・・
ちょっとテンプレートとか確認してみます
- #9: Posted by bzbell [RES]
>>8 yuruka.openid.ne.jp さん
コードを見る限り問題なさそうですけどねぇ

崩れたときのコードを確認した方がいいかもですね。EvalTemplate はわたしも使ってますが、そのような現象は今のところ確認したことないです。
何か分かりましたらご連絡しますね
-
#10: Posted by
yuruka.openid.ne.jp
[RES]
こんばんは~^^
デザイン崩れの件ですが、相変わらずたま~にありますが、プラグインを適用してないページもなるみたいです(笑)
原因はわかりませんが、更新すると直るので・・・今度別のパソコンから見てみることにしますね
ところで、このテンプレートですが、サイドバーを無くしたり(トップページだけ)とかは出来ないんですかね?
Pandoraがいつの間にかダウンロードできなくなっていたのでこっちを使わせていただいてるんですが、CMSとして使いたいので・・・難しいですかねぇ
-
#11: Posted by bzbell
[RES]
>>10 yuruka.openid.ne.jp さん
こんにちわ^^
yuruka.openid.ne.jp さんとこのソースを確認させてもらいました。
<div class="topics"> ブロック内で dl タグなしで dt、dd タグ使用されてます。それが原因かどうか分かりませんが、正しくマークアップされないとレイアウトが崩れる要因になります
ご確認ください
-
#12: Posted by
yuruka.openid.ne.jp
[RES]
ご指摘ありがとうございます^^
タグ、なかなか難しいですね・・・
には@Recent Entries Listをそのまま読み込んでいたので、それっぽい位置にを追加してみました
-
#13: Posted by bzbell
[RES]
>>12 yuruka.openid.ne.jp さん
> ご指摘ありがとうございます^^
どぉいたしまして

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

自由度を広げることで、サイドバーが段落ちするなど各自で変更した内容までサポートしきれなかったので
どんな使われ方されてもレイアウトが崩れないように作るスキルがわたしにあればよかったと思うのですが、わたしにはとてもとても
なので、デザインを固定したテンプレートのみ配布することにしたんです。ステキなサイトができるよう、できる限りご協力します
-
#14: Posted by
yuruka.openid.ne.jp
[RES]
こんにちは。
どうしてもMTタグが難しくて(組み合わせとか)思ったとおりの表示にならないんですよね
>あと、フリースタイルの件ですが、お時間頂けるのでしたら、yuruka.openid.ne.jp さん用としてお作りします。
ですが、必要な分だけお作りしますのでご連絡頂ければと思います。なんだか、そこまでしていただくのも申し訳ないです

トップページだけを別表示?(というんでしょうか?)にしたいんですよね。
こんな感じ、というのはあるんですが、URLをここで書いてしまっていいか分からないので、メールでご連絡させてください
というか、1カラムに対応していただければ充分です:~kuroron/t2_kyaha.gif:お時間があるときにでも・・・お願いしてもいいですか?
-
#15: Posted by bzbell
[RES]
>>14 yuruka.openid.ne.jp さん
こんにちわ^^
> どうしてもMTタグが難しくて(組み合わせとか)思ったとおりの表示にならないんですよね
そうですね、慣れないとムズかしいですよね。ついでといってはなんですが、わたし MT ユーザの為の初心者フォーラムってのを立ち上げたんです。
http://bzbell.com/forum/
そちらで yuruka.openid.ne.jp さんのやりたいことなど質問していただければと思います。> 1カラムに対応していただければ充分です
はい。1 カラムはわたしも必要かなって思ってたとこなので丁度いいです


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