本当は凄いかも｜JIN:Rで表を作る機能を深掘り

アシスタントさん

JIN:Rには、表を作るオリジナルブロックがないと聞いて、購入するか迷っているんです。

じゅん

発売当初は表のブロックがなかったんですが、比較表ブロックが追加されたので多くのケースで対応できるようになったんですよ。

商品やサービスを紹介するときに欠かせないのが、情報を整理して内容を読者に分かりやすく表示する表です。そのため、WordPressテーマ選びで表を作るテーブルブロックに注目している方も多いのではないでしょうか。

そこでこの記事では、JIN:Rにある表作成の機能と推奨されているプラグインを紹介します。

この記事を読めば、標準のテーブルブロックやJIN:Rの比較表ブロック、プラグインのFlexible Table Blockを使って作成できる表デザインが分かります。サイトを訪れた方が一目で理解できる表を作りたいと思う方は、ぜひ最後まで読んでください。

もし、WordPressテーマを「JIN:R」にしようかと迷っているなら、あなたの決断を後押しする情報になっていると思います。

JIN:Rにある機能だけで表を作る方法

JIN:Rに標準搭載されているテーブルブロックと比較表ブロックの機能を紹介します。

WordPress標準のテーブルブロックを使うケース

表を作るテーブルブロックは、WordPressに標準で含まれるブロックです。標準ブロックだからと侮れないほどに設定項目は多く、基本的な用途には対応できます。

記事ページの右サイドバーから設定できる内容

表のセル幅固定をONにするとどの列も同じセル幅になります。OFFのときはコンテンツに合わせて自動調整されます。

スタイルをストライプにすると、表の線が消えて交互にライトグレーの背景色が入ります。

テキストは12色のプリセットから選ぶか、自由に色選択が可能です。

背景は単色とグラデーションそれぞれ12色のプリセットから選ぶか、自由に指定も可能です。ストライプを選択している場合は、ライトグレーの背景が優先されます。

タイポグラフィの文字カスタマイズは、文字サイズや外観、文字間隔、テキスト装飾などが可能です。

ただ、全てテーブルブロックに一括で設定されてしまうデメリットがあります。

右サイドバーの設定項目を使ったサンプルを紹介します。

最初は、ヘッダーセクションとフッターセクションON、スタイルはデフォルト の設定です。

次は、表のセル幅を固定とヘッダーセクション、フッターセクションをON、スタイルはストライプ です。

次は、表のセル幅を固定をON、スタイルはストライプ、文字の色変更、背景色をグラデーションです。

最後は、表のセル幅を固定とヘッダーセクションをON、スタイルはデフォルト、背景色を単色です。

エディターのインラインツールバーで設定できる内容

配置を設定した場合はテーブルブロック全体に適用され、カラムの配置を変更した場合は、列（カラム）単位で適用される違いがあります。

エディターのインラインツールバーを使ったカスタマイズのサンプルを紹介します。

最初は、ブロックの配置を中央寄せ、右端の「ヘッダー」の列にカラムを右寄せにしたサンプルです。

次に、ヘッダーにインライン画像とその画像に内部リンクを設定し、1カ所だけトップページへのリンクです。

ヘッダーラベル	ヘッダーラベル	ヘッダーラベル	ヘッダー
トップページへ移動	ここに入力します	1,2,3,4,5…と数字も入力できます。	1
ここに入力します	ここに入力します	1,2,3,4,5…と数字も入力できます。	2
ここに入力します	ここに入力します	1,2,3,4,5…と数字も入力できます。	3
ここに入力します	ここに入力します	1,2,3,4,5…と数字も入力できます。	4
フッターラベル	フッターラベル	フッターラベル	フッター

最後に、JINアイコンを使った列、マーカーと文字色を変えた列、JIN:R評価アイコンを使った列のサンプルです

ヘッダーラベル	ヘッダーラベル	ヘッダーラベル	ヘッダー
ここに入力します	ここに入力します	1,2,3,4,5…と数字も入力できます。	
ここに入力します	ここに入力します	1,2,3,4,5…と数字も入力できます。	
ここに入力します	ここに入力します	1,2,3,4,5…と数字も入力できます。	
ここに入力します	ここに入力します	1,2,3,4,5…と数字も入力できます。	
フッターラベル	フッターラベル	フッターラベル	フッター

JIN:Rオリジナルの比較表ブロックを使うケース

