ようこそ。

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

最初から使える背景画像

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

Tutorial 16 21697814f54c5805393c3817f208f90441a21f94cc5982ff6e6deab2e39a7dfe

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

Tutorial 51 b4cf44b1e70c0bd49f29e3325488eaf810bd934da8fc271cead60355117af6f0

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

Tutorial 52 16d7881afd01f8e377f98d8ca5523a43e9ee41baadc0dc301864bf52a9e8e517

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

Tutorial 54 8dcea3a3876330080edada9db860332a0b41c01e3f0b095a0a0e8588d49b3aef

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

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

Tutorial 53 1d1f61eef0808c52354912f08df84d9e21b4fe2906d8f3bb7df820f9eaa5383e

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

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

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

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

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

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

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

Tutorial 57 1f022c8b4a2abd4f2a0ac4130803f3020584a9a5178ecab0d0373786935576ac

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

Tutorial 58 876d4b395c2f611c3f6facb1ecde971b8f7df8f3ddff143e63949e5b08059da8

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

Tutorial 59 bf14c3fffd7548aa99c701b289918675edfabc1abfebb8984358ab4f498084d4

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

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

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

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

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

Tutorial 75 e68f7838039ccb564c94385198d90e8c88c02b00d7634ba376d3f5844f0d17f9

は大丈夫だけど、

Tutorial 76 b1a3962a8a288d0aeddc1c3474ee0616a7db0f935827056a1ef0dea1ffbcb53f

はダメ、ということです。下の本文では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 1b49bb79781cccd50422e68d73cdd9614a0c2a0796c3a8018461ffa2d953513f

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

Tutorial 17 6cc52e9f677a54d7324b60bd818e95535892c2f293b721246b45e37f43c92e18

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

Tutorial 18 00cf59924b9361f38e498357b7c82ea41b14f0e94d6b68b6e639bbe16c34656e

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

背景にはぼかしをかける

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

画像編集ソフトについて

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

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

Tutorial 19 8af6ab44c271b640f0c85f49e9bfd34b73844a8dfa517869fa76919e3eb1b23f

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

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

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

ノベルの背景演出

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

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

Tutorial 23 a06bbff66b1108edeae7339e29b48f20662ff10800514ec323613b33332a444b

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

Tutorial 24 e6355886e9f2178a775a9c045c44b2a82b2e1707249e764aa97b02aa2a611a0e

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

Tutorial 25 5b6cc3edc442e48a7324143daa3d8e50a5ca2b8166919bb934fa445dbdf7cde2

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

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

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

Tutorial 26 e340d198720d87a92ac2f398a39065cd7ce34af5add75b6bc5e84066b9f34bc3

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

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

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

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

Tutorial 27 a3c7fc23dc9f9abef4de820b4eb0381f223062734a221863b48934b879d65cab

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

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

Tutorial 28 8b1b09b279d8fb50610cd0ee4d530bb5511bb86f8e52ef6e9368f1ebfd38ea3b

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

挿絵

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

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

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

Tutorial 47 0cc1f67c3c62c10881d291bb3038d3fd7a2864c058bd729c9aed91de66a63121

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

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

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

Tutorial 48 8de76819d1bb9686d9cc0cf07ffb630e229030f9c358fa9b422d607113416757

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

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

まとめ

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

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

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

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

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

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

それがDenkinovelの哲学です。

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