Mamemon【TablePress】テーブル(表)をPC・スマホで表示してもレイアウトが崩れないプラグイン<WordPress>ツイートシェアはてブGoogle+Pocketおおきに!まめもんです。WordPressでブログを始めてから、見やすいテーブルの作成方法がわからず試行錯誤してきました。自分のブログにデザインに合ったテーブルを作成したいという方向けに発信いたします!目次1.Wordpressでテーブル(表)を作成する方法1エディター備え付けの機能でテーブルを作成2画像でテーブルを作成3プラグインを利用してテーブルを作成2.TablePressをインストール3.TablePressの使い方1テーブルを作成する2作成したテーブルを記事に挿入する4.テーブル(表)のデザインと体裁を整える1テーブルをブログのデザインと統一させる2各テーブルごとにデザインを変更3テーブルの列幅を調整する4各列ごとに幅を調整する1.Wordpressでテーブル(表)を作成する方法WordPressでテーブルを作成する方法は、大きくわけて3つあります。試しに4行×5列のテーブルを挿入してみます。数えてみたら30行以上ありましたエディター備え付けの機能では自動的にコーディングしてくれるのですが、データの多いテーブルとなるとコードの量が膨大になります。簡易的なテーブルを作成するには良いのですが、装飾には向いていません。実際に画像でテーブルを作成した記事のスクショを載せてみます。PC表示だとそこまで影響はないのですが、スマホ表示になると画像が画面サイズに合わせて縮小されるため、記事中のフォントよりサイズが小さくなり非常に読みづらくなります。データに変更があった場合、容易に編集することができません。3プラグインを利用してテーブルを作成1・2をふまえたうえで、当ブログでも簡単にテーブルを作成できる方法がないかと模索した結果、TablePressというプラグインを利用することにしました。→画面サイズに合わせてテーブルのレイアウトを自動調整してくれる2.TablePressをインストール1Wordpressの左側のメニューから「プラグイン」をカーソルでかざし、「プラグインを追加」をクリック2検索ボックスにTablePressと入力してEnter3TablePress(一番左上に表示されるはず)の「今すぐインストール」をクリックインストールが終わったら「有効」をクリックしてプラグインを有効化します。3.TablePressの使い方1テーブルを作成するWordPressの左側のメニューにTablePressのアイコンが表示されているので、そのアイコンをカーソルでかざして「新しいテーブルを追加」をクリックします。アイコンが表示されない場合は、サイトを更新してみてください1テーブルの名前を入力します。2見出し行(または列)を含めた行数と列数を入力します。3入力が終わったら下の「テーブル追加」をクリックします。4「テーブルの内容」のテーブルにデータを入力していきます。下にスクロールをすると、テーブルの設定ができます。今回はシンプルなテーブルを作成するため、「テーブルの最初の行を見出しにする」以外はチェックを外しました。デフォルトでチェックが入っている項目に関してはお好みで。JavaScriptの方も今回はチェックを外しました。並べ替えや水平スクロールなど必要な機能がほしい場合以外は外しておきましょう。最後に「変更を保存」をクリックします。2作成したテーブルを記事に挿入する旧型エディターでの説明になりますエディターに新しいアイコンが追加されているので「TablePressからテーブルを挿入」をクリックします。挿入したいテーブルの名前を見つけたら右側の「ショートコードを挿入」のボタンをクリックします。テーブルをたくさん作成した場合、手動で探すのは大変なので上部にある「テーブルを検索」を利用しましょうエディターにテーブルのショートコードが挿入されたことを確認したら「プレビュー」をクリックします。テーブルのショートコードは、ビジュアルエディター・テキストエディターどちらに挿入しても構いません記事にテーブルが挿入されました。4.テーブル(表)のデザインと体裁を整える1テーブルをブログのデザインと統一させる1Wordpressの左側のメニューTablePressのアイコンをクリックします2「プラグインのオプション」をクリックします3カスタムCSS内にテーブルデザインのCSSを書いていきます。(CSSがわからない方はのちにサンプルコードを記載いたしますのでそのまま下へ)4「変更を保存」をクリック。テーブルをプレビューで確認します。5テーブルのデザインがブログのデザインと統一しました。見出しの文字列→セルに対して中央揃え※見出し行の背景色はデフォルトのままにしています。サンプルコードを用意しましたので、コピペして自身のブログに合ったカラーコード(サンプルコードでいうと#4aa7d6の部分)に変更してください。下記のコードはTablePressで作成したテーブルすべてに反映されるようになっています。color:#fff;/*見出し行の背景色が薄い場合は、この1行(11行目)を削除してください*/}「カラーコードもわからない...!」という方はこちらのサイトを参考にしてみてください。HTMLカラーコードCSSがうまく反映されない...有料テーマ「STORK」を使っている方は、カスタマイズ画面の「追加CSS」で記述してみてください。今度は各テーブルごとにデザインを変更してみます。先ほど作成したテーブル名「コンビニバイトの比較」の時給の項目(3列目)には金額のデータが記載されています。基本的に数値を表すデータは、桁をそろえるために右揃えにすることが望ましいので、3列目を右揃えにするCSSを設定してみます。先ほどと同じように1Wordpressの左側のメニューTablePressのアイコンをクリックします2「プラグインのオプション」をクリックします3列目を右揃えにするCSSを追加します。こちらもサンプルコードをコピペしてご利用下さい。right;}少しサンプルコードを解説すると、1行目の.tablepress-id-7...数字に見覚えありませんか?そうです。テーブル名「コンビニバイトの比較」のID、つまり作成した各テーブルごとにふられている通し番号です。テーブルのIDがわからない...そして隣の.column-3、だいたい予想はつくと思いますが「3列目」を意味しています。3を2に変更すれば「2列目」という意味になります。right;、これは右揃えです。rightをcenterに変更すると、文字列が中央揃えになります。サンプルコードを追加したら「変更を保存」をクリックし、3列目が右揃えになったことを確認します。3テーブルの列幅を調整する各列の幅がバラバラなので、3列とも同じ幅にしてみます。1Wordpressの左側のメニューTablePressのアイコンをクリックします2「プラグインのオプション」をクリックしますコードを追加します。fixed;}コードを追加したら「変更を保存」をクリックして、テーブルの列幅が均等になっているか確認してみてください。4各列ごとに幅を調整する少し難易度が上がりますが、レイアウトを整えるために意外と使うので覚えておくといいでしょう。テーブルを追加した記事の編集画面を開きます。テーブルのコードに直接、列幅の指定をします。(赤下線の部分を追加します)column_widths="20%|20%|60%"個別に列幅を指定するときは、合計が100%(今回の例でいうと3列の幅の合計)になるよう指定します。コードを追加したら「変更を保存」をクリック、「プレビュー」で確認します。各列ごとに幅を指定することができました。スマホでのプレビューも忘れずに!基本的にTablePressは、表示する画面サイズに合わせて自動的にテーブルのレイアウトを調節してくれます。列幅を手動で変更した場合、PCではきれいに表示されていてもスマホだと崩れて表示されることがあります。手動で列幅を変更した場合は、スマホでのプレビューも確認しておくことをおすすめいたします。ブログ運営この記事が気に入ったらいいねしよう!最新記事をお届けします。ツイートシェアはてブGoogle+Pocketfeedly「血液型不明でも献血は可能?気になる痛みは?」注射どころか病院が苦手な私が献血してきました【楽天西友ネットスーパー】重たい商品も配送料無料!?店頭より「お得」かつ「楽」に買い物できる方法とはRECOMMENDこちらの記事も人気です。検索まめもんって誰やねん唯一、小学校入学から中学卒業までゆとり教育を受けた世代。新卒でIT企業に入社するも2カ月半で退職。現在はコンビニのバイトの収入だけで生活しながらブロガーを目指す。