01
Sites where you can edit the HTML
For anywhere you can open the template files: your own site, a static site generator, or a CMS whose theme you can edit.
What you need
Where to go
Open the HTML that every page loads. Usually that is the shared template containing the head tag: individual HTML files on a static site, or the header template if your site has a theme.
The code to paste
<script
src="https://cdn.mojikumi.jp/v1/mojikumi.min.js"
data-style="article"
></script>Check that it worked
Open an article and find a place where two brackets meet, or a comma runs into one. Where that gap has closed up, it is working. If you cannot tell by eye, your browser's inspector will show a class of mjk on the body element.
Change what it applies to
Left alone, Mojikumi looks through the containers it knows until it finds your body text. If you know which element holds it, name it in data-target. That is also the fix when navigation or the footer changes along with the article.
<script
src="https://cdn.mojikumi.jp/v1/mojikumi.min.js"
data-target=".post-body"
data-style="book"
></script>Undo it
Delete the few lines you pasted. Mojikumi only ever adds elements and classes for display; your text was never rewritten, so nothing is left in what you have saved.
Common problems here
- Pasted at the end of the body, the stylesheet arrives after the article has been painted once, and you see the setting change. Put the tag in the head.
- It loads on pages other than articles, which is fine: only the body element is ever touched, so there is no need to load it conditionally.
02
WordPress
Adds the tag to your header without editing theme files, so it survives a theme update.
What you need
Where to go
Install a snippet plugin such as WPCode or Code Snippets and register the tag as header output. If you run a child theme, writing it into header.php just before wp_head does the same thing.
The code to paste
<script
src="https://cdn.mojikumi.jp/v1/mojikumi.min.js"
data-target=".entry-content, .wp-block-post-content"
data-style="article"
></script>Check that it worked
Open a post to check. The admin bar can stay where it is: neither it nor the block editor is ever touched.
Change what it applies to
Which class wraps your body text depends on the theme. The code above names the two you meet most often, one from classic themes and one from block themes. If nothing changes, inspect a post and use the class you actually find.
<script
src="https://cdn.mojikumi.jp/v1/mojikumi.min.js"
data-target=".post-content"
data-style="book"
></script>Undo it
Disable or delete the snippet. Your posts were never rewritten, so nothing is left in the stored content.
Common problems here
- The block editor does not show the result. Check a published post instead.
- With a caching plugin, the change may not appear straight away. Clear the cache and look again.
03
Shopify
Edits the theme so the tag loads on every page. It applies to blog posts and product descriptions alike.
What you need
Where to go
From Online Store, open your theme and choose Edit code. Open theme.liquid in the layout folder, paste the tag just before the closing head tag, and save.
The code to paste
<script
src="https://cdn.mojikumi.jp/v1/mojikumi.min.js"
data-target=".article-template__content, .rte"
data-style="article"
></script>Check that it worked
Open a published blog post. The theme preview works for this too.
Change what it applies to
The code above uses the class names from standard themes such as Dawn. To narrow it to articles, or widen it to product descriptions, inspect the page you care about and use the class you find.
<script
src="https://cdn.mojikumi.jp/v1/mojikumi.min.js"
data-target=".article-template__content"
data-style="article"
></script>Undo it
Delete the line from theme.liquid and save. Duplicating the theme before you edit gives you a way back at any point.
Common problems here
- A theme update can drop your edit. Repeat the steps afterwards.
- Checkout is not affected, because Shopify does not load theme code there.
04
Webflow
Goes in the project's custom code, and applies to the Japanese inside rich text elements.
What you need
Where to go
Open Custom code in Project settings, paste the tag into Head code, and save. It only reaches the site once you publish again.
The code to paste
<script
src="https://cdn.mojikumi.jp/v1/mojikumi.min.js"
data-target=".w-richtext"
data-style="article"
></script>Check that it worked
Check on the published site. Custom code does not run inside the editor's preview.
Change what it applies to
Rich text elements carry the w-richtext class. To limit it to a class of your own, name that one instead.
<script
src="https://cdn.mojikumi.jp/v1/mojikumi.min.js"
data-target=".article-body"
data-style="article"
></script>Undo it
Remove the line from Head code and publish again.
Common problems here
- Projects without a paid site plan never emit custom code to the published site.
- Saving is not enough on its own. Publish for the change to appear.
05
Squarespace
Goes in the site-wide code injection, which is a feature of the higher plans.
What you need
Where to go
Open Code Injection in the settings and paste the tag into the Header field. Use the site-wide setting rather than the per-page one.
The code to paste
<script
src="https://cdn.mojikumi.jp/v1/mojikumi.min.js"
data-target=".sqs-html-content"
data-style="article"
></script>Check that it worked
Check on a published page. In edit mode the editing chrome sits over the text, so look at the ordinary view.
Change what it applies to
Text blocks put their content inside the sqs-html-content class. To limit it to blog posts, inspect a post and use the class you find there.
<script
src="https://cdn.mojikumi.jp/v1/mojikumi.min.js"
data-target=".blog-item-content"
data-style="article"
></script>Undo it
Clear the field and save.
Common problems here
- The lower plans have no field for injected code.
- The preview in edit mode may not show the result.
06
Ghost
Goes in the site-wide code injection. There is no need to touch the theme.
What you need
Where to go
Open Code injection from Settings and paste the tag into Site header, then save.
The code to paste
<script
src="https://cdn.mojikumi.jp/v1/mojikumi.min.js"
data-target=".gh-content, .post-content"
data-style="article"
></script>Check that it worked
Open a published post to check. The editor itself is never affected.
Change what it applies to
Most themes wrap the body in gh-content. On a theme of your own, inspect a post and use the class you find there.
<script
src="https://cdn.mojikumi.jp/v1/mojikumi.min.js"
data-target=".post-content"
data-style="book"
></script>Undo it
Clear the field and save.
Common problems here
- Themes differ in what they call the body element. If nothing changes, check data-target.
- Posts delivered by email are not affected; this is only for pages shown in a browser.
07
Services not listed here
Any other service works the same way, as long as its settings let you paste code.
What you need
Where to go
Find the field your service uses for injected code. It is usually called custom code, code injection, or something about the header, and it lives in the settings for the whole site. Choose the site-wide field rather than a per-page one.
The code to paste
<script
src="https://cdn.mojikumi.jp/v1/mojikumi.min.js"
data-style="article"
></script>Check that it worked
Check on a published article rather than in the editor's preview, where the editing chrome is mixed into the page and can change what you see.
Change what it applies to
Every service names its body container differently. On a published article, inspect the body text and give data-target the class of the element wrapping all of it.
<script
src="https://cdn.mojikumi.jp/v1/mojikumi.min.js"
data-target=".article-body"
data-style="article"
></script>Undo it
Clear the field and save. Nothing was written into your articles, so you can move to another approach whenever you like.
Common problems here
- If the editor itself starts looking different, your service loads the same code into its editing screen. Narrow data-target to the body element only.
- If saving changes nothing, the service may still be serving a cached page. Wait, or clear the cache from its settings.
08
When it does not work
Symptoms that come up whatever you are running. The explanations behind them are in the docs.
- Nothing changed
- Most likely data-target does not match your body element. Check in the inspector whether that element has a class of mjk. If it does not, the selector is wrong. If it does and the page still looks the same, your browser is already doing this work itself.
- Too much changed
- If navigation or the footer moved too, narrow data-target to the body element. To leave one passage out, mark that element with data-no-mojikumi.
- The editor looks wrong
- Admin bars and block editors are skipped, but a service with its own arrangement can slip through. Narrowing data-target to the body element settles it.
- The page feels slower
- There is one file to load, just under 6KB compressed. Where the browser can do the work itself, nothing touches your text at all. If you would rather it never did, set data-precision to native.