お知らせ

WordPressで学ぶPHPとMySQL2009年9月23日

WordPressで学ぶPHPとMySQL」を発売しました。
「WordPressをカスタマイズしたいけど、PHPやMySQLが分からなくて躓いている」という方のための、PHPとMySQLの入門書です。
WordPressでWeb製作をされている方などにお勧めです。
PDFによる販売で、当サイトでのみ購入できます(書店では購入できません)

他にも多数書籍を執筆しています。
こちらもぜひご覧ください。

Blog Parts Changer Light for メロ(アイテムリスト対応版)

| コメント(41) | トラックバック(6)

2005年12月3日 メロの世代交代等に対応させたMero Changerを公開しました。

2005年10月14日 「mayumayu's room お気楽Blog☆」で配布されている「ストラップ」の切り替えに対応したMero Changerをリリースしました。

2005年9月29日 スクリプト自動出力機能を搭載した「Mero Changer」をリリースしました。
JavaScriptを手動で書き換える必要がなくなり、設置が簡単になりましたので、こちらをお使いください。

2005年8月27日 Flashタブ対応版をリリースしました。

門松さんのBlog「雑・日記」で、メロのアイテムリストを表示するFlashが配布されています。
あちこちのBlogで、アイテムリストを見かけることが多くなりました。

そこで、「Blog Parts Changer Light for メロ」を、アイテムリストの表示にも対応させました。
メロを切り替えると、同時にアイテムリストも切り替わるようにすることができます。
また、アイテムリストのFlashには「RING付きバージョン」とそうでないものがありますが、どちらもお使いいただくことができます。

なお、アイテムリストを使わない方は、これまでのBlog Parts Changer Light for メロをそのままお使いいただいてかまいません。

設置の手順は以下の通りです。

1.divタグを入れる

メロを表示する先のテンプレートを開き、メロを表示する位置(元々のメロコードを入れている位置)に、以下のタグを入れてください。また、元々のメロコードは削除してください。

<div id="bpcl_mero"></div>

さらに、アイテムリストを表示する位置に、以下のタグを入れてください。

<div id="bpcl_mero_itemlist"></div>

2.JavaScriptのダウンロード

こちらのページに接続してJavaScriptを表示し、内容をすべてコピーして、メモ帳等に貼り付けてください。

3.メロのkeyの設定

手順2.のJavaScriptの中で、3行目の「var mero_id = new Array('1つ目のkey', '2つ目のkey', '3つ目のkey');」の「1つ目のkey」「2つ目のkey」「3つ目のkey」を、メロの「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');

4.タブの差し替え

メロのタブを自分の好きなものに変えたい場合は、スクリプトの4行目と5行目を書き換えます。

・4行目「var mero_mouseout_img = new Array(・・・);」
・5行目「var mero_mouseover_img = new Array(・・・);」
4行目には、タブをマウスで指していないときの画像のURLを指定します。
また、5行目には、、タブをマウスで指しているときの画像のURLを指定します。
それぞれURLを入れるところが3つありますが、1つ目~3つ目のそれぞれのメロに対応しています。

5.アイテムリストの設定

アイテムリストを表示する場合は、9行目~11行目の「'1つ目のアイテムリスト'」などの部分に、アイテムリストを表示するためのコードを入れます。

コードの書き方は、門松さんのBlog「雑・日記」で解説されている通りです。
コード内の「param name="FlashVars" value="・・・"」の部分でアイテムリストを指定しますが、この「・・・」の部分をコピーして、「1つ目のアイテムリスト」などのところに入れます。

6.アイテムリストFlashのURLの設定

アイテムリストを表示する場合、そのFlashのURLも指定する必要があります。
17行目の「var mero_itemlistswf_url = 'http://www.somedomain.net/somedir/itemList02.swf';」の文を書き換えて、URLを指定します。
「http:://~」の部分に、ご自分のFlashのアップロード先URLを入れます。

7.ランダム表示の設定

メロをランダムに表示させたい場合は、以下の2箇所を設定します。

・14行目「var mero_first_no = -1;」
ページを開いたときに、最初に表示するメロを指定します。
このまま変更しないと、ページを開くたびにメロがランダムに選ばれて表示されます。
ランダムではなく、常に1つ目のメロを表示する場合は、最後の「-1」を「0」に変えてください。
また、2つ目のメロなら「1」、3つ目のメロなら「2」に変えてください。

