WordPress

WordPressの投稿記事とサイドバー(カラム)でテーブルの枠線が消せない!枠線を消したい!

投稿日:2016年3月12日 更新日:

WordPressでテーブルを使用する際、border="0"にしても枠線がうまく消えてくれません。それは枠線ではなく影が残っているからです。ここではその影を消し、テーブルをすっきり見せる方法を解説します

なおテーブルはスマホなどで表示すると、サイズによって右の一部が欠け、スクロールできないケースがあります。使用の際はその点をご注意ください。

 

投稿記事ページでテーブルの枠線を消す

 

そらよりはWordPressビジュアルエディタの拡張プラグインTinyMCE Advancedを使用しています。それで枠線を“0”に設定し、テーブルを作成すると下のようになります。枠線、ぜんぜん消えてません。

 

うさぎ男 ボーラーズ

 

テーブルのコードは以下のようになっています。

 

<table class=" alignleft" style="width: 340px; height: 190px;" border="0">
<tbody>
<tr>
<td><img class="alignnone size-full wp-image-997" src="左の画像が保存されているURL" alt="左の画像の代替えテキスト" width="150" height="150" /></td>
<td><img class="alignnone size-full wp-image-998" src="右の画像が保存されているURL" alt="右の画像の代替えテキスト" width="150" height="150" /></td>
</tr>
</tbody>
</table>

 

上のコードをつぎのように書き換えます。ついでに画像をクリックすると指定のページが新規タブで開くコードも加えました。

<table style="width: 340px; height: 190px; border-style: none;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 170px; border-style: none;" align="center" valign="middle">
<a href="左の画像のリンク先指定URLtarget="blank">
<img src="左の画像が保存されているURL" alt="左の画像の代替えテキスト" width="150" height="150" /></a></td>
<td style="width: 170px; border-style: none;" align="center" valign="middle">
<a href="右の画像のリンク先指定URL" target="blank">
<img src="右の画像が保存されているURL" alt="右の画像の代替えテキスト" width="150" height="150" /></a></td>
</tr>
</tbody>
</table>

 

ポイントをご説明します。

width: 340px; height: 190px;

テーブル全体のサイズです。今回150px×150pxの背景なしの画像を2点左右に配置します。画像2点の横の合計サイズは300pxですが、バランスよく配置するためwidth: 340px;にし、余裕をもたせてあります。縦も余裕を持たせてあります。

border-style: none;

枠のスタイルを「(影)なし」とします。

width: 170px;

テーブルの左右サイズ340pxを単純に2分割しています。

左の画像のリンク先指定URL

画像をクリックすると開くページのリンク先URLです。今回の例の場合、LINEスタンプの購入画面が開くようになっています。

target="blank"

新規タブで開くコードです。

左の画像が保存されているURL

「メディアを追加」の編集画面からコピー&ペーストします。

右の画像の代替えテキスト

万が一画像が表示されなくなった際のテキストです。記入したほうがSEO対策としてベターとされています。

width="150" height="150"

挿入した画像のサイズです。AMPページとする場合は必須です。

 

作成したコードをこのページに貼り付けてみましょう。以下のようになります。

 

うさぎ男 ボーラーズ

枠線が消えました。クリックするとLINEスタンプの購入ページが開きます。

なおWordPressテーマのSTINGERやAFFINGERには「テキストエディター」モードに「装飾なしテーブル」という編集ボタンがあります。<table>タグの直前に<div class="notab">が挿入され、</table>タグの直後に</div>が挿入されます。しかしこれはサイドバー(カラム)に適用されません。

 

サイドバー(カラム)でテーブルの枠線を消す

サイドバー(カラム)で枠線なしのテーブルを使用したい場合は、上記のコードをダッシュボード>外観>ウィジェットの「カスタムHTML」に記入しご使用ください。

width: 300px; height: 150px;

サイドバーのサイズに合わせて黄帯部分の数値を変更してください。配置した画像は150px×150pxなのでぴったりです。

 

-WordPress
-

Copyright© IT-SORAYORI , 2018 All Rights Reserved.