ウェブサイトやブログでテーブルブロックを利用して表を作る目的は、次のようなことが考えられます。

特にブログでよく見られるのは、表を使って何かを比較したり、読者に違いを分かりやすく示す1の目的です。

JIN:Rには、オリジナルの比較表ブロックがあります。

URLのリンクが可能な画像とボタンを使った比較専用のブロックで、横スクロールにも対応しています。

比較項目名を入力する「サブタイトル」は、1箇所入力するだけで全列に適用され作業効率が良いです。比較の項目名と内容の表示が近くて列や行を固定する必要がなく、読者も見やすいレイアウトになっています。

比較項目の内容には、11段階の評価用星が使えてもちろんテキストや数字、文字色、マーカー、内部リンクなども入力できます。

比較表ブロックのサンプルを紹介します。

ラベルを入力

商品名を入力

サブタイトルを入力

ここにテキストを入力

比較項目名A

内容を入力

〇〇仕様

あり

糖質（g）

0.1

サブタイトルは共通

JIN:R評価星使えます

トップページへ

ここにテキスト入力できます

サービス名でも可

サブタイトルを入力

1,000円

比較項目名A

内容を入力

〇〇仕様

なし

糖質（g）

0.001

サブタイトルは共通



トップページへ

ここにテキスト入力できます

比較対象の名称を入力

サブタイトルを入力

1,00円

比較項目名A

内容を入力

〇〇仕様

付属

糖質（g）

1

サブタイトルは共通



トップページへ

画像にリンク設定可能です

比較対象の名称を入力

サブタイトルを入力

10円

比較項目名A

内容を入力

〇〇仕様

オプション

糖質（g）

5

サブタイトルは共通



トップページへ

比較表は優劣だけではなく項目を固定した一覧表示としても有効に使え、表に含める数字が多いデータ表や財務諸表を除く多くの場面に対応可能です。

合わせて読みたい

JIN:R「比較表ブロック」一歩先ゆくアレンジのアイデア

プラグインを利用して高機能な表を作る方法

JIN:Rには表を作るテーブルブロックに拡張機能がないので、確かにできることに制限があります。

• ひとつのセルだけに色を付ける
• 文字の背景に記号や画像を入れる
• ボタンを追加する
• 横スクロールをする

などには対応ができないです。

JIN:Rでは対策として、高機能な表が簡単に作れる「Flexible Table Block」のプラグインが推奨されています。

プラグインとは、特定の機能をWordPressサイトに追加するためのプログラムで、無料でも高機能なものが多数公開されています。単体では機能しませんが、表やSEO、画像圧縮など特別な知識がなくても機能を補強する役割があります。

Flexible Table Blockを使うと、簡単に次のことができます。

この他にも、きめ細やかな表の設定が可能です。

読者に伝わる表を作るには、重要度に応じた視覚的なコントラストが大切です。Flexible Table Blockでは、特定のセルの背景色や文字色を変更できます。さらに、横にスクロールしたり文字の揃えを調整したりセル幅を指定もできるので、読みやすい状態の表が誰でも作れます。

まとめ：ニーズの高い表の用途には対応している

WordPressテーマ JIN:Rで作れる表を紹介してきました。

JIN:Rは標準のテーブルブロックの拡張機能がなくて、表作成のカスタマイズ性が低いことが弱点と思われがちです。しかし、実用的な面で十分な対策は施されているので安心してください。

まず最初に、標準のテーブルブロックでも意外と設定できることは多くて、簡単な表であれば十分対応可能です。さらに、テーマ発売当初は無かった「比較表ブロック」が追加されたので、ウェブサイトでの利用目的で大部分を占める商品やサービスの比較やスペック紹介に対応可能です。搭載機能では対応が難しい数字を多く使う測定結果などは、「Flexible Table Block」のプラグインを使えば無料で高機能な表が簡単に作れます。

この記事がJIN:Rをもうすでにお使いの方にも、検討されている方にもお役に立てば幸いです。

豊富なオリジナルブロックでサイト運営をサポート

JIN:R 公式を見る

じゅん

ブロガー

Contact

2020年9月から細々とブログを書き始め、現在2つのブログ運営中です。
主に、JIN:R購入者限定コミュニティ「JIN BLOG CAMP」 で学びを得ています。
元々、ITやWeb、デザインとは縁遠い、普通の会社員だった私でも、JINやJUN:Rに出会ったことでこんなに整ったブログが作れて感動です。