上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--.--.-- -- l スポンサー広告 l top
書く書くとは言っていましたけど、昨日考えてこれを書く意味がどれぐらいあるのか…w


どこにも書いていない分、ちゃんと書けば自分がその1番を飾ることはできるんですけどね…

まぁ役に立つ日が来るだろうと思い、書きますよ!(完成度低いだろうけど)


書き方としては、ジャミロク様の説明に沿ってできる限りわかりやすく。

なので、メイポ紹介キットを見ながらの作業をお勧めします・w・b


また、ssを多めに使って書いていきたいと思いますので、重くなるかもしれません。


ちなみに自分がっているOSはVistaですので、他のOSではどうわかりませんが、一応参考程度に見ていただければ幸いです・w・


2010年3月1日追記

html文章のssが大きく、テンプレートからはみ出ていたため

サムネイル表示に変更しました。






STEP1.めいぽ装備紹介キットをダウンロードする

これは言うことは特にありませんね。

ジャミロク様のほうからインストールを行ってダブルクリックで解凍してしまってください。


インストールするときは「保存」を選び、でデスクトップなど、わかりやすい場所を選択してください。


また解凍の時、Vistaのほうでは警告が出るかもしれませんが、許可してしまってください。
(てか、許可しないと進まないじゃん・・・w)




STEP2.装備画像を用意する

解凍した後はsampleというファイルがあるので

それを見てみてください。

その中には

sampleファイル


このようにファイルが入っているので、

imgファイルのほうを開けていくと…

equipファイル


このように画像がいっぱい入っているところにたどり着きます。

簡単に言えばここの画像を自分で撮った装備のssに置き換えていくのですb


やり方の基本は、ジャミロク様のサイトの説明通りのひたすらの作業です…w


また、ジャミロク様の記事ではJPEGになっていますが、

PNGなどに置き換えても後々変更していくので何も問題ありませんb

置き換えると言っても、

1.PNGなど置き換えたい画像と同じ名前で保存する。

2.JPEGの画像のほうをファイルから削除する。


これでいいので、ここは頑張って作業してください;;


他にも、リングの位置が分かりにくいと思いますが、

1が左上、2が右上、3が左下、4が右下になっているので、よく見て置き換えてくださいねー




STEP3.HTMLソースをコピーする

ここからがややこしいです、ほんと。

ジャミロク様のサイトでは

sample.htmlを開き、ソースを表示してください。


と書いていますが、普通にダブルクリックして開いてもソースは開きません…

(VistaでしかやっていないのでXPではどうかわかりません。)

なので、htmlのソースを開くためのソフトフェアが必要になります。

結構使えるのがこれ、TeraPadです。

これの

ここをダウンロード


をクリックしてデスクトップなどに保存し、解凍してください。

解凍ツールがない場合はその上をクリックしてインストールしてください。

レジストリには影響がないので、終わった後はゴミ箱から消去してしまえば問題ないです。

インストールしたファイルを開けると

tpadファイル



このようになっているので、「TeraPad」を起動させてください。

その後、 ファイル→開く で sample.html を開いてください。

すると…

sample.htmlのソース画面


ものすごい量のプログラムが出てきます。


これの必要な部分をコピペしていくのです・w・


ジャミロク様のサイトを見てやっていくと、



まず、「HEAD」

……

をコピペするという所。


ここですねb

headタグコピー場所


ここをコピペして、

headタグコピー結果


このようになります。

わかりやすくするために、「タグのハイライト」はONにしておきましょう。

また、リアルタイムプレビューは重くなってしまうだけなので、閉じておくべきです。


「body」も同じように、

bodyタグコピー場所


ここまでをコピーします。


bodyタグコピー結果


もう普段書いている記事とは思えないほど、英字で覆い尽くされます^^;


しかし、この文章のままだと、

ファイルから画像などを読み込む設定になっているので変更しないといけません…



それにはまず、置き換えた画像をアップロードします。

このとき注意しないといけないのは、


アップロードの時に、その画像と同じ名前でアップロードすることです。


別にそこまで気にする必要性もないのですが、

ここで変えてしまうと、非常に後々見にくいことになるので注意です。


この次に読み取る場所の変更作業をするのですが、

文章の一番上を3~4行ほど空白を入れるとやりやすくなります。


まず、上のほうに

equip変更箇所


の場所があるのがわかりますよね?


まず、ここの上の作業スペースのところにequipの画像を張り付けておきます。

その張り付けたこの場所。

equip変更方法


画像のhtmlの中に入っている img scr=" "の部分をコピーして張り替えます。

equip変更後


初め置き換えた時は黒字に戻ってしまいますが、

タグのハイライトを1度、ONとOFFを繰り返せば色がつくと思います。(別にする必要はありません)

このように置き換えれば、一番上に作った作業スペースを消してしまって構いません。

作業スペースを消した後、リアルタイムプレビューを見ると、装備欄が表示されるはずですbb

equip出力結果





この次は装備の画像を読み撮る場所の変更です。


この次は一番下に作業スペースを作ります。

次に、その作業スペースに画像のアップロードしたものを全部張り付けてください。

順番は関係ないので、とにかく全部張り付けるといいです・w・


画像で見るとこんな感じ。

コピペhtmlと画像のhtmlの区別


これで置き換える準備ができました。

bodyに囲まれている部分を見てみると、

bodyタグの map 周辺

