ようこそ。

このページでは、背景画像の使い方と画像アップロードをかんたんに説明します。

最初から使える背景画像

Denkinovelでは、最初から使える背景画像が用意してあります。その数、実に200以上! きまぐれアフターの彩雅介様のおかげです。許可を得て、彩様の描いた背景画像をDenkinovel内で使えるようにしていただきました。ありがたいです。

Tutorial 16

まずログインして、上ナビゲーションバーの「素材」をクリックしましょう。

Tutorial 51

すると、こんなメニューが表示されます。慌てずに「最初から使える背景画像」をクリックしてください。

Tutorial 52

最初から使える背景画像一覧ページに移動しました。今回は……そうですね、家の背景画像を使うことにしましょう。「家の背景画像」をクリック。

Tutorial 54

おっと、本当にたくさん画像がありますね! びっくりしました。

うーん、私が使いたいのは、外から見た家の画像なんですが、あるのかな……? 下にどんどんスクロールしていきます。

Tutorial 53

あった! ありました! これこそ私が欲しかったものです!

オリジナルサイズを確認するには?

サムネイルをクリックすると、大きなサイズの画像を確認できます。

さて、家の背景画像が用意されていることを確認できたので、ノベルを書くことにします。上ナビゲーションバーの「ノベルを作る」をクリックして、ノベル作成フォームに移動します。

私が書くノベルでは、昼間に、家から出たところを舞台にしようと思います。背景画像はぼかしたものを使いたいので、[bg house-blur]と本文に書くことにします。[bg house-blur]というタグをコピーしましょう。

キーボードショートカットの勧め

コピーはマウスの右クリックからもできますが、もしOSにWindowsをお使いなら、キーボードのCtrlキーとcキーを同時に押してもクリップボードにコピーできます。コピーしたあとCtrlキーとvキーを押すとペーストできます。キーボードでの操作は便利なのでぜひ覚えてください。Microsoft社によるキーボードショートカット一覧はこちらで読めます。

Tutorial 57

本文入力フォームに[bg house-blur]をペーストして、文章を書き加えます。うん、こんなのでいいかな……? 下書きにして、ノベルを作成してしまいましょう。「作成する」をクリックします。

Tutorial 58

ノベル作成に成功しました! さあ、画面をクリックしましょう。ちゃんと家の背景が表示されるかな……?

Tutorial 59

やった! 背景が家の画像になりました。ぼかしもかかっています。成功だ!

背景などのタグを使うときの注意

DenkinovelがVer1.0になって、ひとつ、大きな変化がありました。

bgタグ、bgmタグなどは[page]内に1種類につき1回だけ使えるというようにしました。

どういうことか? というと、

Tutorial 75

は大丈夫だけど、

Tutorial 76

はダメ、ということです。下の本文では2つのpageの間に2つ[bg ...]がありますね? これがいけないのです。

[page]エリアのなかに2つ以上のbgタグがあると、最初のbgタグしか読み取れません。

では、どうすればいいのか? おすすめのやりかたを紹介します。

[bg]タグは[page]の直後に書いてください。

これさえ気をつければ大丈夫です!

なお、[bg ...]だけでなく、[bgm ...][image ...][text-color ...][filter ...]なども同じく、[page]の直後に書いてください。

逆にいえば、[bgm ...][image ...][bg ...]などの演出タグを使いたいときはみんな[page]を演出タグの最初につけてください。

複数のタグをまとめて[page][bgm fight][image house][text-color red]というように書いてもよいです。

Ver1.0.0での変更点です。お気をつけください!

画像アップロード

最初から使える背景に満足できなくなったら、背景画像をアップロードして使うとよいでしょう。

Tutorial 60

画像をアップロードするには、まず、さきほど同様上ナビゲーションバーの「素材」をクリックしましょう。それから今度は「アップロードされた画像」をクリックします。

Tutorial 17

こんな画面になります。画像には著作権や肖像権など、色々複雑な事情があります。規約をしっかり読んでください。

Tutorial 18

規約を守る決心ができたら、さて、画像をアップロードしましょう! 「ファイル選択」と書いてあるところをクリックして、アップロードしたい画像を選んでください。今回、私は自分の撮影した写真にぼかし加工をかけたものを使います。

背景にはぼかしをかける

ノベルの背景に使う画像にはぼかしをかけるか、彩度を落とす、どちらかまたは両方を行うとよいです。背景は本文のためにあります。読者の意識が背景に流れてしまっては元も子もありません。背景は主役たる本文をひきたたせるため、あえてぼかすのが奥ゆかしい心づかいというものです。

