Youtube100曲アップ達成しました!

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

この記事は約5分で読めます。
スポンサーリンク

こんにちは!ふるのーと(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というテキストエディタを使っています。

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

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

EmEditor(エムエディタ)は日本人の江村豊さんによって開発されたWindows用のテキストエディタです。シンプルながらも非常に機能が豊富で世界中で利用されています。
1年間2,400円、永久ライセンス21,600円の有償ソフトですが、機能制限戯れたEmEditor Free 版も存在しています。普通に使う分には無償版でも問題有りません。今回の紹介もEmEditor Freeを利用しています。

削除手順

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

正規表現でtable表の修飾を一括リセットする方法
  • EmEditor
    EmEditorを起動する
  • Wordpress
    Wordpress画面をテキスト編集に切り替える
  • Wordpress
    表のHTMLをコピーする
  • EmEditor
    EmEditorにコピーしたテキストを貼り付ける
  • EmEditor
    検索画面を起動する(Ctrl+F)
  • EmEditor
    検索する文字列と置換後の文字列を入力する
  • EmEditor
    すべて置換する
  • EmEditor
    置換されたテキストをコピーする
  • Wordpress
    Wordpressに張り付ける

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

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

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

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

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

正規表現を使用するというところにチェックが入っていなければ入れておきましょう。

次に置換のボタンを押します。

すると「全て置換」というボタンなど少し違ったオプションが表示されます。

検索する文字列:<td.*?>

置換後の文字列:<td>

と、入力します。

そして「すべて置換」のボタンを押します。

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

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

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

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

ぱんだ先輩
ぱんだ先輩

「.*?」って何?

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

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

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

記号意味
.任意の1文字
*直前の文字の0回以上の繰り返し
?直前の文字は省略可能
分かりづらいので分からない人は雰囲気だけ覚えておけばOKです。

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

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

なんとなくわかりますかね?(;^ω^)

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

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

と記述すればOKですね。

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

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

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

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

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

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

スポンサーリンク

美味しい食事と音楽に囲まれて毎日笑顔を大切に過ごしています。
ブログもYoutubeものんびりとやっています。(*^^*)

fullnoteをフォローする
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
IT Wordpress
スポンサーリンク
fullnoteをフォローする
ふるのーとさんのブログ
タイトルとURLをコピーしました