そらより

おもしろいと、かわいいと、おいしいと、うれしい。

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

      2016/05/29

 

表組みだけでなく、広告や画像を横に並べる場合などテーブルはとても便利ですよね。でもこれは好みなんでしょうが、枠線を消したいときがよくある。そんなの簡単 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によるテーブルを消す方法をそらよりは知りません。もしかしたら、あるのかな? しばらくはこの方法でちくちく消していきたいと思います。

 

 

スポンサーリンク

 

スポンサーリンク

 

 

 

クリックしていただけると幸いです
にほんブログ村 ライフスタイルブログ 暮らしを楽しむへ

おススメ記事

歳の差婚250 1
「年の差婚(交際)」の最適年齢を割り出す法則が海外にあった!

数年前から「年の差婚」がブームです。人気キャスターや人気女優、人気歌手が、歳の離 ...

補色01 2
赤い点を30秒間じっと見つめてください。天井を見上げると不思議なことが!

  夏休みの想い出に友達と撮った記念写真。でも、後ろをふと眺めると壁や ...

パーティ開け11 3
「パーティ開け」不要!スナック菓子はもっとスマートにシェアできる!!

ポテチの袋、いつもどうやって開けてますか? 友達やパートナーとシェアして食べると ...

 - WordPress, デジタル

Copy Protected by Chetan's WP-Copyprotect.