・18行目「var mero_interval = 30000;」
ページを開いている間にも、メロをランダムに切り替えて表示するかどうかを指定します。
このまま変更しないと、30秒ごとに切り替え表示します。
「30000」のところを変えると、切り替えの間隔が変わります(1000分の1秒単位です)。
例えば、1分(60秒)おきに切り替え表示するなら、ここを「60000」に変えます。
また、ここを「0」にすると、ページ表示中のランダム表示は行いません。

8.JavaScriptの貼り付け

手順1.のdivタグの後に、ここまでで設定したJavaScriptを貼り付けてください。

9.メロ切り替えリンクの貼り付け

手順8.のJavaScriptの後に、メロを切り替えるためのリンクとして、以下を貼り付けてください。
「1つ目のメロの名前」等の部分は、ご自分のメロに合わせて変えていただくことができます。

<a href="#" onclick="show_mero_main(0); return false;">1つ目のメロの名前</a>
<a href="#" onclick="show_mero_main(1); return false;">2つ目のメロの名前</a>
<a href="#" onclick="show_mero_main(2); return false;">3つ目のメロの名前</a>

10.ランダム表示オン/オフ切り替えチェックボックスの貼り付け

ページ表示中にメロをランダム切り替え表示するようにすると、コメントの入力に支障が出ることがあります。
その場合は、ランダム表示のオン/オフを切り替えられるように、チェックボックスをつけておくことをお勧めします。
手順9.のリンクの下のあたりに、以下の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>

11.クレジットバナーの貼り付け

「Blog Parts Changer Light for メロ」のクレジットバナーを作っていただきました。
ご自分のBlogに、クレジットバナーを貼り付けていただければ幸いです。
貼り付け方はこちらを参照してください。

12.注意事項

設置の際には以下の点にご注意ください。

・改行の自動変換をオフにする
レンタルBlogでは、「自由なHTMLを追加する」といった機能を使って設置することになります。
その際、「改行を自動的にbrタグに変換する」というような設定項目があったら、それはオフにしてください。

・Macをお使いの方
上記の2.の手順でJavaScriptをダウンロードする際には、Safariは使わないでください(文字化けが起こるため)。
FireFox等の他のWebブラウザをお使いください。

トラックバック(6)

トラックバックURL: http://www.h-fj.com/mt/mt-tb.cgi/253.

Best smile~笑顔が好き~ - 三種切り替え (2005年8月17日 17:12)

久しぶりのメロちゃん関係の記事ですぅ!!休み前になんとなくメロメロパーク三種飼う事にしましたが、全く時間無くて放置していました。今日、やっと設置してみる事にしま... 続きを読む

以前の記事で メロ3種飼いたかったので切り替えスクリプトのあるサイトさんを紹介し 続きを読む

病院行く前にもうちょっと麦藁帽子あるかしらと思ったら 最後の1個だった53号を... 続きを読む

メロちゃんの素材って沢山ありますよね^^ アタシも沢山つけているが… めっさかわ 続きを読む

この間から他の種類を育ててみたいと思いつつ2匹登録してしまいました登録したのはいいけどアイテムリストも一緒に切り替えたいと思ってYahooで検索しちゃいま... 続きを読む

ウキキラが「やんちゃざかり」に成長しましたぁ「ししゅんき」まではまだまだだけど、何色に変わるかいまから楽しみアイテムも続々と増えていま?す今日は「雑・日記... 続きを読む

コメント(スレッド41件,コメント41件)

コメントはスレッド表示になっています。
また、スレッドの先頭のコメントに対する返信には、先頭に矢印を表示しています。

No.1 門松 : (無題)

アイテムリストサポート大変ありがたいです。当方のページに、このページをリンクさせてよろしいでしょうか。
これから外に出てしまうので、挨拶が手短になってしまうことをお許し下さい。

PS:config.sysの本を買ったかもしれません。子供の頃持っていたDA2は、いかにメモリをつかわないようにするかを楽しむマシンになっていた気がします。
あと、wizardV3用でした。

No.2  : (無題)

>門松さん
こんにちは。

