01
HTMLを直接編集できるサイト
テンプレートのファイルを触れる場合です。自作のサイト、静的サイトジェネレーター、テーマを編集できるCMSが当てはまります。
必要なもの
開く場所
すべてのページで読み込まれるHTMLを開きます。多くの場合は、headタグを含む共通のテンプレートです。静的サイトなら各HTMLファイル、テーマがあるならヘッダー用のテンプレートが該当します。
貼り付けるコード
<script
src="https://cdn.mojikumi.jp/v1/mojikumi.min.js"
data-style="article"
></script>効いているか確かめる
記事のページを開き、括弧や句読点が続いている箇所を見てください。『「引用」』のような並びが詰まっていれば効いています。分かりにくいときは、ブラウザの検証ツールで本文の要素にmjkというクラスが付いているかを確かめられます。
範囲を変える
何も指定しなければ、本文らしい要素を上から順に探します。適用先が決まっているなら、data-targetにその要素のセレクターを書きます。ナビゲーションやフッターまで変わってしまうときも、これで狭められます。
<script
src="https://cdn.mojikumi.jp/v1/mojikumi.min.js"
data-target=".post-body"
data-style="book"
></script>元に戻す
貼った数行を消せば元に戻ります。Mojikumiが足すのは表示のための要素とクラスだけで、本文そのものは書き換えていません。保存されている記事のデータには何も残りません。
この環境でよくある問題
- bodyの終わりに貼ると、CSSが届く前に本文が一度描画され、字組みの変わる瞬間が見えます。headの中に置いてください。
- 記事以外のページでも読み込まれますが、対象は本文の要素だけなので、ページごとに読み込みを分ける必要はありません。
02
WordPress
テーマのファイルを編集せず、ヘッダーへコードを追加する方法です。テーマを更新しても設定が残ります。
必要なもの
開く場所
スニペット系のプラグイン（WPCodeやCode Snippetsなど）を追加し、ヘッダーへ出力するコードとして登録します。子テーマを使っているなら、header.phpのwp_headの直前へ直接書いても同じです。
貼り付けるコード
<script
src="https://cdn.mojikumi.jp/v1/mojikumi.min.js"
data-target=".entry-content, .wp-block-post-content"
data-style="article"
></script>効いているか確かめる
投稿ページを開いて確認します。管理バーが出ていても構いません。管理バーとブロックエディターの中では動かないようにしてあります。
範囲を変える
本文を囲むクラス名はテーマによって違います。上のコードは、従来のテーマとブロックテーマでよく使われる2つを指定しています。変化がない場合は、投稿ページで本文を検証し、実際のクラス名に置き換えてください。
<script
src="https://cdn.mojikumi.jp/v1/mojikumi.min.js"
data-target=".post-content"
data-style="book"
></script>元に戻す
登録したスニペットを無効化するか削除すれば元に戻ります。投稿の内容は書き換えていないため、記事のデータには何も残りません。
この環境でよくある問題
- ブロックエディターの編集画面には適用されません。仕上がりは公開後のページで確認してください。
- キャッシュ系のプラグインを使っている場合、貼った直後は反映されないことがあります。キャッシュを削除してから見てください。
03
Shopify
テーマのコードを編集し、全ページ共通のヘッダーへ追加します。ブログ記事にも商品説明にも効きます。
必要なもの
開く場所
管理画面のオンラインストアからテーマを開き、「コードを編集」を選びます。layoutフォルダーのtheme.liquidを開き、headタグの終わりの直前へ貼り付けて保存します。
貼り付けるコード
<script
src="https://cdn.mojikumi.jp/v1/mojikumi.min.js"
data-target=".article-template__content, .rte"
data-style="article"
></script>効いているか確かめる
公開中のブログ記事を開いて確認します。テーマのプレビューでも確認できます。
範囲を変える
上のコードはDawnなど標準的なテーマのクラス名です。記事だけに絞りたい場合や、逆に商品説明にも広げたい場合は、対象のページで本文を検証してクラス名を確かめてください。
<script
src="https://cdn.mojikumi.jp/v1/mojikumi.min.js"
data-target=".article-template__content"
data-style="article"
></script>元に戻す
theme.liquidから該当の行を削除して保存します。編集の前にテーマを複製しておくと、いつでも戻せます。
この環境でよくある問題
- テーマを更新すると編集内容が失われることがあります。更新後に同じ手順をやり直してください。
- チェックアウト画面には適用されません。Shopifyがそこではテーマのコードを読み込まないためです。
04
Webflow
プロジェクト設定のカスタムコードへ追加します。リッチテキスト要素の中の日本語に効きます。
必要なもの
開く場所
Project settingsのCustom codeを開き、Head codeの欄へ貼り付けて保存します。反映にはサイトの再公開が必要です。
貼り付けるコード
<script
src="https://cdn.mojikumi.jp/v1/mojikumi.min.js"
data-target=".w-richtext"
data-style="article"
></script>効いているか確かめる
公開したサイトで確認します。エディター内のプレビューではカスタムコードが実行されません。
範囲を変える
リッチテキスト要素にはw-richtextというクラスが付きます。自分で付けたクラスに絞りたい場合は、そのクラス名を指定してください。
<script
src="https://cdn.mojikumi.jp/v1/mojikumi.min.js"
data-target=".article-body"
data-style="article"
></script>元に戻す
Head codeから該当の行を削除し、もう一度公開します。
この環境でよくある問題
- Site planに加入していないプロジェクトでは、カスタムコードが公開サイトへ出力されません。
- 保存しただけでは反映されません。公開を実行してください。
05
Squarespace
サイト全体のCode Injectionへ追加します。コードを差し込める欄は上位プランの機能です。
必要なもの
開く場所
設定のCode Injectionを開き、Headerの欄へ貼り付けて保存します。ページ単位のCode Injectionではなく、サイト全体の設定を使います。
貼り付けるコード
<script
src="https://cdn.mojikumi.jp/v1/mojikumi.min.js"
data-target=".sqs-html-content"
data-style="article"
></script>効いているか確かめる
公開されているページで確認します。編集モードでは編集用の要素が重なるため、通常の表示で見てください。
範囲を変える
テキストブロックの中身はsqs-html-contentというクラスに入ります。ブログ記事だけに絞りたい場合は、記事ページで本文を検証してクラス名を確かめてください。
<script
src="https://cdn.mojikumi.jp/v1/mojikumi.min.js"
data-target=".blog-item-content"
data-style="article"
></script>元に戻す
Code Injectionの欄から削除して保存すれば元に戻ります。
この環境でよくある問題
- 下位のプランではコードを差し込む欄が使えません。
- 編集モードのプレビューには適用されないことがあります。
06
Ghost
サイト全体のCode injectionへ追加します。テーマを編集する必要はありません。
必要なもの
開く場所
管理画面のSettingsからCode injectionを開き、Site headerの欄へ貼り付けて保存します。
貼り付けるコード
<script
src="https://cdn.mojikumi.jp/v1/mojikumi.min.js"
data-target=".gh-content, .post-content"
data-style="article"
></script>効いているか確かめる
公開されている記事を開いて確認します。エディターの中には適用されません。
範囲を変える
多くのテーマはgh-contentというクラスで本文を囲みます。独自のテーマを使っている場合は、記事ページで本文を検証してクラス名を確かめてください。
<script
src="https://cdn.mojikumi.jp/v1/mojikumi.min.js"
data-target=".post-content"
data-style="book"
></script>元に戻す
Code injectionの欄から削除して保存します。
この環境でよくある問題
- テーマによって本文のクラス名が異なります。変化がない場合はdata-targetを確かめてください。
- メールで配信される記事には適用されません。ブラウザで表示されるページだけが対象です。
07
一覧にないサービス
上に挙げていないサービスでも、管理画面からコードを差し込めるなら同じ方法が使えます。
必要なもの
開く場所
管理画面で、コードを差し込む欄を探します。「カスタムコード」「Code Injection」「ヘッダーに追加するコード」などの名前で、サイト全体の設定にあります。ページ単位の設定ではなく、全ページ共通の欄を選びます。
貼り付けるコード
<script
src="https://cdn.mojikumi.jp/v1/mojikumi.min.js"
data-style="article"
></script>効いているか確かめる
公開されている記事のページを開いて確認します。管理画面のプレビューでは編集用の要素が混ざるため、本番のページで見るほうが確実です。
範囲を変える
本文を囲む要素の名前はサービスごとに違います。記事ページで本文を右クリックして検証を開き、本文全体を囲んでいる要素のクラス名をdata-targetに書きます。
<script
src="https://cdn.mojikumi.jp/v1/mojikumi.min.js"
data-target=".article-body"
data-style="article"
></script>元に戻す
カスタムコード欄から消して保存すれば元に戻ります。記事の内容には手を入れていないため、あとから別の方法へ移ることもできます。
この環境でよくある問題
- 編集画面の表示まで変わる場合、そのサービスは編集画面にも同じコードを読み込んでいます。data-targetを本文の要素だけに絞ってください。
- 保存しても反映されないときは、サービス側のキャッシュが残っている可能性があります。時間をおくか、キャッシュの削除を試してください。
08
うまくいかないとき
どの環境でも起きる症状です。原因の詳しい説明はDocsにあります。
- 何も変わらない
- 本文の要素とdata-targetが一致していない可能性が高いです。検証ツールで本文の要素にmjkというクラスが付いているかを確認してください。付いていなければセレクターが違います。付いているのに変化が見えない場合は、そのブラウザがすでに標準の機能で同じ処理をしています。
- 適用範囲が広すぎる
- ナビゲーションやフッターまで変わる場合は、data-targetを本文の要素だけに絞ります。一部分だけ外したいときは、その要素にdata-no-mojikumiを付けます。
- 編集画面の表示が乱れる
- 管理バーやブロックエディターの中では動かないようにしていますが、独自の作りだと届かないことがあります。data-targetを本文の要素だけに絞ると確実です。
- 表示が遅くなった気がする
- 読み込むファイルは1つで、圧縮後6KB弱です。標準の機能で足りるブラウザでは、そもそも本文へ手を入れません。気になる場合はdata-precisionにnativeを指定すると、ブラウザの実装だけを使います。