Excelで作成した表をほぼ見たまんまでWordPressに貼り付けるの巻

Excelで作成した表をほぼ見たまんまでWordPressに貼り付けるの巻

はじめに

Excelで作成した表をセルの結合や配色等を維持しつつWordPressに貼り付けたい時がありまして。

例えば、Excelで作ったこんな表(Excelの画像を貼っています)。

Excel_original_table

これをWordPressで見た目を同じように表現したい、と。

で、次の表は本記事のやり方で上記のExcelの表データをWordPressに持ってきて作ったものです。このようにしたい、と。

テストの結果
生徒番号 国語 数学 理科 社会 英語
生徒1 1組 75 80 60 70 95
生徒2 60 60 70 100 35
生徒3 2組 65 100 95 80 85
生徒4 3組 95 20 45 85 80
生徒5 85 70 80 95 75

*レスポンシブ なので、ブラウザの画面を横に伸ばしたり、縦型画面のスマホの場合ですと横向きで見たりすれば同じっぽいなとわかるやつです。

でも、Excelの表をWordPressに直接コピぺすると、こうなる。(画像にして貼っています。)

Exceltable_to_Wordpress_direct

セルの結合が解除されちゃったせいで形が崩れまくってて、もういやーんな感じ。

ちなみに、セルの結合がない表であれば各行と各列でセル数が同じなので、大枠の表の形は崩れません。形が崩れないのであれば、WordPress側の設定でちょちょっとやってまあこれでいいや、ってなるんですけどね。

でもこれだけ崩れるとなんかやる気が出んよ。どうにかならんのこれ。

と、いうのが今回のモチベーションです。

プラグインやWebツールを使ったら、上記のようなExcelの表でもWordPressで再現できるように持っていけるのかもですけど、なんとなく使う気にならないのです。ただなんとなく。。。だから試してません。ごめんなさい。

あとは表を、一旦画像にして貼り付けるっていう方法(記事の一番上の表の画像みたいに)も考えましたが、まあここはちょっと修行だと思って画像で済ませずに頑張っていじってみることにしました。

という話です。

方法

概要としては、

・Excelで作成した表をhtm(html)形式で保存しておいて、

・Wordでその記述内容をちょっといじってから、

・table部分とstyle部分をWordPressにコピぺして
(AMP対応のためにはカスタムCSSを追加できるようにしておく必要があります)

・必要に応じて見た目を調整する

という流れです。

では実際にやってみます。ここで使用しているのはMac版のExcelやWordなので、Windows版をお使いの場合は置き換えて考えてくださいませ。

Excelの表を別のシートに貼り付けてルビとかを落とす下処理をする

これをやっておくと、ルビなどの不必要な情報がある程度落とせるので、レイアウトが妙な感じになるのを防げます。

表を選択してコピーします。

Excel_to_WordPress_001

新しくシートを作って数式で貼り付けします。

Excel_to_WordPress_002

貼り付けしたらそのまま、

Excel_to_WordPress

書式のペーストもします。

Excel_to_WordPress_004

元の形の見た目で貼り付けできました。

Excel_to_WordPress_005

下処理済みの表をWebページ (.htm)形式で保存して、拡張子をtxtに変更する

表を選択状態にしたまま「名前をつけて保存」にて、”ブック” ”シート” ”選択範囲”のうちの、”選択範囲”を選んでWebページ (.htm)形式で保存します。

また、保存時のオプションで文字コードをUnicode(UTF-8)にしておきます。もしかしたら勝手にUTF-8にしてくれているかもしらんけど。

Excel_to_WordPress_007

Webページ (.htm)で保存しようとしたら、ほんとに保存する?って聞かれますが、はい、保存します。

Excel_to_WordPress_006

次に、ファイル名の拡張子をtxtに変更します。

Excel_to_WordPress_htm_to_txt

その時にいいですかって聞かれますが変更しまーす。

Excel_to_WordPress_008

Wordで先ほどのtxtファイルを開いて記述内容をいじる

次に、

・!importantの付与
・使わない部分を削除(削除しなくても可)

をします。

Wordの「高度な検索と置換」の「置換」で置換や削除をしていきます。

Wordじゃなくてもワイルドカードを使ってまとめて置換できるエディタならなんでもいいです。一つ一つ削除や置換の作業をやってもいいです。