リンクはもちろん大歓迎です。こちらこそよろしくお願いいたします。

P.S.
config.sys本は私のデビュー作なので、それを読んでいただいたのは、非常に嬉しいです。

No.3 スマイル : (無題)

昨日コメントを残したつもりでしたがミスしていたようです。三種切り替えチェンジャーアイテムリスト対応版お借りしました。有難うございました。ブログリストに追加させてもらっても宜しいでしょうか?記事の中でリンクさせていただきます。よろしくお願いします。

No.4  : (無題)

>スマイルさん
こんにちは。ご利用ありがとうございます。
MyBlogListへの追加はもちろん大歓迎です。

No.5 スマイル : (無題)

うまく設置できたと思ったら、下にページエラーとでてきます。見かけ上は問題ないように思うのですが何かおかしいでしょうか?このままでは問題でしょうか。

No.6  : (無題)

>スマイルさん
こんにちは。

そちらのページを拝見しましたが、「<div id="bpcl_mero_itemlist"></div>」のタグがJavaScriptの後にあります。
このタグをJavaScriptの前に移動すれば、エラーは出なくなるはずです。

No.7 スマイル : (無題)

チェックしてくださいまして有難うございます。ちゃんと表示されました。嬉しい、感謝です。本当に有難うございました。

No.8 ぽむ : (無題)

こんにちは。
実は前々からこれが欲しくて、壱さんにお願いしようかと迷っていたところでした。
さっそく設置しました。
おかげさまで上手く表示されているようで、うれしいです。
ありがとうございました。

No.9 ayabittann76 : (無題)

こんにちは
わざわざコメント残していただきありがとうございました
早速この前の切り替えよりこちらに変更してみました あほなので相変わらず悩みましたが…すぐに解決し設置できました ありがとうございました TBもしました
多少またスクリプト記載させていただきましたがすみません これからもよろしくお願い致します

No.10 スマイル : (無題)

おはようございます。
雑/日記様が配布されてる新しいモフメロッチ(swf)を設置する場合、メロタブのアドレス部分にどの部分を貼り付けたらよろしいでしょうか?

No.11  : (無題)

>スマイルさん
こんにちは。

タブとしてFlashを表示するには、スクリプトを作り変える必要があります。
後日対応したいと思いますので、今しばらくお待ちください。

No.12 スマイル : (無題)

今のものとは別の者になるんですね(^^)えっと、せっかく今回設置できたのでこのままにしておこうかと思います(^_^;)ありがとうございました。

No.13 瑞恵 : (無題)

