ケイタWordPressの投稿にテーブル(表)を作成して挿入する方法ツイートシェアはてブ8Pocket36投稿内に表を使用しているWordpressサイトはあまり多くはありません。いくつか理由はありますが、「表を作成するのがめんどくさい」、「正しく表を作成するための知識に不安がある」という理由が大半かと思います。中には「投稿編集者にある程度のスキルが必要だから表作成自体を禁止している」という組織もあるのではないでしょうか。今回はあまり利用されてこなかった「Wordpress」と「表」という組み合わせを通じて、Wordpressの投稿に表を挿入する方法を学びながら、Webサイトに大変重要なメンテナンス性とアクセシビリティを兼ね備えた表に仕上げていく方法について解説したいと思います。最後にまずは表をWordpressの投稿に挿入してみようまずはWordpressの投稿にとりあえず表を挿入するところから始めましょう。Advancedプラグインは投稿画面のビジュアルエディタにさらに多くの追加機能を持たせることができるプラグインです。その追加機能の1つにテーブル・表の挿入機能がデフォルトで組み込まれており、これを使えばhtmlやcssの知識がなくても直感的にきれいな表を作成することができます。セルの結合・分割も含めた表作成も素早く正確に行えるので今回はこのプラグインで表を挿入するものとしてすすめます。Advancedプラグインの設定方法まずは投稿編集画面のビジュアルエディタにテーブルのタブもしくはアイコンがあるのを確認しましょう。テーブルタブをクリックするといくつかメニューが出てきます。ここで何行何列か指定するだけで中身が空の表が投稿に挿入されます。挿入された表の各セルをクリックしてエクセルのように文字や数値を入力すれば表のできあがりです!枠線やセルの背景色など何らかの装飾を加えたい場合は、同じくテーブルタブから「表のプロパティ」もしくは「セルのプロパティ」をクリックして設定することで可能となっています。Advancedという項目が加わります。そこをクリックすると下のような画面になるので、ここからデフォルトでは非表示となっているフォントサイズなどの機能を追加できるので、表をさらに装飾したいときは機能を追加してみてください。この方法でテーブル・表の挿入をするメリットとデメリットは以下のようになります。【最新版】WordPressのおすすめプラグイン11選!本当に必要なものだけ厳選しました表のメンテナンス性を強化するメンテナンス性とは、簡単に言えば「あとから手を加えて修正・改変しやすい」ことをいいます。長期的にWordpressサイトを運用していくのであれば、いずれ手を加えることがあるでしょう。いつかくるであろう修正・改変に備えて表のメンテナンス性を上げておくことはとても大切です。Advancedプラグインのデメリットの1つである「htmlタグ内にスタイルが記述されてしまう」問題は、サイトの改修やリニューアル時に簡単に表を装飾できなくなるトラブルを引き起こします。この問題はサイト全体を見渡した時のデザインの一貫性の問題も生じさせてしまいます。表作成に一定のルールを設ける(テーブル設計)装飾はスタイルシートにのみ記述するが最善策です。表作成にルールを設けることで表のセル構成を数パターンに限定でき、サイトデザイン改修時にイレギュラーな構成の表に悩まされることがなくなります。投稿内で装飾をしない分、毎度装飾に労力を割く必要もなくなり一石二鳥です。ついでにモバイルユーザビリティも改善する関連して、スタイルシートで表を装飾することについて話したので、もう1つのデメリットである「スマホやタブレット用の追加調整が必要になる」問題も同時に解決してしまいましょう。キーワードはoverflow-xです。レイアウトが表のスマホ・タブレット対応を考えるときの参考になると思いますので試してみてください。ここまで取り組めばメンテナンス性に優れた表のできあがりです。Advancedプラグインで作成された表は音声ブラウザ対応のようなアクセシビリティ考慮が全くされていません。表のデータの構造も人間には理解できますが、コンピュータにとっては構造が不明確になっています。そのため、アクセシビリティを強化するために表の構造化が必要です。表の構造化を行う表の構造化とは、そのままではデータの羅列でしかないデータテーブルを「テーブルのヘッダー部分(見出しセルグループ)」と「テーブルのボディ部分」と「表のフッター部分(テーブルの最後のカラム)」との3つの領域に分けることでテーブルの構造を明確にすることです。次の教科別得点データを示した表で考えてみましょう。この表で言えば1行目の教科の行がヘッダー、2~4行目がボディ、5行目の平均の行がフッターに該当します。ヘッダーは表の見出しとなる行、ボディは表のメインデータがある行全体、フッターは表のサマリーとなる行と考えればよいことが分かると思います。90というように書けます。(ソースコードを確認してください。)ここで用いているtheadタグとtbodyタグとtfootタグがそれぞれ表の構造を示すために使われるタグです。実はもっと厳密に表を構造化することもでき、見出しとデータの関係を示すためのscope属性やheaders属性などもhtmlには用意されています。これらも適用するには表作成の時間と労力がかなり増えてしまうのでWordpressの投稿には不向きかもしれません。複雑な表を作成した場合のみ書き加えれば十分だと思います。キャプションを付与する表のアクセシビリティを強化するためには、表の構造化のほかにキャプションが必要になります。表のキャプションとは表の題名を意味します。キャプションを表に付与するにはtable開始タグの直後にcaptionタグを挿入して表の題名を記述すればOKです。(-HTML5タグリファレンス)ここまで取り組めば最低限行っておくべきアクセシビリティ強化が施された表のできあがりです。Advancedプラグインを使わないのであれば、テキストエディタで表を直書きGoogleスプレッドシートから表を埋め込み表の画像をページに貼り付けの3つの方法で投稿への表挿入が可能です。SEOのことも考えればやはり表はhtmlでマークアップすべきです。表を画像で貼り付けるのは「あれ?htmlで表作成できないのかな?」と疑問を持たれてしまうかもしれません。テーブル設計についても言えば、セル同士の結合や分割を多用した表はユーザーには直感的に理解しにくいため、できるかぎりシンプルなテーブル設計をすることが重要となってきます。データが掲載されているページは読者に信頼性と説得力を与えます。読み手を喜ばせる表をWordpressにこれから積極的に使ってみてはいかがでしょうか。おすすめ記事WordPressのおすすめテーマはコレ!SEOもレスポンブも完璧【有料&無料】おすすめ記事【無料あり】本気でオススメしたいプログラミングスクール3つ【実際に受講した】この記事が気に入ったらいいねしよう!最新記事をお届けします。ツイートシェアはてブ8Pocket36この記事をかいた人ケイタ都内に潜むWebエンジニア。制作/運用/データ解析など幅広くやってます。応援は@keitaoriginalからどうぞ。