【HTML】正規表現でtable表の修飾を一括リセットする方法

こんにちは！ふるのーと（fullnote）です！(*^^*)

WordPressでブログを書くときに表を使うことはよくありますよね。

ただ、知らないうちに勝手に幅を指定してしまっていたりすることはありませんか？

そうなると予期しないデザインになってしまって困るときがありますよね。

私は基本的には表の幅の指定等は出来るだけなくすようにしています。

今回は意図せず表の幅が指定されてしまったときにリセットする方法を紹介したいと思います。

ワードプレスで表組みを挿入する方法：ビジュアルエディタ

ワードプレスで表組みを挿入するには、ビジュアルエディタの機能を使うのが一番簡単ですね。

クリックしていくだけで簡単に以下のような表が作成できます。

ただし、テキスト編集画面を覗いてみると以下のようなスタイルが指定されてしまっています。

<table style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
</tr>
</tbody>
</table>

これはこれで便利なのですが少しいじったときに数値が変わったり、意図しない形になったりと不都合が生じる場合があります。

表組みの設定についてはcss側である程度設定されているので私はこのスタイルの指定をできるだけ削除するようにしています。

ワードプレスで表組みのスタイルの削除方法：正規表現で一括置換(grep)

ワードプレスで表組みのスタイルを削除するには、いくつか方法がありますが、今回は私のやり方を紹介したいと思います。

私はメモ帳の代わりにEmEditorというテキストエディタを使っています。

今回はこちらを使っての紹介になります。

他のテキストエディタでも今回紹介する機能が使えるテキストエディタであれば問題ないと思いますが、使いやすいテキストエディタなので是非試しに使ってみてください。

削除手順

削除の手順概要は以下のとおりになります。

以下詳しく見ていきます。

まずはテキスト編集画面に切り替えます。

するとテーブルのhtml表記がありますのでコピーします。

コピーしたテキストを起動しておいたEmEditorに貼り付けます。

「Ctrl」ボタンと「F」ボタンを同時に押して検索ウィンドウを立ち上げます。

すると「style=”width: 25%;”」といった 表記が消えて<td>のみが表示されます。

あとは削除されたコードをワードプレスに貼り直すだけです。

これで終了です。お疲れさまでした。

<td.*?>の「.*?」って何？⇒正規表現について

ぱんだ先輩

「.*?」って何？

なぜ、<td.*?>というものを使うと置換が出来るのでしょうか？

これは正規表現と言うもの利用しているからなんです。

「.」「*」「?」それぞれに意味があります。

上記を組み合わせた「.*?」は任意の文字(文字数によらない)ということになります。

なので<td.*?>というように記述された場合は＜td[任意の文字列]>が指定されるわけです。

なんとなくわかりますかね?（；^ω^）

ちなみに<table>に色々ついている場合は、

• 検索する文字列：<table.*?>
• 置換後の文字列：<table>

と記述すればOKですね。

正規表現は応用が効くので知っておいて損はない。

さて今回は正規表現を使って正規表現でtable表の修飾を一括リセットする方法を紹介しました。

この表現は色々なところで応用出来ると思いますので覚えておくと良いと思います。

「Search Regexプラグイン」等でも利用できます。

実際に手を動かして試してみるのが一番学習が進むので是非一度トライしてみてください。

それでは今日はこの辺で！ふるのーと（fullnote）でした！(*^^*)