SWELLにおける表の作り方！ホームページの会社概要編

最強のWordPressテーマ「SWELL」における表の作り方をご紹介するシリーズの第１弾。

今回は、企業のコーポレートサイトの会社概要ページでよく見かけるシンプルな２カラムのテーブルを作ります。

画像付きで分かりやすく解説するので実際に手を動かしながら挑戦してみてください。それではレッツCreate！

SWELLで作るシンプルな表の完成形

今回作る表の完成形は以下の見た目です。

パソコンでの見た目

スマホでの見た目

表の特徴は、以下の通りです。

• PC（デバイス幅960px以上）表示のときは２列
• PCのときは表の１列目を横幅240pxで固定する（２列とも同じ横幅だとダサいので）
• スマホ表示のときは１列になる
• 表の１列目には背景色をつけ、項目名を太字にして強調する

SWELLでは上記のような表を簡単にポチポチしていくだけで作ることができます。１点だけ、「PCのときは表の１列目の横幅を任意のサイズで固定する」のはカスタムCSSにコードを追記する必要がありますが。

SWELLで表を作る手順

SWELLでシンプルな表を作る方法、１工程ずつ解説していきます！

【1】テーブルを呼び出す

まずは「＋」をクリックし、「テーブル」と検索してテーブルブロックを選択しましょう。

【2】行数を増やしてテーブル作成

テーブルブロックが挿入されたら、行数をお好みで（添付では６）増やし、「表を作成」ボタンをクリック！

【3】ブロック設定でテーブルをカスタマイズ

右サイドバーにあるブロック設定で以下を設定します。

1. 「表のセル幅を固定」をONにする
2. 「スマホで縦並びに表示する」と「縦1列目を強調する」をONにする

表の中身はご自身の作りたいコンテンツに合わせて入力してください。

【4】カスタムCSSを追加して完成！

最後に、下記コードを記事編集ページの下のほうにあるカスタムCSSの「CSS用コード」の欄にコピペして完成です。

@media (min-width: 960px) {
  .td_to_th_ tbody tr >:first-child {
    width: 240px;
  }
}

width: 240pxの240が表の１列目の横幅になるので、ここも自由に調整してくださいね。