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

 

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


ランクアップに応援ください
にほんブログ村 ライフスタイルブログ 暮らしを楽しむへ 人気ブログランキング
  • この記事を書いた人
  • 最新記事

sorayori

昭和半ば生まれのおじさんです。妻と娘と猫と金魚と東京・吉祥寺にひっそり暮らしています。息子夫婦に孫娘ちゃんもいます。くらしとデジタルとこころにうるおいをお届けしたいと思っています。

人気の記事

1

最近ココナッツオイルがブームとかで、我が家にも常備されるようになりました。朝食のパンやサラダだけでなく、コーヒーに溶いて飲むというようなことをしています。たおやかな甘さが口の中に広がり、南国パラダイス ...

horeizaiinhair 2

  本格的な夏がもうすぐやってきます。みなさん暑さ対策、熱中症予防はどのように工夫していますか。 うちの娘ちゃんによると、ポニーテールが結べるくらいの髪の長さがあれば、かんたんでとってもよい ...

12本体アップ 3

  いったいどれほどの方に役立てていただけるかまったく自信がございませんが、ニッチな話題が好きなそらよりは今回噴霧器のレビューを書くのであります。(2016年5月8日追記 「使用後の洗浄」に ...

hanazo 4

「花ぞ」の花は梅 東進の「全国統一中学生テストTVCM」で、先生が板書をしながら生徒に注意をうながします。 「この、花ぞの花は梅だからな」 すると一人の生徒が手を挙げ質問します。 「なぜ桜じゃなくて梅 ...

rakuchinpack01 5

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

leplus01 6

  いままで900円台のイヤフォンを使っていた輩が、音がどうのこうのと申し上げるのは誠に恐縮なのですが、いやハイレゾイヤフォンの音の良さったらすごかったです。   スポンサーリンク ...

aircon_kojihikomi 7

  もう20年近く使ってきたエアコンが、この夏動かなくなりました。エアコンの買い替えはシーズンが替わる11月、それも水曜日が安いと耳に挟んだので、このたびちょい古な2016春夏モデルを購入し ...

EGT260DX01 8

50対1を守らないとどうなるか? 新規に購入した草刈機の最初の使用時に、間違って25対1の混合燃料を入れてしまいました。因果関係は不明ですが、エンジンが掛かりません。 こうした状況について推測できる範 ...

パスワード作成 9

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

pdfedit 10

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

スプレー容器 11

春夏秋冬、汗っかきさんにとって気を緩めてよい季節なんてありませんよね。朝夕と昼の温度差が激しかったりしようものなら、うっかり服装のチョイスをまちがえ、外出先で大汗をかくということしばしばです。 そんな ...

sentakki_door03 12

  歳の瀬に朝から困ったことが起きました。洗濯機のドアが開かなくなってしまったのです。 2008年に購入したPanasonicのドラム式洗濯機NA-VR1200Lという機種です。購入してから ...

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

Copy Protected by Chetan's WP-Copyprotect.

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