初めまして。
メロを増やしたので、
早速こちらのスクリプトを使わせていただきました。
無事設置できたみたいで安心しています(´▽`) ホッ
どうもありがとうございました♪

No.14 マリモ : (無題)

初めまして、こんばんは!
ここのお陰で、どうにか設置することができました~♪
すごく助かりました!!
ありがとうございました☆

No.15 ayabittann76 : (無題)

すみません お久しぶりです 再度質問なのですが…急に切り替えが出来なくなってしまいました
メロのストラップもつけていますが少々変更したところ(ストラップが普段ゆれているのですが…そのゆれが切り替わるたびに止まってしまうので)切り替えがきかなくなりました しかも元に戻したのに出来ません 正直なんでなのかもいっくら調べてもわからず一からやり直して正しくしても同じ結果になります もうお手上げ状態でして…もしお時間があれば確認していただけませんでしょうか…いつもいつもすみません…

No.16  : (無題)

>ayabittann76さん
こんにちは。

ページを拝見しましたが、メロの切り替えのリンクのタグが、「<href・・・」になっています。
「<a href・・・」にすれば動作します。

No.17 ayabittann76 : (無題)

あ…また初歩的なミスを…
情けないです そこでしたか…
ホンマ感謝です 無事動作しました^^ありがとうございました^^

No.18 mi-☆ : (無題)

はじめまして。
切り替えスプリクトを挿入させていただきたくチャレンジしているのですが、、、
上手くいきません。
ページエラーになってしまいます・・・
IDが間違えているのか・・・
http://nakayoshi-msr.com/mero.txt
挿入したソースが↑です・・・
何が間違えているのかさっぱりわからず・・・
お忙しい中大変申し訳ございませんが教えていただけないでしょうか???
よろしくお願い致します。

No.19  : (無題)

>mi-☆さん
こんにちは。
以下の点を修正してください。

1.「var mero_itemlist = new Array(・・・」の部分で、「'2つめのアイテムリスト',」の最後の「,」を削除してください。
2.ソースの最後の方に「<div id="bpcl_mero">」のタグがありますが、これをスクリプトより前に移動し、「</div>」のタグを追加してください。
3.メロを切り替えるタグの後(「</a>」の後)に、「<br />」のタグを追加して、改行するようにした方が良いと思います。
4.アイテムリストを表示するのであれば、アイテムリストのコードと、FlashのURLも指定する必要があります。

No.20 mi-☆ : (無題)

壱様
ご丁寧、ご親切に教えていただき、ありがとうございました。
お陰様で出来ましたぁ(*- -)(*_ _)ペコリ
しかも・・・アイテムリストは持っていないのにこちらの記事を見ておりました。
本当にありがとうございましたぁ~
勝手ながらトラバさせていただきました。

No.21 のり : (無題)

こんばんわぁ。また、お世話になりました。
アイテムリストを並べて設置してましたが、やっと切り替えができるようなりました。
ありがとぅございました。

No.22 りょっこん : (無題)

初めまして・・・
この度Blog Parts Changer Light for メロ(アイテムリスト対応版)を使わせていただいたのですが、メロを切り替えるたびに画面上の他の動いている絵が止まってしまいます。
設置の仕方に何か問題があるのでしょうか?
教えていただければ幸いと思います。よろしくお願いします。

No.23 りょっこん : (無題)

書き忘れました・・・。
手順10は必ずやった方がいぃのでしょうか?
やらなくても問題はないですか?

No.24  : (無題)

>りょっこんさん
こんにちは。

ご指摘の件について、以下のページに修正方法を書きました。

http://www.h-fj.com/blog/archives/2005/09/26-085339.php

なお、手順10はページ表示後にもメロをランダム表示する場合のみ必要です。

No.25 ばにら : (無題)

はじめまして。
メロを3匹にしたのでBlog Parts Changer Light for メロ(アイテムリスト対応版)お借りしました。
アイテムも一緒に切り替えになるのでとってもうれしぃです。
TBさせていただきます音符
ありがとうございました。

No.26 あくび : (無題)

こにちゎ~音符
今回ブログの引越しでアイテムリスト対応スクリプトをお借りしようと再度お邪魔したら
以前より簡単に設置できるようになっててびっくり!
自分であとから修正するとどうしても改行や変なのが入っちゃって設置まで時間かかるのに
あっという間にできましたハート
ありがとうございます~ダブルハート

今回マイブログリストに登録させて頂きました音符

No.27  : (無題)

>あくびさん
こんにちは。

Mero Changerをご利用いただき、ありがとうございました。
私が気づいた限りでは、Mero Changerご利用第1号です。

また、Movable Type&小粋空間テンプレートに移行されたようで、お疲れ様でした。
こちらではMovable Typeのプラグインも公開していますので、それらもご利用ください。

No.28 Riko : (無題)

OperaやNetscape7.1で表示確認をしたところ、アイテムリストが表示されていなく
ジャバスクリプトを見直したところ、訂正必要個所がありましたので書込みさせて頂きました。
52行目の html += 'OperaやNetscape7.1で表示確認をしたところ、アイテムリストが表示されていなく
ジャバスクリプトを見直したところ、訂正必要個所がありましたので書込みさせて頂きました。
52行目の html += ' html += '

No.29 Riko : (無題)

やっぱり書き込み出来ませんでしたね^^;
52行目のembed src="' + mero_itemlist[id] + '"が
embed src="' + mero_itemlistswf_url + '"です。

No.30  : (無題)

>Rikoさん
こんにちは。

ご指摘ありがとうございます。
なお、現在ではスクリプトを「Mero Changer」にバージョンアップしていますが、そちらではご指摘の件はすでに対応済みです。
今後はMero Changerをお使いください。

No.31 mi-☆ : (無題)

こんにちわ、アイテムリストを表示させたくて悪戦苦闘しております汗
何故だかページエラーになってしまいます・・・
http://nakayoshi-msr.com/mero.txt
挿入したソースが↑です・・・
お忙しい所大変恐縮ですが、ご指摘いただけたら幸いです。
よろしくおねがい申し上げます。

No.32 mi-☆ : (無題)

こんにちわ、アイテムリストを表示させたくて悪戦苦闘しております汗
何故だかページエラーになってしまいます・・・
http://nakayoshi-msr.com/mero.txt
挿入したソースが↑です・・・
お忙しい所大変恐縮ですが、ご指摘いただけたら幸いです。
よろしくおねがい申し上げます。

No.33  : (無題)

>mi-☆さん
こんにちは。

JavaScriptを自動出力する「Mero Changer」を出していますので、そちらをお使いください。

http://www.h-fj.com/blog/archives/2005/10/14-120147.php

No.34 mi-☆ : (無題)

毎度毎度申し訳ございません。。。

のタグの挿入場所が間違えておりました汗
無事設置できましたぁ~
いつもありがとうございます。

No.35 チョコファジ : (無題)

メロチェンジャー愛用させていただきてます(*´∀`*)
しかし私もページのしたにエラー
という風に書いてあるんですよね…
見かけ上は大丈夫な気がするんですが
ランダムで20秒にいっかい切り替わらないし
問題点は225行目と書いてあって
ソースでそこを読んでも間違いがわからないし_| ̄|○
心優しいからヘルプしてくださぃ
お願いします(´・д・)(´-д-)(´_ _)ペコリ汗

