このページではワードプレスで表を作った時の枠線を消す方法を紹介します。
具体的には次のようなものです。
| １ | ２ | ３ |
| ４ | ５ | ６ |
| ７ | ８ | ９ |
ワードプレスの標準機能で表を作ると上のように薄いグレーの線がありますよね。
今回はこれを消して次のようにする方法です。
| １ | 2 | ３ |
| ４ | ５ | ６ |
| ７ | ８ | ９ |
表を消す方法は２通り
まず、表を消す方法ですが、次の２通りあります。
- 枠線の色を背景色と同じにする
- htmlのテーブルタグにborder:noneのstyleを追加する。
１は厳密には線を非表示にするという訳ではありませんが、枠線を背景色と同じにすることで線がないように見せることができます。
こちらは設定変更だけでできるので、とても簡単です。
一方での方法は、htmlとCSSの知識が必要なので、知識が無い人は１の方がいいでしょう。
それでは、それぞれのやり方について紹介していきます。
表を消す方法①：枠線の色を背景色と同じにする
まず、枠線を消したい表を選択します。
選択できたら、「表作成ツール」の「セル」-「セルのプロパティ」を選択します。
すると「セルのプロパティ」が開くので、画面上の「高度な設定」を選択します。
高度な設定が画面が開いたら、「枠線の色」を選択します。
すると、下のような画面が開くので、ここで自分のブログの背景色と同じ色を設定します。私のブログの背景色は白なので、白を設定し「OK」をクリックします。
「OK」をクリックすると、高度な設定画面に戻るので、ここで「OK」をクリックします。
すると、以下のような表が出来上がります。
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
枠線が見えなくなったことがわかります。
表を消す方法②：テーブルタグにborder:noneのstyleを追加する
htmlやCSSの知識がある人であれば、ソースをいじって非表示にすることも可能です。
枠線ありのテーブルをテキストエディタで見ると次のようなソースになっています。
<table style="width: 100%;">
<tbody>
<tr>
<td style="text-align: center;">１</td>
<td style="text-align: center;">２</td>
<td style="text-align: center;">３</td>
</tr>
<tr>
<td style="text-align: center;">４</td>
<td style="text-align: center;">５</td>
<td style="text-align: center;">６</td>
</tr>
<tr>
<td style="text-align: center;">７</td>
<td style="text-align: center;">８</td>
<td style="text-align: center;">９</td>
</tr>
</tbody>
</table>上のtableタグとtdタグに、以下のように「border: none」をつけてあげると、枠線を消すことができます。
<table style="width: 100%; border: none;">
<tbody>
<tr>
<td style="text-align: center; border: none;">１</td>
<td style="text-align: center; border: none;">２</td>
<td style="text-align: center; border: none;">３</td>
</tr>
<tr>
<td style="text-align: center; border: none;">４</td>
<td style="text-align: center; border: none;">５</td>
<td style="text-align: center; border: none;">６</td>
</tr>
<tr>
<td style="text-align: center; border: none;">７</td>
<td style="text-align: center; border: none;">８</td>
<td style="text-align: center; border: none;">９</td>
</tr>
</tbody>
</table>実際にhtmlをいじって枠線を消した表が以下のようになります。
| １ | 2 | ３ |
| ４ | ５ | ６ |
| ７ | ８ | ９ |
表に枠線が無いことがわかりますね。
最後に
今回はWordpressで作った表の枠線を消す方法を２通り紹介しました。
手順①の背景色に枠線の色を合わせるやり方の方が簡単で手間もかからないので、私はこちらの手順をおすすめします。
枠線が消せなくて困っているという人はぜひ試してみてください。
