Cocoonテーマでの表(テーブル)作り方【WordPressブログ】

スポンサーリンク
テーブルがある風景 Cocoon(コクーン)

ブログ書くときって表作るのってとっつきづらいですよね?

ワードプレスのビジュアルエディターで表を作るボタンも見当たらないし、プラグイン入れれば出来るらしいけど何を入れればよいのか…使っているワードプレステーマと干渉したらいやだし。

今回の投稿でワードプレスでの表(テーブル)の作り方をご紹介します。

このブログではCocoonテーマを使っています。なので内容的にはコクーン寄りな部分はありますが、初心者の方であればほかのワードプレステーマでも参考になるかも。

表を作るのは「手間」ですがそのひと手間で見る人の読みやすさ(可読性)が向上します。それと、記事の順位が上がりやすくなりますよ、多分【体感】。

スポンサーリンク

表(テーブル、表組)で記事を見やすく

自分がブログをやるようになり、数多くのブログを毎日読むようになりました(読み流しているとも言う)。書かれている内容にはよりますが、効果的に表が使われているブログは読みやすく、内容に集中できます。

一方で、スペック的な情報を文章だけ(段落「P」要素のみ)で書かれていると正直読みづらいです。

っていうか離脱するかも

画像で表を入れちゃう?

記事を閲覧する人の視点では、表がHTMLのタグで表記されていようが、画像挿入されていようがどちらでも知りたいことはわかります。

それはそれで良いのですが、単純に見た目が同程度であれば、後者はSEO的に損をするような…

ドンちゃん
ドンちゃん

たまにオフィスで表作って画像貼り付けている人見ます

我らが神、グーグル様は表内の文字情報もしっかりとご覧になられています。(検索で引っかかることがある)画像がものすごく見やすいとかだと話しが変わると思いますが。

スポンサーリンク

HTMLテーブルの基本

覚えておくべきHTMLタグ

表作成でよく使う4つのタグ
HTMLタグ説明
<table>~</table>表(テーブル)の構造上の箱。
<tr>~</tr>表での横一行を意味する。
<th>~</th>表で見出しとなるセル。
<td>~</td>表でデータを入れるセル。

上記以外にもthead, tbody, tfootなんかもありますが私は使っていないです。コード挿入した後に、ワードプレスが勝手につけてきますが。CSS装飾する場合、こういうタグ使うんでしょうね。

HTMLの基本要素

テーブルタグの書き方

見出しを上にする

まず基本ですね。

<table>
	<tr>
		<th>見出し01</th>
		<th>見出し02</th>
	</tr>
	<tr>
		<td>データ</td>
		<td>データ</td>
	</tr>
</table>
見出し01見出し02
データデータ

見出しを横にする

これもよく見ますね。

<table>
	<tr>
		<th>見出し01</th>
		<td>データ</td>
	</tr>
	<tr>
		<th>見出し02</th>
		<td>データ</td>
	</tr>
</table>
見出し01データ
見出し02データ

縦方向(垂直)に結合する

「row」は行って意味です。「rowspan」に数値を入れて結合する行数を指定します。

<table>
	<tr>
		<th>見出し01</th>
		<th>見出し02</th>
	</tr>
	<tr>
		<td rowspan="3">縦方向の結合</td>
		<td>データ</td>
	</tr>
	<tr>
		<td>データ</td>
	</tr>
	<tr>
		<td>データ</td>
	</tr>
</table>
見出し01見出し02
縦方向の結合データ
データ
データ

横方向(水平)に結合する

こちらは「col (column)」で列です。「colspan」に数値を入れて結合する行数を指定します。「rowspan」もそうですが、起点となる場所から数値を入れます。

<table>
	<tr>
		<th>見出し01</th>
		<th>見出し02</th>
	</tr>
	<tr>
		<td colspan="2">横方向の結合</td>
	</tr>
	<tr>
		<td>データ</td>
		<td>データ</td>
	</tr>
	<tr>
		<td>データ</td>
		<td>データ</td>
	</tr>
</table>
見出し01見出し02
横方向の結合
データデータ
データデータ

列を折り返さない

これ、スマホで見るとき結構難しいですよね…

<table>
	<tr>
		<th>見出し01</th>
		<th>見出し02</th>
		<th>見出し03</th>
	</tr>
	<tr>
		<td style="white-space:nowrap">あいうえおかきくけこさしすせそたちつてと</td>
		<td>あいうえおかきくけこさしすせそたちつてと</td>
		<td>あいうえおかきくけこさしすせそたちつてと</td>
	</tr>
</table>
見出し01見出し02見出し03
あいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてと

th, tdタグに直接「nowrap」ワードのみ入れられるのですが、コーディング上望ましくないようです。以前、AMPを有効にしている際にエラーとなりました。「nowrap」を入れる場合は、styleプロパティで指定するようにしましょう。

NGパターン(AMP にした時エラーになります)

<td nowrap>あいうえおかきくけこ</td>

OKパターン

<td style="white-space:nowrap;">あいうえおかきくけこ</td>

テーブルにタイトルを入れる

これはやってもやらなくてもよいのですが、私はググ神へのメッセージ「こういう表がこの記事にあるよ」とおまじないでタイトルをいれることがあります。

<table>
	<caption>テーブルのタイトル</caption>
	<tr>
		<th>見出し01</th>
		<th>見出し02</th>
	</tr>
	<tr>
		<td>データ</td>
		<td>データ</td>
	</tr>
</table>
テーブルのタイトル
見出し01見出し02
データデータ

