猪鹿蝶

※目次タイトルをクリックして下さい。

• 夢小説ページの編集

• 夢小説ページの編集　番外編

• 本文部分の編集

• 作品を名前変換対応に変える

• 作品を名前変換対応に変える 番外編

夢小説ページの編集

次はいよいよ本題である夢小説ページの編集です。

まず、夢サイトに必須なDreamMaker様のサイトを開きます。

今回は「DreamMaker2」を使ったサイト作成の手順を説明します。
入力項目は3つで作成します。
「DreamMaker1」は･･･気力が残っていたら後日･･･。


「DreamMaker２の作り方」をクリックします。
表示された説明を全て読んでください。

最初は分からないところもあると思いますが、
目を通し、少しでも頭に入れることが重要ですから。
それに、本家サイトなので当然ここの解説が一番分かりやすく、詳しく説明されています。

全て目を通しましたか？
次は最初のページに戻って「DreamMaker２の作り方」の上にある
「DreamMaker2」をクリック。

「３．ドリーム小説メニューの作成方法」の下にある
「サンプル3」の「ダウンロード」をクリックし、保存。

これをダブルクリックすると、解凍され

というフォルダが出てきます。これが名前変換の大元となります。
中には「D-menu3.html」がありますので、それを開きます。

開くと上のようなポップが出てきますが、何も問題ないので「許可」→「はい」を選択。

このページのソースを表示します。
また、「応用サンプル.txt」も開き、全て「コピー」→新規「メモ帳」に貼り付けます。
この新規メモ帳の名前はメニューで「WORK」に付けたものを。
ここでは「WORK.html」と付けて保存します。

次に、夢小説の一番重要な部分。
名前変更などをするタグを自分のサイトに埋め込む作業に入ります。

先ほど開いた「D-menu3.html」のソースから名前を変更する部分をコピーするのですが、
これが一番大変かつ難しいんですよね･･･。
少しでも間違えると機能しないし、レイアウトデザイン崩れるし。
で、ここで何度挫折しそうになったことか･･･。
多分、他の方もこの作業が一番大変だったんじゃないかと思います。

「D-menu3.html」のソースの<script language="JavaScript">から

</script><!--ユーザーが自由にデザインする場所 ここから-->までを全てコピーします。

その、コピーしたタグを「WORK.html」と名付けたメモ帳の
<div id="container">と<div id="header">の間に変換のソースを埋め込みます。


次にまた「D-menu3.html」のソースの<form name="dream">から

下画像の部分までをコピーします。

コピーをしたものを「WORK.html」のメモ帳の
<!--メイン--><div id="main">と</div>の間に貼り付けます。

また「D-menu3.html」のソースから今度は
<!--ユーザーが自由にデザインする場所 ここまで--><script language="JavaScript">
から</script>までをコピーし

「WORK.html」メモ帳の下画像「←この部分に埋め込む」と、
ある部分にコピーしたタグを貼り付けます。

この段階で一度「WORK.html」を表示してみましょう。
すると、名前登録が出来るようになっているはずです。

試しに「入力項目１〜３」に適当な数字でも入れて登録してみてください。
「ご登録内容１〜３」に反映されます。

ここで何も変化が起こらなかったりした場合には、
「D-menu3.html」のソースからコピーしたタグが間違っている可能性があります。
（コピーを取り始める部分が間違っていたり。）
上手く機能しなかった場合にはもう一度やり直してみてください。

さて、これで、サイトの要でもある名前登録ができるようになりました！
後はサイトデザインに合わせて微調整をします。
現段階で特に気にならないという方は次の作業へ。

• TOP

夢小説ページの編集　番外編

さて、現段階では「入力項目１〜３」「ご登録内容１〜３」という
表示になっていますが、このままではどこが「苗字（ファミリーネーム）」、
「名前（ファーストネーム）」の登録欄かが分かりません。

「注釈文を名前変換の近くに書いておく」というのも一つの手ですが、
（例：「入力項目１には名前、入力項目2には苗字、入力項目3には友人の名前を
記入してください。」）

今回はその「入力項目」「ご登録内容」とあるのをそれぞれ「苗字」「名前」など
分かりやすいものに変更します。

まず、「WORK.html」のメモ帳を用意します。
（「WORK.html」のソースを全コピー→新規メモ帳に貼り付け→
「WORK.html」と名前を付けて上書き保存。）

メモ帳をスクロールしていくと、「ご登録内容１」や「入力項目1」などが
すぐに見つかると思います。



上画像の赤枠で囲ってある部分です。そこをそれぞれ、
「ご登録内容１」→「苗字」
「ご登録内容2」→「名前」
「ご登録内容3」→「その他」
「入力項目1」→「苗字」
「入力項目2」→「名前」
「入力項目3」→「その他」
と変更します。

