scroll_icatch

【初心者必見】The Thorのテーマで横スクロールの表を美しく作成する方法

【初心者必見】The Thorのテーマで横スクロールの表を美しく作成する方法

scroll_icatch

この記事では、WordPressの「The Thor」のテーマで、スマホなどでよく見かける横スクロールができる表(テーブル)を作成する方法についてまとめます。

商品比較などの一覧の表を作成するときなどに、横に長い表が必要になることがあります。

その際に下記のような疑問や問題が生じることがあるのではないでしょうか。

  1. PCで見るときれいに見える表がスマホだと縦長になってしまう、、、
  2. The Thor」のテーマで横スクロールの表ってつくれるの?
  3. 簡単に表を作れる方法を知りたい!
おったん
この記事では以下のような悩みを持つブログ初心者に参考になればと思います
以下のような表を作成する手順をご紹介します
モデル/容量 8GB 16GB 32GB 64GB 128GB 256GB 512GB
iPhone 12 Pro Max
iPhone 12 Pro
iPhone 12
iPhone 12 mini
iPhone SE(第2世代)
iPhone 11 Pro Max
iPhone 11 Pro
iPhone 11
iPhone XS Max
iPhone XS
iPhone XR
iPhone X
iPhone 8 Plus
iPhone 8
iPhone 7 Plus
iPhone 7
iPhone SE(第1世代)
iPhone 6s Plus
iPhone 6s
iPhone 6 Plus
iPhone 6
iPhone 5s
iPhone 5c
iPhone 5
iPhone 4S
iPhone 4
iPhone 3GS
iPhone 3G

テーブル作成用のプラグインについて

The Thor」のテーマの場合、テーブル作成用のプラグインは不要です。

テーブル作成のための様々なプラグインを試しましたが、The Thorを使用する場合、デザインが崩れてしまうことがほとんどでした。

どうやったら横スクロールができるようになるか模索していたら、なんと「The Thor」の標準機能で横スクロールの機能が備わっていました

man_tobideruおったん
えっ!The Thorに横スクロールの機能がもともとあるじゃん!!!

The Thorの機能を使って横スクロールの表を作成する方法

  1. スマホテーブル横スクロールの枠の設定
  2. スマホテーブル横スクロールの枠内にテーブルを作成

①スマホテーブル横スクロールの枠の設定

The Thor」には、「スマホテーブル横スクロール」という機能が備わっています。

横スクロールの表を挿入したいところにカーソルを移動し、下記の枠内のボタンから「スマホテーブル横スクロール」の機能を実行します。

ボタンを押した後、記事内に点線の枠が表示されればOKです。

scroll_02

②スマホテーブル横スクロールの枠内にテーブルを作成

次に、下記の「スマホテーブル横スクロール」の枠内にテーブルを挿入します。

scroll_03

テーブルは、下記の枠内の「テーブル」作成ボタンから挿入することができます。

scroll_04

下記の「スマホテーブル横スクロール」の枠内にテーブルが作成されればOKです。

おったん
プレビューの画面で横スクロールが動作するか確認してみてください。

scroll_05

ここでは、例として歴代のiPhoneの容量についてまとめた表を追加しています。

以下のような横スクロールの表が作成できていればOKです。

モデル/容量 8GB 16GB 32GB 64GB 128GB 256GB 512GB
iPhone 12 Pro Max
iPhone 12 Pro
iPhone 12
iPhone 12 mini
iPhone SE(第2世代)
iPhone 11 Pro Max
iPhone 11 Pro
iPhone 11
iPhone XS Max
iPhone XS
iPhone XR
iPhone X
iPhone 8 Plus
iPhone 8
iPhone 7 Plus
iPhone 7
iPhone SE(第1世代)
iPhone 6s Plus
iPhone 6s
iPhone 6 Plus
iPhone 6
iPhone 5s
iPhone 5c
iPhone 5
iPhone 4S
iPhone 4
iPhone 3GS
iPhone 3G

The Thorのテーマで横スクロールテーブルを見やすくする方法

  1. 縦スクロールを追加する方法
  2. 横スクロールのメッセージを追加する方法
  3. 一列目と一行目を固定する方法

①縦スクロールを追加する方法

縦スクロールを追加するには、テーブルに高さを指定するスタイルを追加します。

