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なのでぴったりです。

 

ちなみに文字を挿入するパターンはどうなるでしょう。そらよりブログの「LINKS」ページで使用しているので、よかったら参考にしてみてください。こちらのページでご確認いただけます。

 

さらにこんな記事はいかがでしょう(広告があります)


ブログランキングに参加しています

人気ブログランキング   にほんブログ村 ライフスタイルブログ 暮らしを楽しむへ

おススメ記事

nitori_futoncover01 1

  家が安普請のせいか、冬の寝室が寒いんです。ベッドの窓側に寝ているそらよりは右半身がとくに冷える。羽毛ふとんを使っていますが、すでにヘタり、毎年厚手の毛布を上にかけカバーしています。 &n ...

布団乾燥機アイキャッチ 2

  家電の寿命というのは突然訪れるもので、これまで便利に使っていたふとん乾燥機がこの度お亡くなりになりました。春の訪れまで、まだしばらく時間がかかりそうなこの時期、ふとん乾燥機のない生活はい ...

rakuchinpack01 3

  キッチン用保存容器の条件とは お料理上手の条件は段取り上手。手にヨリをかけて作ったせっかくのご馳走も冷めたり、伸びたりしては台無しです。美味しいものを美味しいうちにテーブルに並べるには、 ...

ikea_driver02 4

  2017年2月6日追記 「通りすがりの者」さんから次のご指摘をちょうだいしました。 イケアの家具に使われているプラスねじは「ポジドライブ」というイギリスの規格なので、日本のJIS規格のプ ...

パスワード作成 5

  パスワードがいくつもあって管理できない、と昔から言われ続けていますが、いっこうに改善される気配がありません。 でもパスワードを使う場面はますます増えています。 もしもご自分のパスワードの ...

補色01 6

  夏休みの想い出に友達と撮った記念写真。でも、後ろをふと眺めると壁や茂みにたくさんの人の顔が写っている。心霊写真のお馴染みのパターンですが、さすがに最近はテレビで取り上げることもなくなりま ...

パーティ開け11 7

  ポテチの袋、いつもどうやって開けてますか? 友達やパートナーとシェアして食べるとき、普通に開けたら、開封口の向きが気になって、ちょっと不便ですよね。横から手を入れるのも汚れて面倒。 つい ...

-WordPress, モバイル&PC
-

Copy Protected by Chetan's WP-Copyprotect.

Copyright© そらより , 2018 AllRights Reserved.