ブログの見出しにhタグをまとめて指定する初歩の正規表現

ブロガーの皆さん、記事をどのように書いていますか？

すなおにブログの編集画面で入力・編集しているんだったら、もっとスピードアップできないかと思っている人は多いでしょう。

そんな初心者ブロガーのために、見出し設定の手間を省くテクニックを紹介します。

 

見出しを意識してブログ記事を書く

ブロガーの多くは、たぶんSEOのために見出しの書き方を意識しているでしょう。
適切な見出しを付けるのは記事の読みやすさにつながるだけでなく、検索順位でも有利に働くことが多いからです。

 

ブログ記事に見出しを入れるには

たとえばWordPressの記事で見出しを使うなら、編集画面のツールバーでドロップダウンリストから見出しを選択しているでしょう（クラシックエディタの場合）。

見出しを設定すると次の画面のようになります。

ビジュアル編集画面ではわかりませんが、テキスト画面に切り替えると見出しの部分は

<h2>～</h2>

とか・・・

<h3>～</h3>

といったタグでマークアップされています。

 

編集はテキストエディタでやったほうが効率的

しかしWordPressももちろんですが、ブログサービスのの編集画面で直接記事を書くのはあまり効率よくありません。

かといって、装飾機能が強力なワープロなどのいわゆるリッチテキストでの編集も、処理が遅くて使い勝手はいまひとつ。

できればテキストエディタでささっと編集して、ブログ画面にはコピー&ペーストでスマートに作業したいものです。

 

テキストエディタで見出しを作る

ところが文字編集に機能を絞ったテキストエディタの多くは見出しを表現することを考えていません。そこで、なんらかの決まりを自分で決めてテキストを書きます。

たとえば行の先頭に■があれば見出しというふうに決めておき、■がひとつなら大見出し、ふたつなら中見出し、みっつなら小見出しといった感じです。

これでテキストエディタの編集画面でも、見出しが少し見分けやすくなりました。

 

WZエディタのアウトライン機能

高機能なエディタの中には、見出しを自動的に判断して判りやすく表示してくれるものもあります。

私が使っているWZエディタでは、行の先頭に.（ドット）を入力するとその行は見出し扱いになります。見出しになった行は自動的に書式が設定されて、本文との見分けが付きやすくなります。

この機能をWZエディタではアウトラインといいます。

アウトライン機能にはほかにもたくさんの特徴がありますが、ここでは機能の詳細については割愛します。

 

HTMLを知らなくても書けるMarkdown記法

WZエディタのような独自の機能を持たない場合でも、見出しを書く方法はあります。

というより、Markdown（マークダウン）記法という決まりにしたがって記事を書けば自動的にHTML形式に変換してくれるんで、ブログ記事作成には見出しだけのアウトライン機能よりさらに適しています。

Markdownの書き方は、たとえば次のような感じです。

# 大見出し
## 中見出し
### 小見出し

このように書いておくと、<h2>～</h2>、<h3>～</h3>、<h4>～</h4>･･･のように自動で変換してくれます。

さっきの例との違いは■やドットを使うか、#を使うかだけですね。

 

Markdownの弱点

Markdown記法はHTML形式の文書をもっと手軽に書けるようにしたものです。

ふつうのテキストエディタがあればいいので、書くことそのもについてはHTMLエディタのような専用ソフトはいりません。

ただし、専用エディタがあるとページがどのように表示されるかプレビューできるのは便利です。

このようにMarkdown記法はとても便利なんですが、ひとつ大きな弱点があります。日本国内では対応しているブログサービスがはてなブログとTumblrぐらいしかないのです。

インストール型のブログだとMovable Typeやa-blog CMSはMarkdownに対応、WordPressもプラグインで対応あるいは新しい編集画面のGutenbergなら直接マークダウン記法が使えますが、多くのブログサービスではまだ利用できないのが残念です。

 

エディタの見出しをｈ要素に置き換える

テキストからHTMLに簡単に変換してくれるMarkdownはひとまず置いておいて、テキストエディタの簡略的な見出しだけでも、HTMLに変換してくれたら手間が省けそうですね。

じつは、ツールひとつとちょっとした知識があればこれができます。

 