No.36  : (無題)

>チョコファジさん
こんにちは。

スクリプト部分(<script>~</script>)を、「<!-- アイテムリスト終了 -->」の後に移動すれば、エラーは出なくなります。

ただし、現在は最新の「Mero Changer」をお勧めしています。
Mero Changerでは、スクリプトを自動で出力することができ、設置がより簡単です。

http://www.h-fj.com/blog/archives/2005/10/14-120147.php

No.37 チョコファジ : (無題)

>壱様
返信おそくなってしまってすいません。
最新の機能があったのですね(´∀`;)
活用させていただき無事にエラーが出ない
ページを作る事ができました(*´∀`*)
本当にありがとうございました。

No.38 綾乃桜子 : (無題)

☆どうやっても・・・><;汗。flashのURLが・・・・
っていうか・・・根本的に 判ってないので・・・・・・
教えてほしいんですが・・・。嫌な感じ
用は、このアイテムリストとやらを付けたいのですBlogに
その過程の画像のダウンロードが出来ないんです・・・
flashのソフトって 別に必要なんですか?またよくメロ画像
をコピーしてますよね?!みなさん・・・あたしの場合できないんですが・・・設定やら何やら しないといけないんでしょうか?
教えて下さいませハート・・・*SAKURAKO*汗

No.39  : (無題)

>綾乃桜子さん
こんにちは。

ヤプログに画像をアップロードする方法については、ヤプログにお問い合わせください。

Flashを再生するには、Flash Playerというソフトが必要です。ただ、すでにメロを設置できている状態ですので、Flash Playerはインストールされています。それ以外にはソフトは必要ありません。

また、メロに限らず、Windowsの画面をコピーするには、以下のような手順を取ると良いです。

1.キーボードの「PrintScreen」キーを押す
2.Windowsに入っている「ペイント」を起動する
3.コピーしたい部分をマウスでなぞって選択する
4.[編集]→[ファイルへコピー]メニューを選ぶ
5.ファイル名をつけて保存する

ただし、この方法だと、ファイルの形式が「ビットマップ」というものになります。
ホームページに貼り付けるには、「GIF」「JPEG」「PNG」のいずれかにすることが一般的です。
何らかの画像処理ソフトを使って、ビットマップのファイルをGIF等に変換してください。

No.40 アカネ : (無題)

今日、こちらの説明にしたがって、アイテムリストを設置したのですが、
表示されていないのです。
何を間違えてしまってのか、分かれば教えてください。

No.41  : (無題)

>アカネさん
こんにちは。

現在は、スクリプトを自動出力する「Mero Changer」を出しています。
現在貼り付けられているソースをいったん削除して、Mero Changerのソースに差し替えてみてください。

Mero Changerの使い方は以下のページをご参照ください。

http://www.h-fj.com/blog/archives/2005/12/03-005100.php

コメントする