1. Home
  2. /
  3. Gutenberg
  4. /
  5. GutenbergのテーブルをCSSで見栄えよく
Gutenberg

GutenbergのテーブルをCSSで見栄えよく

GutenbergのテーブルをCSSで見栄えよく

GutenbergのそっけないテーブルにCSSを反映させて見栄えをよくする方法について説明しています。

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

テーブル作成方法

テーブルは、ブロックで簡単に挿入することができます。

■作成方法

1.テーブルブロックを選び、カラムと行数をいれて表を作成する。

Gutenbergの表作成

Gutenbergで表を挿入した例です。

ヘッダー1ヘッダー2
13
24
/テーブルで作成した

テーブル作成の問題点

Gutenbergのテーブル挿入の問題点は

  • セル結合ができない
  • 細かなクラス・スタイル指定ができない(面倒くさい)
  • 見出しが上下のみで左がない
  • デザインが2つしかない

です。

上記の点を解決したい場合は、クラシックエディタでテーブルを挿入しましょう。

なお、デザインについては、後ほどご説明します。

見出しを左列にする

この場合は、エディタ右端の【シンプルな表】をクリックします。

表の挿入1

すると、↓のような表が自動的に挿入されます。

項目名ここに説明文を入力してください。
項目名ここに説明文を入力してください。
項目名ここに説明文を入力してください。
項目名ここに説明文を入力してください。
項目名ここに説明文を入力してください。

見出しのない表の作り方

▼を押してテーブル→挿入したいマスを選択すると、装飾なしの表が挿入されます。

表の挿入2

↓このような表が挿入されます。

   
   
   

テーブルのデザイン変更はCSSを使います

表にCSSを追加すれば見栄え良いテーブルを作ることができます。

装飾が苦手ならこういうサイトからCSSを借用しましょう。

※ただし、このサイトの場合、そのまま使うと全テーブルが影響を受けるので工夫が必要です。

CSSを利用する方法

気に入ったのを自分のサイトへ反映しましょう。その方法は次のとおりです。

例えば、この表のスタイルを反映するなら。

コピーしたい表示

1.CSSをコピーする

CSSをコピー

2.外観→カスタマイズ→追加CSS欄へペーストする

CSSを貼り付ける

個別の表にスタイルを与える方法

上記の方法では、全ての表にスタイルが反映されてしまいます。

その場合は、次のような設定をします。

1.テーブルブロックにクラス名(test)をつける

テーブルにクラス名をつける

テーブルにクラス名をつける

2.コピペしたCSSにクラス名をつける

先程のCSSに手を加えます。

全てのクラス指定に、【.test】を加えます。

■サンプル

h1h2
13
24
.test table{
  width: 100%;
  border-collapse:separate;
  border-spacing: 0;
}

.test table th:first-child{
  border-radius: 5px 0 0 0;
}

.test table th:last-child{
  border-radius: 0 5px 0 0;
  border-right: 1px solid #3c6690;
}

.test table th{
  text-align: center;
  color:white;
  background: linear-gradient(#829ebc,#225588);
  border-left: 1px solid #3c6690;
  border-top: 1px solid #3c6690;
  border-bottom: 1px solid #3c6690;
  box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
  width: 25%;
  padding: 10px 0;
}

.test table td{
  text-align: center;
  border-left: 1px solid #a8b7c5;
  border-bottom: 1px solid #a8b7c5;
  border-top:none;
  box-shadow: 0px -3px 5px 1px #eee inset;
  width: 25%;
  padding: 10px 0;
}

.test table td:last-child{
  border-right: 1px solid #a8b7c5;
}

.test table tr:last-child td:first-child {
  border-radius: 0 0 0 5px;
}

.test table tr:last-child td:last-child {
  border-radius: 0 0 5px 0;
}

これでクラス名が与えられた表のみスタイルを反映させることができます♬

テーブルタグを簡単に作りたいなら

テーブルタグをくっつけたり、ヘッダーをつくったり、手を加えたくなりますよね。

そういうサービス、table tag generator をこちらで紹介しています。

WordPressでテーブルを簡単に作る
テーブルタグを簡単に作ろう!WordPressで利用するテーブルタグを簡単に作れるサービスのご紹介です。...

おわりに

いかがでしたか?

Gutenbergでテーブルも簡単に使えるようになりました。

しかし、まだまだ細かなところが苦手なようです。

今後のバージョンアップでより使いやすくなると思います。

それまではご紹介した方法でテーブルを装飾してみてはいかがでしょうか。

WordPressを体系的に学ぶなら

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

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

udemy

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

 

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

PAGE TOP