- 表計算ソフトで表を作成
- WordPressのビジュアルエディタで貼り付け
- WordPressのテキストエディタで余計な設定を削除
はじめに | WordPress x JINでの表の作成方法
JINのマニュアルページで検索してみると、表の作成方法について説明してくれていますが、あまり細かいところは説明してくれていません。
詳細に立ち入るととたんに説明がややこしくなるからですね。
外部リンクでの紹介もされていますが、こちらもWordPress目線なので、実際にブログ作成時に即効性があるかといえば微妙・・
たしかにこの方法で表は作れるますが、データの入力がめんどくさいんですよね。
あと、表計算で計算した結果の表を示したいときに、いちいち数字をコピペしていくのも現実的でありません。
表計算で作成した表そのままWordPressに貼る方法をご説明します。
表の作成 | Numbers (またはExcel)
表計算ソフトで行う作業は、データの入力とセルの結合までです。
セルの結合もWordPressだとうまく機能しないことがありましたので、表計算ソフト上で済ませておきます。
表の作成
こんな感じです。計算もできますので、やっぱり表計算ソフトでやってしまいたいですよね。
セルの結合
結合はWordPress上でも可能です。ただ、選択して結合しようとしてたときにセルの結合がグレーアウトしてるなど、機嫌が悪いとやってくれないので、表計算上で済ませておきます。
表の装飾・整形 | WordPress
ビジュアルエディタで貼り付け
表計算で作成した表をコピーし、WordPressのビジュアルエディタ上でペーストします。
プレビューするとこんな感じですね。
一応見れますので、これで良い方は、以上終了！
1セルずつ入力するなどの手間がないので圧倒的に早いです。
ただ、見た目がさびしいので、微調整したい方は次の項以降をご参照ください。
テキストエディタで修正
先程の状態で、枠があり、情報が入っているので要件は足りてますが、より見やすくしていきたいと思います。
まずはタグについている不要なプロパティ類を削除しましょう。
WordPressのテキストエディタで作業します。
めんどうであれば、表の内容をコピーして、Atomなど外部のテキストエディタで修正すると、より早いです。
正規表現がわかる方はさらに楽チンですので。
必要最低限のタグとデータのみにします。
修正が終わったら、WordPressのテキストエディタにコピーします。
ヘッダーセルの設定
せっかくなので、JIN標準の表のclassを適用しておきましょう。ヘッダーの見映がよくなります。
セルのプロパティでヘッダーを指定します。WordPressのビジュアルエディタでの作業で問題ありません。
あとは、文字の左右寄せ、中央などもWordPressのビジュアルエディタで問題なくできますのでやってしまいます。
以上です！
まとめ
- 表の作成は、Numbers、Excelなどの表計算ソフトを使った方が圧倒的に早いです。
- データ入力とセル結合までを表計算で行っておき、WordPressのビジュアルエディタで貼り付けます。
- テーブルの細かいところは、WordPressのテキストエディタ、使える方は外部のテキストエディタ(Atomなど)を利用するとサクッと修正できます。
以上、ご参考になれば幸いです。
Numbersの操作で苦労したことを記事にしていますので、ご興味のある方はあわせてご覧ください。
最後までお読みいただき、ありがとうございました！