次に縦一列に並んでいる変換を横並びになるようにタグを少々いじります。

「WORK.html」メモ帳の上画像部分。
赤枠に囲まれた「center」を「left」に入れ替えます。
また、青枠で囲まれている部分のタグは削除。

これと同じことを「名前」や「その他」にもします。すると、

このように縦表示されていたものが

のように横並びに表示が変わっています。
次に名前を入力する部分も現在

のように縦表示になってますのでこれを横並びに変えていきます。

先ほど編集した部分のすぐ下に下画像の部分がありますので、
画像青枠で囲まれた<tr>と</tr>を削除します。

「名前」や「その他」も同じように削除します。

次に、名前を入力するタグの下に下画像部分がありますので、
こちらも青枠で囲まれたタグを削除しておいてください。


以上が終了したら「上書き保存」をして「WORK.html」を表示してみてください。


上のようになっていれば成功です。
これで、名前変換の設置は完了です。

• TOP

本文部分の編集

次は本文部分を編集していきます。
この部分は夢小説を閲覧するにあたっての注意事項や作品解説、 作品リストなどを載せます。

まず、最初にこの小説がＣＰ小説などではなく、「原作キャラ×オリジナルキャラ」
（「オリジナルキャラ×原作キャラ」）であることを、きちんと明記しておきます。
つまり、「以下の作品は夢小説です」といった注意書きを載せましょうってことです。

「夢小説とは？」という解説をしてくれているサイト様のリンクを貼っておくのも いいと思います。

さらに、夢小説でも「女主人公」or「男主人公」や「年齢指定作品」「死ネタ」
「残酷表現あり」「記号表現あり（「ｗｗ」「////」「ｖｖ」「→」など）等の
作品がある場合にはその状況に応じて注意表記もしておく方がいいでしょう。

中には「女主人公は好きでも男主人公は嫌い（逆もまた然り）」や
「グロテスクなものがダメ」「記号表現が嫌い」という方も当然おりますので、
先に注意表記をしておけば「知らずに閲覧して気分が悪くなった」等の トラブルは回避できます。

※それでも中には注意事項をちゃんと読んでくれない人もいますが、
その場合、苦情を言われても「ちゃんと注意表示してありますよ。
作品を読む前にそちらを読んでくれましたか？」と言える訳です。

･･･まあ、語りはこれくらいで。
ネチケットなどはリンクにあるサイト様を参考にどうぞ。
サイト運営するなら一読しておくのがいいと思います。
注意事項をどのように書くかは展示作品やサイト管理人によって千差万別。


夢小説サイト制作講座　2の「INFORMATIONの編集」で解説したこと
を応用してページを作っています。

新しいのは、「バナーリンクの仕方」くらいでしょうか。
バナーリンクはテキストリンクにちょっと手を加えたもので、 下画像タグがそれになります。

赤線で引かれた部分に作品ＵＲＬを、青線にバナーＵＲＬを記入します。
※画像では「border="0"」とあります。
これはバナーの囲み線を消すものなのですが、あまりオススメしないタグです。
出来ればこのタグは使用しないで下さい。


後は特に解説することもないので、ここもまた一気に作成！
（自分のサイトで使っているものを転用。）

作品リンクが複数あるのはそれぞれ、リンク方法に違いがあるからです。
何がどう違うかは、「main5」にリンクがしてある「サンプルサイト」を直接見てください。

これで、メインページが完成しました。


上のようになっていれば完成です。 ようやくサイトらしくなってきました。

※「main5」にリンクがしてある「サンプルサイト」ではこれに
更に手を加えてますが、やっていることは今までの応用です。

• TOP

作品を名前変換対応に変える

次は作品を名前変換対応に変える作業をします。
まず、自作作品を用意してください。
作品を書いているときにはワードでもメモ帳でも個人の自由ですが、
変換をする時には作品を「メモ帳」に保存しないと変換できない。
ということを覚えておいてください。
※作品も自分が分かりやすいところにまとめて保存をしておいてください。
今回は「サンプル作品.txt」という名前で保存しました。

また、今回のサンプル作品には主人公の名前を分かりやすく
「苗字」は「111」「名前」は「222」、「その他」は「333」で書いています。

さて、作品を変換する前に下準備を。
以前作成した「応用サンプル.txt」を開き、全てコピーし新規メモ帳に貼り付けます。
そうしたらそのままいったん放置で。（ですが、この新規メモ帳は消さないで下さい。）


次は作品変換作業に入ります。
のサイトへ飛びます。

