Windows Live WriterでTable(表作成)の技

waza

 Wordpressの記事更新に便利なエディタを探していたのですが、結局今まで使っていたWindows Live Writer(WLW)に落ち着きました。というのも、不満なのは表の作成くらいなので、そこさえクリアできれば非常に良いソフトなんですけどね。表の細かいカスタマイズは、インターネット上のエディタでもプラグインを入れないと面倒ですしね。なんかこう、直感的にやりたいものです。

 そこで目をつけたのがホームページビルダーです。表だけビルダーで作って、HTMLをWLWに張り付けるのです。こういう使い方についてはずいぶん前から使っていたので目新しいものでもありませんし、すでに使っている人も多くいるかもしれません。でも、ホームページビルダーで作成した表と、WLWでアップした表のデザインがずいぶん変わってしまったり、スタイルシートが無い分飾り気のない地味な表になったりすることもありますよね。今回は、そこを簡単にクリアできる方法を見つけたので紹介します。

hpbのCSSをWordpressのCSSに追記せよ

 結論から言うと、ホームページビルダーのスタイルCSSをWordpressのテーマのCSSに追加するだけです。そうすれば、ホームページビルダーの表でスタイルを使用しても、それが引き継がれ、ちょっとすっきりとしたデザインの表を公開できるのです。レスポンシブにするために、幅は%でやると良いのでしょうか。

①ホームページビルダーで表を作成すると、表のデザインが選べます。

②セルの結合や配置などの編集が視覚的にできるので簡単です。

image

 表を作成した後も属性でデザインを変えたり、一部のセルを結合、スタイルを編集したりすることができます。それで出来上がったものをWLWに貼り付けて表を挿入します。張り付けるときは、右クリックして「形式を選択して貼り付け」のHTMLにするといちいちソース画面にしなくて済みます。

ついでに、CSSをお好み編集

 ホームページビルダーにはCSSエディタという便利なソフトが付いています。

image6

 ホームページビルダーで表を作成し、スタイルを使用するにチェックしたら、保存のときにCSSファイルも一緒に保存します(されます)。そのCSSをエディタで編集すればオリジナルの配色や余白、字の大きさなど細かい設定ができます。私は分かりやすいように、下記のようにスタイルを書いた表にして作業をしました。ソースの表示などでコピペしてもかまいませんが、ビルダーを使えばすぐにできますよ。そのページでプレビューしながらやると、とっても簡単に表のデザインを変えることができます。

CSSをアップロード

 できあがったcssは、Wordpressのテーマのcssに追記します。私の場合はシンプリシティの子テーマにしているので、そこに追記しただけです。

hpb-cnt-tb-th1hpb-cnt-tb-th1hpb-cnt-tb-th1hpb-cnt-tb-th1
hpb-cnt-tb-cell1hpb-cnt-tb-cell2hpb-cnt-tb-cell2hpb-cnt-tb-cell2
hpb-cnt-tb-cell1hpb-cnt-tb-cell2hpb-cnt-tb-cell2hpb-cnt-tb-cell2
hpb-cnt-tb-cell1hpb-cnt-tb-cell2hpb-cnt-tb-cell2hpb-cnt-tb-cell2

hpb-cnt-tb-th2hpb-cnt-tb-th2hpb-cnt-tb-th2hpb-cnt-tb-th2
hpb-cnt-tb-cell3hpb-cnt-tb-cell4hpb-cnt-tb-cell4hpb-cnt-tb-cell4
hpb-cnt-tb-cell3hpb-cnt-tb-cell4hpb-cnt-tb-cell4hpb-cnt-tb-cell4
hpb-cnt-tb-cell3hpb-cnt-tb-cell4hpb-cnt-tb-cell4hpb-cnt-tb-cell4

hpb-cnt-tb-th2hpb-cnt-tb-th2hpb-cnt-tb-th2hpb-cnt-tb-th2
hpb-cnt-tb-cell5hpb-cnt-tb-cell5hpb-cnt-tb-cell5hpb-cnt-tb-cell5
hpb-cnt-tb-cell5hpb-cnt-tb-cell5hpb-cnt-tb-cell5hpb-cnt-tb-cell5
hpb-cnt-tb-cell3hpb-cnt-tb-cell3hpb-cnt-tb-cell3hpb-cnt-tb-cell3

WLWでこれができればいうことがないのですが・・・

 今回、Wordpressの更新に便利なエディタを探しましたが、ドラッグ&ドロップで画像の投稿ができ、リンクや字のデザイン変更が視覚的にできるWLWに勝るものは見つかりませんでした。ただ表の作成においては…。それを補う形で、かなり前に使っていたホームページビルダーを一部併用することにしました。ホームページビルダーから直で記事が更新できるともっと楽になるのでしょうが、それについてはホームページビルダー20でもWordpressの新規投稿記事追加が…できなかった。をご覧ください。

スポンサーリンク
スポンサーリンク

シェアする

フォローする

スポンサーリンク
スポンサーリンク