div id=…という部分がmapから続いていると思います。


ここが装備の画像を読み込む場所になっているみたいです。



まず下に作った作業場の一番上の画像のこの部分をコピーします

下作業場コピペ場所

また、四角で囲った部分の名前を覚えておいてくださいねb


次に、さっき四角で囲っていた名前と同じ場所を、

さきほどの場所から探します。


探していくと…

bodyタグ変更場所

ここにありましたねb

そして、この四角で囲っている部分をさっきコピーしたものに置き換えます。

bodyタグ変更結果

ここも文字が黒くなっていますが、さっきと同じように気にすることはありません。

また、次の作業を行うと色が変わるはずなので。


ここまでやった後、コピーした部分の画像のhtmlを削除して、

次の画像も同じようにひたすら置き換えていきます…。


これをひたすら繰り返していき、作業場の画像のhtmlがなくなるまで続けると、

bodyタグ最終変更結果

このように、結構すっきりとします・w・

この後、ちゃんと張り付けれているか確認するために、リアルタイムプレビューを開いて、

ちゃんと画像がすべて読み込まれているか確認しましょう。

すべて読み込まれていれば、これで読み込みの設定の変更は終了です。

お疲れさまでした。


ここまでくればもう少しなので頑張りましょう!!




STEP4.コメントを追加/削除する

これは、ジャミロク様のサイトを見ればよくわかります。


ところどころにサンプルとして、コメントが入っていましたね?

コメント

この部分ですね。

ここの br ……コメント…… /div

の部分を書き換えます。/div は消してはいけません。


削除ならこの部分を消して…

入力ならこの部分を足して…


とやればいいです。


しかし、

テンプレートの背景や、表示ではコメントがうまく表示されないことがあります。

この場合はコメントを入れないほうが見栄え的には上出来になるので…




STEP5.他ファイルをコピペして動作確認

ついにここまで出来ましたね…

これはさっきのsampleファイルの中に入っていた

cssファイルjsファイルの中のデータのことです。


まずは、このデータをアップロードします。

画像だけではなく、文章もアップロード出来るなんて始め知りませんでしたよ…!

やり方は、画像と同じようにデータ指定して、データと同じ名前になるようにアップロードします。

この方法で2つのデータをアップロードしておきます。


しかし、このデータの読み込みもファイル設定になっているため、

変更しないといけません。


変更方法はさっきと同じです。

変更場所は、初めにコピペしたHEADタグの中の2行です。



head変更場所


ここもまた、一番上に空白を3~4行ほど入れ、作業場を作ります。

その作業場に、先ほどアップロードした2つのデータを貼り付けます。

その張り付けたものを、このように置き換えます。

head置き換え


それで、置き換えた結果がこうなります。

head置き換え結果


もうさっきから何度もやっているのでわかりますよね?

置き換えが終わった後は、作業場を消しておくことを忘れずに。


これで一通り完成となります。


しっかりと完成しているか、プレビューから確認してみましょう・w・

html改行削除前

このように、しっかりと表示されていればいいですb

他の場所もマウスでかざして、すべての画像が表示されるかを確認しておきましょう。


しかし、このままだとかなり空白がありますよね?


なので、このように

ここを変更しておく

htmlタグのみ改行するように設定しておきます。

こうすることで…

html改行削除後


全く違うのは、わかりますよね?

ただ、この方法を使うと、

改行したいときは br を入れないといけなくなります。

まぁ、このように入力していけば、普通の文章見たいに書くことはできますので。

改行サンプル

文章の最後に入れるみたいな感じですかな?




STEP6.当サイトからの提供表記をする(任意)

強制はしませんが、
めいぽ装備紹介キット提供:「HP狂プリと生ぬるぽ
みたいに一筆書いてもらえると嬉しいです。
なお、設置報告等はいりませんので気軽にどうぞ。

サイトからそのままコピペ。

このようなプログラムを作っていただいた敬意として、入れておきましょう・w・b




あとがき

このメイポ装備紹介キットはブログにはちゃんと対応していないと思います。

なのでそれなりのバグがあると思いますが、動作確認をして説明書きを加えればいいと思っています。

自分が使って気づいたバグは、


ブログのウインドウを最大化にすると、装備の表示がおかしいところに出るところかな?


予想ですが、ウインドウを大きくすると、自動的に中央に表示しようと移動するため、

座標が変わってしまい、おかしな場所に表示してしまうからだと思っています。(予想です)

これはテンプレートで変わると思うのですべてに当てはまるとは限らないと思いますよ。


それでも、このようなものを作ったジャミロク様はすごいと思いますよ…w

これを見て使う人が増えてくれればいいな、と思っています。


また、わからないことがあればコメントで教えてください。

わかる範囲で説明しますので…。


とてつもなく長い説明になってしまいましたが


では、これにて。


お疲れさまでした~ ノン
スポンサーサイト
2010.02.28 Sun l メイポ雑記 l コメント (2) トラックバック (0) l top

コメント

No title
来たどぉぉおおお



んで



また来るど

2010.03.01 Mon l Vito. URL l 編集
コメ返信
また来てくださいね・w・b
2010.03.01 Mon l クー. URL l 編集

コメントの投稿












トラックバック

トラックバック URL
http://klorm.blog123.fc2.com/tb.php/13-07d27afb
この記事にトラックバックする(FC2ブログユーザー)
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。