Excelの表をHTMLのTableに変換しWordPressに出力する

こんにちわ。WordPressでブログを運営しているヒロユキと申します。

WordPressにテーブルを挿入したいことはよくあるのですが、 WordPress標準のエディタを使用するとすべてのセルを手入力しなければいけません。

簡単な表であれば、標準エディタで問題ないのですが大きな表を書くときには面倒です。

Excelを使用して表を作れば、オートフィルや関数を使用することができます。作成時間を省略することが出来るのでおすすめです。

Excelで書く→ Excel からHTMLに変換→HTMLをWordPressに貼る

上記手順について記載します。

結合やタグを使用しないのであればコピペで良い

まずExcelで結合やタグを使用しない場合ですが、 Excel 上で表をコピーして WordPress にそのままペーストすればOKです。

校正も兼ねてWordで文章を作成している方も多いかと思いますが、 Word で表を作成してコピペでもOKです。

”タグを使用する”とは、下記のようにセル内にHTMLタグを使う場合です。

今回の例では、「いちご」という文字を強調するためにBタグを使用しています。

画像を表に入れる場合は、IMGタグを使用することになるので、タグを使用する場合はかなり多いです。

WordPress に直接コピペすると、タグが文字として表示されてしまいます。またセルの結合が引き継がれずに、表が崩れています。

そのため、結合やタグを使用する場合は手直しが必要となってしまいます。

結合やタグを使用する場合

結合やタグを使う場合ですが、手直不要な方法がわからなかったので、VBAマクロに頼ることにしました。

手順としては、前述したとおり以下のとおりです。

Excelで書く
ExcelからHTMLに変換
HTMLをWordPressに貼る

手順2の「ExcelからHTMLに変換」をVBAマクロで実施することにしました。

例として、以下のような画像付き表をEXCELを利用して素早く作る方法を記載します。

項目	種類	値段
いちご	果物	100
みかん	果物	200
キャベツ	野菜	300

手順1.Excelで書く

Excelでテーブルにしたい内容を表にします。

以下のように、タグを使用して画像などを指定します。

画像のURLはWordPressでメディアを開いて確認します。

そのURLを使用してIMGタグを作成します。

<img  src="https://gomi.slavesystems.com/wp-content/uploads/2020/02/image-6.png"  width="128" height="128" >

手順2. ExcelからHTMLに変換

EXCELの表データ（TSV）をHTML形式に変換します。

変換は、下記の変換サイトが一番お手軽だと思います。

https://ao-system.net/exceltable/

上記サイトは非常に便利で私もよく使用しているのですが

1列目が<TH>にならない
タグがエスケープされて普通の文字で出力されてしまう

という点が自分のやり方と合わないということがあったので、自分でマクロを組んでHTMLを出力できるようにしました。

そのマクロが入ったEXCELファイルが以下です。

マクロのサンプル

ソースは以下のようになります。

Function HTMLTABLE(r As Range, _
                   Optional alignment As Boolean = False, _
                   Optional tableOption As String = "", _
                   Optional trOption As String = "", _
                   Optional thOption As String = "", _
                   Optional tdOption As String = "") As String
                   
    Dim ret As String
    Dim row As Long
    Dim column As Integer
    Dim c As Object
    Dim colspan As String
    Dim rowspan As String
    Dim align As String
    Dim valign As String
    Dim tableTag As String
    Dim trTag As String
    Dim thTag As String
    Dim tdTag As String
    
    If tableOption <> "" Then
        tableTag = "<table " & tableOption & ">"
    Else
        tableTag = "<table>"
    End If
    
    If trOption <> "" Then
        trTag = "<tr " & trOption & ">"
    Else
        trTag = "<tr>"
    End If
    
    If thOption <> "" Then
        thTag = "<th " & thOption
    Else
        thTag = "<th"
    End If
    
    If tdOption <> "" Then
        tdTag = "<td " & tdOption
    Else
        tdTag = "<td"
    End If
    
    ret = tableTag


    For row = 1 To r.Rows.Count
        ret = ret & trTag
        For column = 1 To r.Columns.Count
            Set c = r.Item(row, column)
            If (c.MergeCells And c.Address = c.MergeArea.Item(1).Address) Or Not c.MergeCells Then
                
                colspan = ""
                rowspan = ""
                If c.MergeCells And c.MergeArea.Columns.Count > 1 Then
                    colspan = " colspan=" & c.MergeArea.Columns.Count & " "
                End If
                If c.MergeCells And c.MergeArea.Rows.Count > 1 Then
                    rowspan = " rowspan=" & c.MergeArea.Rows.Count & " "
                End If
            
                align = ""
                valign = ""
                If alignment Then
                    Select Case Range(c.Address).HorizontalAlignment
                        Case xlLeft
                            align = " align = ""left"" "
                        Case xlCenter
                            align = " align = ""center"" "
                        Case xlRight
                            align = " align = ""right"" "
                        Case xlJustify
                            align = " align = ""justify"" "
                        Case Else
                    End Select
                    Select Case Range(c.Address).VerticalAlignment
                        Case xlTop
                            valign = " valign = ""top"" "
                        Case xlCenter
                            valign = " valign = ""middle"" "
                        Case xlBottom
                            valign = " valign = ""bottom"" "
                        Case Else
                    End Select
                End If

                If row = 1 Then
                    ret = ret & thTag & colspan & rowspan & align & valign & ">" & c.Value & "</th>"
                Else
                    ret = ret & tdTag & colspan & rowspan & align & valign & ">" & c.Value & "</td>"
                End If
            End If
        Next column
        ret = ret & "</tr>"
    Next row
    
    ret = ret & "</table>"
    HTMLTABLE = ret
End Function

使い方

HTMLTABLEという自作関数を作成しています。その関数の引数に、HTML化したい表の範囲を渡すとHTMLコードが作成されます。

手順3. HTMLをWordPressに貼る

手順2のHTMLTABLE関数でHTMLコードを作成したら、それをWordPressのエディタに貼り付けます。

ただ、そのまま貼り付けてしまうとタグが文字として認識されてしまうので、カスタムHTMLを使用します。

1.フォーマットの中にある「カスタムHTML」を選択

2.HTMLタグにソースをコピペする

以上です。

Excelの表をHTMLのTableに変換しWordPressに出力する

結合やタグを使用しないのであればコピペで良い