Quick Start for Tumblr
This guide will explain how to install and start using Oissu for your stories or translations on Tumblr.
tip
This guide won't cover navigating starting a blog on Tumblr and how to use its features, but links several other guides if you're stuck anywhere. Before getting started, make sure you have a Tumblr blog set up properly, ready to post!
Before you start!
Oissu uses the HTML post editor on Tumblr, which makes its markup invisible on platforms that don't support it. Make sure to switch to the HTML editor before continuing. Here's a guide on switching your post editor.
- If you're new to HTML, it's a markup language for formatting text on the web. Here's a short guide on how to format your text in HTML.
Installation
Open your theme's HTML editor (here's how), and insert these lines of code right after the <head> tag.
1<script src="https://uchuu.yuukun.dev/oissu@1"></script> 2<meta name="text:Oissu Settings" content=""></meta> 3<script oissu>`{text:Oissu Settings}`</script>
Installation Example
This will differ wildly depending on your themes, but it should look something similar to this.
1<!-- Theme credits, source code, etc --> 2<html> 3 <head> 4 <script src="https://uchuu.yuukun.dev/oissu"></script> 5 <meta name="text:Oissu Settings" content=""></meta> 6 <script oissu>`{text:Oissu Settings}`</script> 7 8 ...more code down below... 9</html>
Usage
On any post, start your story with <div class="oissu"> and end them with </div>:
1<div class="oissu"> 2 <p> 3 <b>Keito:</b> Sakuma-san! We’ve got a 4 situation— I need you to lend me a hand! 5 </p> 6 <p> 7 <b>Rei:</b> Eh~…? 8 </p> 9</div>
Keito: Sakuma-san! We’ve got a situation— I need you to lend me a hand!
Rei: Eh~…?
Oissu markup is invisible, meaning on platforms that don't support custom HTML (Tumblr app, mobile site etc.) the posts will look as if nothing was added. Here's a list of formatting Oissu recognizes.
Dialogue
Put each line in a seperate paragraph (<p>) tag. Bold (<b> or <strong>) the common name (usually the character's first name) and the colon (:). You don't have to repeat the name every line.
1<p> 2 <b>Arashi:</b> Hmm, Izumi-chan, you’re so 3 unromantic. Of course it was because you 4 were sooo focused, and <i>sooo</i> handsome 5 while working just now~ 6</p> 7<p> 8 You were super cool, and even I, not to 9 mention Anzu-chan, was staring in awe. 10</p> 11<p> 12 As expected, I absolutely <i>adore</i> the 13 hardworking Izumi-chan the most. 14</p> 15<p> 16 <b>Izumi:</b> Oi, you shi—Tsk! 17</p> 18<p> 19 (The photography staff are still here, so can’t 20 you be a bit more aware of your actions and <i>not</i> 21 hug me like that?! It’s so embarrassing?!) 22</p>
Arashi: Hmm, Izumi-chan, you’re so unromantic. Of course it was because you were sooo focused, and sooo handsome while working just now~
You were super cool, and even I, not to mention Anzu-chan, was staring in awe.
As expected, I absolutely adore the hardworking Izumi-chan the most.
Izumi: Oi, you shi—Tsk!
(The photography staff are still here, so can’t you be a bit more aware of your actions andnot hug me like that?! It’s so embarrassing?!)
Images
You can just add an image to your post normally or with an <img> tag. Tumblr wraps <img> tags with <figure> tags when you post.
note
Tumblr wraps images with <figure>
automatically when you post, so you just
need to specify <img> or upload with the
default post editor!
1<p> 2 <b>Aira:</b> Huh? It looks like this time 3 there’s something pulling on your rod, 4 Sazanami-senpai? 5</p> 6<p> 7 <b>Jun:</b> Woah!? There really is!? 8</p> 9<figure> 10 <img src="https://media.tumblr.com/path/to/img.png"> 11</figure> 12<p> 13 <b>Jun:</b> Damn, it’s strong as hell…! Feels 14 like it's definitely gonna be a whopper! 15</p> 16<p> 17 <b>Aira:</b> Dear God and Buddha~! Please 18 let it be anything but another umbrella~! 19</p> 20<p> 21 <b>Jun:</b> Alriiight, here we <i>goooooo</i>—! 22</p>
Aira: Huh? It looks like this time there’s something pulling on your rod, Sazanami-senpai?
Jun: Woah!? There really is!?
Jun: Damn, it’s strong as hell…! Feels like it's definitely gonna be a whopper!
Aira: Dear God and Buddha~! Please let it be anything but another umbrella~!
Jun: Alriiight, here we goooooo—!
Narration
Use <blockquote> to denote any part of the story that is not a spoken line by any character. Include <p> tags for each individual line.
- If the text in your
<p>tag starts with Location:, Season:, or Time:, the block will be formatted differently than a narrated line (see example below). - If you want to turn a line into a full-width block, use
<p class="os-block">Block content</p>.
1<blockquote> 2 <p> 3 <b>Season:</b> Summer 4 </p> 5 <p> 6 <b>Time:</b> One day in September 7 </p> 8</blockquote> 9<figure> 10 <img src="https://media.tumblr.com/path/to/img.png"> 11</figure> 12<blockquote> 13 <p>In a corner of the Hanging Garden</p> 14</blockquote> 15<p> 16 <b>Leo:</b> ♪ ~ ♪ ~… 17</p> 18<p> 19 (Um~… no no, that’s not the right 20 feeling either! The variation in 21 this section is soooo dull!) 22</p> 23<p> 24 (Waaahhh! My eyes! My hands! My 25 brain! <i>Any</i> part of my body 26 would be fine一just help me find 27 a solution quick!) 28</p>
Season: Summer
Time: One day in September
In a corner of the Hanging Garden
Leo: ♪ ~ ♪ ~…
(Um~… no no, that’s not the right feeling either! The variation in this section is soooo dull!)
(Waaahhh! My eyes! My hands! My brain! Any part of my body would be fine一just help me find a solution quick!)
Story options
You can customize a few options by adding attributes to the main <div> tag. All options are prefixed with data-oissu-. For a list of configurable options, see Story Options.
1<div 2 class="oissu" 3 data-oissu-display="ymnsk-winter" 4 data-oissu-next="https://fortunebanquet.tumblr.com/link Chapter 2" 5> 6 <figure> 7 <img src="https://media.tumblr.com/path/to/img.png"> 8 </figure> 9 <p> 10 <b>Hinata:</b> 11 To everyone passing by, hello~! ☆ 12 </p> 13 <p> 14 I’m Aoi Hinata! 15 </p> 16 <p> 17 <b>Yuuta:</b> And I’m Aoi Yuuta! 18 </p> 19</div>
Hinata:To everyone passing by, hello~! ☆
I’m Aoi Hinata!
Yuuta: And I’m Aoi Yuuta!
Example
1<div class="oissu"> 2 <blockquote> 3 <p>Season: Past / Summer</p> 4 <p>Location: Yumenosaki Practice Room</p> 5 <p>(One year ago, during a practice for Supernova.)</p> 6 </blockquote> 7 <figure> 8 <img src="https://media.tumblr.com/path/to/img.png" /> 9 </figure> 10 <p> 11 <b>Chiaki:</b> You guyyyyyyyys! Do you 12 want to become kaijuuuuuuuu!? 13 </p> 14 <p> 15 <b>Tetora:</b> …… 16 </p> 17 <p> 18 <b>Midori:</b> No, not really… 19 </p> 20 <p> 21 <b>Chiaki:</b> Do youuuuuu!? 22 </p> 23 <p> 24 <b>Shinobu:</b> Oh, this is going to 25 loop over and over until we give him 26 an energetic “Yes!”. 27 </p> 28 <p> 29 <b>Midori:</b> Which means he’s not 30 actually asking for our opinion at all… 31 Morisawa-senpai’s always like this… 32 </p> 33</div>
Season: Past / Summer
Location: Yumenosaki Practice Room
(One year ago, during a practice for Supernova.)
Chiaki: You guyyyyyyyys! Do you want to become kaijuuuuuuuu!?
Tetora: ……
Midori: No, not really…
Chiaki: Do youuuuuu!?
Shinobu: Oh, this is going to loop over and over until we give him an energetic “Yes!”.
Midori: Which means he’s not actually asking for our opinion at all… Morisawa-senpai’s always like this…