【wordpress】レスポンシブな表をExcelで作る方法!プラグイン必要なし!初心者でも背景色も変更可◎

#ブログ運営

はじめに

どうもしゅんです!

今日はブログに表を追加する方法をご紹介します!

プラグインを入れる必要もないし、何よりとても簡単なので是非試してみてください◎

方法はExcelからコピー。ひと手間加えるだけでレスポンシブに◎

Photo by Jesus Kiteque on Unsplash

まずはExcelで表を作成

ちなみにこの表は下の記事で使用したもの。

【保存】word for mac 数式ショートカット

2020年1月21日
記号入力方法記号入力方法
α\alphaρ\rho

このまま投稿ページに貼り付けると、ご覧の通りレスポンシブにはなりません。

 

レスポンシブにするためには

レスポンシブにするためには、セルとセルの間にポインタを持っていきダブルクリック。

セル内の文字の長さに合わせてセル幅が変化すればオッケーです◎

そして貼り付け。するとレスポンシブになってくれます!

記号入力方法記号入力方法
α\alphaρ\rho

続いて表のデザイン。(ちなみにエクセル上で枠線や背景色を追加しても反映されません。今回は見やすさのために追加してます。)

 

セルの背景色を変えよう!

セルの背景色を変えるためには、HTMLを触る必要があります。

が、決して難しくないので安心してください◎

まず投稿画面を「ビジュアル」から「テキスト」に変えます。(タイトルの右下にあります。)

エクセルから貼り付けた表のHTMLはこんな感じになってます!

元コード
<table width=”256″>
<tbody>
<tr>
<td width=”48″>記号</td>
<td width=”80″>入力方法</td>
<td width=”48″>記号</td>
<td width=”80″>入力方法</td>
</tr>
<tr>
<td>α</td>
<td>\alpha</td>
<td>ρ</td>
<td>\rho</td>
</tr>
</tbody>
</table>
変更後
<table width=”256″>
<tbody>
<tr bgcolor=”#d3d3d3″>
<td width=”48″>記号</td>
<td width=”80″>入力方法</td>
<td width=”48″>記号</td>
<td width=”80″>入力方法</td>
</tr>
<tr>
<td>α</td>
<td>\alpha</td>
<td>ρ</td>
<td>\rho</td>
</tr>
</tbody>
</table>
背景色を入れたい場合はタグ内に bgcolor=”#d3d3d3″ を追加するだけ!
#d3d3d3はカラーコードで、原色大辞典などを見ることで好きな色を選択できます◎

記号入力方法記号入力方法
α\alphaρ\rho

一行目に背景色を追加したものがこちら。

表全体に追加したいときは<tbody>タグ、行なら<tr>タグ、セルなら<td>タグに bgcolor=”#d3d3d3″を追加してくださいね!

さいごに

プラグインに頼りすぎるとサイトが重くなるってことを考えても表はExcelで十分ですね!

しゅん
質問等あればお気軽に!Instagram/TwitterのDMでも対応しています!