Wordでファルを開きます。エンコードはUTF-8にて。

Excel_to_WordPress_009

Wordの「検索」から「高度な検索と置換」で、

Excel_to_WordPress_010

!importantの付与

「置換」にて

「;」を「!important;」に「すべて置換」

Excel_to_WordPress_044

優先的にそのスタイルを使用できるよう、おまじないです(たぶん必要)。

使わない部分を削除(でももしかしたら削除しなくてもいいかも)

削除するのは

・tableタグの中のstyle記述部分
・tableタグの中のwidth記述部分
・styleタグの中のmsoが頭文字についているスタイル部分
・余計な空白行
・その他使用しないスタイル部分

です。

tableタグの中のstyle記述部分の削除

「置換」にしたまま「ワイルドカードを使用する」にチェックを入れて、

「style=’*’」を空白に「すべて置換」

Excel_to_WordPress_011

tableタグ中のstyle要素は要りませんので。

tableタグの中のwidth記述部分の削除

「width=* 」を空白に「すべて置換」

(*の後ろにスペースが1個ありますので注意)

Excel_to_WordPress_012

widthも要りませんので。

styleタグの中のmsoが頭文字についているスタイル部分を削除

「mso*;」を空白に「すべて置換」

Excel_to_WordPress_013

∵マイクロソフトオフィスのCSS。これも要らないので削除します。

余計な空白行を削除

「^t^13」を空白に「すべて置換」

Excel_to_WordPress_014

一連の操作でできちゃった空白行を削除して整形します(好みで)。

その他使用しないスタイル部分

styleタグの中の

@page および .font5 該当部を削除

Excel_to_WordPress_015

.style0 該当部を削除

Excel_to_WordPress_016

ruby および rt 該当部を削除

Excel_to_WordPress_017

これでWordPressに持っていく準備ができました。

WordPressのカスタムHTMLにtableタグの内容を、カスタムCSS入力欄にstyleタグの内容を貼り付ける

今回の表の中身に該当する<table 〜 /table>までを。。。

Excel_to_WordPress_018

(中略)

Excel_to_WordPress_019


カスタムHTMLのブロックに。。。

Excel_to_WordPress_020


貼り付けます。

Excel_to_WordPress_021


次に、styleタグの中身の「!–」の直後から「–>」の手前までを。。。

Excel_to_WordPress_023

(中略)

Excel_to_WordPress_024


カスタムCSSの入力欄に貼り付けます。

Excel_to_WordPress_026


カスタムCSSの入力欄がない方は、ネットでいろんな方々が設定方法をわかりやすくまとめてくれていますので調べてみてください。

なぜカスタムCSSを使うのかというと、styleタグの内容とtableタグの内容を一緒にカスタムHTMLとして記事本文中に貼り付けると、

「styleタグはヘッダーに書かんかい」

とグーグルサーチコンソールにAMPエラーで怒られるからです。

で、このAMPエラーはstyleタグの内容をカスタムCSSに記述することで解決できるのでした(ヘッダー内でこのカスタムCSSを読み込むことになるので)。

なお、AMP対応にしないのであれば、カスタムCSSを使わずに<style 〜 /style>の部分と<table 〜/table>とを一緒にカスタムHTMLのブロックに入れておくだけで良いと思います(多分)。

カスタムCSSを入力する欄の準備が整ったらまたこのページに戻ってきてくださいまし。

さてここで、記事の下書きを保存したら、一旦編集画面を抜けてから再度編集画面に戻ります。

そうすると、おそらくtableを入れたカスタムHTMLのブロックでエラーが出ていると思います。

Excel_to_WordPress_025

「ブロックのリカバリーを試行」をポチッとするとエラーが出なくなるはずです。(でもどこが修正されたのかわからん。。。)これで一段落つきました。

では、記事をプレビューで確認して、できた表を確認してみます。

はい。このような表になりました(画像を貼っています)。

むう、なんかちょっと違う。。。

Excel_to_WordPress_027

おそらくWordPressテーマのCSSが効いちゃってます。ので、調整しないといけませんね。。。。

必要に応じて修正する

ここから先は作りたい表によっておそらくケースバイケースでの対応になると思いますのでおまけ的な扱いです。

もしかしたら修正をしなくても良い場合もあるかもしれませんし、たくさん修正しなきゃって場合もあるかもしれません。