そして「DreamMaker2」を選択。
ページトップの「DreamMaker2 の使用方法ついて」という表題のすぐ下に
　「DreamMaker2 を使用する」というボタンがありますので、それを押します。

すると別窓で変換用ページが出てきます。まず、入力項目を変更します。
サンプルサイトでは入力項目を3つで作成しているので、
�@を「3個」に指定して隣の「再表示」ボタンを押します。


すると、下の項目が二つから三つに増えます。
「項目―1」は名前変換の「ご登録内容1」「入力項目1」にあたります。
つまり、サンプルサイトでは「苗字」。サンプル作品では「111」の部分です。
以下も同じ、「項目―2」は名前変換の「ご登録内容2」「入力項目2」にあたります。
つまり、サンプルサイトでは「名前」。サンプル作品では「222」の部分。という訳です。

項目に入力するのは「サンプル作品」で使った主人公達の名前です。
ので、下画像のように入れていきます。


また、その下の「シナリオ」とは変換したい作品を選択。（メモ帳で保存したもの）
なので、ここでは「サンプル作品.txt」を選択。

「文書タイプ」は「テキスト形式」を選び、隣の「送信」ボタンを押してください。

すると、変換されたものが白枠内に表示されていますので、「全て選択」→「コピー」。
そしてコピーしたものを下準備した「新規メモ帳」の下画像部分に貼り付けます。


貼り付けたら、「名前を付けて保存」します。
この時、「〇〇〇.html」という形式で保存してください。
サンプルでは「ss1.html」と名付けました。

さて、この段階で「ss1.html」を表示してみてください。
※「ss1.html」のメモ帳はまだ閉じないで下さい。

※この時ポップアップが出ますが、問題ないのでそのまま
「ブロックされているコンテンツを許可」を選択肢「はい」を選びます。
すると、下画像のように表示されます。



･･･何を言いたいかわかります？
そう、標準設定でバックカラーが灰色になっているんです。
サイトデザインによってはこのままでも問題ないものもあるとは思いますが、
サンプルサイトのバックは白なので、このページも白に統一する作業をします。

「ss1.html」のメモ帳に戻ります。


上画像の青枠で囲まれた部分を削除します。
また、そのままスクロールしていき、下画像の青枠で囲まれた部分も削除し、 「上書き保存」します。


保存をしたら、「ss1.html」のページを更新します。
すると今度は下画像のように灰色から白に変わっているはずです。



これで作品の変換は終了です。
次はこの作品ページとメインページをリンクする作業に入ります。

「WORK.html」を開き、「ソースを表示」→「全てコピー」し
新規メモ帳に貼り付け、「WORK.html」と名前を付けて保存。
※この時「〜WORK.html　は既に存在します。上書きしますか？」と出ますが、
そのまま「はい」を選択してください。

「WORK.html」のメモ帳の下画像で赤枠に囲まれた部分に
先ほど作成したサンプル作品ＵＲＬを入れます。 （ここでは「ss1.html」と入れます。）


入替が終わったら「WORK.html」メモ帳を「上書き保存」します。
これでメインページから作品ページのリンクが出来ました。

ここでちゃんと作品ページが変換出来ているかを確認します。
試しにメインページで「苗字」「名前」「その他」を適当に入力してみてください。
※この時変換されているか確認しやすいように、サンプル作品で使った名前とは
別のものを入力してください。

登録が完了したら作品ページをクリック。
ここでは「◆作品サンプル（短編用）◆」にリンクを設定したので、
「◆作品サンプル（短編用）◆」をクリックします。


のように主人公の名前や友人の名前がちゃんと変換されていれば成功です。

これで小説変換の編集は終了です。

• TOP

作品を名前変換対応に変える 番外編

ここではメインページから長編小説用ページを挟んで作品を閲覧する、
という形式の場合を説明します。
･･･とは言っても、ここまで来るともう新しいことはしないので、今までの応用になります。

まず、「応用サンプル.txt」のコピーを新規メモ帳に貼り付けます。


上画像の赤字部分を編集します。で、完成が下画像。



サンプルとしてはこんなもので。
タイトルとかに突っ込みいれちゃダメです。所詮サンプルですからね。

ここまで出来たらこの新規メモ帳に名前を付けて保存を。
ここでは「lstop1.html」と保存しました。

次はこの長編用ページとメインページをリンクさせます。
ここは前回説明したのでカット。

「◆作品サンプル（長編用）◆」の所に今回作成したページを
リンクさせます。
「WORK.html」メモ帳の「◆作品サンプル（長編用）◆」を
下部分のように変更したら上書き保存。

以上で完了です。

• TOP