おみくじParadise!! ホーム おみくじ工房 タイトル
   Quick Index ホーム > おみくじ工房 > 楽々おみくじ２ > Tips

見出しTips -簡単な改造の例-

「楽々おみくじ２」の一番の醍醐味は、柔軟なカスタマイズができることにあります。事実、ホントに「楽々おみくじ２」なのか？？と言うほどカスタマイズされた物も時折見かけます。そこでここではまず、簡単な改造の例をTipsとして取り上げてみました。たった３つしかありませんが、感じが大きく代わるはず。是非チャレンジしてみて下さい！！
カスタマイズした「楽々おみくじ２」を配布してみませんか？「設定ファイル」は自由に改造・再配布可能です。腕に覚えのある方は、是非！！　詳しくは[設定ファイルを配布しよう！！]のページをご覧下さい。

見出しTips

実際に設置していただいた例をちらほら見てみると、やっぱり設置までは何とか行っても、そこから先をどうすればいいのかわからない、という方が結構いらっしゃるようです。そこで、カスタマイズの例を、実例を示しながらいくつかおみせしましょう。

もし、失敗してうまく動かなくなったらどうしよう・・・。たぶんそう考える方もいらっしゃるのでは？それを防ぐ方法は簡単です。バックアップを取っておきましょう。どうするって？実に簡単です。rakuomi2.cgiは一切いじりませんから、omidefxx.cgiのコピーを取っておけばいいのです。こうすれば失敗してもバックアップがありますからこれまでの成果は無駄になりません。では、気楽にLets'go!!

アクセントTips・1：背景を変える

実はこれだけで結構変わるんですよ。-> [パターン２の背景変化の例]

「おみくじParadise!!」で使っている背景画像を入れてみました。随分イメージが違うでしょ？やり方は実に簡単。まずは背景にする画像を決めて下さい。そこで次に、omidefxx.cgiをエディタで開いて、「おみくじ表示のためのHTMLファイル」の項目にある、次の一文を探します。

<BODY BgColor="#a2e0ff">

これを書き換えてやれば、背景が変化します(HTMLを知っていらっしゃる方なら、「なあんだ」かもしれませんが。しかし、それだけ簡単な事だということですよ)。

背景色を変化させるとおみくじの背景色も変化します。例えば、BgColor="#a2e0ff"を変えてみましょうか。たとえばこれを"#FF69B4"(IEやNNではコードの代わりに"hotpink"と色名を書いても動作します)。

<BODY BgColor="#FF59B4"> 　または
<BODY BgColor="hotpink">

こう変化させた結果が、こんな感じです。-> [パターン２の背景色変化の例]

随分ぎらついた感じになりました。色コードと使える色については、杜甫々さんの「とほほの色入門・色見本」などを参照してみて下さい。 では、次にいよいよ本丸の背景画像です。しかしこれも簡単な話です。BgColor="#FF59B4">をBackground=""に書き換え（または、BgColor="" の後ろに追加する。この場合、BgColor指定は、Backgroundに指定したファイルが存在しない時以外は無視されます)ればいいのです。

<BODY Background="[画像ファイルのURL(または相対パス)]"> 　または
<BODY BgColor="#a2e0ff" Background="[画像ファイルのURL(または相対パス)]">