表(テーブル)の作り方

やり方としてはビジュアルエディターを使う方法と、HTMLでコード挿入する方法になります。

Gutenbergを使うのが今一番ホット

ドンちゃん
ドンちゃん

「Gutenberg」。このワード聞いて、今離脱しようとしてない?w

ワードプレス5.0より、新エディタ「Gutenberg」が導入されたのは2018年12月頃のお話。当ブログではすでに積極利用しています。

まぁ、使いづらい・とっつきづらいとご意見はありますが、表(テーブル)作成に関して言えば一番やりやすく、余計なプラグインが不要です。

Gutenbergで作るHTMLテーブル
Gutenbergで作るHTMLテーブル

アプローチとしては簡単ですが、テーブルヘッダー「th」が指定できなかったり、タイトル「caption」指定できなかったりと融通が利かないところもありますが… とはいえ

カンタンは「正義」です。

スマホでも表を挿入できるのはこのやり方のメリットですね。

HTMLコードで表を作成

原始的になりますが、HTMLコードで書いてしまうのが一番融通が利きます。

ワードプレス上だと若干厳しいので、コーディング用のエディタなどで予めコードを作っておいてそれをコピペするのが良いです。私はほぼこの方法で行っています。

ワードプレスでのHTMLコードの挿入方法
ワードプレスでのHTMLコードの挿入方法

▲ クラシックエディタの場合、矢印の </> ボタンでコード挿入ポップアップを呼び出します。

ワードプレスでのHTMLコードの挿入方法
ワードプレスでのHTMLコードの挿入方法

▲ 出てきたポップアップにあらかじめ準備していたHTMLコードをコピペ。これでテーブルができます。エディタ上もテーブルが見たまま形成されます。

▲ クラシックエディタ以外に、GutenbergではカスタムHTMLでの挿入があります。

エディタ+Emmetで高速テーブル作成

エディタで作るHTMLテーブル
エディタで作るHTMLテーブル

普段、ブログの下書きはコーディングエディタ(Sublime Text)とEmmetのプラグインで書いています。これに慣れるともう戻れません。

こんな感じのスニペットを書いて…

table>caption+(tr>th{見出し0$}*2)+(tr>td*2)

タブ(「Tab」)押して展開すると表になります。

<table>
	<caption></caption>
	<tr>
		<th>見出し01</th>
		<th>見出し02</th>
	</tr>
	<tr>
		<td></td>
		<td></td>
	</tr>
</table>

スニペットなんて書けない…なんて思うかもしれませんが、何度か書いているうちに結構覚えちゃいます。忘れたらチートシート見ればいいし。

Emmetが使えるエディタは何種類かあるようですが、私は「恋に落ちるエディタ」とキャッチフレーズがつく “Sublime Text” を使っています。HTMLのタグ打ち以外にも便利な編集機能が豊富です。

次の書籍で基本を身につけました。本すべて読む必要なくて、半分くらいかな?キンドルPCで画面に写しながらコード打ってたら二日くらいで身につけられました。

エクセルからテーブル作成

既存のエクセルやGoogle スプレッドシートからコピペで表作成のHTMLコードを出力してくれる便利なサイト。普段はエディタでテーブル作っていますが、データが膨大な場合はこういうサイトも使っています。

見出しを「行」「列」意識してタグを作れる優れもの。

▲ 使い方は非常に簡単です。まず、見出しオプションを決めます。

  1. 見出しなしのパターン
  2. 見出しが上にあるパターン
  3. 見出しが左横にあるパターン
  4. 見出しが上横両方にあるパターン

そして、エクセルやグーグルスプレッドシートからセルデータをコピー&ペースト、「変換」します。

  • Gutenbergブロックの場合、「カスタムHTML」を選んでコピペ。
  • クラシックエディターの場合、「HTML挿入」でコピペ。

今回使うデータは次の通り。

今回のダミーデータ

コピペで出来たテーブルがこちら(タイトルは私がつけました)。

見出しなしのパターン
人口人口成長率(年)
20181065120741.52%
20171049180901.55%
20161033202221.58%
20151017163591.65%
2010937266241.67%
見出しが上にあるパターン
人口人口成長率(年)
20181065120741.52%
20171049180901.55%
20161033202221.58%
20151017163591.65%
2010937266241.67%
見出しが左横にあるパターン
人口人口成長率(年)
20181065120741.52%
20171049180901.55%
20161033202221.58%
20151017163591.65%
2010937266241.67%
見出しが上横にあるパターン
人口人口成長率(年)
20181065120741.52%
20171049180901.55%
20161033202221.58%
20151017163591.65%
2010937266241.67%

表作成(おまけ:Cocoonのみ)

スマホで横にスクロールさせる表

元々、Cocoonの標準設定で横に長い表をスクロールさせることが可能です。以下の記事ではスマホの場合のみ、横スクロールさせるカスタマイズをしています。

レスポンシブテーブル見出し固定
レスポンシブテーブル見出し固定

PCはスクロールオフ、スマホは左横見出しは固定するように調整しています。

まとめ

こんな感じで、表(テーブル)作り方をご紹介しました。もう少しJS入れたテーブルも使う予定なので、時間のあるときに付け加えておくと思います。

おしまい。

Cocoon(コクーン)
スポンサーリンク
ご覧いただき感謝です。記事の品質がブースト的に向上するボタンは次の通りです。密かに喜んでいます。
スポンサーリンク
スポンサーリンク
バジェットな旅行記ロク
タイトルとURLをコピーしました