文字列置換で見出しをHTML形式に変換しよう

ワープロやエディタなど文字を編集するソフトには文字列の検索・置換機能がありますね。もちろんExcelのような表計算ソフト、PowerPointなどのプレゼンテーションソフトでも検索や置換ができます。

この文字列置換機能を使って、テキストエディタ上の見出しをHTMLのh要素に書き換えてしまいましょう。

WZ Editorで編集したテキストならドット2個で始まる行を<h2>タグにして最後を</h2>タグで閉じます。

ドット3個なら<h3>～</h3>に置き換えます。

 

難題は終了タグ

ただし、問題がひとつあります。見出しの始まりはドットの数で判るとして、見出しの終わりはどうやって判断したらいいでしょうか？

見出しの文字数がすべて同じなら数を数えて置換することもできますが、ふつうはそうはいきません。

そこで正規表現というワザを使います。

 

難しい置換も正規表現で一発クリア

正規表現は、ちょっと高機能なテキストエディタや文字列検索／置換ツールならたいてい備えている上級者向けのオプションです。

指定の方法がちょっと難しいんですが、見出しをタグに置き換えるだけという簡単な使い方に絞り込んでなるべく単純な指定を考えたので、後ほど紹介します。

 

置換専門のツールを使おう

正規表現を使って見出しをタグに変換するにはもうひとつ問題があります。

ブログ本文で使う見出しには最大6つのレベルがあって、だいたいh2～h4の3レベルぐらいをよく使います（h1はふつう記事タイトルに使うので本文には使いません）。

ところがテキストエディタの文字列置換機能は、単語ひとつをほかの単語に置き換えるような使い方に合せて作られているので、h2～h4を置き換える作業を繰り返すのがめんどうです。正規表現を使い慣れていない人にとっては間違いも起きやすくなります。

そこでお薦めなのが、文字列置換専用のツールを使うことです。

h2～h4を置換する設定をぜんぶまとめて登録しておける置換ソフトがあれば、一回の作業で見出しをぜんぶ書き換えてくれます。

私はWindowsユーザーなのでWindows版のRepl-Aceという無料ソフトを使っています。

Repl-Aceのダウンロードページ（ベクター ソフトライブラリ）

 

Repl-Aceと正規表現で見出しを一発変換

それではRepl-Aceを使った見出しの置換方法を紹介します。

Repl-Aceを入手する

Repl-Aceは正式にはRepl-Ace on .NETといいます。Windows版ですが、動作にはMicrosoft .NET Framework 2.0以上が必要なので、古いパソコンを使っている人は注意してください（最近買ったパソコンなら最初から入っているので問題ありません）。

Repl-Ace on .NETのダウンロードページ

ダウンロードしたファイルを適当なフォルダに展開します。アーカイブはZIP形式なのでWindows本体だけで展開できます。

 

Repl-Aceを起動する

展開したファイルの中にあるRepl-Aceというファイル（拡張子を表示しているときはRepl-Ace.exe）を実行するとすぐに起動します。

インストールは不要なので、あらかじめアプリケーション用フォルダに入れて、デスクトップやスタートメニューにショートカットを登録しておくといいでしょう。

 

Repl-Aceの画面と基本的な使い方

Repl-Aceの画面を説明します。

1.検索する場所
置換したいファイルすなわちブログの原稿を保存しているフォルダを指定します。

 

2.検索ファイル名
置換したいファイルがわかっていればファイル名を入力します。<検索>ボタンをクリックすると、すぐ下の【対象ファイルを選ぶ】リストにフォルダ内で見つかったファイルがまとめて表示されます。

指定したフォルダのさらに下にあるフォルダの中までまとめて検索したいときは[サブフォルダも含める]チェックボックスをオンにしてください。

 

3.対象ファイルを選ぶ
フォルダ内で見つかったファイルがすべて表示されます。テキストだけでなく画像ファイルなども表示されるので注意してください。

左のチェックボックスにマークしているファイルすべてが文字列置換の対象になるので、関係のないファイルはチェックを外しておきます。

左上の[すべて解除]でいったんぜんぶチェックを外してから、必要なものだけクリックするのもいいでしょう。

 