画像編集ソフトについて

画像にぼかしをかけたり彩度を落とすには、NAVERフォトエディタpixlrを使えばアプリケーションのダウンロードなしで簡単にできます。高度な画像編集をしたいならGIMPをダウンロードして使えばよいです。画像が複数あってひとつひとつを画像編集するのが面倒なときは、XnView MPWikipediaのページ)のような、一括して画像編集ができるソフトを使うとよいです。どれも無料です。

さて、画像を選択すると……。

Tutorial 19

お、どれだけアップロードできたかを示すバーが出てきました! インジケーターというやつですね。

IE9を代表とする古いブラウザは、インジケーターに対応していません。できるならばChromeのような新しいブラウザを使ってください。IE8など知りません。

これで画像アップロードは完了しました。心おきなくノベルの背景演出ができます。

ノベルの背景演出

さあ、ノベルを書きましょう。

まずアップロードしたときのファイル名をコピーします。画像のURLを示す[bg https://storyblog.s3.amazonaws.com/uploads/picture/image/119/kamogawa.jpg]をコピーして使ってもよいのですが、ここではより簡単に使えるファイル名のkamogawa.jpgをコピーしましょう。

Tutorial 23

本文にペーストして、[bg kamogawa.jpg]と書いてみました。作成ボタンをクリックして、さっそく作品を読んでみましょう。

Tutorial 24

さて、背景は変わるのでしょうか……? クリックしてページをめくります。

Tutorial 25

変わりました! 背景が私のアップロードした写真になりました。

しかし、ちょっと暗いですねえ。フィルターを黒にしているからでしょうか。演出を考えてみます。

ノベルの背景演出と改ページ

Tutorial 26

本文を書き直しました。鴨川にはもう飽きたので、写真をもうひとつアップロードして、MacBookを自慢することにします。

[text-color black]
[filter white]
[bgm daily-life]
というタグを書くことで、テキストの色は黒に、フィルターを白に変えました。ついでにBGMも流します。心穏やかな気持ちになれる"daily-life"を選びました。

[bg macbook-air.jpg]の直前に[page]タグを書いていることに注目してください。そうです。演出タグの直前には[page]を書くんでしたね!

さあ、ノベルは今回どうなるのでしょうか?

Tutorial 27

よし、白いフィルターはなかなかうまく見えます。われながら巧い選択でした。

ここでクリックします。すると?

Tutorial 28

やった、ページと背景が変わりました! さきほどとは別のページになり、MacBookを自慢する文章が現れました!

挿絵

と、改ページ演出には成功したのですが。

完成したノベルを改めて見てみると、なんだか面白くありません。うーん、やっぱりMacBookの自慢はやめておいたほうがよさそうですね……正直言って、さっきの私は迷走していました。ノベルに大切なのはテーマです。本作のテーマは風景の美しさ。テーマから外れる内容は削ることにしました。

そういえば……鴨川の近くにある大学で、きれいな写真が撮れたんです。この写真を挿絵にして、作品に入れることにしましょう。

Tutorial 47

さきほど同様、画像をアップロードしてきました。

その画像のファイル名を使って、[image]タグを書きました。HTMLのタグとは違うので気をつけてください!

さて、完成したノベルを見ると?

Tutorial 48

ほら、挿絵として表示されました!

[image]タグを効果的に使えば、表現の幅はさらに広がります。ライトノベル風の挿絵にしたり、ノベルゲームの立ち絵のように見せることもできます。

まとめ

こうして、背景変化、改ページ、挿絵といった演出ができるようになりました。

しかし、Denkinovelに隠された機能はこれだけではありません。さらなるテクニックを身につけたいのならば、また別のチュートリアルに目を通すのがよいでしょう。

最後にひとつ、おぼえておいてください。

演出はつつましく。これを心がけるとよいです。BGMがひんぱんに変わると読者の気持ちが落ち着きません。場面変化が慌ただしく、雑に見えます。フィルター、文字色もできるだけ変えないほうがよいでしょう。主役はあくまで文章なのです。BGMも背景も、文章を引き立てるための脇役と心得ましょう。

BGMや背景をできるだけ変えずにおき、最後の最後、一番の見せ場でBGMと背景を大胆に変化させる。それが最も有効な演出です。

謙虚に、しかし効果的に。

それがDenkinovelの哲学です。

別のチュートリアルを見る