投稿の編集画面を「ビジュアル」から「テキスト」へ変更し、tableScrollの高さを指定します。

Before: <div class=”tableScroll”>

After:    <div class=”tableScroll” style=”height: 400px;”>

テーブルの高さを変更することで、下記の用に縦にも横にもスクロールすることができるようになります。

モデル/容量 8GB 16GB 32GB 64GB 128GB 256GB 512GB
iPhone 12 Pro Max
iPhone 12 Pro
iPhone 12
iPhone 12 mini
iPhone SE(第2世代)
iPhone 11 Pro Max
iPhone 11 Pro
iPhone 11
iPhone XS Max
iPhone XS
iPhone XR
iPhone X
iPhone 8 Plus
iPhone 8
iPhone 7 Plus
iPhone 7
iPhone SE(第1世代)
iPhone 6s Plus
iPhone 6s
iPhone 6 Plus
iPhone 6
iPhone 5s
iPhone 5c
iPhone 5
iPhone 4S
iPhone 4
iPhone 3GS
iPhone 3G

②一列目と一行目を固定する方法

横スクロールや縦スクロールが可能な表では表の一列目や一行目を固定しないと、どの項目が何を示しているかわかりにくくなってしまいます。

表の一列目と一行目を固定するために、表を下記のようなフォーマットに置き換えます。

投稿の編集画面を「ビジュアル」から「テキスト」へ変更し、「スマホテーブル横スクロール」の枠内の表を以下のフォーマットで作成してください。

おったん
th, hr, tdの位置に注意してください

次に表の一行目と一列目を固定するためのCSSを追加します。CSSの追加は、テーマのカスタマイズ画面から行います。

テーマのカスタマイズ画面を開くには、WordPressの管理者画面の「ダッシュボード」開きます。(もしくは、画面上部にある管理者メニュー「Customize」リンクから直接テーマのカスタマイズ画面を開くことも可能です。)

balloon01

ダッシュボードのメニュー画面で「外観」を選択して、その中にあるテーマをカスタマイズするためのページのリンクである「カスタマイズ」をクリックします。

balloon03

テーマの「カスタマイズ」の画面が開けたら、画面の左のメニューの一番下にある「追加CSS」のメニューをクリックします。

balloon04

下記のように「カスタマイズ中 追加CSS」という画面が開ければCSSのコードを追加する準備は完了です。

balloon05

表の一行目と一列目を固定するために追加するCSSは、下記の通りです。

下記のテーブルのように一行目と一列目が固定されていればOKです。

man_smile4おったん
とても見やすい一覧表になりましたね
モデル/容量 8GB 16GB 32GB 64GB 128GB 256GB 512GB
iPhone 12 Pro Max
iPhone 12 Pro
iPhone 12
iPhone 12 mini
iPhone SE(第2世代)
iPhone 11 Pro Max
iPhone 11 Pro
iPhone 11
iPhone XS Max
iPhone XS
iPhone XR
iPhone X
iPhone 8 Plus
iPhone 8
iPhone 7 Plus
iPhone 7
iPhone SE(第1世代)
iPhone 6s Plus
iPhone 6s
iPhone 6 Plus
iPhone 6
iPhone 5s
iPhone 5c
iPhone 5
iPhone 4S
iPhone 4
iPhone 3GS
iPhone 3G

③横スクロールのメッセージを追加する方法

表に対して横スクロールが使えることを知らせるための下記のようなメッセージも追加してみました。

scroll_06

この方法は、下記のブログを参考にさせて頂きました。

からあげ棒、ありったけ

テーブルがスクロールすることをお知らせするカスタマイズ。…

当ブログでは、PCの画面でもメッセージを表示させたかったので下記のようにCSSをアレンジしてみました。よかったら参考にしてみてください。

まとめ

この記事では、WordPressの「The Thor」のテーマで、スマホなどでよく見かける横スクロールができる表(テーブル)を作成する方法についてまとめました。
最初はプラグインをしようとしていましたが、テーマとの相性が合わずデザインが崩れてしまいました。
結果、The Thorの機能を使ってCCSでカスタマイズを行う方法でより見やすい表を作成することができました。
The Thorのテーマご使用中で、美しい表の作り方の悩みを持つブログ初心者に参考になれば幸いです。
scroll_icatch
最新情報をチェックしよう!