Excel・スプレッドシートの表をHTMLのテーブルにWEB変換できるサービス「Excel to HTML」でWordPressの表をサッと作ろう！
松田 啓
ExcelやGoogleスプレッドシートにまとめた表をWordPressに載せたい時があるかと思います。
そんな時はWEBサービス「Excel to HTML」を使うと、WordPressで表を綺麗に表示できます。
「Excel to HTML」を使用する手順
こちらのExcelのダミーデータを使って書きます。
Googleスプレッドシートを使用する場合でも同じ手順で作業してください。
補足
今回のダミーデータは「hogehoge.tk」の疑似個人情報生成で作りました。
http://hogehoge.tk Excelの表をコピーする
Excelで作った表を範囲選択肢、コピーします。
「Excel to HTML」に貼り付ける
「Excel to HTML」を開き「2 変換したいExcel表を貼り付けます」のテキストエリアにコピーした表を貼り付けます。
「1 見出し行や見出し列を含む表にするか選びます」では、今回は
- 連番や氏名などの見出しがある
- 数字が割り振られている
ため、「見出し「行」と見出し「列」が必要」を選びました。
表の状態によって使い分けてみてください。
設定ができたら「変換する」をクリックします。
これでWordPressに貼り付けられる形(HTML)に変換できました。
変換されたHTMLをコピーする
「3 変換ボタンをクリック」の上に変換されたHTMLが出てきました。
こちらを全て選択し、コピーします。
Excel to HTMLで変換したテーブルをWordPressの固定ページや投稿に貼り付ける
Excel to HTMLで変換したテーブルをWordPressの固定ページや投稿のお好きなところに貼り付けます。
ブロックエディタとクラシックエディタの両方のケースを紹介していますが、ブロックエディタの方が楽にできますよ。
ブロックエディター(Gutenberg)の場合
編集画面を開き、貼り付けたい場所をクリックします。
ペーストすると自動的にテーブルブロックに変換され、このような表になりました。
旧エディター(クラシックエディター)の場合
編集画面を開き、
テキストタブに切り替えます。
先ほどコピーしたHTMLを貼り付けます。
ビジュアルタブに切り替えると
このように表になりました。
プレビューや公開後に表画面でテーブルを見てみる
実際に表画面で見てみると、PCではこのように表示されました。
スマホで見せたい場合はご注意！
今回の例のように表の項目が多いと、PCでは見やすくてもスマホでは見えにくい場合があります。
もしWordPressで表を見せることを前提にしてExcelなどでデータを作る場合、
- WordPressの画面で横スクロールをできるようにする(難易度：高)
- 項目を減らす(難易度：低)
など工夫が必要です。
ブロックエディターの場合も旧エディターの場合もこの点をご注意ください。
ホームページの新規作成・リニューアルで
お困りの担当者様へ
WordPressの機能を活かして運用しやすいホームページを作成
せっかくのWordPressなのに「自分で文章が書き換えられない」「ブログの更新ができない」などWordPressの機能を活かしきれていないことはありませんか？
ゆーそうとではWordPressの機能を最大限発揮して、HTMLなどの知識がないお客様でも運用しやすいホームページを作成します。