さて、今回は修正がしたいので修正します。修正が必要なのは次に示した部分なのでそれぞれ修正していきます。ちょっとややこしいですが。

Excel_to_WordPress_027

・表の背景色の修正

ストライプになっているので白に戻します。

tr(行に対応)のところに

Excel_to_WordPress_030

「background-color:white!important;」を追加します。

Excel_to_WordPress_031

・行の高さの修正

セル中の文字のpaddingの設定が邪魔をしているので数値を0に修正します。

td(セルに対応)のここを

Excel_to_WordPress_028

「padding:0px!important;」にします。

Excel_to_WordPress_029

・罫線がない1:「テストの結果」のセルの右の罫線がない

なんか全体的に罫線が変で、Excelがhtmlを吐いた時点で既におかしいみたいです。。。でもそれを根治する方法がわからんので対処療法的に処置します。

Chromeのデベロッパーツールで見るとここのセルは「xl75」というidがついていますので、

Excel_to_WordPress_032

「.xl75」のここを、

Excel_to_WordPress_033

「border:2.0pt solid windowtext!important;」としました。(windowtextは必要ないかも)

Excel_to_WordPress_034

・二重罫線になっていない:オレンジ色のセルの下の罫線が二重でない。

対象セルのboader-bottomの数値を3.0ptに変更します。3.0pt以上の幅がないと二重線に見えないみたいです。

一番左は「xl72」です。

Excel_to_WordPress_035

ここは

Excel_to_WordPress_036

こうします。

Excel_to_WordPress_037

一番左のセルの罫線ができました。

Excel_to_WordPress_038

同様にしてその他のセルのborder-bottomも3.0ptに変更します。

また、一番右のセルについてはborder-rightを2.0ptに変更します。

Excel_to_WordPress_039

該当箇所の修正がでけた。

・罫線が細い

罫線部分の幅の設定値を修正します。

該当するのセルのスタイルにおいて、boader-left、boader-rightとかで該当する罫線の数値を2.0ptに変更します。

*ptでhtmlが作成されているのでptを使ってます。

・罫線がない2:「3組」のセルの下の罫線がない

「3組」が入っているセルは、デベロッパーツールで見ると「td.xl74」となっています。

Excel_to_WordPress_041

ここは同列のセルと同じidになってしまっていますので、オンリーワンのものとするためxl50にidを変更しちゃいます。で、xl74のスタイル部分をコピペして、xl50用のスタイルを新たにもうけてやりました。

まず、カスタムHTMLの該当箇所を

Excel_to_WordPress_042

xl50に変更しました。

Excel_to_WordPress_043

次に、カスタムCSS入力欄にて「.x074」のスタイルの記述をベースに、「.xl50」のスタイルを追記しました。

で、下側の太い罫線「border-bottom:2.0pt solid black!important;」を追加しています。

Excel_to_WordPress_046

はい、できました。冒頭のExcel表とほぼ同じになったかと思います。

テストの結果
生徒番号 国語 数学 理科 社会 英語
生徒1 1組 75 80 60 70 95
生徒2 60 60 70 100 35
生徒3 2組 65 100 95 80 85
生徒4 3組 95 20 45 85 80
生徒5 85 70 80 95 75

なんか最後の微調整がだるいですが。。。仕方なし。

どなたかのご参考になれば幸いです。

2021.1.23追記:

表タイトルの「テストの結果」のフォントの記述がなかったためにスマホでフォントが変わってしまっていたので、該当部分の「.xl75」のスタイルに以下を追記して対応しました。

font-family:Helvetica!important;

実施環境

Excel for Mac バージョン16.45
Word for Mac バージョン16.45
WordPress 5.6
LION BLOG 2.0.0


このブログはエックスサーバー で運営しております。


Word Press専用クラウド型レンタルサーバーwpX Speed

WordPressを使うならロリポップ!
簡単インストール完備で楽々スタート!


世界にたった一つ、あなただけのドメインを登録しよう!

格安ドメイン取得サービス─ムームードメイン─

たまには自分をいたわったり、ねぎらったりしてあげてもいいよね。ご帰宅途中にお気軽に。
全国630店舗以上!もみほぐし・足つぼ・ハンドリフレ・クイックヘッドのリラクゼーション店【りらくる】