【WordPress】HTML知識不要!初心者でも簡単にセルの結合を含んだ複雑な表を作成する方法ゆずぽんこんにちは。ゆずぽんです!今回は表の作り方の紹介です。セルの結合や縦書きなどの複雑な表を、HTMLやCSSの知識がなくても作れる方法を紹介していきます。ワードプレスで表を作成する場合、ブロックエディタ(Gutenberg)の表作成ブロックを使うExcelで表を作成しコピペするといった方法で簡単な表ならさくっと挿入できちゃいます。セルを結合して見やすい表を作りたいと思うと、上の方法では対応できないんです。見やすい表を作成するうえで、セルの結合って結構重要だと思うんですけどね~。そこで今回は、HTML知識ゼロのゆずぽんが、調べに調べぬいて編み出した「他力本願だけど複雑な表を簡単に作成する方法」を紹介していきたいと思います。基本的な作り方から学ぶ複雑な表の作成をする前に、まずは基本的な表の作り方から紹介します。セルの結合などの必要がない場合は、以下の方法で簡単に作成可能です。WordPressの表作成機能を使うまずは一番基本的な機能から。ワードプレスには表を作成する機能が実装されています。ブロックエディターの【フォーマット】⇒【表】で作成が可能です。最初に行数や列数を指定してから表を作成していくのですが、行や列の追加・削除はあとから編集できますので、だいたいで大丈夫です。表の編集は行や列の追加・削除のほか、セル内改行、中央寄せ、文字列に色をつけるなどの基本的な書式設定は可能ですが、セルごとに色をつける・セルを結合するといったような複雑なセルの操作はできません。改行が効くので一文字ずつ改行して縦に並べてるだけでした!それはちょっと反則では・・・Excelで作った表をコピペするゆずぽんがそうなんですけど・・・ブロックエディターで作るって、何となくわかりにくいといいますか・・・先が見えないといいますか・・・表作成はExcelってイメージが強く・・・ゆずぽんと同じように表の作成はやっぱりExcelだよ!Excelの表を挿入したいな~という方にオススメなのは、エクセルで作成した表をコピペする方法です。手順は簡単!エクセルで作成した表をコピーし、【段落ブロック】にペーストするだけで、表を自動的に読み込んでくれます。この方法だと、表形式ではなくテキストだけペーストされてしまうことがありまして・・・不具合なのかな~~そんな時はブロックを【クラシック】にしてコピペするとうまくいきますよ~。このExcelで作成した表をコピペする方法ですが、実は万能ではなくいくつかの注意点があります。セル内改行はコピペできる。・縦書き指定などの書式はコピペできない。結合セルをコピペすると、セルがずれてしまう。Excelの表コピペした表コピペの場合も、セルの操作はできないということです(書式は後から編集可能)「りんご」が「んんん」の下に入り込んで「キングギドラ」下の表がなくなってるの分かりますか?Excelをコピペする場合はセル結合をしない表づくりをしましょう。以上が基本的な表の作成方法です。セルの結合が必要な複雑な表でなければ、上記のどちらかの方法で十分かな~と思います。Webツールを使って複雑な表を作成する。上記の基本的な表作成ではどうやってもセルの結合は簡単にできません。コードの知識がないとセル結合には太刀打ちできないんですよね~。調べた結果、とても良いWebツールを発見しました。Excelで作成した表をHTMLに自動変換してくれるWebツールです。Excel⇒HTML変換のWebツールはいくつかあるのですが、いろいろ試した結果、ゆずぽんがおすすめするのは【WEB上で一発変換|EXCEL表→HTML変換ツール】です!https://antenanet.oboegaki.net/exceltohtml/このWebツールの凄いところは、見出しタグの行列数の指定や、セルの結合や中央寄せ、セル内改行などの細かい設定をHTMLに変換してくれるので、HTMLやCSSの知識がなくても簡単に複雑な表が作成できるところです。ゆずぽん的に特別ありがたいな~と思ったのが下の2つの機能ですね。行・列の見出し数の設定セルの結合この二つは基本的な表の作り方ではどうにもならない部分なので、本当に助かっています。見出しの数を設定したら、エクセルの表をコピー⇒黄色枠の文字を右クリックし貼り付けるだけです。すると・・・HTMLコードと出力イメージが表示されるので、HTMLコードをワードプレスに貼り付けるだけでOKです。貼り付ける場所は【カスタムHTML】ではなく、【クラシック】に貼り付けます。【カスタムHTML】に貼り付けてしまうと、プレビューで表を確認することはできても細かい書式の編集ができません。書式の編集をする場合は、スタイルコードを記述することになり、HTMLの知識が必要になります。それに対し、【クラシック】からHTMLを貼り付けると、画面上は表が表示されるので、中央寄せやフォント色・サイズなどの書式設定が可能になります。ゆずぽんクラシックモードにHTMLを貼り付ける方法ですが、表以外でも役立ることがあると思いますので、是非覚えておきましょう!まとめいかがでしょうか。基本的な表作成からセルの結合のような複雑な表まで、コードの知識がなくても作れる方法をご紹介しました。HTMLが苦手な方でも簡単にきれいな表が作成できるようになりますので、是非一度お試しください。WordPressの表づくりは、ブロックエディターやExcelのコピペで簡単に作れる。【備忘録】cocoon導入時の初期設定法この記事を書いた人ゆずぽんDIYやアウトドア、料理が大好きなおっさん薬剤師。化学は好きだけど添加物は嫌いです。手作りが大好き!家族が喜ぶいろんなレシピを公開中です。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。2015年9月スポンサーリンクAmazonのアソシエイトとして、当メディアは適格販売により収入を得ています。