以前、Wordファイルの表について、
その効果や作り方をご紹介しました。
表は、ファイルだけでなく、サイトでも同じ効果を期待して使われることが多々ありますね。
表を使うと見やすくなりますが、
サイトでは、画面のサイズを考慮する必要があります。
今回は、その方法をご紹介したいと思います。
表の作り方①（プラグインを使う）
Wordなどのファイルソフトでは、
挿入タブ→作成したい表の行数・列数を指定することで、簡単に表を作成することができますが、
サイトではそうはいきません。
最も簡単な方法は、表を作成するためのプラグインを使うことです。
プラグイン【TablePress】
例えば、WordPressには【TablePress】というプラグインがあります。
このプラグインでは、
必要情報を入力し、
表示方法等の項目をチェック、
記事編集画面で、そのテーブルのショートコードを入れるだけで、表を入れることができます。
プラグイン【TablePress】の設定画面
たとえば、表の構成に関する表の設定画面を見てみましょう。
設定画面上段
画面上部では、テーブルのID、名前と、
具体的な表の内容を設定しており、
右上部に自動的に作成されたショートコードが表示されています。
設定画面中段
中段では、列や行を挿入、削除、複製したり、結合ができます。
また、行の色を交互にして見やすくさせたり、
テーブル名や説明を表示させるといった設定項目があります。
また、表の見栄えを変更するためのCSSを入力する欄が設けられています。
設定画面下段
下段では、訪問者による並べ替えや検索、フィルター可否や、
水平（横）スクロール等の設定が可能となっています。
プラグイン【TablePress】での作成結果
上記の設定で、実際に表示される表は次のようになります。
プラグイン【TablePress】のまとめ
画面を見ていかがでしたでしょうか？
HTMLの知識不要で、簡単に表の設定ができることがお分かりいただけたのではないでしょうか？
表の作り方②（HTMLコードを書く）
プラグインを使うと簡単ですが、
WordPressがバージョンアップの内容によっては、
プラグインの動作が不具合を起こすことも考えられます。
それを避けるには、やはり自分でコードを書くことになります。
例えば、次のような表を作る場合は、どうすればいいでしょうか？
| タイトル1 | タイトル2 |
|---|---|
| 1行目 | あいうえお |
| 2行目 | かきくけこ |
上記の場合、次のようなコードを編集画面（テキスト）に書きます。
※＜＞は半角に変えてください。
＜table＞ ＜tbody＞ ＜tr＞ ＜th＞タイトル1＜/th＞ ＜th＞タイトル2＜/th＞ ＜/tr＞ ＜tr＞ ＜td＞1行目＜/td＞ ＜td＞あいうえお＜/td＞ ＜/tr＞ ＜tr＞ ＜td＞2行目＜/td＞ ＜td＞かきくけこ＜/td＞ ＜/tr＞ ＜/tbody＞ ＜/table＞
表のレイアウトが崩れる？！
上記表は3行2列で、
セル内の文字も少ないため、文字が切れることなく表示されました。
では、列数が増えたり、
文字数が多い場合、どうなるでしょうか？
横スクロールが表示されない場合、下記のように、文字数が少ない方の列幅が狭くなり、
表が崩れることがあります。
対応①
Cocoonというテーマを使っている場合、
簡単に横スクロールを設定することができます。
横スクロール設定手順
①WordPressメニュー＞Cocoon設定を開く。
②「本文」タブを開く。
③下部の方にあるテーブル設定のレスポンシブテーブルのチェックをオンにする。
この場合、以下のように、「スクロールできます」という文言が表の上に表示され、横スクロールも表示されるようになります。
| タイトル1 | タイトル2 |
|---|---|
| 1行目 | あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお |
| 2行目 | かきくけこ |
対応②
WordPressをお使いでCocoon以外のテーマの場合や、
WordPress以外をご利用の場合、
横スクロールは簡単な設定ではできない場合があります。
横スクロールではなく、画面サイズに合わせて、テーブルと、セル内の文字を縮小させる方法があります。
その方法が記載されているのがこちらのサイト↓
jQueryを使って実現されています。
＜script src="//code.jquery.com/jquery-2.1.3.min.js"＞＜/script＞
＜script＞
$.fn.responsiveTable = (function() {
var $window = $(window);
return function() {
var $el = this;
var $table = this.find('>table');
var onResize = function() {
var width = $table.outerWidth();
var height = $table.outerHeight();
var $parent = $el.parent();
var containerWidth = $parent.width();
var ratio = containerWidth / width;
if (ratio < 1) {
$el.height(height * ratio);
$table.css('transform', 'scale(' + ratio + ')');
} else {
$el.height('');
$table.css('transform', '');
}
};
$table.css('transformOrigin', '0 0');
$window.on('resize', onResize);
onResize();
};
}());
$(function() {
$('.responsive-table').responsiveTable();
});
＜/script＞
記事編集画面では、以下のようにresponsive-tableというクラスで表のコードを囲います。
＜div class="responsive-table"＞表のコード＜/div＞
注意
WordPressでは、jQueryの書き方が異なり、$が使えません💦
まだ、正しく書きかえられておらず、エラーになってしまうので、
解決出来たら、WordPress用のコードを載せたいと思います。
