btmup Blog

Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。

WordPress

WordPress のビジュアルエディタでテーブル(表組み)の行を複製したり削除したりする方法。

投稿日:

WordPress のビジュアルエディタとテーブル(表組み)はどうも相性が悪いらしく、新規に追加できるようにするだけでも一工夫が必要でした(過去記事参照)。
で、編集するのもやっぱり一筋縄ではいかず、できることはかなり限られています。
いろいろ試してはみたのですが、どうも表組みの構造をいじることを頑なに拒まれてる感じ。

そんな中で、行の複製と削除の方法が(なんとなくですが)分かったので、メモ的にアップしておきます。

尚、この方法は Internet Explorer では使えません(IE6、IE7とも)。
Firefox で試してみてください。

追記(09.02.19):いろいろ試してみた結果、どうやらWindows 環境では削除だけしかできないようです(コピーまではできるけど、ペーストする位置を選択できない)。
IE、Firefox、Opera、Google Chrome で試しましたが、いずれも複製はできませんでした。
目下、別の方法を模索中。

追記(09.02.24):デフォルトのエディタをカスタマイズしてるよりも、プラグインの TinyMCE Advanced を使った方が良さげです。またいずれ別記事にまとめます。

ビジュアルエディタで行を複製(削除)する

大まかな手順としては、複製の場合、

  1. 行を選択する
  2. 行をコピーする
  3. ペースト位置を選択する
  4. 行をペーストする

となります。また、削除の場合は、

  1. 行を選択する
  2. 行を削除する

となり、途中までは複製と同様です。

行を新しく追加する方法はありません(あるかも知れませんが、見つかってません)。
ので、いったん複製した後でセルの中身を削除してください。

行を選択する

とにもかくにも、複製(削除)する行を選択します。

まず、対象となる行にカーソルを合わせた状態で、エディタ下部にある「パス」の「tr」をクリックします。
テーブル編集前

これで行が選択されます(「パス」から「td」が消え、「tr」が選択された状態になっているはずです)。
テーブル編集中_tr選択

IE を使っていると、このときに行が選択されない(この行に含まれるセルが一つ一つ選択されている状態になる)ため、以降の操作はできません。

行を複製する

複製する場合は、まず行が選択された状態でコピー(「ctrl + C」)をしてください。

次に、行が選択された状態のまま「←」キーを押してください。
テーブル編集中_tbody選択
すると、「パス」が「table « tbody」になります。

この状態で、ペースト(「ctrl + V」)をしてください。
テーブル_行追加後
これで行が複製されました。

上記の例ではコピーしたそのままの位置で複製していますが、任意の箇所に複製することも可能です。
その場合も、

  1. 行を選択して
  2. 「←」キーを押して(「→」でも可)
  3. パスを「table « tbody」の状態にして
  4. ペースト(「ctrl + V」)する

という手順で操作してください。

行を削除する

削除する場合は、行が選択された状態で「delete」キーを押すだけです。
テーブル_行削除後

行を丸ごと消すだけなので、特にややこしいことはないと思います。

注意事項やら雑感やら

上記で紹介しているのは、ごくごく単純な表組みでのみ有効な方法です。
ソースにおける<tr>から</tr>を扱うだけなので、rowspan 属性で連結しているセルがある場合、その行には使えません(colspan ならたぶん大丈夫)。

というか、「これだけできたからってどうやねん」くらいのレベルですよね。
列は選択すらできないですし(「<colgroup>」がソースにあれば認識はするけど、編集はできないし「パス」にも表示されない)。

せめてセルの連結くらいはどうにかしてもらいたいもんです。







-WordPress
-, , ,

執筆者:


  1. […] 機会を改めてまとめようと思っています。別の記事にまとめました。 […]

  2. […] ちょっと調べてみたら WordPress のビジュアルエディタでテーブル(表組み)の行を複製したり削除したりする方法。で詳しく説明されているのがあったのでTinyMCE Advancedをインストールし […]

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

WP-DB-Backup から Gmail へバックアップファイルを送信できない。

追記:09.10.09 えーっと……、すいません。 解決しました。 解決というか、勘違いというか、分かってしまえばすごく単純なことだったんですけども。 つまり、「迷惑メール」に入っちゃってました、とい …

no image

WordPress 2.8.1 日本語版リリース。

気が付いたら全然更新してなかったので、ここらで軽めの話題を一つ……。 »WordPress | 日本語 » WordPress 2.8.1 日本語版リリースのお知らせ まぁ、そ …

no image

WordPress のビジュアルエディタにテーブル(表組み)の追加・編集機能を付ける方法。

WordPress に標準で付いているビジュアルエディタには、テーブルの編集機能はありません。 既存のテーブルをいじったりすることはもちろん、新規に追加することすら不可。 HTML でガシガシ組める人 …

no image

WordPress 2.8.4 は「テーマの編集」から関数の解説へリンクできる。

WordPress 2.8.4 にアップデートしたら、「テーマの編集」に新しい機能が追加されてました。 各テンプレート内で使用されている関数を自動で認識して、その解説ページへリンクしてくれます。 テン …

no image

1月28日は「プラグイン開発者に感謝する日」。

1月28日に、プラグインディレクトリで利用可能になったプラグインが4000個を超えたそうです。 それを記念して、この日を「プラグイン開発者に感謝する日」(Thank a Plugin Develope …