Movable Type 備忘録

 Movable Type 4.2 用テンプレート(TUBES)

  • Sep152008
  • Vote:
    http://bizcaz.com/archives/2008/09/15-185759.php
  • Categories: Template
  • Tags: ,
  • Social Bookmark

こんばんわ^^

TUBES for Movable Type 4.2 クルム伊達公子さんがシングルス予選( 東レ・パンパシフィック )落ちしちゃいましたぁ (´Д｀；) 残念

一度は現役を離れて体力的にもわたしの知る限り( J リークの三浦知良、中山雅史さんもいい歳ですけど )アスリートの人たちにとっては引退の年齢ですよね。すごいです。尊敬しちゃいます (●＞∀＜●)／
前にママさんバレーを見学( 実は昔バレーボーラーだったのだ )させてもらったのですが、こちらもみなさんパワフルでした。すっごいです。尊敬しちゃいます (;￣∇￣A

わたしも先のことを考えて運動しなくてはっ!!
クルム伊達公子さんはダブルスにも出場するようなのでがんばって欲しいのココロ。

さて、久しぶりにテンプレート作ってみました。
とはいっても、こちらのMovable Type 4.1 用テンプレート（TUBES）を Movable Type 4.2 用に対応して少しデザインを変更した程度ですけど (;￣∇￣A はは

今日 1 日かけてせっせとテンプレートを作ってたのですが、あっとゆうまに 1 日が終わってしまった（；￣－￣）

[2008.09.16] すいません。ヘッダー画像を公開するの忘れてました (;￣∇￣A

上記圧縮ファイル中には「Movable Type MEMO」のタイトルが入っていない画像を同梱してます。 各自で自由にサイト名を追加できるように。
また、プレーンな画像も同梱しました。お好きな背景画像を貼り付けられるように･･･。ヘッダーサイズは 1024px × 300px になります。

今回作ったテンプレートは、3 カラム固定幅( 1024px )のテンプレートになります。
他の MT4.2 用テンプレートと違ってレイアウト変更はできません。

設置も今まで通り･･･と言いたいところですが、割とスムーズに設置できてないみたい。
なので、掻い摘んでポイントだけ記しておこうと思います。

設置のポイント

  1. ご利用するテンプレートセットは PHP 化が前提

    わたしのサイトで配布するテンプレートセットは、基本的にわたしのサイトで使ってるものをフィードバックしたものです。
    CSS の読み込みにおいても PHP による圧縮転送などわたしが今まで覚えてきたことが随所に組み込まれております。

    なので必然的にブログの PHP 化が前提となってます。申し訳ないです（つω-`｡）
    テンプレートセット設置後、ブログの PHP 化を行うには以下の変更を行う必要があります。

    • MT 管理画面の「設定」＞「公開」を選択して、「ファイルの拡張子」を html から php に変更します。
    • 同ページ内の「モジュールのキャッシュ」をチェックします。
      ※これはブログの PHP 化とは関係ありません。
    • 同じく、ページ内の「サーバサイドインクルード」から「PHP のインクルード」を選択します。
      ※これもブログの PHP 化とは関係ありません。

    以上でブログの PHP 化の前準備はほぼ完了です。
    後はインデックステンプレートの各出力ファイル名の拡張子を .php に変更するだけなのですが、幸い!? このサイトで配布してるテンプレートセットでは拡張子が .php になってるので変更する必要がありません。

    最後にこちらのテンプレートセットの設置を参考にブログ全体を再構築して完了です。

  2. ご利用するテンプレートセットでは PHP スクリプト使用

    テンプレートセットの機能として、アクセスページランキング、Five Star Rating( 投票機能 )がカスタマイズされてます。
    これらは圧縮ファイル中に PHP スクリプトが同梱されてるのですが、お使いのサーバによってはただアップロードしただけでは利用できません。

    たとえば、CORESERVER( XREA )では PHP を CGI として動作させる必要があります。具体的には mt_memo/js/prototype/pagerank/ フォルダと mt_memo/js/prototype/startbox/ フォルダ内に以下のコードをコピー & ペーストして .htaccess ファイルを新規作成する必要があります。

    PHP を CGI として動作させるための設定

    1. AddHandler application/x-httpd-phpcgi .php

    また、xxx.php ファイルのパーミッションを 705 として、pagerank/ フォルダ、starbox/ フォルダのパーミッションも 705 としてください。
    これはアクセスページランキング、Five Star Rating( 投票機能 )の各 PHP スクリプト内で自動的にファイルを作成するために必要になります。

と、こんなかんじでしょうか。
もしブログの PHP 化を行わず、通常の HTML ページでご利用になりたい場合には、ご説明または、HTML 用に PHP の機能を削除したものをお作りしますのでご連絡頂けたらと思います。

ダウンロード

 Trackback Pings(0)

No trackbacks found.

 Comments(75)

#1: Posted by うに @ September 15, 2008 [REPLY]
user-pic

せっかくなのでこちらに書きます。

テンプレ作成ありがとうございました＾＾

テンプレ完成に伴い、MT自体の設置からやりなおし、無事問題なくできました。
（コメントも無事正常に書き込みできました～）
http://unig.uniuniuni.com/test/
これから画像加工 / ツールバーの位置変更 / 各種色設定 を変更していくつもりです。

また完成しましたら報告カキコさせて頂きます＾＾

またなにか不明点等ありましたら宜しくお願い致します～

 
#2: Posted by Author Profile Page bzbellからうにへの返信 @ September 15, 2008 [REPLY]
user-pic

>>1 うに さん

サイトの方確認しました。よかったですぅうるうる
ところで、1 行コメントだとアバター画像がはみ出ちゃってるので、スタイルシートを少し修正しました。
スタイルシート(テーマ)テンプレート内の 1110 行目に以下を追加してください。 

clear: both;
これでアバター画像がはみ出ることはなくなりますうぅ～ん
 
#3: Posted by うにからbzbellへの返信 @ September 15, 2008 [REPLY]
user-pic

>>2 bzbell さん

ありがとうございます。
アバター画像・・・がなんなのかはよくわかなんなかったですが、修正しておきました＾＾；

ナビゲーションバー、そしてパンくずリストですが、CSSでは中央寄せが出来ないためにindex.phpに書き加える方向になりそうです。
まだまだ色設定等変更すべき箇所はありますが、一応形にすることができました＾＾

 
#4: Posted by Author Profile Page bzbellからうにへの返信 @ September 15, 2008 [REPLY]
user-pic

>>3 うに さん

> ナビゲーションバー、そしてパンくずリストですが、CSSでは中央寄せが出来ないためにindex.phpに書き加える方向になりそうです。

どんなかんじでセンタリングしたいですか!?
うに さんのイメージを、できれば画像にして頂ければお手伝いできるかも、ですブイブイ

 
#5: Posted by うにからbzbellへの返信 @ September 15, 2008 [REPLY]
user-pic

>>4 bzbell さん

>どんなかんじでセンタリングしたいですか!?
>うに さんのイメージを、できれば画像にして頂ければお手伝いできるかも、です

ありがとうございます。
自分の理想形としてはこんな感じです。
http://unig.uniuniuni.com/test/navi.jpg

ナビバーは外枠に合わせた色に変更予定ですが＾＾

 
#6: Posted by Author Profile Page bzbellからうにへの返信 @ September 15, 2008 [REPLY]
user-pic

>>5 うに さん

なるほどサングラス
うに さんのサイトだと黒い外枠は一番上に被さる･･･ということでしたっけ!?
要するに外枠とセンター画像でナビバーやパンくずリストをサンドするイメージになります。
だとすれば、うに さんがやろうとしてる、ナビバーやパンくずリストさえセンタリングできれば OK ということになりますか。

もし上記のようにサンドできないようだとしたらセンター画像中にナビバーやパンくずリストを埋め込むことになりますか。
で、リンクを別途 CSS でスタイルしてあげれば、ご所望のことができそうですねワクワク

まずはセンタリングですね。
ちょとお待ちください。

 
#7: Posted by Author Profile Page bzbellからうにへの返信 @ September 16, 2008 [REPLY]
user-pic

>>5 うに さん

すいません遅くなりましたぁあせあせ
まず以下のようなページでよいですか!?
http://bzbell.sakura.ne.jp/annex/

上記は うに さんが言われるように各インデックステンプレート、アーカイブテンプレート内に div タグを追加してます。
具体的には以下のようになります。 

<div id="navicon"><div id="navicon_wrapper">
<$mt:Include module="<__trans phrase="Global Navigation">" cache="$cache_enable" ttl="$cache_ttl"$>
<$mt:Include module="<__trans phrase="Breadcrumbs">"$>
<$mt:Include widget="<__trans phrase="Search">" cache="$cache_enable" ttl="$cache_ttl"$>
<$mt:Include widget="<__trans phrase="Syndication">" cache="$cache_enable" ttl="$cache_ttl"$>
</div></div>

2 つの div 要素を追加してタグでナビバー、パンくずリスト、検索フォーム、そしてフィードリンクを括りました。
そしてスタイルシート(テーマ)の各要素を以下のように変更します。 

#navicon {
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;/*for IE*/
}
#navicon_wrapper {
position: relative;
margin: 0 auto;
width: <mt:getvar name="body_width_fixed" value="20" op="-">px;
}
#navibar {
margin: 0;
width: <mt:getvar name="body_width_fixed" value="20" op="-">px;
height: <mt:getvar name="breadcrumbs_height">px;
z-index: 5;
overflow: hidden;
list-style: none;
text-align: center;
background: #<mt:getvar name="breadcrumbs_color"> url(bg_navibar.png) repeat-x left top;
border-bottom: 1px solid #<mt:getvar name="breadcrumbs_color">;
}
* html #navibar {/*for IE*/
margin: 0;
}
#breadcrumbs {
margin: 0;
width: <mt:getvar name="body_width_fixed" value="20" op="-">px;
height: <mt:getvar name="breadcrumbs_height">px;
z-index: 5;
list-style: none;
color: #303;
background: #<mt:getvar name="breadcrumbs_color"> url(bg_navibar.png) repeat-x left top;
border-bottom: 1px solid #<mt:getvar name="breadcrumbs_color">;
}
* html #breadcrumbs {/*for IE6.x*/
top: <mt:getvar name="breadcrumbs_height">px;
margin: 0;
}
#search_form {
position: absolute;
top: 0;
right: 0;
margin: 0;
width: <mt:getvar name="beta_width">px;
height: <mt:getvar name="search_height">px;
display: block; /* IE5 */
z-index: 6;
}
#search_form p {
margin: 0;
padding: 0;
width: 196px;
height: <mt:getvar name="search_height">px;
}
#syndicate {
margin: 0;
width: 303px;   /*303px＝(アイテム幅(100px)＋ボーダー(1px))×アイテム数(3)*/
height: <mt:getvar name="breadcrumbs_height">px;
z-index: 6;
position: absolute;
top: <mt:getvar name="breadcrumbs_height">px;
right: <mt:getvar name="beta_width" value="12" op="+">px;
list-style: none;
text-align: center;
}

センタリングはとりあえず OK ですね。

 
#8: Posted by うにからbzbellへの返信 @ September 16, 2008 [REPLY]
user-pic

>>7 bzbell さん

わざわざありがとうございます。

>すいません遅くなりましたぁ
>まず以下のようなページでよいですか!?
>http://bzbell.sakura.ne.jp/annex/

はい！ちょうどこんな感じですね＾＾

>上記は うに さんが言われるように各インデックステンプレート、アーカイブテンプレート内に div タグを追加してます。
>具体的には以下のようになります。

これは各インデックステンプレート、アーカイブテンプレート内であればどこでも可っていうわけではないですよね？

試しにメインページに追記してみたんですが、「モジュールGlobal Navigationが見付かりません」と表示されてしまいます。

>2 つの div 要素を追加してタグでナビバー、パンくずリスト、検索フォーム、そしてフィードリンクを括りました。
>そしてスタイルシート(テーマ)の各要素を以下のように変更します。

ナビバー、パンくずリスト、検索フォーム、そしてフィードリンクの縦位置はスタイルシートのどの部分に当たりますでしょうか？

 
#9: Posted by うにからbzbellへの返信 @ September 16, 2008 [REPLY]
user-pic

>>7 bzbell さん

こんにちわ。
ちょっと勘違いをしていました。
上の質問はナシでお願いします＞＜

>http://bzbell.sakura.ne.jp/annex/

こちらのページですが、ヘッダ画像の上にうまく枠内にはまるように表示している状態だったんですね。
自分のイメージとしては、奥から 枠内画像＞ツールバー（ナビバー、パンくずリスト、検索フォーム、そしてフィードリンク）＞ヘッダ画像 という重なりを実現したかったんですが・・・

ヘッダ画像をimgタグではなくdivタグに変更し、3つの重なりを試してみたところ、うまく間に入ってはくれたものの、ナビバーが消えてしまいました。
実現は難しそうです。

画像のみならまだしも、リンクが挿入されていると、うまく表示してくれないようです。
ツールバーのタグとヘッダ画像 のタグの順番を入れ替えるとツールバーがヘッダ画像の上に表示されてしまいました。

また色々試行錯誤しながら進めていきたいと思います。

 
#10: Posted by Author Profile Page bzbellからうにへの返信 @ September 16, 2008 [REPLY]
user-pic

>>9 うに さん

こんばんわ^^

お返事が遅くなってすいませんあせあせ
> 自分のイメージとしては、奥から 枠内画像＞ツールバー（ナビバー、パンくずリスト、検索フォーム、そしてフィードリンク）＞ヘッダ画像 という重なりを実現したかったんですが・・・

はい。心得てますやあ！
うに さんがやりたいことの前にまずセンタリンクを行ってみました。
で、実際の重なりを表現するには z-index アトリビュートを使用すれば可能なのですが、ぶっちゃけ画像で対応した方が速いですあせあせ
具体的には以下のようなかんじですよね!?
http://bzbell.sakura.ne.jp/annex/

上記サンプルはヘッダ画像にナビバー、パンくずリストのパイプ画像を貼り付けて、CSS で各リンクをレイアウトしたものです。

 
#11: Posted by うにからbzbellへの返信 @ September 16, 2008 [REPLY]
user-pic

>>10 bzbell さん

> はい。心得てます
>うに さんがやりたいことの前にまずセンタリンクを行ってみました。

なるほど。自分だけ先走ってしまったようで・・・もじもじ

>で、実際の重なりを表現するには z-index アトリビュートを使用すれば可能なのですが、ぶっちゃけ画像で対応した方が速いです
>具体的には以下のようなかんじですよね!?
>http://bzbell.sakura.ne.jp/annex/

おぉ！素晴らしいです！
いくつか気になる点を。
・HOMEのリンク部（左上角）が角丸になっていないのが・・・左端に位置するリンクだけ別画像にすることは可能でしょうか？
・色々とお手伝い頂いているのに贅沢なんですが、横幅1024以上のウィンドウで開く場合は問題ないんですが、1024以下（ヘッダ画像の横幅）のウィンドウで表示すると、ナビバーが枠から飛び出してしまいます。完全に枠内にはめ込む事は難しいっていうことでしょうか。

>上記サンプルはヘッダ画像にナビバー、パンくずリストのパイプ画像を貼り付けて、CSS で各リンクをレイアウトしたものです。

ありがとうございます。
また一段と理想のかたちに近づいてきましたうるうる

 
#12: Posted by Author Profile Page bzbellからうにへの返信 @ September 16, 2008 [REPLY]
user-pic

>>11 うに さん

> ･･･左端に位置するリンクだけ別画像にすることは可能でしょうか？

はい。
左端用のリンク画像を用意して、CSS でスタイルしてあげることで可能ですよ。

> ･･･完全に枠内にはめ込む事は難しいっていうことでしょうか。

あちゃキャハハやっぱりちゃんとデザインを考慮して、テンプレート、スタイルシートを設計しないとダメかもあせあせ
一夜漬けの限界ですねイヤイヤ

 
#13: Posted by うにからbzbellへの返信 @ September 17, 2008 [REPLY]
user-pic

>>12 bzbell さん

>> ･･･左端に位置するリンクだけ別画像にすることは可能でしょうか？
>はい。
>左端用のリンク画像を用意して、CSS でスタイルしてあげることで可能ですよ。

左端に位置するリンクだけ別画像にすること＝完全に枠内にはめ込む事が前提になっちゃいますよね
（左端のリンク画像（左上角だけ角丸）の状態で枠からはみ出ると、汚くなっちゃいますから・・・）

>あちゃやっぱりちゃんとデザインを考慮して、テンプレート、スタイルシートを設計しないとダメかも
>一夜漬けの限界ですね

ハウ・・・
できれば完全にはめ込みたいところですが、
>http://bzbell.sakura.ne.jp/annex/
こちらの状態+左端に位置するリンクだけ別画像が限界ですかね。

自分の知識ではテンプレ作成なんて無理な話なので。。。

 
#14: Posted by うにからbzbellへの返信 @ September 17, 2008 [REPLY]
user-pic

>>12 bzbell さん

こんにちわ。
自分なりに試行錯誤して、ナビバー・パンくずリストの位置固定およびはめ込みは出来ました。
ナビバーは、より中央寄せにしてヘッダ画像の角にナビバーを切り貼りするという、半ば強引な方法になってしまいましたが。。。
目を凝らして見ない限りはバレることはないと思います。
⇒　http://unig.uniuniuni.com/test/

あとは検索窓とフィードリンクだけなんですが、どうにもうまく固定できません。
（ブラウザウィンドウの幅を変更すると検索窓とフィードリンクが動いてしまいます）
bzbellさんの提示していただいたテストサイトの方法を教えていただけないでしょうか。
bzbellさんのテストサイトではウィンドウ縮小時にナビバーが突き抜けるという状態だったため、検索窓とフィードリンクを固定できれば
ツールバーの問題（自分で勝手に改造してるだけなので、問題じゃないですよね＞＜；）は解消されます。

また、まだツールバーの修正しか手を掛けていないのでまだ質問等たくさんあると思いますが、何卒宜しくお願い致しまするる。

 
#15: Posted by Author Profile Page bzbellからうにへの返信 @ September 18, 2008 [REPLY]
user-pic

>>14 うに さん

こんばんわ^^

> 自分なりに試行錯誤して、ナビバー・パンくずリストの位置固定およびはめ込みは出来ました。

IE では正しい位置に表示されてますが、Firefox などでは崩れているようですガーン

> bzbellさんの提示していただいたテストサイトの方法を教えていただけないでしょうか。

さきほど、うに さん宅にメルしましたのでご確認くださいぺこり

 
#16: Posted by うにからbzbellへの返信 @ September 18, 2008 [REPLY]
user-pic

>>15 bzbell さん

>IE では正しい位置に表示されてますが、Firefox などでは崩れているようです

あうぁぅ・・・
IEのみではどうしようもないですね・・・

>さきほど、うに さん宅にメルしましたのでご確認ください

ありがとうございます。
送って頂いたCSSを使用して、また色々とやってみます。

 
#17: Posted by うに @ September 18, 2008 [REPLY]
user-pic

こんにちわ
いつもお世話になってます。

昨晩頂いたスタイルシートに差替えてみたところ、ナビバー/パンくずリストの背景が表示されなく、、、
原因は解明できたのですが、一度綺麗にしてから再度一つ一つ変更していこうと思っていたのですが・・・

テンプレートの初期化を行ったところ、IEでは大した問題もなく（ツールバーの位置がおかしいけど、これは変更するので）表示出来たんですが・・・
Firefoxで表示したところ、ほぼ真っ白？スタイルシートが見えていないような状態になってしまいました。。。

全てのテンプレートを初期化したので画像類はともかく、Bzbellさんのテストサイト（ツールバー修正前）のようになるものだと思っていたんですが・・・
本日帰宅後にサーバーのテンプレファイルを差替え（画像以外）、再度初期化を試みてみます。

またご迷惑かかってしまいますが、何卒ご教授の程宜しくお願い致します。。。
（踏んだり蹴ったり・・・）

 
#18: Posted by うに @ September 18, 2008 [REPLY]
user-pic

サーバーのテンプレの再転送→初期化で初期状態に戻すことはできました。
IE / Opera / Firefox / Netscape での表示確認済み。

そして昨晩頂いたスタイルシート及び＃7のインデックスシートの修正を行い再構築したところ、昼間のような崩れはなくなったんですが・・・
IE / Opera / Firefox / Netscape 全てにおいて、ヘッダーとボディの間に１行（？）空間が出来てしまいました。

そしてIEではさして問題ないのですが、Opera / Firefox / Netscape においてツールバーの表示位置がズレている状態？になってしまいます。

これはウチの環境だけなんでしょうか...（ブラウザVersionが古い？

何度も何度も申し訳御座いません。。。

 
#19: Posted by Author Profile Page bzbellからうにへの返信 @ September 18, 2008 [REPLY]
user-pic

>>17 うに さん
>>18 うに さん

こんばんわ^^

昨日お渡ししたスタイルシートはサンプルサイトと同じものですよ。
ただし >>7 でご紹介したテンプレート側を変更することが前提のものです。本来のテンプレートとは異なります。

> これはウチの環境だけなんでしょうか...（ブラウザVersionが古い？

いえ、わたしの方でも同様の見え方してます。
確認したところ、うに さんのテストブログではテンプレートを変更されてますね。
元の位置に戻せばわたしのサンプルと同様になると思いますうぅ～ん

 
#20: Posted by うにからbzbellへの返信 @ September 19, 2008 [REPLY]
user-pic

>>19 bzbell さん

>確認したところ、うに さんのテストブログではテンプレートを変更されてますね。
>元の位置に戻せばわたしのサンプルと同様になると思います

元の位置というと、初期のテンプレートではなく>>7の修正を施したテンプレートのことですよね？
今修正済みのテンプレートを上書き転送→メインインデックスの初期化→再構築してみたんですが・・・

ヘッダーとボディの間の１行（？）の空間はなくなったんですが、今度はボディとフッターの間に空間が・・・

そしてツールバーも表示位置がおかしくなってしまいました。
（この現象も昼間確認済みです）

IE / Opera / Firefox / Netscape 全てにおいて同現象・・・
リセットしての修正なのに・・・なんで・・・orz

 
#21: Posted by Author Profile Page bzbellからうにへの返信 @ September 19, 2008 [REPLY]
user-pic

>>20 うに さん

こんにちわ^^

う～ん…ナビバーはご存知のように absolute によるレイアウトなので他のブロックに影響することはないと思ってますが、うに さんとこのコードをみてないのでなんとも言えませんねあせあせ
ちなみにヘッダー画像の高さはいくつですか!?
以前にもご連絡しましたがデフォルトは 300px です。300px 以上ってオチはないですよねキャハハ

 
#22: Posted by うにからbzbellへの返信 @ September 19, 2008 [REPLY]
user-pic

>>21 bzbell さん

こんにちわ＾＾

>ちなみにヘッダー画像の高さはいくつですか!?
>以前にもご連絡しましたがデフォルトは 300px です。300px 以上ってオチはないですよね

現状のテンプレートはBzbellさんに教えていただいた修正のみを施したものになりますのでヘッダー画像は 300px のままです。
（もちろん表示がうまくいけばもうちょっと高くする予定ですが）

>う～ん…ナビバーはご存知のように absolute によるレイアウトなので他のブロックに影響することはないと思ってますが、うに さんとこのコードをみてないのでなんとも言えませんね

Bzbellさんに教えていただいた修正のみ施したテンプレートファイルをメールに添付し送らせて頂きましたので確認のほど、宜しくお願い致します。

 
#23: Posted by うにからbzbellへの返信 @ September 19, 2008 [REPLY]
user-pic

>>21 bzbell さん

何度も申し訳御座いません。
ツールバーの表示および空間の原因がわかりました。
>>7のタグをそのままコピペしていたが為に、全角スペースが入っていたことが原因でした。

これでIEでは問題なくなったんですが、Firefoxではツールバーが右にすこしずれた状態で表示されます。
これは、ブラウザ依存によるものなんでしょうか。
BzbellさんのテストサイトではFirefoxでも正常表示されているのでまだどこかがおかしいってことにるんでしょうね・・・

 
#24: Posted by うにからbzbellへの返信 @ September 19, 2008 [REPLY]
user-pic

>>21 bzbell さん

何度も申し訳御座いません。うにです
BzbellさんのサンプルサイトもIEとFirefoxでは横位置のズレがあるみたいですね。
（自分のところだけの問題かと思ってました）
とりあえずは修正完了しました。ご迷惑をお掛けしました。

これからうにぐライクに変更していこうと思います。

Bzbellさんにご迷惑掛けっぱなしでほんと申し訳ないです・・・
（こだわりすぎなんでしょうかねぇ・・・）

 
#25: Posted by Author Profile Page bzbellからうにへの返信 @ September 19, 2008 [REPLY]
user-pic

>>24 うに さん

こんばんわ^^

> BzbellさんのサンプルサイトもIEとFirefoxでは横位置のズレがあるみたいですね。

えっ!? そうなんですか!?
すいませんでした。一応主要なブラウザでの表示確認はしてたのですが･･･って、今見たところ問題なさそうですよあせあせ

> これからうにぐライクに変更していこうと思います。

はい。がんばってくださいバイバイ
でも、今確認( Safari )したところ横幅がおかしいようですよ。

 
#26: Posted by うにからbzbellへの返信 @ September 20, 2008 [REPLY]
user-pic

>>25 bzbell さん

>でも、今確認( Safari )したところ横幅がおかしいようですよ。

IE以外では若干のズレがあるようですが、妥協しときますｗ
とりあえずはウィンドウを縮めてもナビバーが枠から突き抜けることはなくなったので＾＾

色々ありがとうございました＾＾

また何かあれば宜しくお願いします
（たぶん近日中にまたおじゃましますｗ）

 
#27: Posted by うに @ September 21, 2008 [REPLY]
user-pic

こんにちわ、いつもお世話になりっぱなしです
うにです。

おかげさまでだいぶよくなってきました。

今回はいくつかまとめて質問させていただきます。

1.フォトウィジットについて
MTからアップロードし、formタグをつけないとウィジェットに表示されないようですが、imgタグのみでサムネイルでサイドバーに表示させる事はできないんでしょうか？
当方FFFTPを利用して画像をUpLoadし、全て手書きで日記を書いているので・・・（画像はimgタグのみで表示）

2.タグクラウドについて
記事投稿時にタグの項目になにかしら文字を入れ、反映したページを見てみるとページ内でスクリプトエラーが表示されます。
該当記事からタグを削除するとスクリプトエラーは表示されなくなります。
[その時入れたタグ　IMG MMO Photo 画像]
日本語がいけないかと思い、[画像]を削除しましたが現象は変わらず・・・

タグ表示がうまくいくようになれば、MT-Cumulus プラグイン を導入してみようかと思っているのですが・・・

また、IEでこちらにアクセスしようとしたところ、真っ白ページでステータスバーにscripterrorが出ていたため、今はFirefoxでコメかいてます。

 
#28: Posted by Author Profile Page bzbellからうにへの返信 @ September 21, 2008 [REPLY]
user-pic

>>27 うに さん

こんにちわ^^

  1. 結論からいいますと自動的にはできないです。うに さんメッチャ無理なこと言ってますキョロキョロ
    ただし、手動( 自分で IMG の URL を貼り付ける )でなら可能です。再構築するとデータベースに登録された IMG は以下のようにマークアップされます。

    <ul class="widget_list">
<li class="asset_list_item"><a href="記事 URL" title="記事タイトル"><img class="asset_img_thumb" src="イメージ URL" alt="イメージタイトル" /></a></li>
</ul>

    上記にならって「フォト」ウィジェットを、ブログ記事再構築前に追加すれば可能になります。
    でもけっこう面倒だと思いますよあせあせどうせなら、今までの IMG を一括アップロードされてはどうですか!?
    http://bizcaz.com/archives/2007/10/31-005908.php

  2. 入力した「IMG MMO Photo 画像」は、実際には IMG、MMO、Photo、画像ということでしょうか。それとも、これらすべてで一つのタグということですか!?
    ちょとその現象を確認したいので URL を教えていただけますか。コード解析してみないと何とも言えませんねあせあせ
    また、タグクラウドの問題としてデータベースの文字コードとテンプレートの文字コードが不一致な場合、正しくタグ検索できないようです。そこら辺は問題ないですか!?

    またまた、MT-Cumulus プラグインをインストールする際には一声かけて頂ければ、カスタマイズしたプラグインをお渡しします。
    というのも、タグ検索には Ajax を使用しているため、デフォルトのままでは Ajax による検索がされません。

> また、IEでこちらにアクセスしようとしたところ、真っ白ページでステータスバーにscripterrorが出ていたため、今はFirefoxでコメかいてます。

ありがとございます。
てか、MT-Cumulus プラグインで出力したフラッシュ、IE じゃ見れないみたいガーン

 
#29: Posted by うにからbzbellへの返信 @ September 21, 2008 [REPLY]
user-pic

>>28 bzbell さん

>ただし、手動( 自分で IMG の URL を貼り付ける )でなら可能です。再構築するとデータベースに登録された IMG は以下のようにマークアップされます。
>上記にならって「フォト」ウィジェットを、ブログ記事再構築前に追加すれば可能になります。

これはつまり、フォトウィジットに手動で画像URLなどを入れる～ってことですね？（bzbellさんお言っているまんまか・・・
現在使用しているMT3.35では記事内の一番上のimgタグを呼び出して最新8記事からフォトウィジットに表示できていたので・・・
これまでと同様にはできないってことですね・・・

もしMT3.35でのタグが使用可能ならばそのまま使用したいところですが・・・ ダメ元で3.35で使用しているフォトウィジットのコード書いてみまし。

<MTEntries lastn="8">
<MTCollect tags="img">
<MTCollectThis>
<$MTEntryBody$>
</MTCollectThis>
<MTIfCollected tags="img">
<MTCollected tags="img" lastn="1">
<a href="<$MTEntryLink$>">
<img class="corner ishadow20 inverse" src="<$MTCollectedAttr attr="src"$>" style="margin:10px 0px 10px 0px; width:152px;" />
</a><br />
</MTCollected>
</MTIfCollected>
</MTCollect>
</MTEntries>

>でもけっこう面倒だと思いますよどうせなら、今までの IMG を一括アップロードされてはどうですか!?

画像数にすると・・・約1500枚にもなるので・・・

>入力した「IMG MMO Photo 画像」は、実際には IMG、MMO、Photo、画像ということでしょうか。それとも、これらすべてで一つのタグということですか!?
>ちょとその現象を確認したいので URL を教えていただけますか。コード解析してみないと何とも言えませんね

テストで「画像」というタグを記事に追加してみました。
http://unig.uniuniuni.com/test/
Firefox / Opera / Safari / Netscape ではエラー（何処に表示されるのかわかりませんが＾＾；）はなく、IEだけScriptErrorが出ている？

>また、タグクラウドの問題としてデータベースの文字コードとテンプレートの文字コードが不一致な場合、正しくタグ検索できないようです。そこら辺は問題ないですか!?

以前MT4.01の時、色々教えていただいた時のタグクラウドは正常に動作しているようですので、データベース上は問題ないとは思うんですが・・・
http://unig.uniuniuni.com/mt4/

>またまた、MT-Cumulus プラグインをインストールする際には一声かけて頂ければ、カスタマイズしたプラグインをお渡しします。
>というのも、タグ検索には Ajax を使用しているため、デフォルトのままでは Ajax による検索がされません。

ありがとうございます＾＾

>てか、MT-Cumulus プラグインで出力したフラッシュ、IE じゃ見れないみたい

ん～今見るとScriptErrorはまだ出ていますがタグのFlashはグリグリ動いています。

 
#30: Posted by Author Profile Page bzbellからうにへの返信 @ September 22, 2008 [REPLY]
user-pic

>>29 うに さん

あっすいません。
MT4 の機能を使わず、プラグインを利用するのでしたら今まで通り可能ですよ。
ただ、このプラグインが今後も MT バージョンアップに伴って修正して頂けるものか気になるところでごじゃいますあせあせ
てか、そもそも MT4 で動作するのかどうか･･･。

> Firefox / Opera / Safari / Netscape ではエラー（何処に表示されるのかわかりませんが＾＾；）はなく、IEだけScriptErrorが出ている？

あ、それなら大丈夫です。
実は MT4.1 のタグクラウドのフォントサイズでは対数関数式を使ってます。
その影響でタグ数が 1 以下の場合 IE に限って現状エラーが発生することを確認済みです。
試しにタグ数を複数個追加してみてください。きっとエラーがなくなりますからやあ！
※てか、対応するのを忘れてたあせあせ

> ん～今見るとScriptErrorはまだ出ていますがタグのFlashはグリグリ動いています。

えっ!? グリグリ動いてますか!?
わたしの方ではグリグリどころか、醜くフラッシュのエラーメッセージが出ておりますキャハハ

 
#31: Posted by Author Profile Page bzbellからうにへの返信 @ September 22, 2008 [REPLY]
user-pic

>>29 うに さん

> Firefox / Opera / Safari / Netscape ではエラー（何処に表示されるのかわかりませんが＾＾；）はなく、IEだけScriptErrorが出ている？

上記対策しましたので、改めてテンプレートセットをダウンロードしてご確認頂けますか。
で、インデックステンプレート一覧内の JavaScript(prototype.effect.js)を、圧縮ファイル中の prototype_effect.mtml ファイルでコピペしてください。

 
#32: Posted by うにからbzbellへの返信 @ September 22, 2008 [REPLY]
user-pic

>>30 bzbell さん
>>31 bzbell さん

>MT4 の機能を使わず、プラグインを利用するのでしたら今まで通り可能ですよ。
>ただ、このプラグインが今後も MT バージョンアップに伴って修正して頂けるものか気になるところでごじゃいます
>てか、そもそも MT4 で動作するのかどうか･･･。

バッチリ動作してます～＾＾ｂ

>わたしの方ではグリグリどころか、醜くフラッシュのエラーメッセージが出ております

多分ですが、PCにインストールされているFLASHのVersionにもよるのではないでしょうか。
グリグリ動くのはVersion9で見れてました。

>インデックステンプレート一覧内の JavaScript(prototype.effect.js)を、圧縮ファイル中の prototype_effect.mtml ファイルでコピペしてください。

有難う御座います。
無事タグ入れしてもScriptErrorもなく、正常表示出来てます。

今はサイドバーの折り畳みにチャレンジしております。

>>28
>またまた、MT-Cumulus プラグインをインストールする際には一声かけて頂ければ、カスタマイズしたプラグインをお渡しします。
>というのも、タグ検索には Ajax を使用しているため、デフォルトのままでは Ajax による検索がされません。

MT-Cumulus ですが、日本語には対応していないんですよね・・・
IEではScriptErrorが解消できない？
日本語タグを入れると文字化けする？
どちらにしても一度導入してみますね。

テンプレ修正ありがとうございました＾＾

 
#33: Posted by Author Profile Page bzbellからうにへの返信 @ September 22, 2008 [REPLY]
user-pic

>>32 うに さん

こんばんわ^^

> 多分ですが、PCにインストールされているFLASHのVersionにもよるのではないでしょうか。
> グリグリ動くのはVersion9で見れてました。

あっそうなんですか!?
わたしのパソコンにはどのバージョンが入ってるんだろあせあせ
いっつも思ってたのですが、うに さんのヘッダ画像ってオンラインゲームをキャプチャしたものですよね!?
それってどうやってやるんですか!?
ツールとかインストールすればわたしでもできますか!?

 
#34: Posted by うにからbzbellへの返信 @ September 22, 2008 [REPLY]
user-pic

>>33 bzbell さん

>あっそうなんですか!?
>わたしのパソコンにはどのバージョンが入ってるんだろ

Bzbellさんからそんな言葉を聞くとは思ってもなかったです＾＾（ちょっぴり親近感＾＾
FLASH Versionの確認方法は至って簡単です。
なんでもいいので、FLASHの上で右クリックしてみてください。
[ 設定 ] と [ Adobe Flash Player ? について ] っていうメニューが表示されます。
うちの環境では [ ? ] には 9 が入ってます＾＾

>いっつも思ってたのですが、うに さんのヘッダ画像ってオンラインゲームをキャプチャしたものですよね!?
>それってどうやってやるんですか!?
>ツールとかインストールすればわたしでもできますか!?

ツール・・・使ったことありませんｗ

もちろんキャプチャした画像もありますが、あとはオンラインゲームの公式サイトで配布されているFanSiteKit から使用するって手もあります。
なのでサイドバーには[ MMO CoryRight ] として使用している画像のオンラインゲームへのリンクを貼っています。

キャプチャについてですが、もちろんツールを使用しても可能ですが、大抵のオンラインゲームではキーボードの [ Print Screen ] を押す事により特定のフォルダに画像が保存されます。
（もちろんゲームによって変わりますが、大抵はゲームのインストールフォルダに入ると思います。詳しくは撮りたいオンラインゲームのFAQ、もしくはユーザー掲示板などで検索してみてもいいかもしれません。）

 
#35: Posted by Author Profile Page bzbellからうにへの返信 @ September 22, 2008 [REPLY]
user-pic

>>34 うに さん

実はわたし極端に知識が偏ってまして、パソコンの事となるとまったく分からなかったりしますあせあせ
わたしが持ってる知識なんて一歩このサイトを出たら何の役にも立たないんですよねしくしく

> [ 設定 ] と [ Adobe Flash Player ? について ] っていうメニューが表示されます。

おぉ!! なるほど。わたしのところも Flash Player 9 が入ってるみたい･･･って何で うに さんとこと現象がちがっちゃうんだろガーン最悪

> もちろんキャプチャした画像もありますが、あとはオンラインゲームの公式サイトで配布されているFanSiteKit から使用するって手もあります。

へぇ～そういうのを公開してくれてるんですか。
てっきり うに さんがキャプチャしたものかと思ってたので、ずいぶんキレイにキャプチャするもんだなぁ･･･と感心してましたのあせあせ

 
#36: Posted by うに @ September 24, 2008 [REPLY]
user-pic

こんにちわ。

いつもお世話になりっぱなしです＾＾；

MT-Cumulus プラグインを使用しようと思っているんですが、以前仰っていた“カスタマイズしたプラグイン”をお願いできないでしょうか・・・。
日本語タグはどうなるかなど（多分空白になる？）実際に導入して確認してみたいので。

>わたしのところも Flash Player 9 が入ってるみたい･･･って何で うに さんとこと現象がちがっちゃうんだろ

こちらですが、ちょっとこちらに現象再現する環境がないもので・・・
お役に立てず申し訳ないです＞＜；
インターネットオプション＞セキュリティタグ＞[インターネット]のセキュリティレベルのカスタマイズで[スクリプト]のチェック項目に関係するのかもしれません。

もうちょっと調べてみます。
（某航空会社のPCサポートみたいな仕事に就いてますのでついでにｗ）

 
#37: Posted by Author Profile Page bzbellからうにへの返信 @ September 24, 2008 [REPLY]
user-pic

>>36 うに さん

こんばんわ^^

やっぱり日本語対応されてないようですよ。
http://www.zelazny.mydns.jp/archives/001127.php

 
#38: Posted by うにからbzbellへの返信 @ September 25, 2008 [REPLY]
user-pic

>>37 bzbell さん

なるほど・・・残念です＞＜
動きがあってかっこいいと思ってたんですが・・・

また二つほど質問を。
１．こちらインド・エフェクトでの折り畳みをサイドバーに導入しようと試みているんですが、dtree使用のツリー表示しているウィジェットを折り畳む事は出来るんでしょうか。

２．もしご存知でしたらでいいんですが、たしかどこかのbzbellさんのテンプレを使用しているブログサイトで見かけたんですが、奥行きのあるコメントフォームというのは・・・
奥行きのあるコメントフォーム・・・言葉では解り難いですよね。
( http://unig.uniuniuni.com/test/
今テスト中のサイトの画像に使用しているcorner.jsの効果？みたいな感じです。

もしご存知でしたら・・・教えてください。

----------------------------
IEでFLASHが正常に表示されない問題ですが、いくつか対処方法が出てきたので書いておきます。
が・・・ちょっとコメに書くのは長くなってしまうので、別途ページを用意しました。
Internet ExplorerでFLASHが正常に表示されない場合

閉じるボタンがあるのは、MT-Cumulus プラグインを導入後、IEで表示が出来ないユーザー向けにポップアップページとして書いたものなので・・・

 
#39: Posted by Author Profile Page bzbellからうにへの返信 @ September 25, 2008 [REPLY]
user-pic

>>38 うに さん

こんばんわ^^

インド・エフェクトっていうからインド風!? エフェクトってのがあるのかと追っちゃいましたあせあせ

> ･･･dtree使用のツリー表示しているウィジェットを折り畳む事は出来るんでしょうか。
やったことないですが可能だと思いますよ。
また jQuery と prototype を併用するには、jQuery 側でコンフリクトの回避を行う必要があります。
※ネットで検索すると今時ならけっこう紹介されてるページが見つかると思います。

> ･･･奥行きのあるコメントフォームというのは・・・

奥行きのあるコメントフォーム!? フォーム内に画像を貼り付けたものでしょうか!?

 
#40: Posted by うにからbzbellへの返信 @ September 27, 2008 [REPLY]
user-pic

>>39 bzbell さん

>また jQuery と prototype を併用するには、jQuery 側でコンフリクトの回避を行う必要があります。
>※ネットで検索すると今時ならけっこう紹介されてるページが見つかると思います。

見付かりました＾＾
<script>jQuery.noConflict();</script>
これで併用可能らしいんですが（こちら）
折り畳みのスキリプトをどこに書き入れればいいか、自分の知識ではどうにもならないため、足踏み状態です＞＜；

今、LightBoxのような画像効果でSexyLightBoxというのがあって、動きが面白いのでテストサイトに実装してみたんですがうまく動作してくれなく、確認したところ、prototype.jsとmootoolsのライブラリ併用不可能という記事を発見し、またゼロに引き戻された感じです＞＜

>奥行きのあるコメントフォーム!? フォーム内に画像を貼り付けたものでしょうか!?

いえ、表現方法として、画像と言ったまでです。
コメントフォームを窪みがある、奥行きのある感じで表現したいんです。
border-style:inset のもっとグラフィカルな感じってところでしょうか。

 
#41: Posted by Author Profile Page bzbellからうにへの返信 @ September 27, 2008 [REPLY]
user-pic

>>40 うに さん

こんにちわ^^

SexyLightbox は、わたしも他のサイトで使用してます。
うに さんもご存知のように JavaScript フレームワークとして prototype、jQuery、mootols を併用することはできません（ものによってはできるけど）。なので、どうしても SexyLightbox を使いたいのであれば、

  1. Five Star Rating（投票機能）を削除する
  2. Page Access Ranking を削除する
  3. その他 prototype による Ajax 含め、prototype に依存するコードを mootools 向けに書き換える

といったことが必要になります。
その代わり、今度は逆のこと（prototype を使った何か）ができなくなりますのでふつう

 
#42: Posted by Author Profile Page うに @ October 21, 2008 [REPLY]
user-pic

いつもお世話になってます。
コメント投稿形式？変更されたんですね。
登録して自分のプロフィール見たらメールアドレスとサイトアドレスの欄がスクロールバーで見えない状態だったため変更不可能に・・・
（一応報告までに。）

ｊQuery版のテンプレートを気長に待ちながらカスタマイズしてるんですが、一つ困ったことが・・・
http://unig.uniuniuni.com/test/
↑見てもらうと分ると思いますが、Footer部分が崩れてしまって・・・
いつのまにかこうなっていたので自分では原因がわからず・・・

何が原因なんでしょうか・・・自分の環境がちょっと回線途切れることがあるので、保存しきれずにこんなことになってしまったということも考えられるんですが・・・
お力添えお願いできませんでしょうか。。しくしく

 
#43: Posted by Author Profile Page bzbellからうにへの返信 @ October 21, 2008 [REPLY]
user-pic

>>42 うに さん

こんばんわ^^

IE に限った現象のようです。
ul#powered のイメージ幅がサイト幅になってるので、イメージが間延びしてるようですあせあせいつからですか!?
スタイルシート見た限りイメージ幅を指定してないようなので jQuery とか影響してませんか!?

 
#44: Posted by Author Profile Page うにからbzbellへの返信 @ October 22, 2008 [REPLY]
user-pic

>>43 bzbell さん

こんばんわ＾＾

>スタイルシート見た限りイメージ幅を指定してないようなので jQuery とか影響してませんか!?

Bzbellさんの言うとおり、ｊQueryのよるものでした。
一つずつコメントアウトしていき、原因が“jquery.pngFix.pack.js”ということがわかりました。
FancyBoxも拡大画像が荒すぎるので変更するつもりだったんで、よかったです＾＾

またなにかありましたら宜しくお願いします～バイバイ

 
#45: Posted by Author Profile Page bzbellからうにへの返信 @ October 22, 2008 [REPLY]
user-pic

>>44 うに さん

こんばんわ^^

よかったですね。原因がわかってブイブイ
プラグインの作りによってはページ全体に影響するようなものもあるので気をつけたほうがいいかもですねワクワク

 
#46: Posted by Author Profile Page うにからbzbellへの返信 @ October 24, 2008 [REPLY]
user-pic

>>45 bzbell さん

いつもかなりお世話になってます。うにです。

おかげさまで大分完成に近付いてまいりました
（弄り始めてからかなり経ってるような気もしますが＾＾；）

プロフィール画面を初期の状態に戻したんですね＾＾
ちょっと気になる事が。（たった今）

コメント欄に画像のようなものが見えたんですけど、アレなんですか？
コメント入力し始めたら消えちゃいましたけど・・・
是非うちも使ってみたいです～

っと、本題に入らせていただきます。
このタグクラウドページなんですが、[photo]のタグをクリックすると正常な動作をしてくれるんですが、[画像]のタグをクリックすると背景位置が総崩れで

「不正な要求です。文字コードUTF-8に含まれない文字データを送信しています。 」

というエラーMsgが表示されます。
文字コードの相違によるものなんでしょうか？
単に文字コードの相違による問題なら[photo]でもエラーになっておかしくないと思うんですが・・・

 
#47: Posted by Author Profile Page bzbellからうにへの返信 @ October 24, 2008 [REPLY]
user-pic

>>46 うに さん

こんばんわ^^

> プロフィール画面を初期の状態に戻したんですね＾＾

はい。原因は分かってるのですがちょと時間がなかったのと面倒だったので一時的にデフォに戻しましたあせあせ

> コメント欄に画像のようなものが見えたんですけど、アレなんですか？
> コメント入力し始めたら消えちゃいましたけど・・・

大したことやってないんです。 ただ textarea に背景とフォーカス時の背景を指定してるだけなんですよパチパチ 
#comments-open-text textarea {
background: #背景色 url(image.gif) no-repeat right bottom;
}
#comments-open-text textarea:focus {
background: #フォーカス時の背景色 url(image_focus.gif no-repeat right bottom;
}

> 「不正な要求です。文字コードUTF-8に含まれない文字データを送信しています。 」

お手数ですが最新テンプレートセットをダウンロードして頂き、「タグクラウドの詳細」テンプレートモジュールを tagcloud_detail.mtml ファイルの内容で差し替えてみてくださいうぅ～ん

 
#48: Posted by Author Profile Page うにからbzbellへの返信 @ October 25, 2008 [REPLY]
user-pic

>>47 bzbell さん

こんばんわ＾＾

ありがとうございます。
おかげさまでタグクラウドでエラーはなくなりました。

>大したことやってないんです。ただ textarea に背景とフォーカス時の背景を指定してるだけなんですよ

なるほどなるほど。
ってなわけで早速やってみました・・・が、フォーカス時に画像が切り替わりません・・・
（同時に以前言っていた内側に影のあるコメントフォームができました＾＾）
一応最新のテンプレートのcomments.mhtmlの内容と差し替えてみたんですが、変わらず・・・

もひとつ、これはBzbellさんに聞くべきではないのかもしれないんですが、もしわかればでいいので教えてください。

自分のサイトの殆どの画像は、coener.jsを使用して内側に影をつけています。
メインページ、アーカイブ、タグクラウド、カテゴリ別、月別アーカイブなどでは問題ないんですが、個別の記事ページではなぜかサイドバー（右）にある画像がそのまま表示されてしまっているんです。

お忙しいところ申し訳ないです。
コチラしか聞けるところがなかったので・・・しくしく

 
#49: Posted by Author Profile Page うにからbzbellへの返信 @ October 25, 2008 [REPLY]
user-pic

>>47 bzbell さん

何度もスイマセンです。
textarea に背景とフォーカス時の背景の件ですが、IEだけフォーカス時画像が変わらないみたいです。
IE以外では位置もずれて変になっちゃってました＞＜

 
#50: Posted by Author Profile Page bzbellからうにへの返信 @ October 26, 2008 [REPLY]
user-pic

>>48 うに さん
>>49 うに さん

こんばんわ^^

IE では focus 擬似要素がサポートされてません。
それ以外にも IE では標準的な CSS の機能が使えないものがたっくさんなブラウザなので、うに さんが言われてる IE だけ･･･ってのは正常!? な動作となりますあせあせ
では、IE で focus 擬似要素を使用するには･･･ behavior はご存知でしょうか。
カンタンにいうと CSS 内で JavaScript みたいなスクリプト使用を可能とする、IE 独自の機能です。
よく透過画像を IE でも表示するのに使われてたりします。

そちらを実装してみてはどうでしょうか。以下のページが参考になると思います。
http://blog.livedoor.jp/eeu/archives/55131554.html

またはコメントフォームのタグに onfocus、onblur というイベントを使用してます。
これはフォーカスの IN/OUT それぞれのイベント時に個別の動作を行わせることができます。
これを流用してもいいかもしれませんね。

coener.js の件ですが、やっぱり IE6.x に限った現象のようですね。IE7 や Firefox ではちゃんとエフェクトされてるようです。
原因は･･･う~んちょと分かりませんが、以前わたしのサイトでもご紹介したときは特に問題なかったので、他の JavaScript とブッキングしてるってことないですか!?

 
#51: Posted by Author Profile Page うにからbzbellへの返信 @ October 27, 2008 [REPLY]
user-pic

>>50 bzbell さん

あれ・・・コメント投稿したはずがうまく書けてなかったようで・・・＞＜

>以下のページが参考になると思います。
>http://blog.livedoor.jp/eeu/archives/55131554.html

こちらの記事を参考に組み込んで見ましたが・・・うまく動いてくれてません。
ローカルで実験したときは動作してくれたんですけど、他ブラウザ向けのスクリプトが邪魔してるんでしょうか・・・
夜にでも他ブラウザ向けのスクリプト（onfocus、onblur）をコメントアウトして試してみます。

>またはコメントフォームのタグに onfocus、onblur というイベントを使用してます。
>これはフォーカスの IN/OUT それぞれのイベント時に個別の動作を行わせることができます。
>これを流用してもいいかもしれませんね。

これも試してみたんですが、知識足らずでうまく書けてなかったのか、画像表示すらしないようになっちゃいました＞＜

>他の JavaScript とブッキングしてるってことないですか!?

今回の現象は個別記事ページにだけ起こっている現象なんですが、記事内の画像は正常にエフェクトされているのにサイドバーの画像には掛かっていないという、非常に不思議な現象なんです。

そして個別ページにしかないJavaScriptは恐らく、コメントプレビューの同一ページ表示にしようしているScriptだと思うんです。

こちらも夜にでもコメントアウトして確認してみます。
最悪コメントプレビューを外すってとこでしょうか。
（ウチのサイトにコメントしてくれる人達は、コメントにタグを書くわけではないのでプレビュー不要？）

 
#52: Posted by Author Profile Page bzbellからうにへの返信 @ October 27, 2008 [REPLY]
user-pic

>>51 うに さん

こんばんわ^^

behavior はテンプレート内の HTML ヘッダ内に埋め込む必要があります。
また、behavior の後で focus 擬似要素を定義する必要もあります。そのようにやってますでしょうか。

あと、onfocus、onblur イベントを使う場合には以下のコードでできます。 

function OnFocus() {
var text = document.getElementById('comment-text');
text.style.background = '#背景色 url(イメージ URL) no-repeat right bottom';
}
function Onblur() {
var text = document.getElementById('comment-text');
text.style.background = '#背景色 url(イメージ URL) no-repeat right bottom';
}
 
#53: Posted by Author Profile Page うにからbzbellへの返信 @ October 28, 2008 [REPLY]
user-pic

>>52 bzbell さん

お早い返信ありがとうございます。

onfocus、onblur イベントを使おうと思ったんですが、これはどこに追記すればいいものなんでしょうか。
イマイチよくわからず、＜script type="text/javascript"＞で埋め込んでみましたがうまく動かず・・・

無知ですいませんしくしく
修正箇所を教えていただければ幸いですうるうる

 
#54: Posted by Author Profile Page うにからbzbellへの返信 @ October 31, 2008 [REPLY]
user-pic

>>52 bzbell さん

こんばんわ＾＾
お忙しいようですね。

自力で何とかbehavior で実装する事が出来ました。
コメントフォームからFocusを外しても背景画像が変わらないのが不満ですが、自力ではこれが限界です。

またお時間空いた時にでもonfocus、onblur イベントでの修正箇所教えてください。

 
#55: Posted by Author Profile Page bzbellからうにへの返信 @ October 31, 2008 [REPLY]
user-pic

>>54 うに さん

こんばんわ^^

> 自力で何とかbehavior で実装する事が出来ました。
> コメントフォームからFocusを外しても背景画像が変わらないのが不満ですが、自力ではこれが限界です。

よかったですね (●´∀｀●)
たぶん behavior 後の背景画像の指定( CSS に )に問題があるのだと思います。
ちなみ behavior の実装ができたなら JavaScript は不要ですうぅ～ん

 
#56: Posted by Author Profile Page bzbellからうにへの返信 @ November 4, 2008 [REPLY]
user-pic

>>54 うに さん

こんばんわ^^

このコメントを見られるか分かりませんが、onfocus、onblur をコメントフォームに実装しましたので、改めてテンプレートセットをダウンロードして参考にして頂ければと思いますうぅ～ん

 
#57: Posted by Author Profile Page うにからbzbellへの返信 @ November 6, 2008 [REPLY]
user-pic

>>56 bzbell さん

こんばんわ＾＾

>このコメントを見られるか分かりませんが、onfocus、onblur をコメントフォームに実装しましたので、改めてテンプレートセットをダウンロードして参考にして頂ければと思います

見てます！見てますよ！
わざわざ修正していただき、ありがとうございます。

今回、御礼だけで済ませたかったんですが・・・
画像エフェクトでShadowboxに変更したんですが、IE6での挙動がおかしく、色々確認していたところ、互換モードでは正常に動かないことがわかりまして、本日XML宣言を外してスタイルシートを整えたつもりだったんですが、、、

もしよろしければ教えてください。
onfocus、onblur の効果を確認しようと記事ページを見ようと思ったんですが、ページを表示する事が出来なくなってしまいました。。。
あと、どのページでも同じなんですが、IE6にてCtrl+Fで検索しようとするとエラーが発生してしまうんです。。。

Firefox、Operaなどでは何の問題もないみたいなんですが、IE6だけは崩れちゃうんですよね。
ブログ説明文もTopに表示させるようにしてみたんですが、やはりIE6では表示されなく・・・
（ソースでは書かれているんですが、実際に表示されていなく。。。）

またBzbellさんを頼るかたちになってしまい、申し訳ないです＞＜
不明なエラーの場合は、また１から少しずつ修正してくしかないですよねエーン

 
#58: Posted by Author Profile Page bzbellからうにへの返信 @ November 6, 2008 [REPLY]
user-pic

>>57 うに さん

こんばんわ^^

> 画像エフェクトでShadowboxに変更したんですが、IE6での挙動がおかしく、色々確認していたところ、互換モードでは正常に動かないことがわかりまして、本日XML宣言を外してスタイルシートを整えたつもりだったんですが、、、

わたしのサイトでは IE6( 互換モード )でも shadowbox 使えましたよ。
とはいっても、わたしが使ってる shadowbox は初期のもので、現在のスクリプトは動作が重たいというご連絡をいただいた事があります。
そこら辺にも関係してるのかもしれませんね。

ちなみに標準モードにしてしまうと、レイアウトが崩れると思いますよあせあせ
通常、IE に限っては標準モードで作成するか、互換モードで作成するかによって CSS の書き方が異なります。わたしのサイトでは互換モードで作成してますので、XML 宣言を削除してしまうとそのように弊害がでます。
また、XHTML1.1 Strict では XML 宣言は必須なのでそういった意味でもテンプレートを準拠させてるんです。

ps
mt.js 内の mtCommentFormOnblur、mtCommentFormOnFocus 内に >>52 でご説明した内容を追記すれば目的のことができますよ。

 
#59: Posted by Author Profile Page うにからbzbellへの返信 @ November 6, 2008 [REPLY]
user-pic

>>58 bzbell さん

>わたしのサイトでは IE6( 互換モード )でも shadowbox 使えましたよ。

shadowbox2.0ではIE6で表示する際、ページをスクロールして画像をクリックすると、互換モードではページ上部で表示されちゃうんです。

文字コードがUTF-8を使用している場合にのみXML宣言を省略しても問題ないらしいですが、拡張子をhtmlにしないとIE6ではまた不具合が発生するみたいですね・・・
参考ページ

また画像エフェクト探さないと・・・

>ps
>mt.js 内の mtCommentFormOnblur、mtCommentFormOnFocus 内に >>52 でご説明した内容を追記すれば目的のことができますよ。

ありがとうございます。
とりあえずXML宣言を戻してスタイルシートも修正し、mt.jsとモジュールテンプレートのコメントを修正してみたんですが、何かが足りないんでしょうか。
scripterrorが出てしまってます＞＜
ついでにcaptchaも消えてしまいました・・・

 
#60: Posted by Author Profile Page うに @ November 6, 2008 [REPLY]
user-pic

度々失礼します。

ブログ説明文ですが、IE6以外のブラウザでは正常に表示されているのに、IE6では全く表示されないのは・・・

バナーヘッダーの部分に<font id="pagedescription"><$MTBlogDescription$></font>を追加したんですが・・・（スタイルシートにも追加済み）

 
#61: Posted by Author Profile Page bzbellからうにへの返信 @ November 7, 2008 [REPLY]
user-pic

>>59 うに さん

UTF-8 の時だけ省略可能というのは文字コードの関係からじゃないですかねあせあせ
規約とは関係ないし、CSS にも関係ないと思われまする。

それはおいといて、mt.js 内に追加したコードに変な文字が入ってます。
非常に申し上げにくいのですが、>>52 と比較してよく見てくださいあせあせ

>>60 うに さん

こちらも大変申し上げにくいのですが、うに さん自身で追加したテンプレート、スタイルシートをいろいろイジってみて見比べてみるといいかもですもじもじ
たとえば、font タグを p タグに替えてみるとか･･･。

 
#62: Posted by Author Profile Page うにからbzbellへの返信 @ November 7, 2008 [REPLY]
user-pic

>>61 bzbell さん

追記部分を見比べてみたんですが、うまくいかず、もう自分の知識ではどうしようもなくなってしまったのでmt.jsおよびコメントモジュールを以前のファイルに差し替えて初期化してみたんですが、相変わらず個別記事ページはIE6では表示できないままで・・・・
（検索時のエラーはなくなりました。）

 
#63: Posted by Author Profile Page bzbellからうにへの返信 @ November 7, 2008 [REPLY]
user-pic

>>62 うに さん

こんばんわ^^

  1. テンプレート内に追加した pagedescription の <br> タグを <br /> に変更してみてください。

  2. mt.js 内の mtCommentFormOnFocus() を削除されてますか!? それだとエラーします。
    以下のコードを追加してください。

    function mtCommentFormOnFocus() {
// if CAPTCHA is enabled, this causes the captcha image to be
// displayed if it hasn't been already.
var text = document.getElementById('comment-text');
if ('Leave your comment here.' == text.value) {
text.value = '';
}
mtShowCaptcha();
var text = document.getElementById('comment-text');
text.style.background = '#fff url(bgfocus.gif) no-repeat right bottom';
}
function mtCommentFormOnblur() {
var text = document.getElementById('comment-text');
text.style.background = '#000 url(bgblur.gif) no-repeat right bottom';
}
背景色などはお好みで。
 
#64: Posted by Author Profile Page うにからbzbellへの返信 @ November 8, 2008 [REPLY]
user-pic

>>63 bzbell さん

こんばんわ。

>テンプレート内に追加した pagedescription の
タグを
に変更してみてください。

やってみたんですが、変わらず？

>mt.js 内の mtCommentFormOnFocus() を削除されてますか!? それだとエラーします。
>以下のコードを追加してください。

いえ、削除はしてません。
最初にダウンロードしたmt.jsに差し替えて初期化しただけなので。
教えていただいたコード追記しておきましたが、相変わらずエラーが出るようで、確認すらできず絶望状態です・・・エーン

 
#65: Posted by Author Profile Page bzbellからうにへの返信 @ November 8, 2008 [REPLY]
user-pic

>>64 うに さん

> 最初にダウンロードしたmt.jsに差し替えて初期化しただけなので。教えていただいたコード追記しておきましたが、相変わらずエラーが出るようで、確認すらできず絶望状態です

致命的な JavaScript エラーが出てるようですよ。
jQuery など追加されてるようですがそこら辺の影響は大丈夫ですか!?
絶望的でしたら一度オリジナルに戻して少しずつ変更点を追加／確認してったらどうでしょあせあせ

あと、うに さんが使われてる mt.js 内には、最初っから mtCommentFormOnFocus() が存在しなかったということですか!?
それはおっかしいですねぇガーン

最後に、基本的にカスタマイズ( オリジナルからの変更分 )は自己責任でお願いしまする。
追加／変更したことによる影響は うに さんの方で対処して頂くしかありませんぺこり

 
#66: Posted by Author Profile Page うにからbzbellへの返信 @ November 8, 2008 [REPLY]
user-pic

>>65 bzbell さん

何度も何度も申し訳ないです＞＜

>致命的な JavaScript エラーが出てるようですよ。
>jQuery など追加されてるようですがそこら辺の影響は大丈夫ですか!?
>絶望的でしたら一度オリジナルに戻して少しずつ変更点を追加／確認してったらどうでしょ

はい。まずは追加分のスクリプトを抜いてそれでもだめなら初期状態からやってみます。

>あと、うに さんが使われてる mt.js 内には、最初っから mtCommentFormOnFocus() が存在しなかったということですか!?

いえ、mtCommentFormOnFocus() は元からありました。

>最後に、基本的にカスタマイズ( オリジナルからの変更分 )は自己責任でお願いしまする。
>追加／変更したことによる影響は うに さんの方で対処して頂くしかありません

はい。
申し訳ないです。Bzbellさんに頼りすぎてましたあせあせ

 
#67: Posted by Author Profile Page うにからbzbellへの返信 @ November 9, 2008 [REPLY]
user-pic

Type your comment here.>>65 bzbell さん

こんばんわ。
今回のテンプレートはCoolな色使いでかっこいいですねワクワク

今回の問題の原因はBzbellさんの予想通りShadowboxでした。
今度からは聞くよりも先に自分が追加したものを疑うようにします。
ご迷惑をお掛けいたしました。

画像エフェクトも変更し、正常に表示出来るようになりましたので、報告までにコメさせて頂きました。
まだまだ公開には至らないですが、いらないかもしれませんが、ブログ完全移行の際に報告させていただきます。

今後また何か面白そうな記事を見かけましたら書き込ませてイタダキマス。

色々とありがとうございました。あせあせ

 
#68: Posted by Author Profile Page bzbellからうにへの返信 @ November 9, 2008 [REPLY]
user-pic

>>66 うに さん
>>67 うに さん

こんばんわ^^

ホントだ。表示できるようになりましたね。
JavaScript は魅力的なエフェクトがたくさん配布されてますが、やたらめったら入れてしまうととんでもないことになるので気をつけたほうがいいかもですね。

ところで、例の OnFocus、OnBlur イベントに関してですが、mt.js には組み込まれてるようですが、肝心の「コメント」テンプレートモジュールの方を修正されてないようですよ。

テンプレートセットをダウンロードして comment.mtml の内容を確認して頂ければ分かると思いますやあ！

 
#69: Posted by Author Profile Page うに @ November 29, 2008 [REPLY]
user-pic

こんばんわ。
いつもお世話になってます。うにです。

お陰様で本番環境へリニューアルすることができました。

ひとつ・・・問題が・・・

コメント投稿の際、いくら待ってもコメント完了の表示が出ないんです・・・
原因がわからず、こちらへ書き込ませていただいてます。
記事数が多いから・・・なんでしょうか。
ちなみに、全体の再構築をすると約１５分程かかります。
（回線環境にもよるとは思いますが・・）

もし原因がわかれば教えてください。

JavaScriptエラーが表示されているわけでもなく・・・
お忙しいところ大変申し訳御座いませんが、何卒宜しくお願い致します。

 
#70: Posted by Author Profile Page bzbellからうにへの返信 @ November 29, 2008 [REPLY]
user-pic

>>69 うに さん

こんばんわ^^

確認しましたにこっ！
うに さん結構イジられてるようですねあせあせ
「コメント」テンプレートモジュール内の送信ボタンを以下のように変更してください。 

return ajaxcomment_post('post');
「Post」を「post」に変更してください。 きっとこれで投稿できるようになると思いますよやあ！
 
#71: Posted by Author Profile Page うにからbzbellへの返信 @ November 29, 2008 [REPLY]
user-pic

>>70 bzbell さん

お早い返信ありがとうございます！

>うに さん結構イジられてるようですね

はい！
大分弄ってますキャハハ

>「コメント」テンプレートモジュール内の送信ボタンを以下のように変更してください。

ありがとうございます！
おかげさまで無事コメント投稿することができました＾＾

すいませんもうひとつ。
コメントが改行されなくって＞＜
コチラで追加した即時プレビューさせるスクリプトは外したんですが。。

 
#72: Posted by Author Profile Page うに @ November 29, 2008 [REPLY]
user-pic

おはようございます。

>コメントが改行されなくって＞＜
>コチラで追加した即時プレビューさせるスクリプトは外したんですが。。

すいません、ただ単に設定のコメントフォーマットの問題でした＾＾；

色々と修正してて思ったんですが、IEで動くけどFirefoxでは動作しないってスクリプトが凄いたくさんあるんですよね；；
うちのブログだとコメント即時プレビュー、リンクホバーの動きなど・・・

また気付いたこと、気になる事あったら書き込ませていただきます＾＾
ありがとうございました。

 
#73: Posted by Author Profile Page bzbellからうにへの返信 @ November 29, 2008 [REPLY]
user-pic

>>71 うに さん
>>72 うに さん

おはよございます^^

解決してよかったですね。

> 色々と修正してて思ったんですが、IEで動くけどFirefoxでは動作しないってスクリプトが凄いたくさんあるんですよね；；

えっ!? そうですか!?
今のところそいうケースはわたしはお目にかかってないですあせあせ
IE では動作しないってのは何度かありましたけど･･･。

 
#74: Posted by shp @ February 28, 2009 [REPLY]
user-pic

mt_memo-4.23-pandora3.16
ブログ記事(コメント)
mt/plugins/mt_memo/templates/archives/comment_feed.mtml
28行目からHTML特殊文字になっていますけど
大丈夫でしょうか。

 
#75: Posted by Author Profile Page bzbellからshpへの返信 @ February 28, 2009 [REPLY]
user-pic

>>74 shp さん

> 28行目からHTML特殊文字になっていますけど
> 大丈夫でしょうか。

はい。大丈夫ですふつう

 

 Post a Comment

 

コメント用フィード