1. Home
  2. /
  3. アプリ・サービス紹介
  4. /
  5. テーブルタグを簡単に作ろう!
アプリ・サービス紹介

テーブルタグを簡単に作ろう!

WordPressでテーブルを簡単に作る

Gutenbergのエディタではテーブル作成機能が貧弱で困ります。

Webサービスで簡単にセル調整、ついでにCSSも作ってくれるサイトがありますので、紹介します。

Lightning G3 Pro Pack(アップデート期間1年)

テーブル作り機能はまだ弱い

Gutenbergのテーブル作成機能はまだまだ発展途上。

サイトで紹介しているJINやLightningでは、簡単に表を作成して調整する機能があります。

そういう便利な機能がない場合は、Webにあるサービスを利用するのも一つの方法です。

Table Tag Generator

Table Tag Generator というサイトでは、マウス操作でテーブルを直感的に作成することができます。

文字を入れたり、CSSを作成してくれるので、とても便利です。

使い方

画面上部にある小さなテーブルを操作します。

テーブルタグの作り方

使い方はとっても簡単

  1. まず表の大きさ(行と列)を決める。

     ・数字をキーボードで入力する
     ・スピナーをクリックする
     ・マウスホイールを回す
  2. th タグを使いたい場合

     ① 変換したいセルをドラッグして選択
     ②「td ↔ th」 ボタンをクリックしてください。
  3. セルを結合する場合

     ①結合するセルをドラッグして選択
     ②「結合」ボタンをクリック
     ③結合したセルは「分割」ボタンで元に戻せる。
  4. 文字を入力する場合

     ①「文字」 ボタンをクリックして入力モードに。
     ②表に直接入力できます。
     ③入力後、「出力」ボタンをクリック。
  5. CSSを適用する場合

     ・セルに class を設定することができます。
  6. 失敗したら初期化ボタンで元に戻せる。
  7. 表が完成したら、サイトにコピペする。

CSS

テーブルに適用するCSSも、同様のサービスを利用することで簡単にかっこいいテーブルを作ることができます♬

こちらのページでGutenbergの表の作り方と一緒にご紹介しています。

Gutenbergへの適用方法は、こちらでご紹介しています。

GutenbergのテーブルをCSSで見栄えよく
GutenbergのテーブルをCSSで見栄えよくGutenbergでテーブルを作成する方法と、そのテーブルをCSSで見栄え良くする方法についてご説明します。...

おわりに

いかがでしたか?

WordPressの操作が簡単になって、以前よりずっと楽にWebページを作ることができるようになりました。

テーブルも効果的に使うと、とても分かりやすいページになります。

HTMLで悩まなくても簡単にできるツールです。

活用してブログ記事をどんどん書きましょう♬

WordPressを体系的に学ぶなら

インターネット上には沢山無料で学べる場所があります。でも、体系的にしっかりと学びたいのであれば、有料のコースを活用するのも一手です。

Udemyは有名なオンラインレッスンコース。WordPressだけに限らない、様々なことがプロのビデオを観ながら学ぶことができます。

udemy

時々セールをするので、その時が狙い目!

 

そのほかにも沢山ありますよ♪

PAGE TOP