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

 

ピックアップ記事(一部広告)


ランクアップに応援ください
にほんブログ村 ライフスタイルブログ 暮らしを楽しむへ 人気ブログランキング

人気の記事

gretel 1

  NHK Eテレの「グレーテルのかまど」(毎週月曜 午後10時放送)をご存じですか。瀬戸康史扮するヘンゼルが、しゃべる「魔法のかまど」(声:キムラ緑子)にさまざまなスイーツの作り方を教えて ...

パーティ開け11 2

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

Twitterスパムアイキャッチ 3

  【1】Twitterの障害をチェック 検索できない、ツイートできない、プロフィールを編集できないなど、なんらかの不具合を感じたら、まずTwitterに障害が発生していないか、チェックして ...

photo_gallery10 4

  スマホのカメラが優秀で、いろいろ撮影しては外部ストレージのSDカードに保存しています。内部に保存したらメモリーがもったいないですからね。 また、たとえばこのブログ用の写真などはパソコンに ...

ipodアイキャッチ 5

2016年10月6日更新 iPodが同期できないとお悩みの方へ。WindowsのiTunesでVer.12.5.1.21を確認したところ、とっても簡単になっていたのでその方法をシェアします。 従来のタ ...

kensaku05 6

  とにかくGoogleが好きで、少しぐらいなら私の秘密を打ち明けてもよくってよ、と思ってるぐらいですから、当然検索エンジンも「既定」にGoogleを設定しております。しかし、これが突然Ya ...

掃除機ヘッド掃除アイコン 7

  今年も大掃除のシーズンがやってきました。お掃除道具が大活躍の季節ですね。でも、ちょっと待ってください。あなたのお家の掃除機、しっかり働ける準備はできていますか。 もしも吸い込み口のあるヘ ...

無線LAN04-2 8

  2階建てや3階建ての木造住宅で無線LANを使っている方。電波が途切れがちでいらいらしませんか。そらよりもじつはつい最近まで気がおかしくなりそうなほど頭にきていました。いや、それは大げさだ ...

EGT260DX05 9

  まずお断りしておきます。この草刈機にまったく罪はございません。すべてこのドシロートが誤った使い方をした結果、自ら不具合を招いただけなのであります。 結論から先に申し上げておきましょう。草 ...

sheet13 10

  フローリング用の定番お掃除道具といえばクイックルワイパー(c)ですよね。一時期、格安類似品を使っていましたが、取り回しが悪かったり、スティックが折れたり、不具合ばかりですぐ戻ったことがあ ...

hub02 11

  ネットワーク接続がすぐ途切れてしまうわが家の無線LANの不具合については、こちらの記事 2階3階建て木造住宅の無線LANルーター親機子機は「垂直配置」で間違いなし! で、すでに解決済のは ...

ikea_driver02 12

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

パスワード作成 13

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

pdfedit 14

無料で配布されているPDFビューア「Acrobat Reader(旧Adobe Reader)」はPDF文書の表示、検索、印刷、テキストやフォームの入力、注釈機能の使用が可能です。 しかし画像を挿入・ ...

-AFFINGER, WordPress, セレクトワード, モバイル&PC
-

Copy Protected by Chetan's WP-Copyprotect.

Copyright© そらより , 2018 All Rights Reserved.