WordPress:カンタンな表組はプラグイン不要!エクセルからのコピペでOK ついでにレスポンシブ対応もね

WordPressの表組はエクセルからコピペ プラグイン不要WordPress



スポンサーリンク

エクセルをコピペして、WordPressでささっと表を作ろう!【プラグイン不要】

もちろん、WordPressでテーブルを作る便利なプラグインはたくさんあるのは知っていますし、実際、私もいくつか試してみましたが、エクセルからのコピペが一番便利だなという結論に達しました。

集計などエクセルが得意とする機能を使ってデータ処理をすれば、入力ミスもなくなりますしね。

テーブルのレスポンシブ対応と装飾のやり方についても説明しますね。

エクセルのデータをコピーしてWordPressに張り付ける

表のもとになるデータをエクセルで作成し、範囲を選択してコピーします。

選択範囲で右クリックして[コピー(C)]でもよですし、範囲を選択した後に[Ctrl]+[c]でもコピーできます。

エクセルをコピーする

次に、WordPressの[ビジュアル]モードを開き、本文部分に貼り付けます。

[Ctrl]+[v]でペースト完了。

ビジュアルエディタモードで張り付け

[プレビュー]で確認しよう

これだけでhtmlのtableになっているのですが、見栄えを調整するために[プレビュー]で確認してみましょう。

今回のサンプルでは、氏名の1文字が落ちてしまいました。これは修正したいですね。

プレビュー確認

その前に、スマートフォンでの見え方も確認しましょう。

[f12]キーで、ディベロッパーモードを開き、検証する端末サイズを選択します。

iPhone 6/7/8 plusを選択したらこんな風に見えることが確認できました。
悪くはないですが、「郵便番号」の列幅は調整したいですね。

ディベロッパー ツールでスマホを検証

WordPressの[テキスト]モードで調整する

WordPressの編集画面に戻り、エディタを[テキスト]モードに切り替えます。

WordPressテキストモードエディタ

tableと1行目のtdの中に幅を指定するwidthに数値が入っているのがわかります。
これは、エクセルをコピーした際に、WordPress先生が解釈して入れてくれる数値です。

tableと列の幅は、ピクセル(px)単位のほかに比率(%)でも指定できますので、これらの数値を%で指定しなおして体裁を整えていきましょう。

また、このままではデータが入っているセルがすべて[td]になっていますので、見出しセルは[td]から[th]に変更します。

やることは、3つです。

  1. 表全体の幅を指定しなおす
  2. 1行目の[td]の[width]をパーセンテージで指定しなおす
  3. 見出しセルを[td]から[th]に指定しなおす



表組全体の幅を指定しなおす

table width(表全体の幅)は100%にします。
これで、表示画面に対して全幅表示にすることができるので、レスポンシブ対応となります。

<table width=”100%”>

列の幅を指定しなおす

次に、td(列)の幅も%に書き換えましょう。

<td width=”00%”>

表組全体に対して、それぞれの列幅を何パーセントにするかはご自分で決めてください。
列幅の合計は100%にしなければなりません。

1行目に設定したセル幅が2行目以降にも適用されます。

数値を指定しなおしたら、既出のディベロッパーツールを使って見え方を確認するのが良いです。

列幅を割合で指定しなおす

見出しセルを[td]から[th]に変更する

今回のサンプルは、1行目の「氏名」、「会社」、「部署」…が見出しですので、これらを[td]から[th]に変更しました。[th]に変更したら対応する閉じタグも[/td]から[/th]に直すのを忘れないでくださいね!

左の列を見出しに設定しているテーブルであれば、各行の一番左のセルを[td]から[th]に変更しましょう。

 

tr、th、tdについて
trtable rowの略語で、テーブルの行を意味します。<tr>~</tr>が1行です。
thtable headerの略語で、テーブルの見出しを意味します。<th>~</th>で囲みます。
td
table dataの略語で、データが入る枠を意味します。<td>~</td>がひとつの枠です。

調整後はこんな感じになりました。

幅調整後のパソコン版の見え方

スマートフォンでの見え方も改善されたと思います。

調整後のスマートフォンでの見え方

見出しの装飾(セルの背景色や文字を調整する)

せっかくなので、見出しをもっと見出しっぽく装飾しましょう。

サイト内に複数のテーブルがあるならcssを書いてclassを使った方が簡単で便利で、コーディングの観点からはスタイルはcssにすることが推奨されているのですが、表が1か所しかないなら[テキスト]モード エディタでhtmlに直接スタイルを書いてもよいと思います。

ここでは、htmlに直接スタイルを書く方法を説明します。

その前に、tableを構成する要素をおさらい

tableを構成する要素は5つあります。

htmlのtableを構成する要素

一番外側を、<table>~</table>で括ります。

その中に、<tbody>~</tbody>でテーブル本体が入る部分を設定します。

そしてその中に、<tr>~</tr>でテーブルの行を設定し、それぞれの行に<td>~</td>で各セルの値を配置します。

見出しセルの色と文字色、文字の配置を変えてみましょう

今回やりたいのは、こんな感じ。

見出し行を装飾する

見出しの背景色を緑にして、見出し文字を白の太文字にし、中央に配置します。

<table width=”100%”>
<tbody>
<tr>
<th style=”color: #ffffff; font-weight: bold; background: #008080; text-align: center;” width=”13%”>氏名</th>
<th style=”color: #ffffff; font-weight: bold; background: #008080; text-align: center;” width=”15%”>会社</th>
<th style=”color: #ffffff; font-weight: bold; background: #008080; text-align: center;”width=”12%”>部署</th>
<th style=”color: #ffffff; font-weight: bold; background: #008080; text-align: center;” width=”18%”>役職</th>
<th style=”color: #ffffff; font-weight: bold; background: #008080; text-align: center;” width=”5%”>郵便番号</th>
<th style=”color: #ffffff; font-weight: bold; background: #008080; text-align: center;” width=”37%”>住所</th>
</tr>
<tr>
<td>青山 友子</td>
<td>株式会社ABC</td>
(以下 省略)

<th>~</th>で括った見出しセルに、style(スタイル)を追記しました。上述の通り、styleは本来cssで設定することが推奨されていますが、こういうやり方もできるというサンプルです

style属性は、開始タグの中に書きます。上のサンプルと見比べて書き方のルールを理解してくださいね。

style=”ここにスタイル属性を書く
それぞれのスタイルは、セミコロン[;]で区切り、後ろに半角スペースを入れる
(ただし、一番最後のスタイルはセミコロンの後ろの半角スペースは不要)
  • color: #ffffff;
    [color]は文字色を指定します。[#ffffff]は「白」のカラーコードです。
  • font-weight: bold;
    [font-weight]は文字の太さを指定します。何パターンかの書き方がありますが、単純に太字にするなら[bold]と書きます。
  • background: #008080;
    [background]で背景色を指定します。
  • text-align: center;
    [text-align]は文字の配置を指定します。[center]は中央揃え。右寄せなら[right]と書きましょう。[text-align]自体を書かなければ、左寄せになります。

coding や css の書き方は、また別の機会に説明しますね。

以上

WordPress
スポンサーリンク
この記事が気に入ったらシェアしてね
Yuka-K’s おすすめ
Walls & Floor
タイトルとURLをコピーしました