WordPressのビジュアルエディタで自動段落一字下げ

高橋文樹

2015 年 7 月 3 日
読了3分（1,886文字）
css WordPress 電子書籍

この投稿は 8年半前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。

WordPressのビジュアルエディタであるTinyMCEで自動行頭一字下げを実現したのでご報告（？）です。要はこういうことです。

自動行頭一字下げとは？

「段落一字下げ」とかいろんな言い方がありますが、「段落の一番最初を一文字分空白にする」というアレですね。ブログでは段落（pタグ）の前後にマージンがつくことが多いのですが、日本語の段落では特に前後一行あけなどせず、「段落の開始時点で一字下げる」というのが通常のルールです。

MS Wordなんかにはこの機能があって、改行するとその時点で次の行からは一字下げになったりします。

行頭一字下げの機能がないとなにが問題か

破滅派に投稿される作品はWordPressの管理画面から投稿するというより、なんらかのソフトを使って作成したテキスト（ないしリッチテキスト）をコピペするというパターンが多いようです。

で、特にWordの場合は自動行頭一字下げが変になることが多いですね。小説などを書いていると「鉤括弧ではじまる行は一字下げをしない」というルールを遵守することが多いのですが、次のようなケースで自動行頭一字下げが壊れます。

　地の文を書く（この行は一字下げ）
「そして、会話を書く」（この行は自動一字下げされてしまったので、BSキーなどで一字下げを解除）
そして、この行は一字下げじゃなくなる

Wordは一度一字下げが解除されるとその後も自動一字下げが解除されたままなので、それ以降、全角スペースを入れていくことになります。次の日になると、保存・起動をした結果かどうかわかりませんが、再び自動一字下げが有効になっていたりします。結果として、何日もかけて小説を書いたりすると、一字下げが自動と手動の入り混じった変なテキストデータが出来上がります。

自動行頭一字下げを実現するには？

さて、管理画面から入稿したデータを表示するテーマ側で自動行頭一字下げを実現するのはそれほど難しくありません。こんなCSSを用意します。

.indent{
    text-indent: 1em;
}

indentというクラスがついた要素は1文字インデントするということですね。で、Javascriptを利用して、該当する要素すべてにindentというクラスをつけてまわります。

jQuery(document).ready(function($){
    // 投稿本文のpタグを全部取得
    $('.post-content p').each(function(i, p){
        if( ! /^[  【】《〔〝『「（”"'’\(\)]/.test($(p).text()) ){
            // 正規表現で一字下げしない文字から始まっていなかったら
           // インデント用のクラスを付与
            $(p).addClass('indent');
        }
    });
});

これを行うことで、「全角スペースがあろうがなかろうが行頭一字下げ」という状況が実現できます。