この結果が一番上に示した、背景画像変化の例です。「画像ファイルのURL(または相対パス)」は、慣れていない方や、CGIが別サーバー動作の方は、URL(絶対アドレス。http://...で始まるアドレス)で指定するのが無難でしょう。そうでない方は相対パスにしておくといいかと思います。

余談になりますが、「BODYのBgColorやBackgroundの属性は推奨されない属性じゃないか」、という方。「これだからCGIは困るんだ」、と言うのは早いですよ。「おみくじ表示のためのHTMLファイル」は表示されるHTMLそのものですから、<HEAD>〜</HEAD>間にStyle指定を入れてやればおしまいです。もちろん外部スタイルシートもOK。書き換え方は、こちらで言わなくてもわかりますよね♪

アクセントTips・2：タイトルを変える

もらい物のCGI、というイメージを変えるためにはやっぱりタイトルが元のままではなんだかねぇ、というわけでタイトルを変えてみました。

[タイトル変更の例]

あれ？著作権表示は？と言う方。右下に「楽々おみくじ２ Ver x.xx by うんにゃ」がありますよね。これはスクリプト本体が自動的に付ける一文です。設定ファイルをいじってもこれは無くなりませんので、利用規程違反になる心配はないのでご安心を。

今回の変更箇所は二カ所です。Tips・1とほとんど同じ場所にある、次の二行を探して下さい。

<TITLE>楽々おみくじ２</TITLE>　と
<B>◇楽々おみくじ◇</B>

の二文です（二つはやや離れた位置にあります）。 今回の例では、この二つをこう書き換えてみました。

<TITLE>Unnya's Fortune Cookies</TITLE>　と
<B>★Unnya's Fortune Cookies★</B>

たったこれだけ。簡単でしょ？

アクセントTips・3：運勢を画像にする

結構やってみたい人は多いのではないか、というのがこれです。運勢を画像にすることで、デザインのバリエーションも大きく広がります。

[運勢を画像にした例]

※ここで使用している運勢の画像については一切の転用を許可していません（ほとんどデフォルトフォントそのままですので。著作権に抵触する心配もありますし。勘定流のフォントにベベルとエンボスの効果をかけただけです。）

この作業はちょっと面倒ですが、そんなに難しい作業ではありません。いままで変更してきた少し上にある項目、「おみくじメッセージ」の項目を書き換えます。一番上の「総合運」の項目を何行か見てみましょう。

[変更前] 
$sougou = <<"End_Of_Message";
*,大吉,1
今日は一日いい日になりそうです。<--COL-->色のかばんは、更にいい運をつれてきそう。
おめでとう、大吉です。充実した一日をお送り下さい。ラッキーナンバーは <--NUM--> ですよ！
*,中吉,3
そこそこですよね。もし今日が<--NUM-->日なら、ちょっと注意。気をつけてね。
良くもなく、悪くもなく、平凡な一日です。軽はずみは禁物。落ち着いて行動を。
<--COL-->色の色鉛筆をそっと体に忍ばせてみましょう。思わぬ拾いものがあるかも。
....

[変更後] 
$sougou = <<"End_Of_Message";
*,<IMG Src="img/daikichi.gif" Alt="大吉" Width="80" Height="30">,1
今日は一日いい日になりそうです。<--COL-->色のかばんは、更にいい運をつれてきそう。
おめでとう、大吉です。充実した一日をお送り下さい。ラッキーナンバーは <--NUM--> ですよ！
*,<IMG Src="img/chuukichi.gif" Alt="中吉" Width="80" Height="30">,3
そこそこですよね。もし今日が<--NUM-->日なら、ちょっと注意。気をつけてね。
良くもなく、悪くもなく、平凡な一日です。軽はずみは禁物。落ち着いて行動を。
<--COL-->色の色鉛筆をそっと体に忍ばせてみましょう。思わぬ拾いものがあるかも。
....
ぱっと見ただけではよくわからないので、変更部分を抜き出すと、

*,大吉,1　が
*,<IMG Src="img/daikichi.gif" Alt="大吉" Width="80" Height="30">,1

の様に代わっています。

Src="img/daikichi.gif"　の部分が大吉の画像がある画像ファイルの場所、Alt="大吉"　が、画像がうまく表示できなかったときに表示される「代替テキスト」、Width="80" Height="30"が、画像の縦横の幅です。"*"とか"1"とかについては、後の「カスタマイズ」の項目で触れますので、今は置いておきます。

中吉についても同じく、また、「サブ運勢」についても同じです。なので、ちょっと手間がかかるかもしれませんが、ガッツのある方は是非チャレンジしてみて下さい。もちろん、「総合運」と「サブ運」で別の画像を使うこともできますよっ。

見出しまとめ♪

では、上のTipsを全て使って改造した「楽々おみくじ２」を見てみることにしましょうか。

[Tips１・２・３をあわせた例]

オリジナルとは随分イメージが変わったのがおわかりいただけたでしょうか。ここまでくれば、後はどんな変更も思いのままのはず。あなたのページにあったおみくじに改造して使ってみて下さいねっ。



  では、次に詳しいカスタマイズについてご案内しましょう。これであなたもマスターに！！

　→「カスタマイズ！！」

[このページの先頭に戻る]

水平線
Copyright (c) 2000-2001 うんにゃ