4.置換処理の内容を設定する
置換したい作業をすべてこのリストに登録します。たとえば、大見出しの置換用、中見出し用、小見出し用をそれぞれ1行ずつ登録します。

登録した中から左にチェックが入ったものだけが実際に処理されます。

処理はリストの上から順に行うので、いちばん最初に実行したいものから順に登録します。
右側のボタンで並び順を替えることもできます。

 

5.検索文字列、置換文字列
見出し用の記号とそれを置換するhタグをまずここに書き込んでから、[追加]ボタンをクリックすると、上のリストに登録されます。

このあと紹介する設定では[正規表現を使う]と[行モード]のふたつのチェックボックスをマークしておいてください。

 

6.[更新]ボタン
もし設定を書き間違えたときは、上のリストで間違えている行を選択してから、検索文字列や置換文字列を修正してこの[更新]ボタンをクリックしてください。

 

7.他の機能
リストに登録した置換設定をひとつにまとめた処理プランを保存できます。

いちど登録したプランは変更しない限りずっと残っていますが、セットを処理プランとして保存しておけば、いろいろな置換処理を使い分けたいときに保存しておいた設定を簡単に切り替えることができます。

 

8.[実行]ボタン
すべての設定が終わったら[実行]をクリックして置換を行います。

 

正規表現を使った検索と置換の設定例

では、正規表現を使って見出しを置換するための設定を紹介します。
ドット2個で始まる大見出しを

<h2>～</h2>

タグに置き換えるための設定は次のようになります。\（バックスラッシュ）記号は半角の￥記号に置き換えてください。

検索文字列 ^\.{2}([^\.].*)\r\n
置換文字列 \r\n$1\r\n\r\n

設定の細かい説明は省きます。

ドット3つで始まる行をh3タグに変換したいときは数字の2の部分を3に書き換えてください。
同様にドット4つの行をh4に変換したいときは4に書き換えます。

$1のところは修正してはいけません。
\r\nは、Windowsパソコンでの改行を表します。
MacOS Xでは\nになります。

置換文字列のほうでいちばん最初にひとつ改行があるのは、見出しの前で改行して空白行を入れているからです。

置換文字列の最後にあるふたつの改行は、まずタグの最後で一回改行して、次の行でもう一回改行することでやはり空白行を入れているためです。

タグの前後に空白行がいらないときは、前後の\r\nをひとつずつ削除して構いません。うしろの改行ひとつは残しておきましょう。

Repl-Aceで置換結果をチェックし、好みに応じて修正してください。

この設定をh2～h6の5つ登録します。もしブログでh5とh6は使わないと決めているならh2～h4の3つだけ登録しても構いません。

 

Repl-Aceで置換してみよう

置換対象のフォルダとファイルを指定し、検索文字列と置換文字列の指定が終わったら処理を実行します。

step
1[実行]ボタンをクリック

step
2「処理を開始します」のメッセージが出るので[OK]をクリック

step
3処理結果画面を表示

処理結果画面には処理を行ったファイルの名前とフォルダ、置換を行った箇所の数が表示されます。

ここでリストをクリックするとエディタを起動して処理結果を確認できます。

以上で文字列の一括置換は終了です。

置換前のファイルはバックアップデータとして保存されています。

処理結果画面右上にある[他の機能]をクリックすると、[すべてバックアップから戻す]コマンドで元の状態に戻すことができます。

 

見出しの置換だけでもブログ作成の手間が省ける

置換が終わったテキストファイルを開いて内容を全部選択してから、ブログの編集画面にコピー＆ペーストすれば、エディタ上で見出しだった行は、HTMLのタグになります。

ただし、そのままペーストしてはいけません。
必ずテキストモードに切り替えてから貼り付けしてください。

このように、あらかじめ一括置換ツールで処理をしておけば、ブログ編集画面で見出しをひとつずつ設定していく手間が省けるので、記事作成が楽になります。

正規表現を本格的に使いこなせばもっと高度なことができますが、かなりの勉強が必要です。

とりあえずこの記事を参考に一括置換を試してみてください。

Repl-Aceのダウンロードページ （ベクター ソフトライブラリ）