お知らせ
2008年4月8日
「Movable Typeプロフェッショナル・スタイル」が発売されました。
Movable Typeの第一線に関わる人々の共著で、Movable Typeをビジネスサイト構築に活かすテクニックが満載です。
Movable Typeでサイト構築を行っているWeb制作会社等の方々にお勧めです。
他にも多数書籍を執筆しています。
こちら
Blog Parts Changer Light for メロ（Flashタブ対応版）
2005年12月3日 メロの世代交代等に対応させたMero Changerを公開しました。
2005年10月14日 「mayumayu's room お気楽Blog☆」で配布されている「ストラップ」の切り替えに対応したMero Changerをリリースしました。
2005年9月29日 スクリプト自動出力機能を搭載した「Mero Changer」をリリースしました。JavaScriptを手動で書き換える必要がなくなり、設置が簡単になりましたので、こちらをお使いください。
門松さんのBlog「雑・日記」で、Flashを利用したメロタブが配布されています。
そこで、「Blog Parts Changer Light for メロ」をFlashタブにも対応させました。
なお、先日公開した「アイテムリスト対応版」では、FirefoxやNetscapeなどでアイテムリストが表示されない不具合がありました。
それも合わせて修正しました。
導入の手順は以下の通りです。
1.サンプルコードのダウンロード
まず、以下のページに接続してください。
実際の動作例と、それに対応したサンプルコードが表示されます。
サンプルコードをすべてコピーして、メモ帳等に貼り付けてください。
2.メロのkeyの設定
手順1.のJavaScriptの中で、5行目の「var mero_id = new Array('・・・', '・・・', '・・・');」のそれぞれの「'・・・'」の部分を、ご自分のメロの「key」に書き換えてください。
keyは、元々のメロ貼り付けスクリプトを見れば分かります。
スクリプトの最後の方に「・・・?key=○○○"></script>」という部分がありますが、「○○○」の部分（32文字の英数字）をコピーします。
例えば、それぞれのメロのkeyが「a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1」「b2b2b2b2b2b2b2b2b2b2b2b2b2b2b2b2」「c3c3c3c3c3c3c3c3c3c3c3c3c3c3c3c3」の方の場合だと、以下のようにします。
var mero_id = new Array('a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1', 'b2b2b2b2b2b2b2b2b2b2b2b2b2b2b2b2', 'c3c3c3c3c3c3c3c3c3c3c3c3c3c3c3c3');
また、メロを2種類だけ切り替える場合は、「, '3つ目のkey'」の部分を削除してください。
例えば、keyが「a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1」「b2b2b2b2b2b2b2b2b2b2b2b2b2b2b2b2」の2つのメロを切り替え表示したい場合は、この行を以下のように書きます。
var mero_id = new Array('a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1', 'b2b2b2b2b2b2b2b2b2b2b2b2b2b2b2b2');
3.タブの差し替え（GIFやJPEGを使う場合）
メロのタブをGIFやJPEGの画像に変えたい場合は、コードの6行目と7行目を書き換えます。
・6行目「var mero_mouseout_img = new Array(・・・);」
・7行目「var mero_mouseover_img = new Array(・・・);」
6行目には、タブをマウスで指していないときの画像のURLを指定します。
また、7行目には、、タブをマウスで指しているときの画像のURLを指定します。
それぞれURLを入れるところが3つありますが、１つ目～3つ目のそれぞれのメロに対応しています。
4.タブの差し替え（Flashを使う場合）
メロのタブをFlashにしたい場合は、コードの9行目～13行目（以下参照）を書き換えます。
var mero_tab_html = new Array( '・・・', // 1つ目のFlash表示HTML '・・・', // 2つ目のFlash表示HTML '・・・' // 3つ目のFlash表示HTML );
門松さんのFlashを使う場合は、サンプルのコードの中にある「http://www.foo.com/bar/merotch3.swf」「http://www.foo.com/bar/mofutch2.swf」を、ご自分のFlashのアップロード先のURLに変えてください。
それ以外のFlashを使いたい場合は、各行の「・・・」の部分を、Flashを表示するためのHTMLに変えます。
その際、HTMLの途中に改行があるときは、改行をすべて削除してHTMLを1行につなげます。
また、HTMLの中に「'」の文字がある場合は、それを「\'」に変えます。
5.通常画像／Flashの設定
タブとして通常画像（GIFなど）／Flashのどちらを使うかを、コードの14行目で指定します。
・14行目「var mero_tab_ishtml = new Array(1, 1, 1);」
括弧の中に「1」が3つありますが、この設定ではタブとしてFlashが表示されます。
また、これらを「0」に変えると、タブとして通常画像が使われます。
メロごとに、通常画像とFlashを混在させることもできます。
例えば、「var mero_tab_ishtml = new Array(1, 0, 0);」にすると、1つ目のメロはタブがFlashになり、2つ目と3つ目は通常画像になります。
6.アイテムリストの設定
アイテムリストを表示する場合は、16行目～20行目を書き換えます。
var mero_itemlist = new Array( '・・・', // 1つ目のアイテムリストのコード '・・・', // 2つ目のアイテムリストのコード '・・・' // 3つ目のアイテムリストのコード );
「・・・」の部分に、アイテムリストを表示するためのコードを入れます。
コードの書き方は、門松さんのBlog「雑・日記」で解説されている通りです。
なお、アイテムリストを表示しない場合は、24行目の「var mero_use_itemlist = 1;」を「var mero_use_itemlist = 0;」に変えてください。
7.アイテムリストFlashのURLの設定
アイテムリストを表示する場合、そのFlashのURLも指定する必要があります。
25行目の「var mero_itemlistswf_url = 'http://www.foo.com/bar/itemList02.swf';」の文を書き換えて、URLを指定します。
「http:://～」の部分に、ご自分のFlashのアップロード先URLを入れます。
8.ランダム表示の設定
メロをランダムに表示させたい場合は、以下の2箇所を設定します。
・22行目「var mero_first_no = -1;」
ページを開いたときに、最初に表示するメロを指定します。
このまま変更しないと、ページを開くたびにメロがランダムに選ばれて表示されます。
ランダムではなく、常に1つ目のメロを表示する場合は、最後の「-1」を「0」に変えてください。
また、2つ目のメロなら「1」、3つ目のメロなら「2」に変えてください。
・23行目「var mero_interval = 30000;」
ページを開いている間にも、メロをランダムに切り替えて表示するかどうかを指定します。
このまま変更しないと、30秒ごとに切り替え表示します。
「30000」のところを変えると、切り替えの間隔が変わります（1000分の1秒単位です）。
例えば、1分（60秒）おきに切り替え表示するなら、ここを「60000」に変えます。
また、ここを「0」にすると、ページ表示中のランダム表示は行いません。
9.リンクの設定
コードの最後の方にある「<a href="#" onclick="show_mero_main(0); return false;">メロッチョ</a><br />」の行で、「メロッチョ」などの部分をご自分のメロの名前に変えてください。
10.コードの貼り付け
ご自分のBlogのテンプレートに、ここまでで設定したJavaScriptを貼り付けてください。
11.ランダム表示オン／オフ切り替えチェックボックスの貼り付け
ページ表示中にメロをランダム切り替え表示するようにすると、コメントの入力に支障が出ることがあります。
その場合は、ランダム表示のオン／オフを切り替えられるように、チェックボックスをつけておくことをお勧めします。
手順10.のコードの下のあたりに、以下のHTMLを追加してください。
<form name="bpcl_mero_random">
<p><input type="checkbox" checked name="random" onClick="if (document.bpcl_mero_random.random.checked) { mero_random_on(); } else { mero_random_off(); }"
>ランダム表示</p>
</form>
なお、Movable Typeなどのように、テンプレートを自由に編集できる場合は、チェックボックスを使わずに、コメント入力フォームのあるテンプレート（通常は個別アーカイブテンプレート）では、ランダム表示を無条件にオフにする方が良いでしょう。
対象のテンプレートを開き、手順6.のJavaScriptの後に、以下のJavaScriptを入れます。
<script language="javascript" type="text/javascript"> <!-- mero_random_off(); //--> </script>
12.クレジットバナーの貼り付け
「Blog Parts Changer Light for メロ」のクレジットバナーを作っていただきました。
ご自分のBlogに、クレジットバナーを貼り付けていただければ幸いです。
貼り付け方はこちらを参照してください。
13.注意事項
設置の際には以下の点にご注意ください。
・改行の自動変換をオフにする
レンタルBlogでは、「自由なHTMLを追加する」といった機能を使って設置することになります。
その際、「改行を自動的にbrタグに変換する」というような設定項目があったら、それはオフにしてください。
・Macをお使いの方
上記の2.の手順でJavaScriptをダウンロードする際には、Safariは使わないでください（文字化けが起こるため）。
FireFox等の他のWebブラウザをお使いください。
前後の記事
関連するエントリー(3件)
- Mero Changer（5種切り替え対応等）リリース(2005年12月03日 00:51)
- アニメーションGIFに関する不具合修正(2005年09月26日 08:53)
- メロアイテムリストの導入支援ページ(2005年09月05日 09:46)
トラックバック(6件)
このブログ記事を参照しているブログ一覧: Blog Parts Changer Light for メロ（Flashタブ対応版）
このブログ記事に対するトラックバックURL: http://www.h-fj.com/mt/mt-tb.cgi/264.
雑・日記さんで配布されている『メロッチのモフダンシンバージョン』がとっても可愛い... 続きを読む
雑日記 様で配布しているＦＬＡＳＨ看板とアイテムリストを ＤＬし、設置しました。 メロッチとモフダンシンバージョンの２種類があり、時計付。 切り替えしてみ... 続きを読む
また、可愛い素材を見つけてしまいました と言っても、以前からお世話になっています雑/日記様で新しく配布されているダンシングモフちゃんです。（モフちゃんに切... 続きを読む
The blog of H.Fujimotoサマを何気に見ていたら Blog Parts Changer Light f... 続きを読む
今日 一気に復活させたブログパーツ、最後は メロメロパーク です。 The bl... 続きを読む
メロメロパークのタブをチェンジしました 見て〓見てっっ！！ ダンシンモフモフにゃりよ マウスオーバーさせてみて モフモフがトラボルタばりにポーズ決め... 続きを読む
コメントはスレッド表示になっています。
また、スレッドの先頭のコメントに対する返信には、先頭に矢印を表示しています。
はじめまして(・∀・)メロッチ早速付けることができました！メロの切り替えもアイテムリストの切り替えもメロッチも出来るなんてうれしいです♪ほんとに(TдT) ｱﾘｶﾞﾄｳｺﾞｻﾞｲﾏｽ！
こんにちは。
早速使わせていただきました。
いつも“欲しい”と思うものを作ってくださって、ありがとうございます。
本当に、足を向けては寝られません！（・・・たぶん、向けてないと思います。;^_^A ）
ありがとうございました。
壱さん、早速作ってくれてありがとうございました。
催促しちゃって・・・お体の方は、大丈夫ですか？
本当に嬉しくて、感謝しています。
設置もわかりやすくて、簡単でした。
ありがとうございました。
早速、わたしもメロを３匹に増やしてみることにしました。
３匹にふやすことはできたのですが、
どうもうまく設置することができません。
アイテムリストがうまく表示されないし、メロメロパークのタグもうまく表示されません・・・・。
なにが原因なのかも、さっぱり分かりません・・・・。
macでは調子が悪いと思い、winで設置はしたのですが・・・だめでした。
おチカラを貸してください。
(-人-)お願いします。
悩み解決しましたっ。
パソコン初心者には、かなり、いっぱいいっぱいの作業でした。
ふぅ～、おつかれさん。わたしって感じです。
また、いろいろアドバイス求めて、ここにきます。
いつも参考にさせていただいてます。お世話になってます。
ありがとうございます。
上のように設置してみたのですが、アイテムリストの看板に表示されるメロッチたちの顔と通常（何もカスタマズしてない状態）の表示が合いません。
どうすれば合いますか？？お力貸してください。
お願いします。
こんばんは！
お忙しいところ、flash版切替チェンジャーのリクエストに早速対応していただきまして有難うございます(^^)
その上、私が望んでいたのは、画像とflashの混合版なのです！感激！！早速、設置させていただきました。有難うございました。
＞かづさん
こんにちは。
そちらのページを拝見しました。
アイテムリストを指定する部分を、以下のように変えてください。
1.1つ目の先頭にある「meromero=1」を「meromero=3」に変える
2.3つ目の先頭にある「meromero=3」を「meromero=1」に変える
壱さん、さっそくのお返事ありがとうございます。
今、直りました。
本当にありがとうございます。
メロの友達申請してもいいですか？？
初めまして。
今、タグを参考にして
やってみたのですが・・
メロメロのタブの画像URLを
どこに入れていいのかわかりません。
お手数ですが、宜しくお願いします
＞gonさん
こんにちは。
画像のURLは、スクリプトの6行目と7行目に入れます。
6行目は通常表示用の画像で、7行目はタブにマウスを当てているときの画像です。
「http://meropar.jp/img/logo_blog_1.gif」のようにすでにURLが入っていますが、これはメロメロパーク標準の画像のURLです。
他の画像を使うときは、上記のURLを消して、その代わりに表示したい画像のURLを入れます。
こんばんわ
お返事ありがとうございました
何とか、設置できました
大変助かりました
また何かありましたら、宜しくお願いします
壱さん、こんにちわ。
Flashタブ対応版お借りしました。
混合で使えるというのがスゴイですよね。
ありがとうございます。
こんにちは。
メロメロパーク、復活させました。
こちらを参考にさせていただきました。
ありがとうございました。
こんにちは。
素人の私でもすぐにできるので、
いつも助かってますヽ(=´▽`=)ノ
門松さんのダンシングモフを使うため、
またまたお世話になりました。
ありがとうございました
いつもお世話になっております。
Flashタブ対応版お借りしました。
やっと設置する事ができました。
ありがとうございました。
初めまして。
雑・日記さんのメロッチ設置したくてこちらのお邪魔させていただいてるのですが・・・
拡張子は.swfでないと無理なのでしょうか？
ヤプログを利用しているのですが、.gifか.jpgのみアップロード可能サイトなので、あきらめるしかないのでしょうか？
初心者なので、どうもこの拡張子とやらに悩まされてます
お力いただけるとうれしいのですが・・・
おねがいします。m(_ _)m
＞るぅママさん
こんにちは。
以下のようにすれば、ヤプログでもメロッチを表示することができると思います。
1.門松さんのところからメロッチのFlashをダウンロードする
2.1.のファイル名の最後の「.swf」を「.gif」に変える
3.ヤプログに2.のファイルをアップロードする
4.Blog Parts ChanerのFlashタブのHTMLを指定する部分で、「.swf」の箇所を「.gif」に書き換える
ありがとうございます!!
早速、今日の夜中にでも
子供を寝かしつけてから
取り組んでみたいと思います
無知ながらに頑張ります!!
また報告いたします。
ありがとうございました
最終的に
SHAKARIKIのかげちよさんに手伝ってもらって（いやいや、タグ作ってもらってが正しい）なんとか設置できました！!
壱さんに助言してもらってなかったら、完全に諦めてたので
本当に感謝してます。
本日の記事に壱さんのこととりあげますね（TBします）
本当にありがとうございました
はじめましてこんにちは^∀^
３人のメロに挑戦し
で…出来ましたぁ(T∀T)
本当にありがとうございましたm(_)m
こちらの記事を参考にメロの切り替え作業させていただきました。
「導入支援ページがあるから素人の私でも簡単だったわ」と知人に聞いていましたが、私の環境では導入支援ページが文字化けしてしまい、使うことが出来ませんでした。
約半日ががりの作業でした＾＾；
でも念願のメロチェンジが出来て、今は満足感でいっぱいかな＾＾
ありがとうございました。
はじめまして。
こちらでメロチェンジャーを利用させていただき無知な私にも
やっとこメロの切り替え・ストラップ等を設置することが出来感謝しております
アイテムリストも設置したいと、昨日からこちらのコメント等を参考にさせていただき苦戦しているのですが出来ません。他にも自分なりに検索して調べて試してみたのですがお手上げ状態なのです
私はヤプログを利用しているのでコメントを参考に.swfを.gifに変えてアップしようとしたところ『ファイル形式が無効です』とエラーメッセージが出てしまいました
メロのアイテムなどまだほとんど持っていないのですが、かわいいアイテムリストを設置できたら・・・と願っているところです。
お忙しい中申し訳ございませんがアドバイスをいただけたら幸いです。よろしくお願いします。
早々にコメントを頂け感謝致します。
アドバイスどおり試しましたが、・・・無効ですのエラーメッセージが出て記事作成ページに画像は全くアップロードされていないようです。×すら出ていませんでした
アイテムリストを解凍した後、.swfの拡張子を変更するのはファイルを右クリックして名前の変更で.gifに変更しているのですがそれが間違いなのでしょうか？
申し訳無いですが再度お願いいたします・・・。
＞みぃさん
おそらく、お手持ちのパソコンでは、ファイルの拡張子を表示しない設定になっていると思います。
以下のページを参照いただいて、拡張子を表示する設定に変えてから、アイテムリストの拡張子をswfからgifに変えてアップロードしてみてください。
http://support.microsoft.com/kb/882195/JA/
壱さん こんにちは
ファイルの拡張子の件ですが確認してみましたところ表示する設定になっていました。
念のため参考にさせていただきながら確認してみました。
再度アップロードしてみましたが、やはり『ファイル形式が無効です』と表示されてしまいます。
やはりヤプログの場合他のサーバーにアップする等しないと無理なのでしょうか・・・。
＞みぃさん
こんにちは。
ヤプログのファイルアップロードの画面で、「アップロード画像」の欄の右にある「参照」ボタンをクリックして、ファイル選択画面でアップロードしたいファイルを選ぶと、選んだファイル名が「アップロード画像」の欄に表示されます。
そのファイル名の最後が「～.gif」で終わっているかどうかを確認してください。
壱さん
昨日から何度も本当にすみません・・・
確認しましたところ.gifになっていました。
解凍したファイルが破損しているとかなのでしょうか・・・
何度もDLしなおして挑戦しているのですが・・・
＞みぃさん
こんにちは。
他のファイルで拡張子をgifに変えてアップロードしてみたところ、エラーが出るものもありました。
ということで、拡張子をgifにしても、アップロードできない場合もあるようです。
やはり、根本的には、他のサーバーにFlashをアップロードするのが解決策になると思います。
壱さん お忙しい中何度も何度も
お手数をおかけしました。
これ以上のことは私には無理なようなので
アイテムリストは諦めようと思います。
本当に有難うございました。
はじめまして。こちらの手順に従って設定しましたが、「４．タブの差し替え」から説明が分かりません。３つのFlashのHTMLも何を指しているのか良くわからないです。私はniftyのココログを使っています。パソコン初心者でお恥ずかしいです。お手数ですがFlashで設定したいのでご教授をよろしくお願い致します。
＞mihoさん
こんにちは。
現在は、設定がより簡単な「Mero Changer」を出していますので、そちらをお使いください。
http://www.h-fj.com/blog/bpcm.php
こんばんは！
何度もお邪魔します。
先日ブログに関する本を購入し、用語など基本を勉強しました。その後、サポートページで設定してみましたが、
メロの名前と住所のみ表示され他に画像は何も出ませんでした。
もしかしたらココログのプランによって表示できないかもしれないです。ちなみに私のココログプランはプラスです。
何か分かりましたら教えて下さい
＞mihoさん
こんにちは。
名前と住所のみとのことですが、メロ本体も表示されていないということでしょうか？
ちなみに、ココログでもMero Changerは使うことができるはずです（実際に使っている方がいらっしゃいます）。