どうも、わたしです(✿´ ꒳ ` )

先日、仕事の合間になにかスキルアップを…と考えていて、せっかくなら形に残るものがいいなぁと思い
簡単なTumblrテーマを作成しました。
以前からちょっと考えていた「夢小説サイト」の運用を目的としたもので、
Twitterで下記のようなアンケートを取らせていただきました。

投票、RTありがとうございました!
で、無料なら使ってみたいが72%と多かったので、ざっくりですが作ってみたんですね。

※夢小説をご存じない方へ
小説に名前変換機能をつけることで、その小説の登場人物になれるといったものです。
夢小説の多くは、読み手自身の名前を入力することにより、
小説に登場するキャラクターと恋ができる、一緒に冒険できるといった楽しみ方があります。
ただ、二次創作物に関しては、同人誌同様大変グレーなものでもあるので、運用には細心の注意が必要です。

そして完成したのがこちら

名前変換機能付きTumblrテーマ『macaron』ベータ1.0版
https://ds-macaron.tumblr.com/

このテーマでやりたいこと

まずはじめに、テーマを作るにあたって、こんな機能があったらいいなぁと思うことをまとめました。

  1. 名前変換機能
  2. 絞り込み検索
  3. メインカラーを自由に変更できる

せっかくテーマを作るなら、最低限この3つはできるようにしたい。
今回作るのはあくまでベータ版。テーマを無料で公開するため、時間とかお金は正直あまりかけられないのです。
誰かの為というよりは、自分のアウトプットの場で作ったものを共有しているだけと思っていただければ…
………でも、このテーマで、誰かが夢小説サイト運用してくれるといいな…と思ってるのも事実。

そして、ある程度妥協しなければいけない部分も出てきました。

  1. 投稿機能の制限
  2. HTMLタグ等を使用した投稿
  3. 追加ページの制限
  4. テーマ申請はしない(できない)

以上の4点でした。
一つずつ説明しましょう。

投稿機能の制限

Tumblrにはテキスト投稿、画像投稿、引用投稿などといった、用途に合わせた投稿方法が多く用意されています。
今回は「名前変換機能を使用した小説サイトのテーマ」という大きな目的があるので、
実際に利用するのはテキスト投稿のみなんですよね。
例えば、画像投稿なんかは、極端に言えば画像しか投稿できないので、テーマの目的とは離れてしまいます。
準備してあげるに越したことはないんですが、不要です。

HTMLタグ等を使用した投稿

名前変換機能はJavaScriptで…と考えているので、
テキスト投稿でも、通常のブログの記事を書くように、文字を打てばいいってものではありません。
名前を変えたいところに、指定のソースコードを書く必要が出てきます。

文字の置換という方法もあるのですが、
例えば「りん」という文字を「玲」という名前に変換させたい場合、
そのページにあるすべての「りん」が変換されてしまうため、
「りんご」という文字も「玲ご」になってしまいます。

こういったことは小説を書く側としても、後々面倒になってくるので、
だったら最初からソースコード書いてもらったほうが楽かと。

また、読み手がもっと小説を見やすいと感じるデザインにするため、
テキスト投稿内でもHTMLタグの記述が必要になってきます。
こちらは必須ではないんですけどね…やっぱりね…
せっかく書くなら、気持ち良く読んでもらいたいと思いませんか?

追加ページの制限

Tumblrには通常の投稿のほか、自分で自由にページを追加できる機能がございます。
大変便利ですし、入れようとも思ったのですが、

コ ー デ ィ ン グ 最 終 段 階 で 気 が つ く な ん て な
(Tumblr何年かぶりに触った結果がこれだよ)

すみません、こればっかりは本当にすみません。
利用者・希望者が多くいましたら、次回のアップデートで導入します。

…いつになるかはわかりませんが…˚‧º·(˚ ˃̣̣̥⌓˂̣̣̥ )‧º·˚

つまり、書き手が使用することのできる投稿方法が、
テキスト投稿のみで、ソースコードもちょっと書くよ!
ってことになります。

テーマ申請はしない(できない)

このテーマ申請に関してですが、Tumblr公式に「こういうテーマ作ったよ!」と伝えると、
Tumblr側で簡単にインストールできるようにしたり色々準備してくれるんです。
今回は申請をしていないので、その部分の説明はできませんが、
このテーマ申請にもルールがあります。

まず、Tumblrで用意している投稿形式全てに対応する必要があるということ。

今回はテキスト投稿のみとさせていただいているので、この地点でテーマ申請はできません。
いつか、ちゃんとテーマを作り込んで、申請までしたいなぁとは思っています。

デザインについて

「長い文章を読んでもストレスにならないようなデザイン」を心がけました。
小説サイトってどうしても文章が長くなってしまうので、
文章が画面に表示されて「うわっ…」って思われちゃいけないんですよね。

これは、書き手のライティングによるものも大きいのですが、
デザイン面ではどう解決してあげようか、と考えるのがこちらのお仕事。

font-familyをどうするか。文字サイズは?文字間は?行間は?見出しは?
そんなことを考えつつのデザイン制作でした。

本テーマのデザインは3ページ分

  1. インデックスページ
  2. 記事詳細ページ
  3. タグページ(絞り込みページ)

の3種類作成しています。

インデックスページ

170424_02
まず、ディスプレイいっぱいに背景色(とか背景画像)をどばーっと表示するの、
一度やってみたかったんです。
ここだけ、ここだけは私のやりたいことをやらさせていただきました。
「ここだけじゃなんのサイトかわかんないじゃん!」という声が聞こえてきますが、

い い ん で す 。 

夢小説サイトを見る人は、それを見ると思ってサイトに訪問します。
先ほども書いた通り、創作二次元はかなりグレーなものなので、
検索引っかからないようにとか、しなきゃならないんですよ。
同人やる人はわかると思いますが、これもマナーってやつですね。

170424_03
投稿記事一覧はつまり小説一覧でもあるので、

  1. タイトル
  2. タグ(対象キャラクターやシュチュエーションなど)
  3. キャッチコピー(大まかな内容)

の3点が一目見てわかるようにしました。

特にキャラクター名(もしくはシュチュエーション等)は、タグにすることによって、
そのキャラクターをタグページという括りで、一覧表示できるようにもなりますからね。

どういう仕様になっているかは次回のコーディングで説明しますが、
このテーマを作るにあたって一番重要視したいところが無事に実装できてよかった˚‧º·(˚ ˃̣̣̥⌓˂̣̣̥ )‧º·˚

だって、キャラクター名が見えると地雷踏まなくていいもんね(本音

記事詳細ページ

170424_04

小説の中身のページになります。
ここには、タイトル、タグ(キャラクターやシュチュエーション名)、小説本文が表示されるようになります。
インデックスページに書かれていたキャッチコピーはここでは表示されません。

コーディングというか、Tumblrの独自タグで作る時、ここが一番苦労しました。
できてみるとなんてことないんですが、ググっても出てこなかったので˚‧º·(˚ ˃̣̣̥⌓˂̣̣̥ )‧º·˚

タグページ(絞り込みページ)

170424_05

インデックスで表示されているタグ名をクリックすると飛ぶページ。
タグにキャラクター名を設定していると、そのキャラクターが出ている小説一覧が表示されるようにしたい!
という、完全に私得な感じで作りました。

使ってみると、結構便利だと思うんですよね…

次回予告

次回は実際にコーディングとTumblrの独自タグをどういう風に使ったかというのを説明します。
できてみると実はそんなに難しくはない?
でも、できるようになるまでが大変なんですよね…Tumblrって…

たいていのものが検索すると出てきますが、
こういう超限定的なテーマっていうのは需要もあまりないですし、やる方も少ないので、
少しでもお役に立てればと思います٩( ‘ω’ )و

昔はよく「魔法のiらんど」ってので読み漁ってたものです(✿´ ꒳ ` )一次も、二次も。
しばらくは見てなかったのですが「ドラッグ王子とマトリ姫」(スマホアプリ/ノベルゲーム)で完全に呼び戻されました・*・:≡( ε:)
夢はいいぞ!キャラクターと恋できるもんな!(現実逃避

それでは、また。

名前変換機能付きTumblrテーマ『macaron』ベータ1.0版
https://ds-macaron.tumblr.com/