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

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

 

表組みだけでなく、広告や画像を横に並べる場合などテーブルはとても便利ですよね。でもこれは好みなんでしょうが、枠線を消したいときがよくある。そんなの簡単 border="0"にすればいいんでしょ、とやってみると、WordPressではなかなか一筋縄ではいかないことが多いんです。

ここでは人気無料テーマSTINGER7の投稿記事ページとサイドバーウィジェット(カラム)の二つのケースに分けテーブルの枠線を消す方法をご説明します。

なおテーブルはスマホなどで表示すると、右の一部が欠け、スクロールできないケースがあります。使用の際はその点注意です。

 

スポンサーリンク

 

 

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

 

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

 

うさぎ男 ボーラーズ

 

 

でも、簡単。ビジュアルエディタを①テキストモードに変え②「装飾なしテーブル」を使うんです。

ダッシュボードの「設定」からTinyMCE Advancedのメニュー一覧を確認してみてください。もしも見当たらない場合は次の項「サイドバーウィジェット(カラム)の枠線を消す」方法をお使いください。

 

テーブル枠01

 

上のテーブルは次のコードで記述されています。

 

<table class=" alignleft" style="width: 340px; height: 190px;" border="0">
<tbody>
<tr>
<td><img class="alignnone size-full wp-image-997" src="左の画像が保存されているUR" 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>

 

このコードを②「装飾なしテーブル」で挟みます。まず上部にカーソルを合わせ②「装飾なしテーブル」をクリック。するとその位置に下の青字のコードが追加されます。

 
<div class="notab">
<table class=" alignleft" style="width: 340px; height: 190px;" border="0">
<tbody>

 

また下部にカーソルを合わせ②「/装飾なしテーブル」(メニューの表示が自動的に変わっています)をクリック。するとその位置に下の緑字のコードが追加されます。

</tbody>
</table>
</div>

 

その結果、下のテーブルのように枠線を消すことができます。

 

うさぎ男

ボーラーズ

 

 

文字の入ったテーブルの見本はこちらのページでご確認いただけます。

 

 

サイドバーウィジェット(カラム)の枠線を消す

前述のテーブルのコードを若干アレンジしサイドバーウィジェット用に次のコードを作成しました。

 

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

 

上のコードの青字の部分をご確認ください。border="0"です。でもサイドバーウィジェットでは下のように表示されてしまいます。

 

テーブル枠02

 

左と下にだけ線が残っています。じつはこれ線ではなく影なんです。そこでコードに次の緑字で示した記述を加えます。

 

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

 

すると下の画像のように枠線を消すことができました。

 

テーブル枠03

 

以上、テーブルの枠線を消す二つの方法でした。

なおWordPressのテーマによってはstyle.cssで自動的に消す方法もあります。たとえばこちらのサイトもその方法の一つです。ただしすべてのテーマに適用できるわけではなくSTINGER7では有効ではありませんでした。

いまのところSTINGER7のstyle.cssによるテーブルを消す方法をそらよりは知りません。もしかしたら、あるのかな? しばらくはこの方法でちくちく消していきたいと思います。

 

スポンサーリンク

スポンサーリンク

こんな記事も読まれています

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

おススメ記事

スプレー容器 1

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

デカ容器01 2

  昨晩、終電を逃した人の家までついていきインタビューするテレビ番組を観ていました。人気なのでご覧になった方も少なくないと思います。そこで深夜にもかかわらず娘の帰りを待っていたお母さんが、大 ...

パスワード作成 3

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

求人広告250 4

  就職、転職には人それぞれ、さまざまな理由があります。この記事は次のような人のためのものです。たとえば長くその会社で働きたい。たとえば人間らしい心を捨てずに働きたい。たとえば尊敬できる人に ...

補色01 5

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

パーティ開け11 6

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

355百均カラカラ 7

  キャットフードのストック、お宅ではどのように管理されていますか。わが家には2匹のお猫様がいらっしゃって、猫缶とサイエンスダイエットなどのいわゆるカラカラを小分けにしてあげています。猫缶は ...

-WordPress, モバイル&PC
-

Copy Protected by Chetan's WP-Copyprotect.

Copyright© そらより , 2017 AllRights Reserved.