Excel・スプレッドシートの表をHTMLのテーブルにWEB変換できるサービス「Excel to HTML」でWordPressの表をサッと作ろう!
![](https://usort.jp/wp-content/uploads/2023/04/kelly-sikkema-1_RZL8BGBM-unsplash.jpg)
ExcelやGoogleスプレッドシートにまとめた表をWordPressに載せたい時があるかと思います。
そんな時はWEBサービス「Excel to HTML」を使うと、WordPressで表を綺麗に表示できます。
「Excel to HTML」を使用する手順
こちらのExcelのダミーデータを使って書きます。
Googleスプレッドシートを使用する場合でも同じ手順で作業してください。
![](https://usort.jp/wp-content/uploads/2023/04/image-31-1024x678.png)
補足
今回のダミーデータは「hogehoge.tk」の疑似個人情報生成で作りました。
Excelの表をコピーする
Excelで作った表を範囲選択肢、コピーします。
![](https://usort.jp/wp-content/uploads/2023/04/image-30-1024x659.png)
「Excel to HTML」に貼り付ける
「Excel to HTML」を開き「2 変換したいExcel表を貼り付けます」のテキストエリアにコピーした表を貼り付けます。
![](https://usort.jp/wp-content/uploads/2023/04/image-29-1024x679.png)
「1 見出し行や見出し列を含む表にするか選びます」では、今回は
- 連番や氏名などの見出しがある
- 数字が割り振られている
ため、「見出し「行」と見出し「列」が必要」を選びました。
表の状態によって使い分けてみてください。
![](https://usort.jp/wp-content/uploads/2023/04/image-28-1024x451.png)
設定ができたら「変換する」をクリックします。
これでWordPressに貼り付けられる形(HTML)に変換できました。
![](https://usort.jp/wp-content/uploads/2023/04/image-27.jpg)
変換されたHTMLをコピーする
「3 変換ボタンをクリック」の上に変換されたHTMLが出てきました。
![](https://usort.jp/wp-content/uploads/2023/04/image-26-1024x379.png)
こちらを全て選択し、コピーします。
![](https://usort.jp/wp-content/uploads/2023/04/image-25-1024x547.png)
Excel to HTMLで変換したテーブルをWordPressの固定ページや投稿に貼り付ける
Excel to HTMLで変換したテーブルをWordPressの固定ページや投稿のお好きなところに貼り付けます。
![](https://usort.jp/wp-content/uploads/2022/04/favicon.png)
ブロックエディタとクラシックエディタの両方のケースを紹介していますが、ブロックエディタの方が楽にできますよ。
ブロックエディター(Gutenberg)の場合
編集画面を開き、貼り付けたい場所をクリックします。
![](https://usort.jp/wp-content/uploads/2023/04/image-24-1024x272.png)
ペーストすると自動的にテーブルブロックに変換され、このような表になりました。
![](https://usort.jp/wp-content/uploads/2023/04/image-23-edited.png)
旧エディター(クラシックエディター)の場合
編集画面を開き、
![](https://usort.jp/wp-content/uploads/2023/04/image-22-1024x633.png)
テキストタブに切り替えます。
![](https://usort.jp/wp-content/uploads/2023/04/image-21.png)
先ほどコピーしたHTMLを貼り付けます。
![](https://usort.jp/wp-content/uploads/2023/04/image-20-1024x595.png)
ビジュアルタブに切り替えると
![](https://usort.jp/wp-content/uploads/2023/04/image-19.png)
このように表になりました。
![](https://usort.jp/wp-content/uploads/2023/04/image-18-1024x672.png)
プレビューや公開後に表画面でテーブルを見てみる
実際に表画面で見てみると、PCではこのように表示されました。
![](https://usort.jp/wp-content/uploads/2023/04/image-17-1024x663.png)
スマホで見せたい場合はご注意!
今回の例のように表の項目が多いと、PCでは見やすくてもスマホでは見えにくい場合があります。
![](https://usort.jp/wp-content/uploads/2023/04/image-16-1024x591.png)
もしWordPressで表を見せることを前提にしてExcelなどでデータを作る場合、
- WordPressの画面で横スクロールをできるようにする(難易度:高)
- 項目を減らす(難易度:低)
など工夫が必要です。
ブロックエディターの場合も旧エディターの場合もこの点をご注意ください。
ホームページの新規作成・リニューアルで
お困りの担当者様へ
![](https://usort.jp/wp-content/uploads/2023/07/illust_usort_05.png)
WordPressの機能を活かして運用しやすいホームページを作成
せっかくのWordPressなのに「自分で文章が書き換えられない」「ブログの更新ができない」などWordPressの機能を活かしきれていないことはありませんか?
ゆーそうとではWordPressの機能を最大限発揮して、HTMLなどの知識がないお客様でも運用しやすいホームページを作成します。